Categories
Website Design

TODO LIst in React.js | Part -3 | JavaScript | Frontend Development | Web Development | React.js [Video]

Watch/Read More

TODO LIst in React.js | Part -3 | JavaScript | Frontend Development | Web Development | React.js

In this video, we’ve implemented the form for adding a new task to our todo list. We’ve finished our TODO List project in #react.

Source Code: https://github.com/tush-tr/youtube/tree/main/react-todo-list-app

Please do subscribe to the channel for more informative videos and for learning new and emerging technologies like #nodejs #devops #aws

CSS for the newtask component:

_______________________________
.new-task-wrapper {
display: flex;
justify-content: center;
align-items: center;
}
.form-wrapper {
background-color: aliceblue;
box-shadow: inset 0px 0px 6px 0px;
border-radius: 12px;
width: 50%;
display: flex;
justify-content: center;
align-items: center;
margin: 20px;
padding: 20px;
gap: 1;
}
.form-wrapper button {
margin-left: auto;
}

.form-wrapper input:focus {
outline: none;
}
.form-wrapper input {
box-shadow: 0px 0px 6px 0px;
border-radius: 5px;
margin: 0 5px;
border: none;
padding-right: 5px;
padding-left: 0.875rem;
line-height: 147.6%;
padding-top: 0.825rem;
padding-bottom: 0.5rem;
}

________________________________