From 7b06f2d3f217a15aa8e2011c7d718216c73c8463 Mon Sep 17 00:00:00 2001 From: Rohan Gupta <39908472+DemonDaddy22@users.noreply.github.com> Date: Sun, 14 Jan 2024 15:19:43 +0530 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Create=20responsive=20question=20me?= =?UTF-8?q?nu=20(#145)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Rohan Gupta Co-authored-by: restyled-io[bot] <32688539+restyled-io[bot]@users.noreply.github.com> Co-authored-by: Restyled.io --- src/components/AlgoExpertLogo/index.tsx | 33 +++--- src/components/ConnectFour/styles.module.scss | 2 +- src/{screens => components}/Error/index.tsx | 14 ++- .../Error/styles.module.scss | 3 +- src/components/Icons/Clipboard.tsx | 10 +- src/components/Icons/ClipboardChecked.tsx | 12 +- src/components/Icons/Close.tsx | 12 +- src/components/Icons/Dark.tsx | 14 ++- src/components/Icons/GitHub.tsx | 13 ++- src/components/Icons/Home.tsx | 16 ++- src/components/Icons/Light.tsx | 12 +- src/components/Icons/Menu.tsx | 31 ++++++ src/components/Icons/Reset.tsx | 9 +- src/components/Icons/Stop.tsx | 13 ++- src/components/Icons/Trash.tsx | 18 +-- src/components/Icons/User.tsx | 17 ++- src/components/IndexRoute/index.tsx | 31 ++++-- src/components/IndexRoute/styles.module.scss | 7 +- src/components/Memory/styles.module.scss | 2 +- src/components/Navbar/index.tsx | 28 ++--- .../components/QuestionsMenu/index.tsx | 105 +++++++++++++++--- .../QuestionsMenu/styles.module.scss | 26 ++++- src/components/ProjectPage/index.tsx | 11 +- src/components/ProjectPage/styles.module.scss | 2 +- src/components/QuestionDetails/index.tsx | 12 +- src/components/SignUpForm/index.tsx | 5 +- src/components/StopWatch/index.tsx | 43 ++----- src/components/Sudoku/styles.module.scss | 2 +- src/components/TierList/styles.module.scss | 2 +- src/components/UI/Divider/index.tsx | 2 +- src/constants/index.ts | 21 +++- src/hooks/useWindowSize.ts | 2 +- src/router.tsx | 2 +- 33 files changed, 348 insertions(+), 184 deletions(-) rename src/{screens => components}/Error/index.tsx (60%) rename src/{screens => components}/Error/styles.module.scss (96%) create mode 100644 src/components/Icons/Menu.tsx diff --git a/src/components/AlgoExpertLogo/index.tsx b/src/components/AlgoExpertLogo/index.tsx index df26449..754fdbb 100644 --- a/src/components/AlgoExpertLogo/index.tsx +++ b/src/components/AlgoExpertLogo/index.tsx @@ -11,14 +11,10 @@ import { CONTENT_VARIANTS } from '../../constants'; const AlgoExpertLogo: React.FC = () => { return ( - +

- You're given an HTML file containing the markup for the AlgoExpert logo. Using only CSS, replicate the - expected output following these specifications: + You're given an HTML file containing the markup for the AlgoExpert logo. Using only CSS, replicate the expected output following these + specifications:

  • @@ -30,29 +26,28 @@ const AlgoExpertLogo: React.FC = () => {
    • In the center is the inner circle. This is a circle with a width and height of 10px and a solid, white - , 5px border. The left edge of the inner circle is 50px from the - left edge of the .wrapper. + , 5px border. The left edge of the inner circle is 50px from the left edge of the{' '} + .wrapper.
    • - The first ring has a width of 100px, a height of 30px, and a border-radius of 50%. It also has a solid, - white - , 5px border. This ring is rotated so that the left edge is at the - top left, and the right edge is at the bottom right. + The first ring has a width of 100px, a height of 30px, and a border-radius of 50%. It also has a solid, white + , 5px border. This ring is rotated so that the left edge is at the top left, and the right edge + is at the bottom right.
    • - The second ring is the same as the first ring, but it is rotated in the opposite direction (that is the - left edge is at the bottom left and the right edge is at the top right). + The second ring is the same as the first ring, but it is rotated in the opposite direction (that is the left edge is at the bottom + left and the right edge is at the top right).
  • To the right of the logo is the AlgoExpert text. This text is white - , with a font-size of 48px and the system default monospace - font-family. This text is 50px from the right edge of the logo's inner circle. + , with a font-size of 48px and the system default monospace font-family. This text is 50px from the + right edge of the logo's inner circle.
  • - Both the logo and the text are vertically centered in the{' '} - .wrapper container. + Both the logo and the text are vertically centered in the .wrapper{' '} + container.
diff --git a/src/components/ConnectFour/styles.module.scss b/src/components/ConnectFour/styles.module.scss index 2548b67..19cb81d 100644 --- a/src/components/ConnectFour/styles.module.scss +++ b/src/components/ConnectFour/styles.module.scss @@ -19,7 +19,7 @@ } .solutionContainer { - @include spacing($margin: 1rem 1rem 6rem); + @include spacing($margin: 1rem); max-width: 50rem; } diff --git a/src/screens/Error/index.tsx b/src/components/Error/index.tsx similarity index 60% rename from src/screens/Error/index.tsx rename to src/components/Error/index.tsx index 3b52451..02d3ed3 100644 --- a/src/screens/Error/index.tsx +++ b/src/components/Error/index.tsx @@ -1,25 +1,27 @@ import React from 'react'; import { Link, useRouteError } from 'react-router-dom'; +import { motion } from 'framer-motion'; import classes from './styles.module.scss'; -import QuestionsMenu from '../../components/ProjectPage/components/QuestionsMenu'; -import ProjectNavbar from '../../components/ProjectNavbar'; +import QuestionsMenu from '../ProjectPage/components/QuestionsMenu'; +import ProjectNavbar from '../ProjectNavbar'; +import { CONTENT_VARIANTS } from '../../constants'; const Error: React.FC = () => { const error: any = useRouteError(); return ( -
+ -
+

Oops!

Sorry, an unexpected error has occurred.

{error.statusText || error.message}

Go to Home -
+ -
+ ); }; diff --git a/src/screens/Error/styles.module.scss b/src/components/Error/styles.module.scss similarity index 96% rename from src/screens/Error/styles.module.scss rename to src/components/Error/styles.module.scss index 7dc3301..e0ad585 100644 --- a/src/screens/Error/styles.module.scss +++ b/src/components/Error/styles.module.scss @@ -5,9 +5,9 @@ @include theme(background-color, accent3); display: flex; flex-direction: column; + height: 100vh; @media screen and (min-width: 1200px) { - height: 100vh; width: 100vw; overflow: hidden; flex-direction: row; @@ -20,6 +20,7 @@ flex-direction: column; justify-content: center; gap: 0.5rem; + height: 100%; @media screen and (min-width: 1200px) { @include spacing(4rem 6rem); diff --git a/src/components/Icons/Clipboard.tsx b/src/components/Icons/Clipboard.tsx index 1b59079..4e7f877 100644 --- a/src/components/Icons/Clipboard.tsx +++ b/src/components/Icons/Clipboard.tsx @@ -1,11 +1,15 @@ import React from 'react'; +import { motion } from 'framer-motion'; import { COLORS } from '../../constants/theme'; +import { ICON_PATH_VARIANTS } from '../../constants'; const ClipBoard: React.FC = (props) => { const { color = COLORS.WHITE, height = 24, width = 24 } = props; return ( - = (props) => { strokeLinejoin='round' > - + - + ); }; diff --git a/src/components/Icons/ClipboardChecked.tsx b/src/components/Icons/ClipboardChecked.tsx index 5ad0086..ed756df 100644 --- a/src/components/Icons/ClipboardChecked.tsx +++ b/src/components/Icons/ClipboardChecked.tsx @@ -1,11 +1,15 @@ import React from 'react'; +import { motion } from 'framer-motion'; import { COLORS } from '../../constants/theme'; +import { ICON_PATH_VARIANTS } from '../../constants'; const ClipBoardChecked: React.FC = (props) => { const { color = COLORS.WHITE, height = 24, width = 24 } = props; return ( - = (props) => { strokeLinejoin='round' > - + - - + + ); }; diff --git a/src/components/Icons/Close.tsx b/src/components/Icons/Close.tsx index b9b4137..d8bb9d8 100644 --- a/src/components/Icons/Close.tsx +++ b/src/components/Icons/Close.tsx @@ -1,11 +1,15 @@ import React from 'react'; +import { motion } from 'framer-motion'; import { COLORS } from '../../constants/theme'; +import { ICON_PATH_VARIANTS } from '../../constants'; const Close: React.FC = (props) => { const { color = COLORS.WHITE, height = 24, width = 24 } = props; return ( - = (props) => { strokeLinejoin='round' > - - - + + + ); }; diff --git a/src/components/Icons/Dark.tsx b/src/components/Icons/Dark.tsx index fd7dc58..bdcba30 100644 --- a/src/components/Icons/Dark.tsx +++ b/src/components/Icons/Dark.tsx @@ -1,11 +1,15 @@ import React from 'react'; +import { motion } from 'framer-motion'; import { COLORS } from '../../constants/theme'; +import { ICON_PATH_VARIANTS } from '../../constants'; const Dark: React.FC = (props) => { const { color = COLORS.WHITE, height = 24, width = 24 } = props; return ( - = (props) => { strokeLinejoin='round' > - - - - + + + + ); }; diff --git a/src/components/Icons/GitHub.tsx b/src/components/Icons/GitHub.tsx index fdce6e8..58070a1 100644 --- a/src/components/Icons/GitHub.tsx +++ b/src/components/Icons/GitHub.tsx @@ -1,11 +1,15 @@ import React from 'react'; +import { motion } from 'framer-motion'; import { COLORS } from '../../constants/theme'; +import { ICON_PATH_VARIANTS } from '../../constants'; const GitHub: React.FC = (props) => { const { color = COLORS.WHITE, height = 24, width = 24 } = props; return ( - = (props) => { strokeLinejoin='round' > - - + + ); }; diff --git a/src/components/Icons/Home.tsx b/src/components/Icons/Home.tsx index 91a8eaa..c1d7841 100644 --- a/src/components/Icons/Home.tsx +++ b/src/components/Icons/Home.tsx @@ -1,11 +1,15 @@ import React from 'react'; +import { motion } from 'framer-motion'; import { COLORS } from '../../constants/theme'; +import { ICON_PATH_VARIANTS } from '../../constants'; const Home: React.FC = (props) => { const { color = COLORS.WHITE, height = 24, width = 24 } = props; return ( - = (props) => { strokeLinejoin='round' > - - - - - + + + + + ); }; diff --git a/src/components/Icons/Light.tsx b/src/components/Icons/Light.tsx index 3ee9fe5..a5417c9 100644 --- a/src/components/Icons/Light.tsx +++ b/src/components/Icons/Light.tsx @@ -1,11 +1,15 @@ import React from 'react'; +import { motion } from 'framer-motion'; import { COLORS } from '../../constants/theme'; +import { ICON_PATH_VARIANTS } from '../../constants'; const Light: React.FC = (props) => { const { color = COLORS.WHITE, height = 24, width = 24 } = props; return ( - = (props) => { strokeLinejoin='round' > - - - + + + ); }; diff --git a/src/components/Icons/Menu.tsx b/src/components/Icons/Menu.tsx new file mode 100644 index 0000000..97bbdc7 --- /dev/null +++ b/src/components/Icons/Menu.tsx @@ -0,0 +1,31 @@ +import React from 'react'; +import { motion } from 'framer-motion'; +import { COLORS } from '../../constants/theme'; +import { ICON_PATH_VARIANTS } from '../../constants'; + +const Menu: React.FC = (props) => { + const { color = COLORS.WHITE, height = 24, width = 24 } = props; + + return ( + + + + + + + ); +}; + +export default Menu; diff --git a/src/components/Icons/Reset.tsx b/src/components/Icons/Reset.tsx index e37a50c..7d92315 100644 --- a/src/components/Icons/Reset.tsx +++ b/src/components/Icons/Reset.tsx @@ -1,17 +1,20 @@ import React from 'react'; +import { motion } from 'framer-motion'; import { COLORS } from '../../constants/theme'; +import { ICON_PATH_VARIANTS } from '../../constants'; const Reset: React.FC = (props) => { const { color = COLORS.WHITE, height = 24, width = 24 } = props; return ( - - + - + ); }; diff --git a/src/components/Icons/Stop.tsx b/src/components/Icons/Stop.tsx index 74fde95..290cbc9 100644 --- a/src/components/Icons/Stop.tsx +++ b/src/components/Icons/Stop.tsx @@ -1,13 +1,20 @@ import React from 'react'; +import { motion } from 'framer-motion'; import { COLORS } from '../../constants/theme'; +import { ICON_PATH_VARIANTS } from '../../constants'; const Stop: React.FC = (props) => { const { color = COLORS.WHITE, height = 24, width = 24 } = props; return ( - - - + + + ); }; diff --git a/src/components/Icons/Trash.tsx b/src/components/Icons/Trash.tsx index 2e5eb88..0a4ffdf 100644 --- a/src/components/Icons/Trash.tsx +++ b/src/components/Icons/Trash.tsx @@ -1,11 +1,15 @@ import React from 'react'; +import { motion } from 'framer-motion'; import { COLORS } from '../../constants/theme'; +import { ICON_PATH_VARIANTS } from '../../constants'; const Trash: React.FC = (props) => { const { color = COLORS.WHITE, height = 24, width = 24 } = props; return ( - = (props) => { strokeLinejoin='round' > - - - - - - + + + + + + ); }; diff --git a/src/components/Icons/User.tsx b/src/components/Icons/User.tsx index 366c499..7a1ac3e 100644 --- a/src/components/Icons/User.tsx +++ b/src/components/Icons/User.tsx @@ -1,11 +1,15 @@ import React from 'react'; +import { motion } from 'framer-motion'; import { COLORS } from '../../constants/theme'; +import { ICON_PATH_VARIANTS } from '../../constants'; const User: React.FC = (props) => { const { color = COLORS.WHITE, height = 24, width = 24 } = props; return ( - = (props) => { strokeLinejoin='round' > - - - - + + + + ); }; diff --git a/src/components/IndexRoute/index.tsx b/src/components/IndexRoute/index.tsx index c7a1d77..162f7e0 100644 --- a/src/components/IndexRoute/index.tsx +++ b/src/components/IndexRoute/index.tsx @@ -1,36 +1,45 @@ import React from 'react'; +import { motion } from 'framer-motion'; import classes from './styles.module.scss'; import { QUESTIONS_INFO } from '../../constants/questions'; import { Link } from 'react-router-dom'; +import { CONTENT_VARIANTS } from '../../constants'; + +const containerVariants = { + visible: { transition: { staggerChildren: 0.1, delayChildren: 0.15 } }, + hidden: {}, +}; const IndexRoute: React.FC = () => { return ( -
-

Hey there! 👋🏼

-

+ + + Hey there! 👋🏼 + + The FrontendExpert course takes you through the essential technologies and concepts of the frontend ecosystem. The course can be purchased through{' '} AlgoExpert website . -

-

+ + Although I had already attempted the exercises on their coding platform, but for the sake of practising further, I thought of creating this simple website which is a collection of all the questions and their solutions. You can browse through the list of questions mentioned in the sidebar and open up any question to view further details. -

-

+ + Some of the questions involve usage of certain APIs to fetch data and implement the solution, but due to CORS, their internal APIs are not accessible. I have explored and used some free alternatives here in order to implement the question. I have pointed out the same in such questions as well, but just in case I missed out on explicitly mentioning the API endpoints, you can open up the browser's console and head over to the network tab for more details. -

-

+ + Click here to dive into the first question or select any question of your choice from the sidebar. Happy learning! -

-
+ + ); }; diff --git a/src/components/IndexRoute/styles.module.scss b/src/components/IndexRoute/styles.module.scss index 8923bb7..6580f13 100644 --- a/src/components/IndexRoute/styles.module.scss +++ b/src/components/IndexRoute/styles.module.scss @@ -4,6 +4,7 @@ .container { @include spacing(3rem 2rem); max-width: 60rem; + height: 100vh; @media screen and (min-width: 1200px) { @include spacing(4rem 8rem); @@ -16,6 +17,10 @@ @include theme(color, contrast1Opacity90); @include spacing(0.5rem 0); + &:last-of-type { + padding-bottom: 8rem; + } + & a { @include theme(color, yellow1); @@ -29,7 +34,7 @@ .title { @include theme(color, red1); @include spacing(1rem 0); - font-size: 3rem; + font-size: 2.5rem; letter-spacing: -0.5px; word-spacing: -1rem; diff --git a/src/components/Memory/styles.module.scss b/src/components/Memory/styles.module.scss index 3c226cd..61f0011 100644 --- a/src/components/Memory/styles.module.scss +++ b/src/components/Memory/styles.module.scss @@ -19,6 +19,6 @@ } .solutionContainer { - @include spacing(1rem 0 6rem); + @include spacing(1rem 0); max-width: 50rem; } diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx index 62431ee..863760d 100644 --- a/src/components/Navbar/index.tsx +++ b/src/components/Navbar/index.tsx @@ -31,25 +31,20 @@ const Navbar: React.FC = () => {
  • Contact Us
    • - +

    - You're given an HTML file for the top navigation bar of a website. The navigation bar consists of two - unordered lists, containing three and two list items, respectively. + You're given an HTML file for the top navigation bar of a website. The navigation bar consists of two unordered lists, containing three and + two list items, respectively.

    Style this navigation bar as follows:

    • - The navigation bar should be a horizontal bar, spanning the entire width of its parent; all of its list - items should be displayed in a single row. + The navigation bar should be a horizontal bar, spanning the entire width of its parent; all of its list items should be displayed in a + single row.
    • - The first unordered list (containing Product, Testimonials, and Pricing) should appear on the far left side - of the navigation bar. The second unordered list (containing Team and Contact Us) should appear on the far - right side of the navigation bar. + The first unordered list (containing Product, Testimonials, and Pricing) should appear on the far left side of the navigation bar. The + second unordered list (containing Team and Contact Us) should appear on the far right side of the navigation bar.
    • The navigation bar should have a background color of #265EF7 @@ -59,9 +54,8 @@ const Navbar: React.FC = () => { font color.
    • - The unordered lists should have no margin or padding. However, the individual list items should have - vertical padding equal to their font size and horizontal padding equal to their font size multiplied by 1.5; - their font size should be 16px. + The unordered lists should have no margin or padding. However, the individual list items should have vertical padding equal to their font + size and horizontal padding equal to their font size multiplied by 1.5; their font size should be 16px.
    • Hovering over a list item should change its background color to #1E87B5 @@ -70,8 +64,8 @@ const Navbar: React.FC = () => {
    • There should be a solid, #F4F5F6 - , 2px border separating the list items. However this border shouldn't - appear on the right side of Pricing or on the left side of Team. + , 2px border separating the list items. However this border shouldn't appear on the right side of + Pricing or on the left side of Team.
    • The individual list items shouldn't have bullet points next to them.
    diff --git a/src/components/ProjectPage/components/QuestionsMenu/index.tsx b/src/components/ProjectPage/components/QuestionsMenu/index.tsx index 88b2802..2ca011b 100644 --- a/src/components/ProjectPage/components/QuestionsMenu/index.tsx +++ b/src/components/ProjectPage/components/QuestionsMenu/index.tsx @@ -1,24 +1,101 @@ -import React from 'react'; +import React, { useEffect, useMemo, useState } from 'react'; import { NavLink } from 'react-router-dom'; +import { motion } from 'framer-motion'; import classes from './styles.module.scss'; import Divider from '../../../UI/Divider'; import { QUESTIONS_INFO } from '../../../../constants/questions'; +import useWindowSize from '../../../../hooks/useWindowSize'; +import { CONTENT_VARIANTS, MENU_BUTTON_SIZE, RESPONSIVE_BREAKPOINT_WIDTH } from '../../../../constants'; +import IconButton from '../../../UI/IconButton'; +import Menu from '../../../Icons/Menu'; +import Close from '../../../Icons/Close'; + +const menuContainerDesktopVariants = { + visible: { transition: { staggerChildren: 0.1, delayChildren: 0.5 } }, + hidden: {}, +}; + +const menuContainerVariants = { + visible: { + opacity: 1, + height: '100%', + transition: { + staggerChildren: 0.1, delayChildren: 0.5, when: 'beforeChildren' + }, + }, + hidden: { + opacity: 0, + height: 0, + transition: { + staggerChildren: 0.4, staggerDirection: -1, when: 'afterChildren' + }, + }, +}; + +const menuVariants = { + visible: { + transition: { + staggerChildren: 0.05, delayChildren: 0.1, delay: 0.2 + }, + }, + hidden: { transition: { staggerChildren: 0.01, staggerDirection: -1 } }, +}; + +const menuItemVariants = { + visible: { + y: 0, + opacity: 1, + transition: { y: { stiffness: 1000 } }, + }, + hidden: { + y: 5, + opacity: 0, + transition: { y: { stiffness: 1000 } }, + }, +}; const QuestionsMenu: React.FC = () => { + const { width } = useWindowSize(); + + const [isOpen, setIsOpen] = useState(false); + const [isDesktop, setIsDesktop] = useState(width >= RESPONSIVE_BREAKPOINT_WIDTH); + + const MenuButton = useMemo(() => (isOpen ? Close : Menu), [isOpen]); + + const animateVariant = useMemo(() => { + if (isDesktop) { + return 'visible'; + } + return isOpen ? 'visible' : 'hidden'; + }, [isDesktop, isOpen]); + + useEffect(() => { + setIsDesktop(width >= RESPONSIVE_BREAKPOINT_WIDTH); + }, [width]); + return ( - + +
    + { setIsOpen((prevValue) => !prevValue); }}> + + +
    + + + Questions + + + + {QUESTIONS_INFO.map((question) => ( + + (isActive ? classes.menuItemActive : classes.menuItem)}> + {question.name} + + + ))} + + +     ); }; diff --git a/src/components/ProjectPage/components/QuestionsMenu/styles.module.scss b/src/components/ProjectPage/components/QuestionsMenu/styles.module.scss index 8e494fc..8535045 100644 --- a/src/components/ProjectPage/components/QuestionsMenu/styles.module.scss +++ b/src/components/ProjectPage/components/QuestionsMenu/styles.module.scss @@ -3,15 +3,20 @@ .menu { @include theme(background-color, grey4); - @include theme(border-right, divider, 1px solid); - height: 100%; + height: 100vh; width: 100%; overflow-y: auto; overflow-x: hidden; - position: relative; + position: fixed; + top: 0; + left: 0; + z-index: 50; @media screen and (min-width: 1200px) { - max-width: 30rem; + @include theme(border-right, divider, 1px solid); + position: relative; + height: 100vh !important; + width: 25rem; } } @@ -22,6 +27,7 @@ font-size: 2rem; position: sticky; top: 0; + z-index: 60; } .menuItems { @@ -60,3 +66,15 @@ @include theme(color, accent1); cursor: default; } + +.menuButton { + display: block; + position: fixed; + top: 1rem; + right: 0.5rem; + z-index: 100; + + @media screen and (min-width: 1200px) { + display: none; + } +} diff --git a/src/components/ProjectPage/index.tsx b/src/components/ProjectPage/index.tsx index cb3e149..f36fdc3 100644 --- a/src/components/ProjectPage/index.tsx +++ b/src/components/ProjectPage/index.tsx @@ -7,15 +7,8 @@ const projectVariants = { hidden: {}, }; -const ProjectPage: React.FC = props => { - const { - background = '', - pageClassName = '', - pageStyle = {}, - containerClassName = '', - containerStyle = {}, - children, - } = props; +const ProjectPage: React.FC = (props) => { + const { background = '', pageClassName = '', pageStyle = {}, containerClassName = '', containerStyle = {}, children } = props; return (
    diff --git a/src/components/ProjectPage/styles.module.scss b/src/components/ProjectPage/styles.module.scss index a70186c..fd4ccd5 100644 --- a/src/components/ProjectPage/styles.module.scss +++ b/src/components/ProjectPage/styles.module.scss @@ -7,7 +7,7 @@ } .contentContainer { - @include spacing(2rem); + @include spacing(2rem 2rem 8rem); display: flex; flex-direction: column; gap: 1rem; diff --git a/src/components/QuestionDetails/index.tsx b/src/components/QuestionDetails/index.tsx index cb84f87..139ec9a 100644 --- a/src/components/QuestionDetails/index.tsx +++ b/src/components/QuestionDetails/index.tsx @@ -20,21 +20,13 @@ const QuestionDetails: React.FC = (props) => { children, } = props; return ( - +

    {title}

    - + {children}     diff --git a/src/components/SignUpForm/index.tsx b/src/components/SignUpForm/index.tsx index f545578..dc815fc 100644 --- a/src/components/SignUpForm/index.tsx +++ b/src/components/SignUpForm/index.tsx @@ -36,9 +36,8 @@ const SignUpForm: React.FC = () => {

    - There should also be a Sign Up button at the - bottom of the form. When clicked on (and if required fields have been filled), the button should submit the - form using default browser behaviour. + There should also be a Sign Up button at the bottom of the form. When + clicked on (and if required fields have been filled), the button should submit the form using default browser behaviour.

    diff --git a/src/components/StopWatch/index.tsx b/src/components/StopWatch/index.tsx index c30f517..15d8608 100644 --- a/src/components/StopWatch/index.tsx +++ b/src/components/StopWatch/index.tsx @@ -93,15 +93,11 @@ const StopWatch: React.FC = () => { containerClassName={classes.questionDetails} descriptionClassName={classes.questionDescription} > +

    You're given HTML and CSS files for a simple stopwatch, and you need to make the stopwatch functional using JavaScript.

    - You're given HTML and CSS files for a simple stopwatch, and you need to make the stopwatch functional using - JavaScript. -

    -

    - The stopwatch has a timer, which is meant to be controlled by the stopwatch's three buttons: a start button, a - stop button, and a reset button. The stopwatch starts out in its idle state, with the timer at{' '} - 00:00:00 and the start button as the only - enabled button. + The stopwatch has a timer, which is meant to be controlled by the stopwatch's three buttons: a start button, a stop button, and a reset + button. The stopwatch starts out in its idle state, with the timer at 00:00:00{' '} + and the start button as the only enabled button.

    The stopwatch should have the following functionality:

      @@ -109,33 +105,18 @@ const StopWatch: React.FC = () => { When the start button is pressed from the idle state, the timer should start counting up from{' '} 00:00:00. -
    • - While the timer is counting up, the stop button should be enabled, and the start and reset buttons should be - disabled. -
      • +
    • While the timer is counting up, the stop button should be enabled, and the start and reset buttons should be disabled.
    • When the stop button is pressed, the timer should pause.
      • +
    • While the timer is paused, the stop button should be disabled, and the start and reset buttons should be enabled.
      • +
    • When the start button is pressed from the paused state, the timer should resume counting up from its previous time.
      • +
    • When the reset button is pressed from the paused state, the entire stopwatch should go back to its original idle state.
    • - While the timer is paused, the stop button should be disabled, and the start and reset buttons should be - enabled. -
      • -
    • - When the start button is pressed from the paused state, the timer should resume counting up from its - previous time. -
      • -
    • - When the reset button is pressed from the paused state, the entire stopwatch should go back to its original - idle state. -
      • -
    • - The timer should be in the format{' '} - minutes:seconds:milliseconds, with minutes and - seconds having two digits and milliseconds having three digits. For example, if 2 minutes, 15 seconds, and - 350 milliseconds have elapsed, the timer should read{' '} - 02:15:350. + The timer should be in the format minutes:seconds:milliseconds, with minutes + and seconds having two digits and milliseconds having three digits. For example, if 2 minutes, 15 seconds, and 350 milliseconds have + elapsed, the timer should read 02:15:350.
    • - You don't need to handle times greater than{' '} - 59:59:999. + You don't need to handle times greater than 59:59:999.
    diff --git a/src/components/Sudoku/styles.module.scss b/src/components/Sudoku/styles.module.scss index d37a7c9..9d1990e 100644 --- a/src/components/Sudoku/styles.module.scss +++ b/src/components/Sudoku/styles.module.scss @@ -33,7 +33,7 @@ } .solutionContainer { - @include spacing($margin: 2rem 1rem 6rem); + @include spacing($margin: 2rem 1rem); max-width: 50rem; } diff --git a/src/components/TierList/styles.module.scss b/src/components/TierList/styles.module.scss index bb22295..b8576b5 100644 --- a/src/components/TierList/styles.module.scss +++ b/src/components/TierList/styles.module.scss @@ -25,7 +25,7 @@ } .solutionContainer { - @include spacing($margin: 2rem 1rem 6rem); + @include spacing($margin: 2rem 1rem); display: flex; flex-direction: column; max-width: 35rem; diff --git a/src/components/UI/Divider/index.tsx b/src/components/UI/Divider/index.tsx index 888c92b..e768905 100644 --- a/src/components/UI/Divider/index.tsx +++ b/src/components/UI/Divider/index.tsx @@ -13,7 +13,7 @@ const dividerVariants = { }, }; -const Divider: React.FC = props => { +const Divider: React.FC = (props) => { const { isVertical = false, className = '', style = {} } = props; return ( diff --git a/src/constants/index.ts b/src/constants/index.ts index 623884c..e659805 100644 --- a/src/constants/index.ts +++ b/src/constants/index.ts @@ -1,4 +1,4 @@ -export const THEME: { [key in Theme]: Theme } = Object.freeze({ +export const THEME: {[key in Theme]: Theme} = Object.freeze({ LIGHT: 'LIGHT', DARK: 'DARK', }); @@ -17,8 +17,7 @@ export const AE_TESTIMONIALS = { API_URI: 'https://reqres.in/api/users' }; export const CRYPTO_PRICES_CONFIG = { PAGE_SIZE: 10, TOTAL_SIZE: 30, - API_URI: - 'https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=30&page=1&sparkline=false&locale=en', + API_URI: 'https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=30&page=1&sparkline=false&locale=en', }; export const RAPID_MOVIESDB_HOST: string = 'moviesdatabase.p.rapidapi.com'; @@ -79,3 +78,19 @@ export const CONTENT_VARIANTS = { opacity: 0, }, }; + +export const ICON_PATH_VARIANTS = { + visible: { + opacity: 1, + pathLength: 1, + transition: { duration: 0.1 }, + }, + hidden: { + opacity: 0, + pathLength: 0, + }, +}; + +export const RESPONSIVE_BREAKPOINT_WIDTH = 1200; + +export const MENU_BUTTON_SIZE = 48; diff --git a/src/hooks/useWindowSize.ts b/src/hooks/useWindowSize.ts index ee3d88e..2d30d39 100644 --- a/src/hooks/useWindowSize.ts +++ b/src/hooks/useWindowSize.ts @@ -38,7 +38,7 @@ const reducer = (state: IState, action: IAction) => { }; const useWindowSize = () => { - const [state, dispatch] = useReducer(reducer, { width: 0, height: 0 }); + const [state, dispatch] = useReducer(reducer, { width: window.innerWidth, height: window.innerHeight }); useEffect(() => { const handleWindowResize = throttle(() => { diff --git a/src/router.tsx b/src/router.tsx index 7a2ba36..ff312e5 100644 --- a/src/router.tsx +++ b/src/router.tsx @@ -1,10 +1,10 @@ import React from 'react'; import { createBrowserRouter, RouterProvider } from 'react-router-dom'; import App from './App'; -import Error from './screens/Error'; import ThemeContextProvider from './context/ThemeContext'; import { QUESTIONS_INFO } from './constants/questions'; import IndexRoute from './components/IndexRoute'; +import Error from './components/Error'; const getExerciseRoutes = () => QUESTIONS_INFO.map((question) => ({