Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions6Comments53

All comments

  • J.D. Browne• 870

    @PeshwariNaan

    Posted

    Just to give you a heads up - All the product images do not display on the general pages or the individual product pages for your live site. Everything else looks good but this issue shows up right away.

    -Hope you get it fixed

    0
  • J.D. Browne• 870

    @PeshwariNaan

    Posted

    Hello and good job on completing the challenge.

    Here are a few tips that might help you with your code.

    • Be careful not to skip over heading levels ion your css. This means that you don't want to start with an <h2> if you don't have an <h1> already in your code. Start with the <h1> then move to <h2> and the <h3> etc. So your card title needs to be changed to an h1 to get rid of the error.

    • Make sure to wrap your root div with a <main> tag for accessibility. You can do this in the index.html file like below and it will get rid of your error.

    <main>
<div id="root"></div>
</main>

    • Make sure to include an alt prop on your image wrapper component. The alt should have a description of the image. In your case this would be something like alt="QR code that directs user to frontend mentor site".

    • The styled components can take a little while to get used to but don't give up. It is a very powerful tool. Be careful that you don't have styling that overlaps other styling in different components. Always try to keep things as simple as you can.

    • Start working with em or rem units in your styling rather than px units. This helps people with vision problems to adjust their devices. You can read about it HERE.

    I hope this helps - Happy coding 😁

    Marked as helpful

    0
  • J.D. Browne• 870

    @PeshwariNaan

    Posted

    Hello Ibrahim and nice job on completing the challenge.

    The link to your code gives a 404 so I can't see it to help with your React code.

    However, I can see that you are getting the landmark warnings above. If you want to get rid of those, you can simply wrap your root div located in your index.html file with a <main> tag like this:

    <main>
      <div id="root"></div>
</main>

    This will clear the errors.

    Hope this helps and happy coding 😁

    0
  • J.D. Browne• 870

    @PeshwariNaan

    Posted

    Hello. Nice work on completing the challenge.

    Here are a couple tips that might help you with your code:

    • Try not to use useEffect to control things like media queries. It tends to over complicate simple applications and you can run into trouble. The best practice is always keep things as simple as possible. You can see that you run into problems when the screen size gets between 730px and 500px and your buttons get pushed out of your cards. With css media queries its easier to adjust things like the margin/padding between the button and text in the card and you have better control of the styling.

    • As with useEffect, only have useState when necessary. I know you are learning and it's good to explore the different hooks in React, but as you start to develop more complex apps in the future try to minimize stateful components.

    • Wrap your root div in your index.html file with <main> for accessibility and it will clear up your landmark warnings you are seeing.

    I hope this is helpful - Good luck and happy coding 😃

    0
  • J.D. Browne• 870

    @PeshwariNaan

    Posted

    Hello Rizky, nice work on completing the challenge.

    Here are a couple suggestions that might help make the app a little better.

    • You don't want the user to create an empty todo (no text). Make sure to add a check in the submit handler that looks for an empty field like this:
    if (task === '') return;

    • In the input component, don't give the user the option to mark the todo as completed. If a task is already completed then no one is going to put it in a list of things to do. In my app I used the circle on the side to clear the input field. You can see my solution HERE if you want to check it out.

    • Something is going on when a task is entered and the entire page is reloading which should not happen when using React. Only the components that have changed should re-render. If you are using React dev tools, you should be able to track down the problem. This article is pretty good for learning how to use the DEV-TOOLS

    • The 'clear completed' button will clear all the todos in your app, not just the completed ones. Wherever it is that you are managing your state, you could add a filter function. Maybe something like:

        //Clear out all finished todos
  const clearCompleted = () => {
    const updatedTodoList = state.todoItems.filter((todo) => !todo.isDone);
    return updatedTodoList;
  };

    I hope this is helpful - Happy coding 😁

    Marked as helpful

    1
  • P
    Trista Lanette Pollard• 555

    @tlanettepollard

    Submitted

    Hi. Thank you for viewing my solution. This is my version without the Drag and Drop. I had difficulty adding that functionality to my app. I will be working on a new version with the DND. I would appreciate some feedback. Thanks.

    ReactJS To-Do App w/SCSS

    #react#sass/scss

    1

    J.D. Browne• 870

    @PeshwariNaan

    Posted

    Hello Trista, nice work on completing the challenge.

    Here are a couple things that might help:

    • For these todo lists it is always good to let the user store their list in the local storage so they can come back to what they put down. Implementing this is pretty easy. My code is a little different from yours as I am using a reducer in a context to manage the state but you can still see how I did it HERE

    • Something is wrong with the responsiveness in the mobile view. After I add more that 8 todos, the todo list covers up the bottom nav-bar div and you cannot access the filters once this happens making the app useless at this point.

    • (optional)Try adding some DnD to the list. Drag and drop is a really useful thing to learn. It can be a little confusing at first but check my solution to see how I did it. Once you understand it, it's not bad.

    I hope this helps - Happy coding

    Marked as helpful

    0
  • J.D. Browne• 870

    @PeshwariNaan

    Posted

    Hello Joao - Nice work on completing the challenge, it looks good.

    If you want to get rid of all the landmark warnings simply wrap the root div with a <main> tag in your index.html file like this:

    <main>
   <div id="root"></div>
</main>

    Hope this helps - Happy coding

    0
  • P
    Kamil Szymon• 680

    @kamiliano1

    Submitted

    I'm not satisfied with the rounded icons. The icons are not completely centered.

    Also, I wasn't sure how to do correctly the hover and focus effects on the buttons, so I've only used opacity.

    For each part of the page I've tried to created a custom component in React. But I don't know if they were used correctly:

    • Navbar,
    • Hero,
    • Links, for the links section
    • Link, for each individual link
    • Body
    • Footer

    Shortly URL

    #fetch#react#vite

    1

    J.D. Browne• 870

    @PeshwariNaan

    Posted

    Hello Kamil - Nice work on completing the challenge.

    Here are a couple tips that might help:

    • For the components, you did pretty good. I would make the input its own component. You can make all the buttons one component and change the sizes and shapes with props. Also the cards that have the icons on them could be components as well. Rename the body component to layout.

    • The hover affect looks fine for this project. You could also have changed the shade of color but it's just a different solution, not better.

    • Also if you want to get rid of the landmark warnings just wrap a <main> tag around your root div in the index.html file like this:

    <main>
   <div id="root"></div>
</main>

    I hope this helps - Happy coding

    Marked as helpful

    0
  • J.D. Browne• 870

    @PeshwariNaan

    Posted

    Hello Giorgo and nice work completing the challenge.

    Here are a couple tips that might help.

    • There is an issue on the mobile view if you select more than two skills. After that, everything gets pushed off the page. The container div in your filters component needs to have a media query to change the size of the container.

    • Also if you want to get rid of the landmark warnings just wrap a <main> tag around your root div in the index.html file like this:

    <main>
   <div id="root"></div>
</main>

    I hope this helps - Happy coding

    Marked as helpful

    0
  • Anurag Daliya• 190

    @danurag1906

    Submitted

    I could not make the theme switch functionality. Can someone please help me with it. And in this project I used prop drilling, and I tried to use Context API but I could not implement it properly. Can someone please help me with it?

    rest countries api

    #bootstrap#react#react-router#axios

    2

    J.D. Browne• 870

    @PeshwariNaan

    Posted

    Hello Anurag - good work on completing the challenge.

    Here are a couple of tips that might help.

    • I would suggest starting to use a different library for your css. You are already structuring your files to where a switch to styled components or css modules would not be a big change. I'm using styled components and it makes doing things like switching themes very easy. You can see my solution HERE to see if it would be something you would like to learn.

    • The context is pretty easy to set up for this project. There are many different ways to do it. I just made the initial api call to get all of the countries when the web app loads the first time. I don't do any filtering in the context so the code is really simple. The set up is this:

    import { createContext, useState, useEffect } from 'react';
import axios from 'axios';

export const CountriesContext = createContext([]);

export const CountriesProvider = ({ children }) => {
  const [countryData, setCountryData] = useState([]);
  const [isLoading, setIsLoading] = useState(false);

   const getData = async () => {
    setIsLoading(true);
    try {
      const response = await axios.get(
        `https://restcountries.com/v3.1/all?fields=name,altSpellings,capital,population,region,flags,subregion,tld,currencies,languages,borders,cca3`
      );
      console.log("data from context", response.data);
      setCountryData(response.data);
      setIsLoading(false);
    } catch (error) {
      setIsLoading(false);
      throw new Error('There is a problem getting the data');
    }
  };

  useEffect(() => {    
    getData();
    
  }, []);

  const value = { countryData, isLoading };

  return (
    <CountriesContext.Provider value={value}>
      {children}
    </CountriesContext.Provider>
  );
};

    As you can see I only handle getting data and loading states with a simple async function call.

    I hope this helps - Happy coding🍻

    0
  • Fe Macaraeg• 40

    @femacaraeg

    Submitted

    This is an interactive credit card validation form.

    I used create-react-app for building the project. I used formik and yup for the checking the validation of the credit card details.

    What I found most difficult while building the project is the responsiveness. I am still working on my HTML and CSS skills. If you have any advise and feedback for me, they are very much welcome.

    Interactive Credit Card

    #react

    2

    J.D. Browne• 870

    @PeshwariNaan

    Posted

    Hello Fe - great work on completing the challenge. It looks really good.

    • As for the responsiveness, everything looks good for this project because the layout is so simple so I wouldn't change anything. It's always best practice to keep things as simple as possible. I do see that you had the breakpoints in your app.css code which is great even though you didn't use them. As the designs get more complex you will.

    • Also if you want to get rid of the landmark warnings just wrap a <main> tag around your root div in the index.html file like this:

    <main>
   <div id="root"></div>
</main>

    Happy coding

    Marked as helpful

    0
  • Trey Tallent• 60

    @treytallent

    Submitted

    I was unable to achieve the purple filter effect on the image without editing it in Photoshop. A filter effect would be possible if the image was a background-image, however I couldn't find a solution where this was feasible whilst accounting for accessibility and responsiveness.

    Stats Preview Card

    1

    J.D. Browne• 870

    @PeshwariNaan

    Posted

    Hello Tre - nice work on completing the challenge.

    As per your issue with the purple, you don't need to do this with PS. This is just a simple filter.

    • In your css, change the background of your .card-container to background-color: hsl(277, 64%, 61%)

    • Then for the image element, which will be in the card-container, you can do something like this:

    .card-img {
  mix-blend-mode: multiply;
  min-width: 100%;
  min-height: 100%;
}

    The mix-blend-mode: multiply; will get you the color effect you are looking for.

    Hope this helps - Happy coding

    0
  • mona eslahkonha• 60

    @monaeslah

    Submitted

    there were nothing special but drag and drop which considering use hooks needed more attentions

    Using scss and redux

    #react

    1

    J.D. Browne• 870

    @PeshwariNaan

    Posted

    Hello Mona - Nice work on completing the challenge.

    Here are a couple of tips that might help:

    • Don't use a counter in your reducer to keep track of the number of todos. That number should change depending on if you are looking at the completed, active or all todo list. Just use the .length operator on whatever array you are mapping.

    • Instead of having the submit button, set your input up to submit the todo when you hit enter. It just makes things a little easier and looks a bit nicer. The function will be something like this:

     const handleSubmit = (e) => {
    e.preventDefault();
    const id = nanoid();
    task.trim();
    if (task === '') return;

    addTodoItem({ id: id, task: task, isDone: false });
    setTask('');
  };

    • If you want to know how to do the tricky hover effect for the circles on the todo, you can check out my solution HERE .

    • One last thing is to get rid of your 'landmark' warnings above is just wrap your root div with the <main> element like this in your index.html file :

    <body>
   <main>
     .<div id="root"></div>
   </main>
</body>

    This will get rid of that error.

    I hope this helps and happy coding.

    1
  • Kevin Koziol• 390

    @Lozzek

    Submitted

    This is my first attempt at this project. I uploaded the way it was because I was having a hard time trying to figure somethings out and was hoping someone can check this out for me and give me some tips. I could not figure out the color over the image, that was one of the main issues, also felt like I could have done the bottom section of the card better(the numbers with companies, queries, and templates part).

    I will definitely go at this again to complete it.

    Stat review 1st attempt

    1

    J.D. Browne• 870

    @PeshwariNaan

    Posted

    Hello Lozzek - nice work on completing the challenge.

    If you want the effect for the image try making a separate div that you can put the image in. Then set the background of the div to the color background-color: hsl(277, 64%, 61%)

    You don't want to set the image as the background because you lose the ability to have an alt description which isn't good for accessibility. You want to use an img element inside the div I described above.

    Then for the image element you can do something like this:

    .card-img {
  mix-blend-mode: multiply;
  min-width: 100%;
  min-height: 100%;
}

    The mix-blend-mode: multiply; will get you the color effect you are looking for.

    I did this project a while ago and could have done some things better but you can check my solution out HERE if you it helps.

    Cheers and happy coding.

    0
  • J.D. Browne• 870

    @PeshwariNaan

    Posted

    Hello Zulfa - Nice work on completing the challenge, it looks great.

    If you want get the color effect to the image add mix-blend-mode: multiply; to the img element styling. You already have the background of the image div set to the purple color so this should be all you need.

    Also you should get familiar with media queries and you can change the orientation of the flexbox from row to column. You can check out my solution if you want to see how I did it.

    One last thing is to get rid of your 'landmark' warnings above is just wrap your body code with the <main> element like this:

    <body>
   <main>
     ....all your html body code here
   </main>
</body>

    This will get rid of that error.

    I hope this helps and happy coding.

    0
  • od• 80

    @oguerid

    Submitted

    Hi, completed the challenge but had a small problem with the purple filter overlay as it seems to overlap a the bottom on both the mobile and the desktop due this i can see the darkness of the section underneath. i know this because of using the position absolute but i cant workout how to fix.

    Stats - card

    1

    J.D. Browne• 870

    @PeshwariNaan

    Posted

    Hello OD - Nice work on completing the challenge.

    I don't think you need to use absolute positioning for this, it would be better to use just a flexbox for the overall layout. The flexbox can have two divs - one for the image and one for the text. This is a great resource to help you learn about flexbox HERE

    In the div for the image you can set the background-color: hsl(277, 64%, 61%) and then for the image itself you can use something like this. The mix-blend-mode: multiply will give you the purple effect.

    .card-img {
  mix-blend-mode: multiply;
  min-width: 100%;
  min-height: 100%;
}

    I did this project a while ago and I could have done some things better but you are welcome to take a look at my solution here

    I hope this helps - Happy coding!

    Marked as helpful

    0
  • J.D. Browne• 870

    @PeshwariNaan

    Posted

    Nice work on completing the challenge Akhlak, this looks really good.

    Just one suggestion that I would make for the media queries. Maybe make the break point where the page goes to a vertical alignment a little sooner. Right now it changes at around 550px. The right column gets really squished before it changes. If you make the break point around 811px it will change for a tablet size and look better.

    I hope this helps. Happy coding!

    0
  • J.D. Browne• 870

    @PeshwariNaan

    Posted

    Hello Kajetan - Nice job on completing the challenge - It looks great.

    Here are a couple tips that might help:

    • The flag image in your card component is being cut off which you don't want. If you set a max width on the card main container like max-width: 320px and then apply
    img {
     aspect-ratio: 3.3 / 2;
     object-fit: cover;
  }

    for the image, it should fix that issue. I found a guy here on FEM that is great at keeping the css really simple and his design strategies are great to learn from. His name is Deniel Den and here is a LINK to his solution. I did mine a little differently if you want to check out my SOLUTION* here. You can also see how I did the media queries for the details page if you want to change your desktop view to match the design.

    • To get rid of all the accessibility and html errors, simply add alt={`flag of ${country.name.common}`}to your card img element. Your variable might be different so adjust accordingly.

    I hope these couple things help you out - Happy coding.

    Marked as helpful

    0
  • Nikola D• 1,450

    @NikolaD93

    Submitted

    Tricky part was changing the background of numbers when clicking on each of them, for some reason hover effect doesn't work. Any suggestions on fixing that are welcome! ✌🎉

    Interactive Cart Component

    #react#tailwind-css#vite

    3

    J.D. Browne• 870

    @PeshwariNaan

    Posted

    Hello Nikola D - Nice job on completing the challenge.

    A couple tips that might help:

    • The biggest advantage of using react is the ability to break up your code into components rather than keeping all your code in one file. This way you avoid unnecessary re-renders when something changes. For example, you could put your button in a separate file and map it in as a component. I know this project is very simple but if you use these practices now, more complex apps will be optimized and much easier to manage

    • Don't wrap buttons in a div. There is no advantage to doing this and it will cause you problems in the future, especially with accessibility. Make sure to put all the props like onClick with the button component, not on the div and just style the button directly. In the tailwind documentation you can see how they do it. You can also see how they apply the active: Pseudo-classe which makes changing the background after you click as simple as it gets. i.e. active:bg-orange-700.

    I hope this helps - Good luck and happy coding

    Marked as helpful

    2
  • nikoProg• 120

    @nikoProg

    Submitted

    I am trying to learn react. I also had a lot of difficulties setting the styles properly. Here are the problems.

    1. the colored top part of cards, is it a border or not? Mine does not look the same.
    2. the layout of the 4 cards, I had to add extra divs and then tries to somehow arrange them to look like on the picture, but it was extremely difficult. I tried using grid and flex, but I was not sure how to set up the empty space in the 1st and 3rd column.
    3. I could not put an <img> tag with a path to the given SVGs, but instead, I had to copy the entire SVG code inline. The problem was a path error "could not find the file specified". I was not sure how.
    4. The positioning of the SVGs is not good. I tried using absolute positioning, but every time I would use "top" or "bottom", all 4 SVGs would arrange on top of each other for some reason.

    Four card feature section using React

    #react

    1

    J.D. Browne• 870

    @PeshwariNaan

    Posted

    Hello nikoProg - Nice work on completing the challenge, it looks good.

    Here's a few things you could do that might help.

    • For the layout, I think it would be easier to use a grid for the cards. You could have something like.
    .card_container {
display: grid;
width: 80vw;
height: 70vh;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);

    These values are just a quick guess, you would have to figure the height and width of the container as per your design. But now you can assign each card to right where you want them in the styling for your individual cards

    .card_1{
 grid-column: 1 / 2;
grid-row: 2 /4;

    Then do that for the other 3 cards but changing where in the grid you want them buy changing the grid-column and row values. See here for more info on GRIDS . When you get more comfortable you could assign the positions via props but that is beyond the scope of this project.

    • To use an svg as an image src just import the svg into your component file like: import sun from '../../assets/icon-sun.svg'. Then just use <img src={sun} onClick={toggleThemeHandler} alt='sun icon' /> . When you import like this, the name doesn't matter, just make sure the path is correct. For example I could have used import apple from '../../assets/icon-sun.svg' and as long as I use src={apple} it will still work.

    • Get into the habit of building individual components to get the benefits of react. That is what react is for. Putting everything into your app.js and not dividing up your code will lead to trouble.

    I hope this helps. Happy coding

    Marked as helpful

    0
  • Berluis Cabrera• 20

    @berluiscabrera2

    Submitted

    The most difficult part for me was making the UI exactly as it needed to be for the mobile version (because of responsive design missing knowledge). So I would appreciate any response for the next questions:

    What are the most important tips/tools to take into consideration before starting to develop a responsive website?

    Interactive Notifications Page using React

    #react#styled-components

    1

    J.D. Browne• 870

    @PeshwariNaan

    Posted

    Hello Berluis - Nice work on getting the challenge completed. The beginning with responsive design is always a frustrating experience but keep going.

    Here are a few tips that you might be able to use:

    • To start, make sure that you fully grasp what the design is asking for. I always start with doing a little wire frame sketch on paper that has the layout for all views (i.e. desktop, tablet, mobile). This way I can work my way through a page and check off what's done. It's a simple practice but it really helps. For example you can see that the mobile view for this page, your notifications div should take up 100% of the width, but you have yours set to 50% for all screen sizes. When I get to a mobile size, everything is squished and the presentation doesn't look right. Add @media(max-width: 811px){width: 100%;} to that div and it should fix that.

    • If you haven't heard of css tricks, these guys write a lot of useful stuff to help you design responsive pages. Here is an article about Mobile first work-flow they did that can help understand the design approach. Check it out here: Mobile First

    • Start learning a styling a library like styled-components or css modules. You have styled-components as a tag for this project but this is not styled-components. These libraries are really cool and will speed things up once you get the hang of it: Check it out Styled-components

    These few things should help you get started with the next react app you do - I hope it helps. Happy coding

    Marked as helpful

    0
  • J.D. Browne• 870

    @PeshwariNaan

    Posted

    Hello Kacey - Nice job on completing the challenge, it looks pretty good.

    Here are a couple tips that you might find useful:

    • One thing that I would recommend when using react is making your code more modular. By this I mean breaking things up to even more components than what you currently have. I know this is a very simple project, but it is great coding practice as you evolve and develop more complex applications. This is also the biggest strength of react so you can avoid unnecessary re-renders and have optimum efficiency for your app (Helps a lot with SEO too).

    • You could definitely separate the inputs to their own components and import them into the a separate form component. Now you won't have have a bunch of stuff packed in your app.js and anyone looking through your code can find things easier. This is especially useful when dealing with forms as we use them all over the place and you would be able to reuse your code. Sometimes the validation can get pretty tricky and its nice to not have to rebuild it on the next one. The more generic you can make it, the more robust it becomes.

    • Make your error codes more specific in your validation. If I don't have enough characters in the card number input, the error reads "wrong format, numbers only" when it should give a different error indicating the user doesn't have enough characters. This might not be in the design specs for this project but things like this will save you A LOT of time later on.

    I hope this is helpful - Happy coding

    Marked as helpful

    0
  • Barney• 370

    @waikoo

    Submitted

    My first project built in React.

    What do you think about my CSS organization? I have no idea where to put what, it got messy as hell.

    Where do you put media queries?

    What about component logic?

    I had to come up with a fitting structure for the object to map my data from that I really enjoyed doing and all the destructuring of props was quite fun to figure out!

    Social media dashboard with theme switcher

    #react#vite

    1

    J.D. Browne• 870

    @PeshwariNaan

    Posted

    Hello Barney - Nice work on completing the challenge, it looks pretty good. The css does look like it got way too complex for such a simple layout. There also seems to be some code repetition like defining *, *::before, *::after { box-sizing: border-box; transition: var(--transition); } in the app.css and again in your header component. You also have transition here using your variable and then right under it you have it again in your body tag not using the variable which leads to really confusing code. What is transitioning here?. You have multiple h1 elements in your css to define a single property such as one has h1 { margin-bottom: .4rem; } and the down a ways you have h1 { font-size: 2.2rem; } . These should be grouped together.

    A couple recommendations I would make would be:

    • If you continue learning react, switch to a different styling such as css modules or styled-components. It can really simplify your code and it keeps things modular and much easier to debug. Also much easier to implement things like dark/light mode.

    • Definitely add more media queries to accommodate for tablet, and mobile views. I find it easier to put the breakpoints in a variable that I can access in all my components. I typically apply the media queries per component, I never define them globally like in your app.css. There is a guy on FEM that I found that has been a huge help for me, his name is Deniel Den. Here is a link to his github page and you can get a good idea of just how much you can reduce your css code using styled components and regular css using clean coding practices. Check out some of his repos if you get a chance.

    Good luck on the next one - Happy coding

    Marked as helpful

    1
  • J.D. Browne• 870

    @PeshwariNaan

    Posted

    Hello Filipe - nice work on completing the challenge, it looks pretty good. I am getting a 404 if I try to look at your code - the link is broken.

    Without being able to see the code, I can't help much but here are a few things that might help you.

    • It took me a little while to figure out the hover effect for the circles using styled-components because you have to account for both light and dark mode and know if the todo is completed or not. You can do this using conditional props. My solution is below.

    •   ${(props) => {
    if ((props.isDone && props.isDark) || (!props.isDark && props.isDone)) {
      return `
      null
      `;
    } else {
      if (props.isDark) {
        return `
        background-clip: padding-box;
      border: solid 2px transparent;
     background: linear-gradient(#333, #333) padding-box,
      linear-gradient(to top left, #cf1af4, #40dff1) border-box;`;
      }
      if (!props.isDark) {
        return `
        background-clip: padding-box;
      border: solid 2px transparent;
     background: linear-gradient(#fff, #fff) padding-box,
      linear-gradient(to top left, #cf1af4, #40dff1) border-box;`;
      }
    }
  }}
}```

    If this is a little confusing, you can see my full solution here

    • There is a bug in your logic for showing the completed tasks. It seems you have hard coded the list. Maybe look into using local storage so the user can save their todos.

    • I also have the drag & drop implemented on my list if you would like to see how that is done.

    I hope this helps. Happy coding

    Marked as helpful

    0