JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<input type="text" id="input">
<button id="add">Add</button>

<ul id="list"></ul>

<!-- <div class="title">Project 1</div>
<div class="time">120</div>
<button class="stop">Stop</button>
<button class="resume">Resume</button> -->

CSS

.item {
    margin: 20px 0;
}

JavaScript

var input = document.querySelector('#input');
var button = document.querySelector('#add');

button.addEventListener('click',function(){
	var val = input.value;
    document.querySelector('#list').innerHTML += `
    	<div class="item">	
            <div class="title">${val}</div>
            <div class="time">120</div>
            <button class="stop">Stop</button>
            <button class="resume">Resume</button>
        </div>
    `;
    input.value = '';
    input.focus();
})

document.addEventListener('click',function(e){
	if(e.target.classList.contains('stop')){
    	var i = 0;
    	var currentItem = e.target.previousSibling.previousSibling.previousSibling.previousSibling.innerHTML;
    	localStorage.setItem(e.target.previousSibling.previousSibling.previousSibling.previousSibling.innerHTML,0);
        setInterval(function(){
        	i++;
        	localStorage.setItem(currentItem , i);
            getItems();
        },1000)
    }
})

function getItems(){
	var keys = Object.keys(localStorage)
	var ss = document.querySelectorAll('.time');
	for(var i = 0; i < localStorage.length; i++){
    	console.log(keys[i])
        ss[i].innerHTML = Number(localStorage.getItem(keys[i])) / 60 + ' წთ';
    }
}