Skip to content
OverviewSolutions
3
Comments
5
Nathan Zed
@TKSHII

All comments

  • Nathan Zed•120
    @TKSHIIPosted over 1 year ago

    Done in 15 minutes.

    0
  • Nathan Zed•120
    @TKSHIIPosted about 2 years ago

    You should not use "var" anymore, but "let".

    For light and dark mode you have to put an eventListener click on the switch dark/light button. Then you create dark and white class with background: dark for the dark and light for the light.

    You select all darkmode changing elements with your JS and put each one in variable. let todoList = document.querySelector('.todolist') etc.. for each.

    Then on click on the dark/light button on top it will call a function that will put the dark class to each elements if the theme is dark or light for the light theme.

    Thats it :)

    Marked as helpful
    0
  • Lester•60
    @lesterdlbSubmitted about 2 years ago

    I'm not really satisfied with how I handle the update of the Todos after every drag and drop. Basically, every item has an index property, and depending on where the user drops it, I proceed to update every index, by either adding 1 (User moved the item up) or subtracting 1 (User moved the item down), between the original position and the new one. Perhaps a data structure like a linked list could be a better solution?

    I'm more of a backend developer, so any feedback regarding how I structured the React application would be appreciated.

    Minimal Api Todos React App

    1
    Nathan Zed•120
    @TKSHIIPosted about 2 years ago

    For the drag and drop i recommend you to check react-dnd or framer-motion :)

    0
  • Nathan Zed•120
    @TKSHIIPosted about 2 years ago

    Hey 🙂 For framer motion you have to import { Reorder } from "framer-motion"

    Then you create a <Reorder.Group> (its a ul html tag) This Reorder.Group want 3 required params with the value, the axis, and the onReorder one where you put your setState function of your array of data.

    Then inside the Reorder.Group you need to put the Reorder.Item (it's an li) with 3 required params I dont remember what it is.

    Then it should work :) I did it on mine, go check it out if you need to.

    Marked as helpful
    0
  • Victor Mendez•290
    @im-victor-mendezSubmitted about 2 years ago

    I had some problems:

    • I need to click/submit 2 times the url to push to the list.
    • When the url is submitted, the input doesn't clear.

    I need to:

    • Add the "hamburger menu" to mobile sizes.
    • Add the svg background to some elements.
    • Add some visual elements.
    • Add directions to some buttons.

    URL shortening API landing page

    1
    Nathan Zed•120
    @TKSHIIPosted about 2 years ago

    For a better data flow you should use the context API. Go check my profile, you will see how i did.

    0