diff --git a/package-lock.json b/package-lock.json index 8c2dba1..5546a2b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15845,6 +15845,19 @@ "is-typedarray": "^1.0.0" } }, + "node_modules/typescript": { + "version": "4.9.5", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz", + "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", + "peer": true, + "bin": { + "tsc": "bin/tsc", + "tsserver": "bin/tsserver" + }, + "engines": { + "node": ">=4.2.0" + } + }, "node_modules/unbox-primitive": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz", @@ -28192,6 +28205,12 @@ "is-typedarray": "^1.0.0" } }, + "typescript": { + "version": "4.9.5", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz", + "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", + "peer": true + }, "unbox-primitive": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz", diff --git a/src/App.css b/src/App.css index dc36b36..acb6053 100644 --- a/src/App.css +++ b/src/App.css @@ -4,243 +4,182 @@ :root { --primary: #333d79ff; --secondary: #faebefff; + --body: #FFEADD; + --header: #FCAEAE; + --container: #FCAEAE; +} +*{ + font-family: "Poppins", Arial, sans-serif; + /* overflow: hidden; */ } -* { - box-sizing: border-box; +body { + font-family: Arial, sans-serif; margin: 0; padding: 0; + background-color: var(--body); } - -html, -body { - background-color: var(--secondary); - color: var(--primary); +.Header { + background-color: var(--header); + color: #FFEADD; + text-align: center; + padding: 20px; } -.App { - font-family: "Source Sans Pro", sans-serif; +.Header h1 { + font-size: 36px; + margin: 0; } -.Title { - text-align: center; - margin: 3px; - margin-top: 20px; - /* font-family: 'Poppins', sans-serif; */ +.Header p { + font-size: 18px; } -.Title p { - font-weight: 400; +.Main { + max-width: 800px; + margin: 20px auto; + padding: 20px; + background-color: var(--container); + border-radius: 25px; + color: #FFEADD; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } -.timer { - align-items: center; - display: flex; - justify-content: center; - height: 60vh; - margin-top: 8px; - padding: 10px; +.TimerContainer { text-align: center; - width: auto; } -.container_2 { - align-items: center; - display: flex; - /* display: flex; */ - height: 60vh; - margin-top: 8px; - padding: 10px; - text-align: center; - width: 560px; -} -.container { - display: flex; - padding: 20px; - justify-content: center; + +.Overview { + margin-top: 20px; } -.box { - font-weight: 300; - padding: 40px; - color: var(--primary); - font-weight: bold; - font-size: 30px; + +.Overview h2 { + font-size: 24px; } -.buttons { - display: flex; - justify-content: space-evenly; - gap: 8px; - position: relative; - bottom: 80px; - margin-left: 10%; - margin-right: 10%; -} -.btn { - border-radius: 8px; - padding: 10px; - background-color: var(--primary); - border: none; - font-size: 1.2rem; - font-weight: bolder; - border: 2px solid var(--primary); - color: var(--secondary); - transition: 0.3s; +.Overview p { + font-size: 16px; } -.btn:hover { +.JoinButton { + display: block; + margin: 10px 0; + padding: 10px 20px; + font-size: 18px; + text-align: center; + text-decoration: none; + color: #fff; + border: none; + border-radius: 5px; cursor: pointer; - color: var(--primary); - border: 2px solid var(--primary); - background-color: var(--secondary); -} -.col-4:last-child .box { - border-right-color: transparent; } -.box p { - font-size: calc(18px + 2vmin); - margin: 0; +.JoinButton.Mentor { + background-color: #FF6666; } -.text { - font-size: 20px; - color: var(--primary); - font-weight: 500; - font-size: 20px; +.JoinButton.Participant { + background-color: #FF6666; } -.footer { - padding: 8px; - text-align: center; - font-weight: 600; - margin-bottom: 16px; +.JoinButton.Partner { + background-color: #FF6666; } -.footer a { - text-decoration: underline; - color: var(--primary); - /* background-color: #333D79FF; */ - padding: 2px; - border: 2px dashed var(--secondary); - border-radius: 4px; - transition: 0.8s; +.JoinButton:hover { + opacity: 0.8; } -.footer a:hover { - opacity: 0.9; - border: 2px dashed var(--primary); +.Footer { + text-align: center; + margin-top: -10px; } -@media only screen and (max-width: 600px) { - /* Make the font size smaller for smaller screens */ - h3, - button, - code { - font-size: 14px; - } - - /* Center the text in the container_2 div */ - .container_2 { - text-align: center; - /* padding: 0 20px; */ - } - - /* .App { - height: 100vh; - } */ - - h1 { - margin-top: 50px; - } - - .btn { - border-radius: 5px; - width: 100%; - padding: 10px; - background-color: #333d79ff; - border: none; - font-size: 1.1rem; - font-weight: 500; - border: 2px solid var(--primary); - color: #faebefff; - } - - .container { - flex-direction: column; - } - - .container_2 { - width: auto; - } +.FooterLink { + color: #FF6666; + text-decoration: none; + font-weight: bold; +} - .timer, - .container_2 { - height: auto; - width: auto; - margin-bottom: 20px; - margin-left: 0; - } +.Timer { + display: flex; + justify-content: center; + align-items: center; +} - .box { - font-weight: 300; - padding: 10px; - color: #333d79ff; - font-weight: bold; - font-size: 10px; - } +.TimerBox { + text-align: center; + margin: 0 10px; +} - .buttons { - position: initial; - margin-bottom: 20px; - } +.TimerText { + font-size: 36px; + font-weight: bold; +} - .timer { - flex-direction: row; - margin-top: 20px; - } +.TimerLabel { + font-size: 16px; +} +:root { + --red1: #FF6666; + --red2: #FF8989; + --pale: #900C3F; + --yellow: #F1C93B; - /* Stack the buttons on top of each other */ - .buttons { - flex-direction: column; - margin-top: 10%; - } + /* --red: #F31559; + --magenta: #FF52A2; + --orange: #FFB07F; - /* Add some spacing between the buttons */ - .buttons .btn { - margin-bottom: 10px; - } + --green: #1A5D1A; + + --blue: #78C1F3; */ +} - .footer { - margin-top: 20%; +@keyframes background-pan { + from { + background-position: 0% center; } - - h3 { - font-size: medium; + + to { + background-position: -200% center; } } -/* Styles for larger screens */ -@media only screen and (min-width: 601px) { - /* Center the text in the Title div */ - .Title { - text-align: center; +@keyframes scale { + from, to { + transform: scale(0); } - - /* Make the font size larger for larger screens */ - - h3, - button, - code { - font-size: 18px; + + 50% { + transform: scale(1); } +} - /* Add some spacing between the container_1 and container_2 divs */ - .container .container_1, - .container .container_2 { - margin: 20px; +@keyframes rotate { + from { + transform: rotate(0deg); } - - /* Give the Timer component more space on larger screens */ - .container_1 { - width: 40%; + + to { + transform: rotate(180deg); } } +h1 > .magic { + display: inline-block; + position: relative; +} +h1 > .magic > .magic-text { + animation: background-pan 3s linear infinite; + background: linear-gradient( + to right, + var(--red1), + var(--red2), + var(--red2), + var(--pale), + var(--pale), + var(--red1) + ); + background-size: 200%; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + white-space: nowrap; +} diff --git a/src/App.js b/src/App.js index d9f5fbf..da1c6a1 100644 --- a/src/App.js +++ b/src/App.js @@ -9,39 +9,74 @@ const DAY = HOUR * 24; function App() { return (
-
+

#50DaysOfJavaScript

-

Solve one question daily to ace ๐ŸŽฏ your next interview!

-
-
-
+

Solve one JavaScript challenge daily to level up your skills!

+ +
+
-
-

- Calling out ๐Ÿ“ฃ participants, mentors, and communities for an open-source initiativeโ€”join us to make a difference. More details ๐Ÿ“ฉ to follow! -

+
+

What is #50DaysOfJavascript

+

+ #50DaysOfJavaScript is a community-driven open-source initiative + designed to help you become a better JavaScript developer. Each day, + we provide a practical JavaScript coding challenge to enhance your + skills. +

+ + ๐Ÿฟ Join as a Mentor + + + ๐Ÿ„ Join as a Participant + + + ๐Ÿš€ Become a Community Partner +
-
-
- - - - - - - - - -
-
- - console.log('Code awesome shit with @vinitshahdeo & friends!'); - -
+
+
); } + export const Timer = ({ deadline = new Date().toString() }) => { const parsedDeadline = useMemo(() => Date.parse(deadline), [deadline]); const [time, setTime] = useState(parsedDeadline - Date.now()); @@ -56,20 +91,16 @@ export const Timer = ({ deadline = new Date().toString() }) => { }, [parsedDeadline]); return ( -
+
{Object.entries({ Days: time / DAY, Hours: (time / HOUR) % 24, Minutes: (time / MINUTE) % 60, Seconds: (time / SECOND) % 60, }).map(([label, value]) => ( -
-
-

- {`${Math.floor(value)}`.padStart(2, "0")} -

- {label} -
+
+

{`${Math.floor(value)}`.padStart(2, "0")}

+ {label}
))}