Make a to-do list using HTML/CSS/JS beginner level
Hey guys once again welcome to the Decoders blog, I hope you all are doing well and today I'm present with a to-do list (using css/html/js).
Here is an overview of the working of the to-do list and how it is going to function
The very first step will be creating the backbone of the website using the html and designing it with the help of little bit of css
The code for html is as follows and all the comments are given so that you can find out the reason behind each line of code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Notes making</title>
<script src="new.js" async></script>
<link rel="stylesheet" href="new.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=sw
p" rel="stylesheet">
</head>
<body>
<div class="navbar">
<div class="design">
</div>
<div class="style">
<form>
<input style=" font-size: 12
px;" type="text" name="text" id="txt">
<button type="submit" id="add">
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26"fill
="currentColor" class="bi bi-plus" viewBox="0 0 16 16">
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0
1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
</svg>
</button>
<span id="img"><img src="Picture1.png" alt="" srcset="" width="76" he
ight="76"></span>
<h1 id="name">NOTES</h1>
<p id="caption">Enter your notes here.....</p>
<span id="man"><img src="Picture2.png" alt="" srcset=""></span>
</form>
</div>
</div>
<div class="list">
<h1 id="change" style="font-family: 'Quicksand', sans-serif;">Your notes
</h1>
<p class="normal">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Nam repellat doloribus provident distinctio cupiditate excepturi,<br> iusto temporibus
recusandae magni mollitia id aspernatur maxime nobis tempora necessitatibus <br> prae
sentium consequuntur repellendus molestias?</p>
</div>
<div class="task">
</div>
</body>
</html>
***************************Code for CSS*************************************
*{
outline: none;
padding: 0px;
margin: 0px;
}
.design{
/* float: right; */
/* background-color: rgb(255, 255, 255); */
/* bottom: 57px; */
width: 31%;
height: 663px;
right: -970px;
position: relative;
top: 44px;
border-radius: 59px;
background-image: linear-gradient(45deg, #0717f0, #f50b0b);
border: 20px solid black;
}
.name{
position: relative;
bottom: 342px;
left: 39%;
display: inline-block;
/* border: 2px solid red;*/
}
.style{
/* border: 2px solid black; */
position: relative;
/* height: 75px; */
/* bottom: -68px; */
/* width: 23%; */
top: -461px;
left: -5%;
/* background-color: rgb(32, 27, 27); */
border-radius: 110px;
vertical-align: baseline;
float: right;
}
#txt{
width: 88%;
height: 130px;
position: relative;
/* top: 10px; */
border-radius: 28px;
/* left: 4px; */
cursor: pointer;
float: right;
/* position: absolute; */
right: 14%;
border: 1px solid black;
}
#txt:hover{
background-image: linear-gradient(to right, rgb(111 85 85 / 9%), rgb(0 0 0 / 7%));
}
#add{
position: relative;
border-radius: 35px;
/* width: 105px; */
top: 21px;
width: 25%;
/* right: 32px; */
height: 43px;
background-image: linear-gradient(to right, rgb(31 86 219 / 0%), rgb(255 0 0));
/* float: right; */
left: -15%;
float: right;
vertical-align: baseline;
border: 1px solid;
}
.notes{
/* border: 2px solid red; */
list-style: none;
background-color: white;
border-radius: 33px;
width: 32%;
box-shadow: 2px 12px 15px grey;
position: relative;
vertical-align: baseline;
float: left;
top: 48px;
left: 5%;
height: 95px;
background-image: linear-gradient(to right, rgba(255,0,0,0), rgb(0, 68, 255));
}
#add:hover{
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(56, 56, 247,
0.651));
}
#remove{
position: relative;
background-color: red;
left: 87%;
border-radius: 44px;
border: 2px solid black;
bottom: 53px;
}
#done{
position: relative;
background-color: green;
border-radius: 22px;
left: 83%;
bottom: 49px;
}
.newbtn{
background-color: red;
position: relative;
left: 85%;
bottom: 22px;
border-radius: 17px;
border: 2px solid black;
}
.new{
position: relative;
bottom: 22px;
}
#done:hover{
cursor: pointer;
}
#img{
left: -5%;
bottom: 110%;
position: absolute;
}
#man{
float: left;
position: relative;
left: -29%;
bottom: 15px;
}
#change{
position: relative;
left: 82px;
top: -631px;
/* border: 2px solid red; */
display: inline-block;
background-image: linear-gradient(98deg, #0021ed, #fd1c1c);
width: 289px;
height: 68px;
text-align: center;
border-radius: 33px;
box-shadow: black;
box-shadow: 9px 10px 30px #000000a1;
}
#newtask{
position: relative;
top: 18px;
/* left: -25%; */
/* overflow: hidden; */
right: -62px;
display: block;
}
#del{
position: relative;
/* border: 2px solid red; */
left: -25%;
/* top: 278px
px
; */
/* position: absolute; */
top: -9px;
width: 25px;
}
.normal{
top: 169px;
left: 100px;
position: absolute;
display: inline-block;
}
#notask{
color: red;
/* position: relative; */
top: 108px;
left: -2%;
position: relative;
top: 69%;
bottom: 1px;
}
#name{
font-family: 'Quicksand', sans-serif;
position: absolute;
float: right;
left: 27%;
bottom: 114%;
}
#caption{
position: absolute;
font-family: 'Quicksand', sans-serif;
left: 0%;
bottom: 103%;
color: black;
font-weight: bold;
}
::-webkit-input-placeholder{
position: absolute;
top:
3%;
}
.task{
position: absolute;
top: 36%;
left: 93px;
}
**************************Code for javascript**********************************
//Calling all the ids and classes using querryselector
const addBtn = document.querySelector('#add')
const txt = document.querySelector("#txt")
const delBtn = document.querySelector("#del")
const place = document.querySelector('.task')
showNotes()
//Setting the new tasks in the localstorage
addBtn.addEventListener('click', () => {
let notes = localStorage.getItem('notes') //Initially it will search in the
localstorage whether there is any previouse notes or not
if (notes == null) {
notesObj = []
//if there is no previous notes then it will create a blank list so that we
can append the new task in it
}
else {
notesObj = JSON.parse(notes) //If there is any previously formed notes in the
localstorage then it will fetch the notes from the localstorage and append it in the
notesObj list so that it can also be shown with the newly created notes
}
notesObj.push(txt.value) //Add the new notes into the notesObj list
localStorage.setItem('notes', JSON.stringify(notesObj)); //will add them into
the localstorage with the key as notes
txt.value = "" //clears the input text area after adding a text
showNotes() //This will call the showNotes function and will display all
the notes which we will add including the previous notes and the new ones
})
//Making the function to show the notes that will be created by us and later on using
it to make the notes visible for the user so that he can edit it at anytime
function showNotes() {
let notes = localStorage.getItem('notes') //Get the items form the
localstorage whose key is notes and store all the values in the notes variable
if (notes == null) { // //if there is no previous notes then it will create
a blank list so that we can append the new task in it
notesObj = []
place.innerHTML += `<p id="notask">Nothing here</p>`
}
else {
notesObj = JSON.parse(notes) //if there is any previously created note then
it will retrieve it from the localstorage and save it into the notesObj variable
}
place.innerHTML = ""
//loop to iterate the task that will be created by the user and show it in the
browser
notesObj.forEach((element, index) => {
place.innerHTML += `<p id="newtask">${element}</p>
<button id="${index}" onclick="deleteNote(this.id)">Delete`
});
}
//Function to delete a created task and also to remove it from the localstorage so
that on refreshing it dont appear again
function deleteNote(index) {
let notes = localStorage.getItem('notes') // //Initially it will search in the
localstorage whether there is any previouse notes or not
if (notes == null) { // //if there is no previous notes then it will
create a blank list so that we can append the new task in it
notesObj = []
}
else {
notesObj = JSON.parse(notes) ////if there is any previously created note then
it will retrieve it from the localstorage and save it into the notesObj variable
}
notesObj.splice(index, 1) //the splice method is used to remove elements
from the list the first parameter takes the startign position from where the removing
of elements will begin and the second parameter gives the number of elements to be
removed from the list
localStorage.setItem('notes', JSON.stringify(notesObj)) //this is used to
update the localstorage after removing any specific item from the list
showNotes()
}
Comments
Post a Comment