TODO LIST APP
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>TODO-list</title></head>
<body>
<div class="container"> <div class="todo-app"> <h2>TODO list <img src="data:image/jpeg;base64,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" alt=""></h2> <div class="row"> <input type="text" id="input-box" placeholder="Add your text"> <button onclick="addTask()">ADD</button> </div> <div id="list-container">
</div> </div> </div> <script src="app.js"></script></body>
</html>
CSS
<!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>TODO-list</title>
</head>
<body>
<div class="container">
<div class="todo-app">
<h2>TODO list <img
src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxIQDxAQEhIQFRAQEA8QEBAQEhAQDxAQFRUWFhUVFRUYHSggGBolHRUVITEhJSkrLi4uFx8zODMtNygtLisBCgoKDg0OGxAQFy0lHyUtLi0rLS4tLS0tLS0vLi0tLS0tLS8tLS0tLS0tLS0uLS0tLS0tLS0tLS0tKy0tLS0tLf/AABEIAOEA4QMBIgACEQEDEQH/xAAcAAEAAQUBAQAAAAAAAAAAAAAAAwECBAUGBwj/xABDEAABAwIDBAgCBwQKAwEAAAABAAIDBBESIVEFMUFhBhMiMnGBkaFCUgcUIzNiscGy0eHwJCU1Q2Nyc5Ki8RZksxX/xAAZAQEAAwEBAAAAAAAAAAAAAAAAAQIDBAX/xAApEQEAAgECBQMDBQAAAAAAAAAAARECAxIEITFBUSMyMxOBsSJCUnGR/9oADAMBAAIRAxEAPwD3FERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAREQEREBERAUFTVBnja+lhqTwU65nadZH9ZY2Rw6sue53yuwNGFp8yURM0zI+kTDIIg1xcc7tzaBqTopI+kELpequcdr2aMQ9QuX6SbaBDBHF1gmEg6sSNgLmtFgMfwi+fNaptUKKiggLZzLOyUukpgx8rAD2Wkk7gTYkJyRzeiwbWhe8xiRvWDewmzvRZbZWnIOBOgIuvLI6sUdHC+XAytmikLZXRSSkBu64b8TtTuU0VcYaOOqeYxWzU5lwVEuAYRvwgd4ngE5Fy9QRebRbafBRmuc6V7pIWzGAERdXHuL3cr6LP/APIJKeB1XNNihkDDEyJhdYG2ZLu6Lm1yppNu6RceOk8kLOsqnRMZIR1DQDJM+/JuXHfksum6TPDHPnibC3FhjdK/C6TkGZm/hdRRbpUWk2f0jZMx7xHIAw2LiAGeIcbe6vpektNIxzw51mGzrsfl6DMcwhcNwixKPacMzcUcrHAZGxGR0I4LJa8HMEHwN0SuREQEREBERAREQEREBERAREQERUJtmgxtoTFrQ1vfkOFvLV3kFo+keyg2ETRg9ZTNLg0C4k1BHNbal7b3THcezGNGcT5rKKt05M4583mTKwVdN9e6nCKV7utgc09oWsSAsWo2hTPihrmF31VrnRPjBIfG4ncLaFeoinYGloY3C6+IWFjfVa87ApepdB1LOqeSSwDK54qbRTiCxsvU1DJSaXA+Lr7giM4r2eDzyV+0KXHUQsf1TgIMDHyC8L7HgeF10zuiFKKJ1Cxro4HFzuy44g8m9+ea18vQoDZ31Fk8nZJcyWQ4nAk3z5ck5IaDbFCyeqjikia7+iiNrMRYCGnMNPFW7WpuundCeuETIIWmGM9ksbvDm8RdbSq6JVH/AOdHC2RslZBcxzu7LvAHgsPaGzK2OjgqGtx7Rhbglcw5SN49k95NseDdPlhbfaZ5ZITKWU+GmGAMDuy2xADt7eKm6StlqJnxtfC2OGSnET3E9exrQCcB3WKh2rLUU9PHW9Q76wWhtTCAXxO45AcVBtKvbTRxV0sJMdVGzrIXjtwPA3h36JsN7Z9JqipnfHHAy8dPNA57sYDH7i/Gz4ld0o2m9sn1amjkAjmhEojZaGbFYvxuG4C+5a2urYoC2pkL/q9UxjmOaS2SMgfENLLIfVGOoLzKWQ1IjfFKCCxxsBY31yTZPk+pHhN0k2tFRvhp4AA51REyoa1pMjg8fC45Cym2pXx0T46aJ/3k4ZO4vLpYnvFxZnmM1FHUytqJo/sxic2RuNtw8WFy12uSgMGKonkdTxPcZcTXvAMrTYZgqNuSfqYt8dpuo3QUhlfJNUyYY3PNmRki7Wk77kZ2WVQbdqaWrZS1oBbOSIZhuLvluuTr2U080rpYZnSsewteyR7Szs9mwBy45q+HYn1kta6sqWNY4SxiVwcGObmCMQuqzuj9q0ZY/wAub11F55sLpTLFXsoppnVDZmtMcpiZFgzItlm4HUr0NVjK2kxQiIrIEREBERAREQEREBYO0H4i2Eb35vPyxjf67llzSBjS45BoJK19MDnI7vyWJHys+Fv86q0eVM57MttgABuAsByS6ixIJEpFpCVaSqXVCULCVYSqkqwlSrMqOKjcVVxUTirQpMrJNxHA7xvCw6mJj24Hta5m/C4Ai6yXuUEhV4ZZS1u09lQVEXUyxNcwWLQR3baLX7a6OU9VDHE/G0REdXgNrAcDyW6eVC8q1Mt0x0c/0g6NiqihaJ3xPgIs4C+IacisfpHsmombA+CVrHxub1gNwXtFs+ZXQuKikKttiVPqzFOe6R09UGxT0jQZR2JgCASOBN94WdUAnq2kdpjQZDo87wtgJAxrpDuYMubuAVayjMVNCXfeTOdI/XPcFXP9NtNK9SYiezmWSYdtUR0ZH+2V7UvCK6TDtalOjI//AKL3dcGHvy/t6s+3EREWqgiIgIiICIiAiKGrnEbC7TIDVx3BETNMStf1kgj+FlnScz8Lf1Ul1iQgtGfeJxOOripWvWlMYnuveoiVeXKx4SCQSWV4kusZxVheppTdTLLlYSoGz6+quL0o3Wq4qJzkc5ROKtEKTI4qF7lVzlC5ytDOZWSFY71M5ygkIV4ZZInKF91e/wA1GX4Q55OTBfz4K8MpX01MZ6iKnAu2P7aa26w3D9Fn9Mpbviba1mk2WT0RpHMidK4faTnGb7w34R+q1/SyS9Q0aMHuubUm8nocPhtwvy8+2u6204TpHGf+a97jN2g6gFfPfSGS20Gf6TP2rr6AonXijOrGH2C4tP5M3fl7MUyIi3ZiIiAiIgIiIC09ZPjk/BEbDR0vE+Q91m7SqcDMu+7st8dfJaltgABuHueJV8I7sNXLsmxKuJQ4lXEr0ytMZdUxLGkduVGy2SjcyHZqB4IV2MKjiphE80JcretISRuihLlZnM0yBMCrXFYrnqnXKaV3JnFQuchdzUTipiFZkc9ROcEc4qNz/FWiGcytfZQugMs0VMN33k3Jo3BSY2i73d1gLj5bgs3orS3Y6of95O4kaiPgmU1CcMd2VOlp2kCwIyyGWVlx/SN96p/INHouwgYbZOPnYrh9rvvUSn8RXL3en2cB0gz2j4RD969/2M/FTQHWJn5BfP8At0/1k/8A0R+yvd+iz70NMf8ACYuPT+XJ1ZfHi2qIi6WQiIgIiICItdtmpwtEYNnPvc/Kwd4/p5qYi5Vyy2xbAqqnrHl/AXazw4nzUQcocWm7cByVcS3pwzlc2mxJiUWJMSUWSPz8laXqN7syrS9WpWZSiWyvD7rFL1TGlI3MouUMgVofdWuclEysc5ROepHlQOcrwymVcSoXKIuCsKmlbSuJ1UbnKzEdUY7eT3WjEfAKUIauMzPhpG75XY5SPhiG/wDnmuwDWCzQAAAAAMrAZBaHonCSJat4OKY4Y+Nohut4rf4wT+9Y6k86dehjWO7z+GVCwWyJsNCvP6l15JDq9/5rvnBuBxyya45eC89BvnrcrF19nEdIP7TI1Ywf8SvcuhD8Wz6bky3ovD9uf2qPCP8AZK9n+jp99nQ8sQ9CuLD5snXl8cOmREXUxEREBERBbI8NBcdwFyuWqqgvc5x3u9mDuj9VstvVf92P8z/DgFoi++a308e7j4jUudsJbquJRYlW60c9pcSYlFdHOsClFrS7eqYlBjS6mlLTFytL1ESqF6mkWvLgq41AXq0uCmkWnc4qxz+Six81QuKUix5CjNlUv5KM2KsrKpHNRVcbnmOmb3p3Au5RjfdSxsBO/IZk6ALL6LQGR8tWfjJjhB+Ru8hRlNRacMN2UQ6KJuBrWBvZaA0W3WCNkF8/cIXHT0KRyC+dx4hcr0ldpOaKeUi1+rda2q4Vu7yXY9I5QKZ9rXcWt577rkGDP0VYaS4PbMl9pk6PY32Xs30ZPvQAfLJIPdeJbUP9Yv8A9do/Jez/AEXO/oso+Wd4XBpz60/d2ZR6cfZ2aIi7GAiIgKGrqBGxzzuaN2p4AeJUy5jpJtC7sA3M95P4K2GO6aZ6uezG2tqqgucSe8Td3jp5KMPWKHq4PXXTypytlB6rjWKHqoelJ3MrGrJpOz7KHGoqmTcPNKNy/rVTGFj9YqdYFalLZOLmrS4qDEmIpRaYvVheFH1ioZFKLSK251VlwnmiLX4iqF2qsxHkr48zbhvPhxQRVgJayFn3lQ4MHJnE+l119NTCJjY2EhrGhoHDJc/0djEs0lS7uj7KEHT4iuiwjh7FYamXOnZw+FRu8/hU35fkr4XHQ+WahcDr6hSwF2gPgVlPR0x1azpZKOrjb8zyTrkP4rnGb/NbfpTLeWNvytuRoSVpgbC/IlVheXmtVJetc7/2B7OAXtP0Wu+zqm6Tk+oXhxdecn/FJ/5L2v6LndusH42H2XnaU+rH3d2cfod+iIu9zCIiDD2pV9VGXfEcmjmuCqZsTr/yTxK3PSWrL5HNG6PsD/Na5K0JauvSwqLeVxWtuyqOxiVcatIVpWtOa0uNA9QpdKTafGseeS7vAWVcdlgl98+JzSIRMsnGU6xY+LmmNSrbIxhMXNQY0uELT4imNQ4uaY0TabEEuoesS4QtPiKpUPdgDGj7SdwYy2nEqyMEkC+/8ln9H4utqH1Fvs4fsotMXEquU1Fr4Y7pp0FFCyKNkQ3MaBmLXPFTYB/0qdZrfzCphb/0bLlenEdgt0J881kRYuR9isXCb5E+eayoy4DgbaZKMlsOrlNuy4qmQ/KAPQLWzmzH8mO/JTVMmJ8jtXH81g7XdannOkblWeULRzl5vSi7wfxX917P9GjrVVW3VkTvZeO7OZmPJeu/R4620JhrTxleXpT6kPQ1PbL0pERek5BERBx3SCifHK+TA58MhxXZcujdxBGi1DZInbn2Ojha3iV6QsWq2dDL342O5lov671vjrTEVLi1ODjKbiXBmnPCxH4TdROjtv8AddZP0ThObDJGfwuJHoVgTdHalvckY8aPFitY1sZc2XCakdHPlitLVsailmZ95Tu/zR5j2WJ1sRNsRadHiy0jKJc+Wnlj1Yc+7xWIRyWzmgJPZLSORWM+EjeCrQzm2HhVM1kmNWGNTSLQYimMK8sVpaoTZiTEVYWqlihaXGqYgorlVZmQNShaeR5bH2c5JSI4xzOS7DZtH1ELIhY4RmdxLjvPque2BTCaoMn93TjCznIePkupsdfVc+rl2ehwuFRuVx6g+WYVC5p088lTGdPRUc8cfcLJ1KsZnkT5KWqeWRPdcZNO8KGFgJy9isfb7y2ndme0Q1VyWw6OWB3cytZ0nfaklPgFshvA8Vo+mDrUw/FIAVTVmsJX0+eUOc2THmvTOgrrbSH46YW8l57shmS7volJh2nTH5qdwXl6c+pDvz9svV0VA66qvUcYiIgIiICIiAsLaFLE5jjJGx2XFous1RVVOJGlrr2OhsQeSImLcdN0ahdm3HG7WNxsPIrDl2FUs+7nY8cGytwn/cMvZdPJsmVvcluNJBw8QoHiZnfiJGebDi9lpGrlHdhlw2nl2/xyc0c7PvaUkfNEcQ8cs1jCaF2WJzDo8WXYtrWbiS06OBaVdLTxyDtNY4cwCtY4ie7ny4GJ6S5D6tfuua4ciFE+AjeCuin6OwOzaHMOrCR7LDk2HMz7uYEcGyD9VpGvjLny4POOjSOjUZiWymhqGd+DENYzcnyWIaqG9nYozo8EZrWMolz5aeWPVimMqjyWMc+3ad2Ixq45LP6lpzD22UuzqXrahr7Xig7v4pP4KMsoiDDCcppudkUbYYWR5YgLvO4l5zKzMOhP5hWmQHf7hA0cPYrknm9aIiIqF1zyPsrXSag/mljr6q0uOnooSlgDTp+S1XSh9hGy5zu4g6Lbxubx9wuZ29IDUEDc0Aee8qs9WkdGATmeQXN9NHHBA3gXEnyC6InI+i5vpfTvfJFha4ta0k4RexWWv7JpfR98Itls7IXSUEuCsonfhLVodniwAORtucCF0mzqF01RSYBdsV3PcO6OV9V5uGM745O3KYp6bRVNwtgw3WDQ0mEBZ7RZeo5FUREBERAREQEREBERBFLTseLOa0+IBWDLsOIm7cTDe92OIz8Ny2aINFJsqdvcka8Z5Stsf9zf3LGkdKz7yF4HzR2kb7ZhdMlkKcuyrY7IOF9D2T7qs0DHjtNa4cwCugno4395jT4gX9VgSbCZ8DnMPI3HoVNomHPP6P097iMN5NJA9FktpsIDWhuEbgBhss+TZs7dxa8c8isZ7nt78bxzHaCnfLP6WMdIQG43gj3VlgdPyWSyoY7c4X0OR91c6MHgp3E6bEseBPnmqtJvuB8MlMYBwJRrCND7KdyuyV7ZQN4I8QuKnlxyPfqSfK+S6na9TggflYuGEeJXIE2HsOarC+S47h4qSkjdJI6wyBw+m9ZmzdiS1FsiyPLP4j+5dvsjYUcDQAPNRMpxhqNm7CDh22g+IBXSUOzmRABrQBoAAstrANyuULiIiAiIgIiICIiAiIgIiICIiAiIgIiICoQqogxajZ8UneY0+Iz9VgS7AbvjkkYd9r42f7XfvW5RBzclBUs4RyDleN58jksWSqwG0jJGHm0lt+RC65WuYDvAQcLtGjmqnsZEB1bc3SOvgJOmpWz2T0TjjIc+73au3DwHBdM2IDcBbQZBXoikUUAaLAKVERIiIgIiICIiAiIgIiICIiAiIgIiICIiAiIgIiICIiAiIgIiICIiAiIgIiICIiD/2Q=="
alt=""></h2>
<div class="row">
<input type="text" id="input-box" placeholder="Add your text">
<button onclick="addTask()">ADD</button>
</div>
<div id="list-container">
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
* {
margin: 0;
padding: 0;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
box-sizing: border-box;
}
.container {
width: 100%;
min-height: 100vh;
background: linear-gradient(135deg, red, blue);
padding: 10px;
}
.todo-app {
width: 100%;
max-width: 540px;
background: #fff;
margin: 100px auto 20px;
padding: 40px 30px 70px;
border-radius: 10px;
}
.todo-app h2 {
color: #002765;
display: flex;
align-items: center;
margin-bottom: 20px;
}
.todo-app img {
width: 2rem;
margin-left: 20px;
}
.row {
display: flex;
align-items: center;
justify-content: space-between;
background: #edeef0;
border-radius: 30px;
padding-left: 20px;
margin-bottom: 25px;
}
#input-box {
flex: 1;
background: transparent;
border: none;
outline: none;
padding: 10px;
height: 2rem;
}
button {
border: none;
outline: none;
padding: 10px 50px;
color: #fff;
background: #ff5945;
font-size: 1rem;
cursor: pointer;
border-radius: 40px;
}
li {
list-style: none;
font-size: 17px;
padding: 12px 8px 2px 50px;
user-select: none;
cursor: pointer;
position: relative;
}
span {
position: absolute;
right: 0;
top: 5px;
width: 40px;
height: 40px;
font-size: 22px;
line-height: 40px;
text-align: center;
color: #555;
border-radius: 50%;
}
li span:hover{
background: #edeef0;
}
JS
const inputBox = document.getElementById("input-box");
const listContainer = document.getElementById("list-container");
function addTask() {
if (inputBox.value === "") {
alert("you must write something");
} else {
let li = document.createElement("li");
li.innerHTML = inputBox.value;
listContainer.appendChild(li);
let span = document.createElement("span");
span.innerHTML = "\u00d7";
li.appendChild(span);
saveData();
}
inputBox.value = "";
}
listContainer.addEventListener("click", function (e) {
if (e.target && e.target.nodeName === "LI") {
e.target.remove(); // Removes the clicked list item
saveData();
}
});
function saveData() {
localStorage.setItem("data", listContainer.innerHTML);
}
function showData() {
listContainer.innerHTML = localStorage.getItem("data");
}
showData();
Comments
Post a Comment