Add files via upload

Signed-off-by: SuramyaRanjan <[email protected]>
SuramyaRanjan · Apr 13, 2024 · 7eac99e · 7eac99e
1 parent 7a9581d
commit 7eac99e
Showing 1 changed file with 218 additions and 0 deletions.
diff --git a/toDo.html b/toDo.html
@@ -0,0 +1,218 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>Order Of The Day</title>
+<script type="text/javascript"></script>
+<style>
+    *{
+        margin: 0;
+        padding: 0;
+        font-family:Georgia, 'Times New Roman', Times, serif;
+        box-sizing:border-box;
+    }
+    body {
+        background-image: url('https://tse1.mm.bing.net/th?id=OIP.VxIWIX4oJq5ksyIE7LvgowHaEK&pid=Api&P=0&h=180your-background-image-url.jpg');
+        background-size: cover;
+        background-position: center;
+        min-height: 100vh;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+    .container{
+        width: 100%;
+        min-height: 51vh;
+        padding: 10px;
+    }
+    .order{
+        width: 100%;
+        max-width: 540px;
+        background: wheat;
+        margin: 100px auto 20px;
+        padding: 40px 30px 70px;
+        border-radius: 10px;
+        height: 800px;
+    }
+    .order h2{
+        color: rgb(16, 16, 16);
+        display: flex;
+        align-items: center;
+        margin-bottom: 20px;
+    }
+    .order h2 img{
+        width: 30px;
+        margin-left: 10px ;
+    }
+    .row{
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        background: yellow;
+        padding-left: 20px;
+        border-radius:20px ;
+        margin-bottom: 25px;
+    }
+    .row:hover {
+        transform: scale(1.1);
+    }
+    input{
+        flex: 1;
+        border: none;
+        outline: none;
+        background: transparent;
+        padding: 10px;
+        font-weight: 14px;
+    }
+    button{
+        border: none;
+        outline: none;
+        padding: 16px 50px;
+        background: rgb(42, 212, 235);
+        color: black;
+        font-style: italic;
+        font-size: 16px;
+        cursor: pointer;
+        border-radius: 40px;
+    }
+    ul li{
+        list-style: none;
+        font-size: 18px;
+        padding: 12px 8px 12px 50px;
+        user-select: none;
+        cursor: pointer;
+        position: relative;
+        word-wrap:break-word;
+    }
+    ul li::before{
+        content: '';
+        position: absolute;
+        height: 28px;
+        width: 28px;
+        border-radius: 50%;
+        background-image: url('https://tse2.mm.bing.net/th?id=OIP.E0ARCTB6x8_BpUNT8XauOwHaHa&pid=Api&P=0&h=180');
+        background-size: cover;
+        background-position: center;
+        top:12px ;
+        left: 8px;
+    }
+    ul li.checked{
+        text-decoration: line-through;
+
+    }
+    ul li.checked::before{
+        background-image:url('https://tse3.mm.bing.net/th?id=OIP.ywAmzmSd5clHmaa0lijuBgHaHa&pid=Api&P=0&h=180');
+    }
+    ul li span{
+        position: absolute;
+        right: 0;
+        top: 5px;
+        width: 40px;
+        height: 40px;
+        font-size: 22px;
+        color: rgb(40, 39, 39);
+        line-height: 40px;
+        text-align: center;
+        border-radius: 50%;
+    }
+    ul line span:hover{
+        background: #edeef0;
+    }
+    ul li:hover {
+        background-color: rgba(0, 0, 0, 0.1);
+    }
+    @media screen and (max-width: 600px) {
+        .order {
+            padding: 10px;
+        }
+        .order h2 {
+            font-size: 18px;
+        }
+        .row {
+            padding-left: 10px;
+        }
+        .row input {
+            font-size: 12px;
+        }
+        .row button {
+            padding: 8px 16px;
+            font-size: 12px;
+        }
+        ul li {
+            font-size: 14px;
+        }
+        ul li::before {
+            height: 16px;
+            width: 16px;
+            top: 6px;
+            left: 3px;
+        }
+        ul li span {
+            width: 16px;
+            height: 16px;
+            font-size: 12px;
+            line-height: 16px;
+        }
+    }
+
+</style>
+</head>
+<body>
+    <div class="container">
+        <div class="order">
+            <h2>To-Do-List <img src="https://tse2.mm.bing.net/th?id=OIP.LizUYCSvTIjLQCJMz_YYbgHaHa&pid=Api&P=0&h=180" alt=""></h2>
+
+<div class="row">
+    <input type="text" id="input-box" placeholder="Add Your Text">
+    <button onclick="addTask()" >Add</button>
+</div>
+<ul id="list-container">
+
+</ul>
+
+        </div>
+
+    </div>
+
+<script>
+    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);
+        }
+        inputBox.value = "";
+        saveData();
+    }
+
+    listContainer.addEventListener("click", function(e) {
+        if (e.target.tagName === "LI") {
+            e.target.classList.toggle("checked");
+            saveData();
+        } else if (e.target.tagName === "SPAN") {
+            e.target.parentElement.remove();
+            saveData();
+        }
+    }, false);
+    function saveData()
+    {
+        localStorage.setItem("data",listContainer.innerHTML);
+    }
+function showTask(){
+    listContainer.innerHTML=localStorage.getItem("data");
+}
+showTask();
+
+
+    </script>
+
+</body>
+</html>