Skip to main content

To-Do list Project

 To-do list Project in Javascript

Program to create a to-do list project in HTML, CSS and Javascript.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>To Do List</title>
</head>
<body>
  <div style="margin-left: 20%; margin-right: 20%; margin-top: 5%">
    <h1 align="center" style="color: Green; font-family: Lucida Console"> My Task List</h1>
    <br>

    <div class="row" align="center" style="border: 2px solid green ; 
border-radius: 20px; 
height: 15%; 
width: 60%;
margin-top: 20px;
margin-left:20% ;
margin-bottom: 3%; ">

      <form>
        <div class="input-group">
          <input type="text" id="box" style="width:20vw;  height: 2vw; margin-top: 20px; border: none; border-bottom: 2px solid green" placeholder="Add Task">
          <br><br>
          <div class ="form-group" style="width:20vw; margin-bottom: 50px" >
            <input type="button" value="Add" style="width:5vw; height:3vw ; background-color : MediumSeaGreen ;float: right; border: none;border-radius: 8px; color: white" onclick="add_item()">
          </div>
<ul id ="list_item" style="color: grey">
      </ul>
        </div>
     
      </form>
      

    
</div>
     </div>
  <script type="text/javascript">
      function add_item()
      {
         let item = document.getElementById("box");
         let list_item = document.getElementById("list_item");

         if (item.value != "")
         {
            let make_li = document.createElement("li");
            make_li.appendChild(document.createTextNode(item.value));
            list_item.appendChild(make_li);

            item.value = "";

            make_li.onclick = function(){ this.parentNode.removeChild(this); }
         }
         else
         { alert("Please add the task !")}
      }

  </script>
</body>
</html>

Video link:  https://youtu.be/asXsfIqtcVk






Labels:

Comments

Post a Comment

Popular posts from this blog

Python Turtle : Create a attractive Petal Design

 Python Turtle Attractive Petal design in Python  import turtle # create the turtle object trt = turtle.Turtle() # create the screen object scr = turtle.Screen() #increase the pensize trt.pensize( 3 ) # set the background color to black scr.bgcolor( 'black' ) # set the pencolor to white colors = [ 'red' , 'orange' , 'yellow' , 'skyblue' , 'blue' , 'indigo' , 'violet' ] # increase the speed trt.speed( 0 ) # now first create a single petal # lets define the distance dis = 50 trt.color( "yellow" ) for color in range ( 20 ): for j in range ( 1 , 8 ): trt.left( 50 ) for i in range ( 2 ): trt.forward(dis) trt.left( 60 ) #rotate at 60 degree in clockwise trt.forward(dis) trt.left( 120 ) #rotate at 120 degree in clockwise dis = dis + 5 #hide the turtle after the shape has been drawn trt.hideturtle() turtle.done() Output : Learn thr...
Post a Comment
Read more

Python Turtle tutorials : Create a Bi-Pyramid structure

 Python Turtle Tutorials  Create a Bi-Pyramid structure using Python  Code :           """ Program to create a Bi-pyramid structure Source : CODE PROBLEM (Youtube) """ import turtle scr = turtle.Screen() # create screen object scr.bgcolor( 'black' ) turtle.speed( 0 ) # the fastest speed turtle.pensize( 2 ) # set the width of the drawing pen turtle.color( 'skyblue' ) # set pencolor to 'skyblue' for i in range ( 30 ): turtle.fd(i* 10 ) turtle.right( 120 ) for j in range ( 29 , 0 ,- 1 ): turtle.fd(j* 10 ) # move forward turtle.left( 120 ) turtle.hideturtle() # hiding the turtle after the completion of the drawing turtle.done() # for holding the screen Output : Learn from video : Watch on youtube
Post a Comment
Read more

Create a Rainbow Colored Benzene Structure using Python Turtle

  PYTHON TURTLE Create a Rainbow Colored Benzene Structure import turtle #import the turtle library trt = turtle.Turtle() #initialize the turtle object scr = turtle.Screen()     #initialize the Screen object scr.bgcolor( 'black' )          #set the background color to "black" scr.title( 'Color Benzene' ) #title of the scren trt.speed( 0 ) #speed of the drawing rainbow = [ 'red' , 'orange' , 'yellow' , 'green' , 'blue' , 'indigo' ] #colors to be used for i in range( 300 ): trt.pencolor(rainbow[i% 6 ]) trt.width(i/ 100 + 1 ) trt.forward(i) trt.left( 59 ) turtle.done() trt.hideturtle() Watch the video :
Post a Comment
Read more