Hello my readers, I want to share with you how to create an TO DO APP without using any libraries.

read article on my website

First you need to make HTML markup

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

</head>

<body>

ok

</div>

</div>

</div>

</body>

</html>

CSS:

body {
    margin: 0;
    padding: 0;
    font-family: verdana;
}
.top{
    height: 55px;
    width: 100%;
    background-color: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
}
.top input, .send, button{
    border: none;
    height: 35px;
    padding: 0;
    outline: none;
}
.top .send{
    width: 70px;
    margin-left: 10px;
    background: #007fee;
    color: #fff;
    text-transform: uppercase;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.top input{
    width: 200px;
    border-radius: 3px;
    padding-left: 10px;
}
.output{
    width: 100%;
}
p{
    background: #eee;
    max-width: 92%;
    margin-left: 2%;
    min-height: 70px;
    color: #007fee;
    padding: 2%;
    word-break: break-all;
    border-radius: 3px;
    position: relative;
}
p button{
float: right;

    width: 70px;
    color: #fff;
    border-radius: 3px;
    background: #007fee;

    bottom: 5px;
    right: 5px;

cursor: pointer;
}

span{
    padding: 5px;
    background: #007fee;
    color: #fff;
padding-left: 10px;
padding-right: 10px;
border-radius: 50px;
margin-left: 2%;
}
#out{
    margin-top: 15px;
}

To write js code we start with the fact that will create a Date object(). This is so that the user can see when the message was created.

JavaScript:

var d = new Date();

var date = d.getDate();
var month = d.getMonth();
var year = d.getFullYear();

if (month<=9){
month = "0"+month;
}else{
month = month;
}

Then we get the user input.

var inp = document.getElementById("inp").value;

With help document.createTextNode();
p.appendChild(node); we add text to the block with id "out"

var date = document.createElement("span");
var datetext = document.createTextNode(time);
date.appendChild(datetext);
       var p = document.createElement("p");
var node = document.createTextNode(inp);
var butt = document.createElement("button");
var butttex = document.createTextNode("Delete");
p.appendChild(node);
butt.appendChild(butttex);
p.appendChild(butt);
var d = document.getElementById("out");
d.appendChild(date);
d.appendChild(p);

butt.onclick = function (){
     d.removeChild(p);
     d.removeChild(date);
}

Full JavaScrip code:

function send(){
var d = new Date();

var date = d.getDate();
var month = d.getMonth();
var year = d.getFullYear();

if (month<=9){
    month = "0"+month;
}else{
    month = month;
}
var time = date+":"+month+":"+year;
var inp = document.getElementById("inp").value;
if (inp == ''){
    alert("Create a doing")
}else{
var date = document.createElement("span");
var datetext = document.createTextNode(time);
date.appendChild(datetext);
       var p = document.createElement("p");
var node = document.createTextNode(inp);
var butt = document.createElement("button");
var butttex = document.createTextNode("Delete");
p.appendChild(node);
butt.appendChild(butttex);
p.appendChild(butt);
var d = document.getElementById("out");
d.appendChild(date);
d.appendChild(p);

butt.onclick = function (){
     d.removeChild(p);
     d.removeChild(date);
}

    }
}

read article on my website

my first article