To-Do List In HTML< CSS < JavaScript | Project Series Day - 7 | Frontend everything
Hello Everyone 👋Welcome to My New Blog. Today I have made a To-Do List with the help of HTML, CSS, and Javascript | It is Project Series Day 7. 😍
I am Piyush, Sharing About Web development Daily. You can also check out me at @frontendeverything.
Let's start making this simple to-do list web app step by step
Video Preview of the project,
So that was the preview now let us start making the project 😄 First, we will code HTML then CSS and javascript, and also I have shared codepen ink to make it easier for you.
HTML 🎈( step - 1)
<!-- header -->
<h1 id="header">To-Do List</h1>
<!-- Get User data -->
<form action="index.html" method="post" id="userList">
<input type="text" name="" value="" placeholder="Task" id="list">
<button type="button" name="button" id="clickMe">Add</button>
</form>
<!-- Ordered List -->
<ol id="list_items" class="list-group"> <br>
</ol>
So that was the HTML coding. Now we will code CSS
CSS 🎈( step - 2)
/*========================================================
Sitewide Styles
==========================================================*/
/*multiple selector*/
* {
padding: 0;
}
body {
margin: 0 auto;
background: white;
font-family: Arial, sans-serif;
color: black;
text-align: center;
margin-top: 0;
}
/*========================================================
Format Section
========================================================*/
/*changing title style*/
h1 {
font-size: 50px;
font-weight: bold;
color: #257db8;
}
/*Changing input box style*/
input{
padding: 10px;
margin: 0 auto;
width: 25%;
margin: 6px;
font-size: 20px;
border-radius: 6px;
border: 1px solid;
background-color: white;
color: black;
}
/*changing button box style*/
#clickMe{
border-style: none;
background: #257db8;
border: none;
padding: 10px 20px;
color: white;
font-weight: 200;
font-size: 20px;
border-radius: 6px;
box-shadow: rgba(0, 0, 0, 0.8);
}
/*========================================================
List Section
========================================================*/
/*move text to the right by 20px*/
span {
margin-left: 20px;
font-family: 'Helvetica', Arial, sans-serif;
}
/*Edit list*/
#list_items {
color: black;
font-size: 16px;
border: none;
margin: 0 auto;
width: 35%;
margin-top: 30px;
margin-bottom: 20px;
}
/*format the remove or delete button*/
.remove {
float: right;
background: rgb(231, 236, 237);
border-radius: 3px;
border: none;
color: #acb4c2;
font-size: 15px;
padding: 3px 5px;
}
/*hightlight remove button when hover */
.remove:hover {
background: rgb(230, 250, 230);
}
/*Format List*/
ol li {
text-align: left;
padding: 20px 0;
}
/*Create a bullet before each list*/
ol li:before {
content: '';
position: absolute;
top: 0;
left: 15px;
bottom: 0;
width: 10px;
height: 10px;
margin: auto;
border-radius: 100%;
background: #A0D468;
display: block;
}
/*Change color when the button is hover*/
ol li:hover {
background: #FAFAFA;
}
CSS coding is also done. Now let us move to JAVASCRIPT 😎
Javascript 🎈( step - 3)
var count = 1;
document.getElementById('clickMe').onclick = function (){ addList()};
function addList (){
var userList = document.getElementById('list').value;
console.log(userList);
if (userList != ""){
//create list
var newList = document.createElement('li');
newList.className = 'list-group-item';
newList.id = 'list'+count;
var addListHere = document.getElementById("list_items");
addListHere.appendChild(newList);
var newParagraph = document.createElement('span');
var newText = document.createTextNode( userList);
newParagraph.appendChild(newText);
var addParragraphHere = document.getElementById('list'+count);
addParragraphHere.appendChild(newParagraph);
//create button and assign className
var newButton = document.createElement('button');
newButton.className = 'remove';
newButton.id = 'remove'+count;
var newButtonText = document.createTextNode('delete');
newButton.appendChild(newButtonText);
var addButtonHere = document.getElementsByClassName('list-group-item')[count-1];
addButtonHere.appendChild(newButton);
document.getElementById(newButton.id).onclick = function(){deleteList(newList.id)};
//delete content after pushing the button
document.getElementById('list').value = "";
return count++;
}
return
}
function deleteList(listId){
var removeList = document.getElementById(listId);
var containerList = removeList.parentNode;
containerList.removeChild(removeList);
console.log("List Removed");
}
All the coding part is done, now let us see the final output, and also below I have mentioned the codepen link.
Final Output
The codepen link is here for making your work easier!
.
.
.
.
.
.
Thank You For Scrolling Till here 😊. If You gain any knowledge then do checkout me at @frontendeverything. I am Piyush 🎉 I provide Content related to programming, technology, web development Daily.
.
Great ��
ReplyDeleteamazing
ReplyDelete