#programming #react.

source

49 Comments

  1. Yes, this is what we want to see! Authenticity, realism, and honesty, and learn from it. If we want to listen to a genius showing off how awesome they are we watch some other channel. Since you have all those more human qualities, awesomeness is taken for granted. Thank you for inspiring us (and for being awesome and not bragging about it haha).
    (Ears should be in line with shoulders, your ears are definitely way forward which is causing issues and pain is indicating that. If you correct your posture your pain will go away and you'll be able to sit for hours feeling just fine).

  2. 47:33: "…so we're just drilling down….I'm gonna drill you…" ๐Ÿ˜‚ Where else can you get these kinds of laughs while learning to code?!

  3. I'm coding along with you, and everything is fine until @31:37, when I click the button, the only thing that happens that the page reloads
    const submitTodoHandler = (e) => {
    e.preventDeafault();
    setTodos([
    …todos,
    {text: inputText, completed: false, id: Math.random() * 1000},
    ]);
    };
    Can You please help me to find out why that happens?
    Can I download your code to compare?
    Thanks in advance
    Peter

  4. Absolute awesome tutorial! I love the little laughs I get throughout the video, keeps the viewers engaged! Keep it up man.

  5. I'm sitting here screaming at the monitor right now "Cmon, you sent filterettodos in form, it should be in todolist!!! Figure it out already"

  6. It was fun watching you debug that last error while knowing you put the prop in the wrong component. Still, great tutorial!

  7. I think that creating videos with errors can explain the really process of programming, I cannot find a better explained tutorial about coding. Thanks for your video, just amazing!!!

  8. Nice tutorial! Thanks you so much for this! ๐Ÿ˜€
    Although I changed the filtering to be inside my Todolist.js instead of App.js since I don't know why it does not read my state even though it is inside the useEffect(). It works, so I guess its fine! Thanks for this vid, I just started my first react app ๐Ÿ˜€ This vid helped a lot! ๐Ÿ˜€

  9. * {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    }

    body {

    background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);

    color: white;

    font-family: "Poppins", sans-serif;

    min-height: 100vh;

    }

    header {

    font-size: 2rem;

    }

    header,

    form {

    min-height: 20vh;

    display: flex;

    justify-content: center;

    align-items: center;

    }

    form input,

    form button {

    padding: 0.5rem;

    font-size: 2rem;

    border: none;

    background: white;

    }

    form button {

    color: #ff6f47;

    background: #f7fffe;

    cursor: pointer;

    transition: all 0.3s ease;

    }

    form button:hover {

    background: #ff6f47;

    color: white;

    }

    .todo-container {

    display: flex;

    justify-content: center;

    align-items: center;

    }

    .todo-list {

    min-width: 30%;

    list-style: none;

    }

    .todo {

    margin: 0.5rem;

    background: white;

    font-size: 1.5rem;

    color: black;

    display: flex;

    justify-content: space-between;

    align-items: center;

    transition: all 1s ease;

    }

    .filter-todo {

    padding: 1rem;

    }

    .todo li {

    flex: 1;

    }

    .trash-btn,

    .complete-btn {

    background: #ff6f47;

    color: white;

    border: none;

    padding: 1rem;

    cursor: pointer;

    font-size: 1rem;

    }

    .complete-btn {

    background: rgb(11, 212, 162);

    }

    .todo-item {

    padding: 0rem 0.5rem;

    }

    .fa-trash,

    .fa-check {

    pointer-events: none;

    }

    .fall {

    transform: translateY(10rem) rotateZ(20deg);

    opacity: 0;

    }

    .completed {

    text-decoration: line-through;

    opacity: 0.5;

    }

    /*CUSTOM SELECTOR */

    select {

    -webkit-appearance: none;

    -moz-appearance: none;

    -ms-appearance: none;

    appearance: none;

    outline: 0;

    box-shadow: none;

    border: 0 !important;

    background-image: none;

    }

    /* Custom Select */

    .select {

    margin: 1rem;

    position: relative;

    overflow: hidden;

    }

    select {

    color: #ff6f47;

    font-family: "Poppins", sans-serif;

    cursor: pointer;

    width: 12rem;

    }

    /* Arrow */

    .select::after {

    content: "25BC";

    position: absolute;

    top: 0;

    right: 0;

    padding: 1rem;

    background: #ff6f47;

    cursor: pointer;

    pointer-events: none;

    }

    /* Transition */

    /*

    .select:hover::after {

    transform: scale(1.5);

    }

    */

  10. I enjoy your videos. I'm trying to find the CSS code to start up, but don't see it. Is it somewhere on the YouTube feed?

  11. Don't change nothing it's gold ! your explanations are perfect and you do mistakes like in the real life ! that's what we loonking for my friend ๐Ÿ˜‰ thank you and take care

  12. 1 hour and 33 min for todo list?) oh it so bad many people will suppose that todo list its so hard . Its took a 5 minute with jquery

  13. Thank you so much for this tutorial, learnt a lot about states and props, as this is my first project in react, learnt the concepts well.

  14. hi , i dont understand one thing, when todo component is rendered by array, why the same component dont show again? once that array is runned again? sorry for my bad english , im from brazil

  15. other videos are not often helpful because they have ready content on how to build "an app" and no errors or debugging, but I can pause the video or finding my mistakes is helping a lot.

  16. 100% completed without any bugs, first one that actually worked 100% out of 4 tutorials i've followed this week, the explanation was clear as crystal meth and the jokes were on point.

  17. JS React Auto Complete 2:58 – In case you were searching for forever on where he goes to change the language to "JavaScript React"… it is down in the bottom right behind his PIP. click the language which will likely say just "JavaScript" and change it to JavaScript React. I am sure most of you knew this, but damn it took me a hot minute to find. โœŒ๏ธ

  18. Hello ed, I am Lamont. I need some insight on how to discontinue flickering when touching link connecting to next linked page .It seems like always a white screen appears the same time as touch screen to push link any advice Thanks.

  19. Me talking to my gorgeous friend Ed through my laptop screen, screaming "You passed filteredTodos to the wrong component! Look, right there! Just look at it!" ๐Ÿ™‚ Thank you for the helpful videos.

  20. I hope everything is fine with your health. I really like this tutorials and the effort that you put in to make sure people understand everything you are trying ot teach.

Leave A Reply

Please enter your comment!
Please enter your name here