<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/solid.css" integrity="sha384-wnAC7ln+XN0UKdcPvJvtqIH3jOjs9pnKnq9qX68ImXvOGz2JuFoEiCjT8jyZQX2z" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/fontawesome.css" integrity="sha384-HbmWTHay9psM8qyzEKPc8odH4DsOuzdejtnr+OFtDmOcIVnhgReQ4GZBH7uwcjf6" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="taskTitle col-12">
<h1>To-Do List - with StopWatch Feature</h1>
<p>With Timer you can - Start, Pause, Check and Restart (by clicking on Start again) </p>
<div>
<div class="border1"></div>
</div>
</div>
</div>
<div class="row">
<div class="taskTitle col-12">
<input id="taskInput" type="text" placeholder="Name a new task and enter/click to add..." maxlength="27">
<button id="addTaskBtn"><i class="fas fa-pencil-alt"></i></button>
</div>
</div>
<!-- Empty Task List -->
<div class="row align-items-center">
<div class="listItems col-12">
<ul class="col-12"></ul>
</div>
</div>
</div>
<script src="script.js" type="text/javascript"></script>
</body>
</html>
// Code goes here
var enterButton = document.getElementById("addTaskBtn");
enterButton.addEventListener("click", addTaskAfterClick);
var input = document.getElementById("taskInput");
input.addEventListener("keypress", addTaskAfterKeypress);
var ul = document.querySelector("ul");
//var item = document.getElementsByTagName("li");
function addTaskAfterClick() {
//Do not allow an empty task name
if (inputLength() > 0) {
createTaskPanel();
}
}
function addTaskAfterKeypress(event) {
//when task name is not empty and hit enter button
if (inputLength() > 0 && event.which === 13) {
createTaskPanel();
}
}
function inputLength() {
return input.value.length;
}
function createTaskPanel() {
var time = 0;
var running = 0;
var resetTimer = false;
//create a task element and add to ul
var li = document.createElement("li");
li.appendChild(document.createTextNode(input.value));
ul.appendChild(li);
//clear text input field
input.value = "";
//add del button
var delBtn = document.createElement("button");
//delBtn.appendChild(document.createTextNode("X"));
delBtn.innerHTML = "<i class='fa fa-trash'></i>";
li.appendChild(delBtn);
delBtn.addEventListener("click", deleteListItem);
//add timer
var timerSpan = document.createElement("span");
timerSpan.setAttribute("id", "stopWatchDisplay");
timerSpan.classList.add("timerDisplay");
timerSpan.innerHTML = "00:00:00";
li.appendChild(timerSpan);
//add start button
var startBtn = document.createElement("button");
startBtn.innerHTML = "<span><i class='fa fa-play-circle'></i></span>"
startBtn.setAttribute("id", "startBtn");
li.appendChild(startBtn);
startBtn.addEventListener("click", startTimer);
//delete a task by setting display:none
//add pause button
var pauseBtn = document.createElement("button");
//delBtn.appendChild(document.createTextNode("X"));
pauseBtn.innerHTML = "<span><i class='fa fa-pause-circle'></i></span>";
pauseBtn.setAttribute("id", "pauseBtn");
li.appendChild(pauseBtn);
pauseBtn.addEventListener("click", pauseTimer);
//delete a task by setting display:none
//add stop button
var stopBtn = document.createElement("button");
stopBtn.innerHTML = "<span><i class='fa fa-check-circle'></i></span>"
stopBtn.setAttribute("id", "stopBtn");
li.appendChild(stopBtn);
stopBtn.addEventListener("click", stopTimer);
function pauseTimer() {
li.classList.add("paused");
li.classList.remove("started");
li.classList.remove("done");
running = 0;
startBtn.enabled = true;
pauseBtn.enabled = false;
stopBtn.enabled = true;
// console.log("pause:" + resetTimer);
}
function startTimer() {
//console.log("start enter:" + resetTimer);
//The classList property is not supported in Internet Explorer 9 and earlier versions.
//li.classList.toggle("started");
if (resetTimer) {
reset();
}
if (running == 0) {
running = 1;
increment(timerSpan);
startBtn.enabled = false;
pauseBtn.enabled = true;
stopBtn.enabled = true;
}
li.classList.add("started");
li.classList.remove("paused");
li.classList.remove("done");
// console.log("start exit:" + resetTimer);
}
function stopTimer() {
li.classList.add("done");
li.classList.remove("paused");
li.classList.remove("started");
running = 0;
startBtn.enabled = true;
pauseBtn.enabled = false;
stopBtn.enabled = false;
resetTimer = true;
// console.log("stop:" + resetTimer);
}
function reset() {
running = 0;
time = 0;
resetTimer = false;
timerSpan.innerHTML = "00:00:00";
}
function increment() {
if (running == 1) {
setTimeout(function () {
time++;
var mins = Math.floor(time / 10 / 60) % 60;
var secs = Math.floor(time / 10) % 60;
var tenths = time % 10;
if (mins < 10) {
mins = "0" + mins;
}
if (secs < 10) {
secs = "0" + secs;
}
timerSpan.innerHTML = mins + ":" + secs + ":" + "0" + tenths;
increment();
}, 100);
}
}
//delete a task by setting display:none
function deleteListItem() {
//The classList property is not supported in Internet Explorer 9 and earlier versions.
li.classList.add("delete")
}
}
/* Styles go here */
body {
background: #b3dee7;
text-align: center;
font-family: 'Open Sans', sans-serif;
}
.taskTitle {
margin: 30px 0px;
font-weight: bold;
}
h1 {
color: #ffffff;
font-weight: 800;
}
#addTaskBtn {
border: none;
padding: 5px 15px;
border-radius: 5px;
color: #ebb3ce;
background-color: #02798F;
transition: all 0.75s ease;
-webkit-transition: all 0.75s ease;
-moz-transition: all 0.75s ease;
-ms-transition: all 0.75s ease;
-o-transition: all 0.75 ease;
font-weight: bold;
}
#addTaskBtn:hover {
background-color: #02798F;
color: #FFCD5D;
}
ul {
text-align: left;
}
li {
list-style: none;
padding: 10px 20px;
color: #ffffff;
text-transform: capitalize;
font-weight: 600;
border: 2px solid #025f70;
border-radius: 5px;
margin-bottom: 10px;
background: #4EB9CD;
transition: all 0.75s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5 ease;
}
li:hover {
background: #76CFE0;
}
li > button {
font-weight: normal;
background: none;
border: none;
float: right;
color: #025f70;
font-weight: 800;
}
input {
border-radius: 5px;
min-width: 65%;
padding: 5px;
border: none;
}
.done {
background: #a6c143 !important;
color: #025f70;
}
.started {
background: #56c596 !important;
color: #025f70;
}
.paused {
background: #ff503c !important;
color: #025f70;
}
.delete {
display: none;
}
.timerDisplay {
font-weight: normal;
background: none;
border: none;
float: right;
color: #025f70;
font-weight: 800;
padding-right :"20px";
}