From 47d033be63cbd5ea4829ea16f33ca1df6e679048 Mon Sep 17 00:00:00 2001 From: reiyua Date: Thu, 4 Jan 2024 15:52:23 +1100 Subject: [PATCH] Push basic countdown, alot of work needed, doesn;t countdown live --- src/App.css | 38 -------------------- src/App.js | 20 ++--------- src/App.test.js | 8 ----- src/Countdown.css | 82 ++++++++++++++++++++++++++++++++++++++++++ src/Countdown.jsx | 73 +++++++++++++++++++++++++++++++++++++ src/index.css | 2 +- src/index.js | 18 ++++------ src/logo.svg | 1 - src/reportWebVitals.js | 24 ++++++------- src/setupTests.js | 5 --- 10 files changed, 177 insertions(+), 94 deletions(-) delete mode 100644 src/App.css delete mode 100644 src/App.test.js create mode 100644 src/Countdown.css create mode 100644 src/Countdown.jsx delete mode 100644 src/logo.svg delete mode 100644 src/setupTests.js diff --git a/src/App.css b/src/App.css deleted file mode 100644 index 74b5e05..0000000 --- a/src/App.css +++ /dev/null @@ -1,38 +0,0 @@ -.App { - text-align: center; -} - -.App-logo { - height: 40vmin; - pointer-events: none; -} - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} - -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - -.App-link { - color: #61dafb; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} diff --git a/src/App.js b/src/App.js index 3784575..9363608 100644 --- a/src/App.js +++ b/src/App.js @@ -1,25 +1,11 @@ -import logo from './logo.svg'; -import './App.css'; +import { Countdown } from "./Countdown"; function App() { return (
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
+
); } -export default App; +export default App; \ No newline at end of file diff --git a/src/App.test.js b/src/App.test.js deleted file mode 100644 index 1f03afe..0000000 --- a/src/App.test.js +++ /dev/null @@ -1,8 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import App from './App'; - -test('renders learn react link', () => { - render(); - const linkElement = screen.getByText(/learn react/i); - expect(linkElement).toBeInTheDocument(); -}); diff --git a/src/Countdown.css b/src/Countdown.css new file mode 100644 index 0000000..4b30d90 --- /dev/null +++ b/src/Countdown.css @@ -0,0 +1,82 @@ +* { + box-sizing: border-box; + } + + body { + display: flex; + flex-direction: column; + align-items: center; + min-height: 100vh; + background-color: #7ba6f0; + font-family: sans-serif; + margin: 0; + } + + .countdown-container { + max-width: 900px; + min-height: 300px; + margin: 50px auto; + gap: 80px; + background-color: #fff; + box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.1); + display: flex; + flex-direction: column; + flex-wrap: wrap; + justify-content: center; + align-items: center; + } + + .countdown-values { + display: flex; + } + + .big-text { + font-weight: bold; + font-size: 6.5rem; + line-height: 1; + margin: 10px; + } + + .countdown-value { + width: 120px; + margin: 10px 20px; + text-align: center; + } + + .countdown-value span { + font-size: 1.3rem; + } + + .countdown-input { + padding: 9px; + font-size: 19px; + border-width: 0px; + background-color: #ffffff; + color: #000000; + border-style: solid; + border-radius: 7px; + box-shadow: 0px 0px 3px rgba(66, 66, 66, 0.53); + outline: none; + } + + .countdown-button { + color: #ffffff; + background-color: #568ef5; + font-size: 20px; + border: 1px solid #2d63c8; + border-radius: 5px; + padding: 10px 50px; + cursor: pointer; + margin-bottom: 30px; + } + + .countdown-button:hover { + color: #ffffff; + background-color: #809bfd; + } + + .countdown-input-button { + display: flex; + flex-direction: column; + gap: 12px; + } \ No newline at end of file diff --git a/src/Countdown.jsx b/src/Countdown.jsx new file mode 100644 index 0000000..eaabe83 --- /dev/null +++ b/src/Countdown.jsx @@ -0,0 +1,73 @@ +import React, { useState, useEffect } from "react"; +import "./Countdown.css"; + + +// Set variables for timer (days, hours, minutes, seconds etc) +export const Countdown = () => { + const [days, setDays] = useState(0); + const [hours, setHours] = useState(0); + const [minutes, setMinutes] = useState(0); + const [seconds, setSeconds] = useState(0); + // Set default date to 1 Jan 2023 as placeholder + const [inputDate, setInputDate] = useState("1 Jan 2023"); + const [currentDate, setCurrentDate] = useState(inputDate); + + useEffect(() => { + const changingDate = new Date(inputDate); + const currentDate = new Date(); + const totalSeconds = (changingDate - currentDate) / 1000; + + + // Set calculations for timer (days, hours, minutes, seconds etc) + setDays(formatTime(Math.floor(totalSeconds / 3600 / 24))); + setHours(Math.floor(totalSeconds / 3600) % 24); + setMinutes(Math.floor(totalSeconds / 60) % 60); + setSeconds(Math.floor(totalSeconds % 60)); + }, [currentDate]); + + function formatTime(time) { + return time < 10 ? `0${time}` : time; + } + + const onChangeHandler = (event) => { + setInputDate(event.target.value); + }; + + // When button is clicked, set current date to input date from user submissionn box + const onClickHandler = () => { + setCurrentDate(inputDate); + }; + + + // Various CSS classes for styling + return ( +
+
+
+

{days}

+ days +
+
+

{hours}

+ hours +
+
+

{minutes}

+ mins +
+
+

{seconds}

+ seconds +
+
+
+ + +
+
+ ); +}; + +export default Countdown; \ No newline at end of file diff --git a/src/index.css b/src/index.css index ec2585e..3e3b6a1 100644 --- a/src/index.css +++ b/src/index.css @@ -10,4 +10,4 @@ body { code { font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; -} +} \ No newline at end of file diff --git a/src/index.js b/src/index.js index d563c0f..f84af50 100644 --- a/src/index.js +++ b/src/index.js @@ -1,17 +1,11 @@ -import React from 'react'; -import ReactDOM from 'react-dom/client'; -import './index.css'; -import App from './App'; -import reportWebVitals from './reportWebVitals'; +import React from "react"; +import ReactDOM from "react-dom/client"; +import "./index.css"; +import App from "./App"; -const root = ReactDOM.createRoot(document.getElementById('root')); +const root = ReactDOM.createRoot(document.getElementById("root")); root.render( -); - -// If you want to start measuring performance in your app, pass a function -// to log results (for example: reportWebVitals(console.log)) -// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals -reportWebVitals(); +); \ No newline at end of file diff --git a/src/logo.svg b/src/logo.svg deleted file mode 100644 index 9dfc1c0..0000000 --- a/src/logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/reportWebVitals.js b/src/reportWebVitals.js index 5253d3a..7d7417e 100644 --- a/src/reportWebVitals.js +++ b/src/reportWebVitals.js @@ -1,13 +1,13 @@ const reportWebVitals = onPerfEntry => { - if (onPerfEntry && onPerfEntry instanceof Function) { - import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { - getCLS(onPerfEntry); - getFID(onPerfEntry); - getFCP(onPerfEntry); - getLCP(onPerfEntry); - getTTFB(onPerfEntry); - }); - } -}; - -export default reportWebVitals; + if (onPerfEntry && onPerfEntry instanceof Function) { + import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { + getCLS(onPerfEntry); + getFID(onPerfEntry); + getFCP(onPerfEntry); + getLCP(onPerfEntry); + getTTFB(onPerfEntry); + }); + } + }; + + export default reportWebVitals; \ No newline at end of file diff --git a/src/setupTests.js b/src/setupTests.js deleted file mode 100644 index 8f2609b..0000000 --- a/src/setupTests.js +++ /dev/null @@ -1,5 +0,0 @@ -// jest-dom adds custom jest matchers for asserting on DOM nodes. -// allows you to do things like: -// expect(element).toHaveTextContent(/react/i) -// learn more: https://github.com/testing-library/jest-dom -import '@testing-library/jest-dom';