Beginner React Project - Learn React in 35 Minutes
Want to learn React, but not sure where to start? With this one project you will learn all that you need to become a React developer and begin your journey as a modern front-end software engineer! In this video we will cover all of the important topics including hooks, state, JSX, conditional rendering and more! With this to do list application, I will guide you step by step through the process from start to end. If this is your first react project, or maybe you need to cover the basics again, this is the video for you.
To learn more about React, check out the other videos on this channel!
Пікірлер: 5
See below the App.css file for the project! .to-do-list { display: flex; flex-direction: column; align-items: center; } .to-do-container { display: flex; flex-direction: row; width: 96%; height: 88px; background-color: #FF4F4F; align-content: center; border-radius: 8px; margin-top: 8px; margin-bottom: 8px; padding-top: 8px; padding-bottom: 8px; } .to-do-container.completed { background-color: #ffabab; } .to-do-container:hover { border: 2px solid #4D4D4D; } .to-do-checkbox { color: white; font-size: 40px; height: 50px; width: 50px; text-align: center; align-self: center; line-height: 62px; margin-left: 8px; margin-right: 8px; } .to-do-text { color: white; font-size: 24px; height: fit-content; align-self: center; font-family: 'Open Sans'; font-weight: normal; margin-left: 0px; overflow-y: scroll; height: fit-content; max-height: 88px; width: 100% } /* Hide scrollbar for WebKit browsers (Chrome, Safari) */ .to-do-text::-webkit-scrollbar { display: none; } /* Optional: Hide scrollbar for Firefox */ .to-do-text { scrollbar-width: none; } .to-do-delete { background-color: #FF4F4F; border: none; color: white; font-size: 42px; height: 50px; width: 50px; text-align: center; align-self: center; line-height: 62px; margin-right: 12px; margin-left: auto; } .to-do-delete.completed { background-color: #ffabab; } .header-container { display: flex; flex-direction: column; } .header { height: 120px; margin-bottom: 6px; border-bottom: 4px solid #4D4D4D; width: 98%; align-self: center; display: flex; flex-direction: row; } .header-title { color: #4D4D4D; font-size: 56px; height: fit-content; align-self: center; font-family: 'Open Sans'; font-weight: normal; margin-left: 20px; } .header-add-task { background-color: #FF4F4F; width: 80px; height: 80px; align-self: center; border-radius: 8px; margin-right: 20px; margin-left: auto; display: flex; flex-direction: row; justify-content: center; } .header-add-task-text { color: white; align-self: center; font-size: 48px; line-height: 36px; } .pop-up-container { height: 100dvh; width: 100dvw; background-color: none; position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: rgba(0, 0, 0, 0.8); margin-left: -8px; margin-top: -8px; } .pop-up { width: 80%; height: 50%; background-color: white; border-radius: 8px; display: flex; flex-direction: column; align-items: center; } .pop-up-title { color: #4D4D4D; font-size: 48px; height: fit-content; align-self: center; font-family: 'Open Sans'; font-weight: normal; margin-top: 12px; margin-bottom: 24px; text-align: center; padding-left: 12px; padding-right: 12px; } .pop-up-input { height: auto; margin-top: auto; margin-bottom: 12px; height: 100%; width: 90%; border: 2px solid #4D4D4D; border-radius: 8px; font-size: 32px; text-align: center; } .pop-up-button-container { height: fit-content; width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: center; } .pop-up-button { color: #4D4D4D; font-size: 28px; height: fit-content; align-self: center; font-family: 'Open Sans'; font-weight: normal; margin-left: 8px; margin-right: 8px; border-radius: 8px; margin-bottom: 12px; padding: 8px; border: none; color: white; } .back { background-color: #FF4F4F; } .add { background-color: #00c31a; }
Nice One. loved the video.
I noticed the ToDoItem section was missing.
where is the css file?
@CodeSnapOnline
Ай бұрын
I have just posted a pinned comment with the file, thank you for watching!