Tuesday 2 January 2018

Issue Traker Todo List In javaScript

satish mallick January 02, 2018 css3 , javascript 0 Comments

See the Pen Todo List In javaScript by satish mallick (@satishmallick)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=No">

<title>Issue Traker In javascript </title>
<link href="fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700" rel="stylesheet">
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
<script src="js/jquery.js"></script>
</head>
<body>
<section id="page-wrapper">

<section id="container-area" class="column">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="jumbotron">
<form id="forms">
<div class="form-group">
<label>Name:</label>
<input class="form-control" type="text" placeholder="Name" id="name" required/>
</div>
<div class="form-group">
<label for="issueDescInput">Description</label>
<input type="text" class="form-control" id="issueDescInput" placeholder="Describe the issue..." required/>
</div>
<div class="form-group">
<label>Email:</label>
<input class="form-control" type="text" placeholder="Email" id="email" required/>
</div>
<button type="submit" id="button" class="btn btn-primary">Send</button>
</form>
</div>
<ul id="listing">

</ul>
</div>
</div>
</div>
</section>

</section>
<script src="js/bootstrap.js"></script>
</body>
</html>

<style>
body {margin: 0; padding: 0;font-family: 'Roboto Condensed', sans-serif;font-style: normal;font-weight: 400;}
section, .column{float:left; width:100%; position:relative;}
.text-center{display:inline-block; width:100%; text-align:center;}
.img-responsive{display:block; width:100%; max-width:100%;}
.blockele{display:block; width:100%;}

/*****************container css*******************/
#container-area{padding: 30px 0 0;}
#forms label{font-weight: 700; margin: 0 0 6px;}
ul#listing {margin: 18px 0 0;}
#listing h4 {font-size: 16px;margin: 0 0 10px;}
#listing h5 {font-size: 16px;margin: 0 0 10px;}
#listing h5 span {margin: 0 5px;}
#confirm {position: fixed;text-align: center; display: table;background: rgba(0,0,0,0.6);width: 100%;z-index: 10;height: 100vh;vertical-align: middle;left: 50%;top: 50%;transform: translate(-50%,-50%); transition: all 0.26s ease-out 0s;}
#center-part {width:400px;margin:0 auto;position:absolute;left:50%;top:-50%;transform:translate(-50%,-50%);padding:30px;box-shadow:0 0 9px #000;border-radius:2px;background:#fff; transition: all 0.26s ease-out 0s;}
#center-part h2 {margin: 0 0 16px;font-size: 28px;color: #000;}
#confirm.set #center-part{top: 50%; transition:all 0.26s all 0.26s cubic-bezier(0, -0.18, 1, -0.28) 0s;}
</style>

<sctipt>
document.getElementById('forms').addEventListener("submit", saveDetsils);

function saveDetsils(e){
var getname = document.getElementById('name').value;
var getemail = document.getElementById('email').value;
var getdesc = document.getElementById('issueDescInput').value;
var issueStatus = 'Open';

var store = {
name: getname,
email: getemail,
desc:getdesc,
status: issueStatus
}

if(localStorage.getItem('key')==null){
var key = [];
key.push(store);
localStorage.setItem('key',JSON.stringify(key));
}else{
var key = JSON.parse(localStorage.getItem('key'));
key.push(store);
localStorage.setItem('key', JSON.stringify(key));
}
document.getElementById('forms').reset();
createHTML();
e.preventDefault();
}

function createHTML(){
var key = JSON.parse(localStorage.getItem('key'));
var divId = document.getElementById('listing');
var count = 0;
divId.innerHTML = '';

for(var i = 0; i < key.length; i++){
var u_name = key[i].name;
var e_email = key[i].email;
var d_desc = key[i].desc;
var status = key[i].status;

divId.innerHTML += '<li id="id'+count++ +'">' +
'<div class="well column">'+
'<h4>' + status + '</h4>' +
'<h5>' + '<span class="glyphicon glyphicon-user" aria-hidden="true"></span>' + u_name + '</h5>' +
'<h5>' + '<span class="glyphicon glyphicon-book" aria-hidden="true"></span>' + d_desc + '</h5>' +
'<h5>' + '<span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>' + '<a href=mailto:\''+e_email+'\'>' + e_email + '</a>' + '</h5>'+
'<div class="column">'+
'<button class="btn btn-warning" onclick="closeIssue(\''+u_name+'\')">'+ "Close" +
'</button>' +
' <button class="btn btn-danger" onclick="openpop(\''+u_name+'\')">'+ "Delete" +
'</button>' +
'</div>'+
'</div>'+
'</li>';
}

}
var el2;
function openpop(u_name){//Open Popup
el2 = document.createElement("div");
el2.setAttribute('id','confirm');
el2.innerHTML ='<div id="center-part"><h2>Are You Sure !!!" </h2><button onclick="deleteIssue(\''+u_name+'\')" class="btn btn-danger">Ok</button> <button onclick=Cancel(\''+u_name+'\') class="btn btn-primary">Cancel</button></div>';
document.body.appendChild(el2);
var Timer = setInterval(myTimer, 400);//remove div with animation
function myTimer() {
el2.setAttribute('class','set');
}
document.body.style.overflow = "hidden";

}

function Cancel(u_name){//Remove Popup
document.body.removeChild(el2);
document.body.style.overflow = "auto";
}

function deleteIssue(u_name){//Delete Data
var key = JSON.parse(localStorage.getItem('key'));
document.body.style.overflow = "hidden";
for(var i=0; i<key.length; i++){
if(key[i].name==u_name){
key.splice(i, 1);
}
}
localStorage.setItem('key', JSON.stringify(key));
createHTML();
Cancel(u_name);
}

function closeIssue(u_name){//Close Issue
var key = JSON.parse(localStorage.getItem('key'));
for(var i=0; i<key.length; i++){
if(key[i].name==u_name){
key[i].status = "Close";
}
}

localStorage.setItem('key', JSON.stringify(key));
createHTML();

}

window.addEventListener("load", createHTML, false);

</script>

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)

Crafted with by TemplatesYard | Distributed by Blogger Templates