JSFiddle - React, Tailwind, and code Playground

by Fi1osof

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>To Do List</title>
</head>
<body>

    <div class="main">
        <h1 class="todo-list-title">Create Your To-Do List</h1>

        <input type="text" name="inppt-text" value="" placeholder="Enter your task" id="input" maxlength="50">

        <ul class="list">
            <!-- <li class="row">bla BLA 123 <span><a href="#">&#10006;</a> </span></li> -->
        </ul>

    </div>

    <div class="buttons">
        <button class="add">add task</button>
        <button class="remove-all">remove all</button>
    </div>

    <script src="main.js"></script>
</body>
</html>

CSS

/*===========================*/
body {
  margin: 0;
}

.main {
  position: absolute;
  left: 50%;
  top: 10%;
  transform: translate(-50%, -50%);
}
.main .todo-list-title {
  font-size: 40px;
  color: #000000;
  text-align: center;
}
.main input {
  width: 500px;
  height: 40px;
  margin: 0 auto;
  outline: none;
  border-radius: 5px;
  border: 1 px solid #000000;
  transition: all 0.2s ease-in-out 0s;
}
.main input:focus {
  border: 2px solid #0075FF;
  box-shadow: 0px 0px 85px -18px #0075FF;
  transition: all 0.2s ease-in-out 0s;
}
.main .list {
  position: absolute;
  z-index: 5;
  width: 100%;
  height: 360px;
  overflow-y: auto;
}
.main .list .row {
  font-size: 20px;
  width: 100%;
  margin: 0;
  padding: 0;
  padding-bottom: 10px;
}
.main .list span {
  position: absolute;
  right: 10%;
  cursor: pointer;
}
.main .list span a {
  text-decoration: none;
  color: #000000;
}

.buttons {
  text-align: center;
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.buttons .add {
  background-color: #0075FF;
  padding: 15px 40px;
  border: none;
  font-size: 20px;
  border-radius: 5px;
  color: #ffffff;
  text-transform: capitalize;
  outline: none;
  transition: all 0.2s ease-in-out 0s;
  cursor: pointer;
  transform: scale(1);
}
.buttons .add:focus {
  transition: all 0.2s ease-out 0s;
  transform: scale(0.8);
}
.buttons .remove-all {
  background-color: #FF0000;
  padding: 15px 40px;
  border: none;
  font-size: 20px;
  border-radius: 5px;
  color: #ffffff;
  text-transform: capitalize;
  outline: none;
  transition: all 0.2s ease-in-out 0s;
  cursor: pointer;
  transform: scale(1);
}
.buttons .remove-all:focus {
  transition: all 0.2s ease-out 0s;
  transform: scale(0.8);
}

JavaScript

//create task
const addBtn = document.querySelector('.add');
let input = document.querySelector("#input[type='text']");
let getUl = document.querySelector('.list');

const makeLi = (value) => {
    let createSpan = document.createElement('span');
    
    let createLi = document.createElement('li');
    createLi.classList.add('row');
    createLi.append(value);
    createLi.append(createSpan);
    
    return createLi;
}

/*
	Init first list
*/
JSON.parse(localStorage.storageItems || '[]').map(n => {
	getUl.appendChild(makeLi(n));
})


// delete all
const removeAll = document.querySelector('.remove-all');
removeAll.addEventListener('click', function() {
/*   createLi.remove();
  createSpan.remove(); */
  localStorage.clear();
  getUl.innerHTML = '';
})


let liMaker = addBtn.addEventListener('click', function() {
    

    let createLink = document.createElement('a');
    createLink.innerHTML = '&#10006;';

		const value = input.value;
    
    // Add item to storage
    const storageItems = JSON.parse(localStorage.storageItems || '[]');
    storageItems.push(value);
    localStorage.storageItems = JSON.stringify(storageItems);
    input.value = '';

    getUl.appendChild(makeLi(value));
    createSpan.append(createLink);
    
    // //delete one task
    function removeItem() {
        let eachItem = this;
            createLink.addEventListener('click', function(e) {
                e.preventDefault();
                createLi.remove(eachItem);
                createLink.remove(eachItem);
    })
    } removeItem();
    
})