How to make to-do App using JAVASCRIPT ,HTML5, CSS3.
we have make a to-do Task app with current Time zone, using javascript. let's create and complete your daily tasks.
Source Code are here ..
CSS CODE
__________________
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body{
font-family: 'Poppins', sans-serif!important;
}
.banner>img {
width: 100%;
}
p {
font-size: 18px;
}
.banner01 {
display: none;
}
.editBox {
display: none;
}
.bannerContent,
.mainpage {
padding: 10px;
margin-bottom: 20px;
}
.logo>img{
width:20%;
padding:10px;
}
nav>ul{
padding:10px!Important;
}
.bannerContent{
padding:90px 0px;
}
.btnCustom {
background-color: rgb(49 124 247);
padding: 10px 40px;
font-size: 30px;
color: rgb(255 255 255);
border: none;
border-radius: 15px;
}
.list01{
display: flex;
padding: 27px 10px;
background: rgb(255 255 255);
border-radius: 11px;
margin: 21px -1px;
box-shadow: 0px 0px 28px 14px #8080800f;
position: relative;
z-index:1;
}
.list01:hover{
background: linear-gradient(135deg, rgb(35 189 184) 0%, rgb(56 121 255) 100%);
color:white;
transform: translateY(-7px);
transition:0.7s;
box-shadow: 0px 12px 48px -2px #3879ff42;
}
input{
padding: 5px;
box-shadow: 0px 0px 5px 6px #80808017;
border: none;
border-radius: 61px
}
.del{
margin: 0px 56px!important;
font-size: 28px;
}
.ok{
margin: -5px 0px;
font-size: 28px!important;
}
.fa-plus{
font-size: 28px!important;
}
.list01>span{
position: absolute;
right: 0px;
}
#date{
font-size: 19px;
font-weight: 600;
color: rgb(169 169 169);
}
.empty{
font-size: 122px;
text-align: center;
margin: 0 auto;
opacity: 0.2;
position: absolute;
right: 50px;
left: 50px;
top: 229px;
z-index:-1px
}
.trigger{
position: fixed;
/* margin: 0 auto; */
width: 100%;
left: 0;
bottom: 84px;
}
...................................................................................
INDEX.HTML 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>ToDo App</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="wow_animate.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap" rel="stylesheet">
</head>
<body>
<section>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="tags">
<h2><strong>My Task</strong></h2>
<span id="date"></span>
</div>
<div class="mainpage">
<div class="list">
<p class="data"></p>
</div>
<div class="empty">
<i class="fas fa-folder-open"></i>
</div>
<div class="trigger text-center">
<input type="text" id="add" placeholder="Type Your Task...">
<a class="btn"><i class="fas fa-plus"></i></a>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="app.js"></script>
<script src="wow.js"></script>
<script>
new WOW().init();
</script>
</body>
</html>
................................................................................
JAVASCRIPT CODE
//ACCESS INPUT FIELD
var add = document.getElementById('add');
//ACCCESS BUTTON FOR ADD VALUES
var btn = document.querySelector('.btn').onclick = function() {
//CREATE BLANK ARREY
var arr = [];
//ADD INPUT VALUES IN BLANK ARREY BY PUSH METHOD
arr.push(add.value);
//console.log(arr);
//add.value = "";
//CREATE LOOP FOR ADD DATA IN DATA CLASS IN DIV
for (var i in arr) {
//ACCESS DATA CLASS
document.querySelector('.data').innerHTML += `
<div class="list01 wow animate bounceInUp">
<p class="para"><span class="list">${arr[i]}</span></p>
<span class="del"><i class="far fa-trash-alt"></i></span>
<span class="btn ok"><i class="far fa-bookmark"></i></span>
<div>
`;
}
//CREATE DELETE BUTTON
var del = document.getElementsByClassName('del');
//CREATE LOOP FOR DELETE BUTTON
for (var i = 0; i < del.length; i++) {
//ADD ONCLICK FUNCTION FOR PER DELETE BUTTON
del[i].addEventListener("click", function() {
//DELETE SPECIFIC BUTTON FOR DELETE TASK
this.parentElement.style.display = 'none';
})
}
//CREATE EDITER
var para = document.getElementsByClassName('para');
//ACCCESS ALL TASK BLOCKS
for (var i in para) {
//GIVE ONLCICK EVENT IN PER BLOCK CONTENT
para[i].addEventListener('click', function() {
//GIVE CONDITION FOR CLICKED OR NOTCLICKED\
//CLICKED TRUE
if (para[i].clicked = true) {
this.contentEditable = true;
this.style.border = "none";
} else {//CLICKED FALSE
this.contentEditable = false;
}
});
}
}
//ADD DATE MONTHS AND DAYS
dat = ()=>{
var date = document.getElementById('date');
var d = new Date();
date.innerHTML+=d;
}
dat()
..................................................................................................................
Download Zip format of source code
0 comments: