TO-DO LIST USING HTML CSS JS

                                                 TO-DO LIST USING HTML CSS JS 




THIS IS THE TO-DO LIST 

USE CODE ANF PERFORM YOUR COMPUTER 

HTML  SOURCE CODE

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <title>To do list</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="container">
            <div class="todo-app">
                <h2>To Do List <img src="Image/icon.png"></h2>
                <div class="row">
                    <input type="text" id="input-box" placeholder="Add your text">
                    <button onclick="addTask()">Add</button>
                </div>
                <ul id="list-container">
                    <!--<li class="checked">task1</li>
                    <li>tasek2</li>
                    <li>task3</li>-->
                </ul>
            </div>
        </div>
        <script src="script.js"></script>
    </body>
</html>



THIS IS THE TO-DO LIST 

USE CODE ANF PERFORM YOUR COMPUTER 

                                                        CSS  SOURCE CODE 

*{

    margin: 0;

    padding: 0;

    font-family: 'poppins',sans-serif;

    box-sizing: border-box;

}

.container{

    width: 100%;

    min-height: 100vh;

    background: linear-gradient(135deg,  #153677,#4e085f);

    padding: 10px;

}

.todo-app{

    width: 100%;

    max-width: 540px;

    background: #fff;

    margin: 10px auto 20px;

    padding: 40px 30px 70px;

    border-radius: 10px;

}

.todo-app h2{

    color: #002765;

    display: flex;

    align-items: center;

    margin-bottom: 20px;

}

.todo-app h2 img{

    width: 30px;

    margin-left: 10px;

}

.row{

    display: flex;

    align-items: center;

    justify-content: space-around;

    background: #edeef0;

    border-radius: 30px;

    padding-left: 20px;

    margin-bottom: 25px;

}

input{

    flex: 1;

    border: none;

    outline: none;

    background: transparent;

    padding: 10px;

    font-weight: 14px;  

}

button{

    border: none;

    outline: none;

    padding: 16px;

    background: #ff5945;

    color:#fff;

    font-size: 16px;   

    cursor: pointer;

    border-radius: 40px;

}

ul li{

    list-style: none;

    font-size: 17px;

    padding: 12px 8px 12px 50px;

    user-select: none;

    cursor: pointer;

    position: relative;

}

ul li::before{

    content: '';

    position: absolute;

    height: 28px;

    width: 28px;

    border-radius: 50%;

    background-image: url(Image/unchecked.png);

    background-size: cover;

    background-position: center;

    top: 12px;

    left: 8px;

}

ul li.checked{

    color: #555;

    text-decoration: line-through;

}

ul li.checked::before{

    background-image: url(Image/checked.png);

}

ul li span{

    position: absolute;

    right: 0;

    top: 5px;

    width: 40px;

    height: 40px;

    font-size: 22px;

    color: #555;

    line-height: 40px;

    text-align: center;

    border-radius: 50%;

}

ul li span:hover{

    background: #edeef0;

}


THIS IS THE TO-DO LIST 

USE CODE ANF PERFORM YOUR COMPUTER 

                                                        JAVA SCRIPT  SOURCE CODE 

const inputBox=document.getElementById("input-box");

const listContainer=document.getElementById("list-container");


function addTask(){

    if(inputBox.value === ''){

        alert("write something!");

    }

    else{

        let li=document.createElement("li");

        li.innerHTML=inputBox.value;

        listContainer.appendChild(li);

        let span=document.createElement("span");

        span.innerHTML="\u00d7";

        li.appendChild(span);

    }

    inputBox.value='';

    saveData();

}

listContainer.addEventListener("click",function(e){

    if(e.target.tagName=="LI"){

        e.target.classList.toggle("checked");

        saveData();

    }

    else if(e.target.tagName ==="SPAN"){

        e.target.parentElement.remove();

        saveData();

    }

}, false);


function saveData(){

    localStorage.setItem("data",listContainer.innerHTML);

}

function showTask(){

    listContainer.innerHTML=localStorage.getItem("data");

}

showTask();



  Thank you for reading my blog .............................

Comments

Post a Comment

Popular posts from this blog

ADD TWO NO. IN JAVA USING APPLET

Image
                                                 ADD TWO NO. IN JAVA USING APPLET Enter the first no.  10 Enter The Second no. 20 click Add  30 ----------------------------------------------------------------------------------------------------------------------------                                                                                     PREVIEW ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// Copy to Code an implement  this program  import javax.swing.*; import java.awt.*; impor...
Read more

JARVIS AI

                                                            AI TOOL AI tool  first greet Good morning, Good evening, Good Night Jarvis ai tool ask any thing ex.  virat kohli in wikipedia hear answer you speak play music.   hear music AI tool  first greet Good morning, Good evening, Good Night import speech_recognition as sr import pyttsx3 import datetime import webbrowser import os import smtplib import requests import json import random def speak(text):     engine = pyttsx3.init()     engine.say(text)     engine.runAndWait() def listen():     r = sr.Recognizer()     with sr.Microphone() as source:         print("Listening...")         r.pause_threshold = 1         audio = r.listen(source)     try...
Read more