Resilient-Labs · KaityCommits · Mar 9, 2025
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,129 @@
+*{
+    margin: 0;
+    padding: 0;
+    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+    box-sizing: border-box;
+}
+
+body {
+    background-image: url(https://media.giphy.com/media/ccq0VVN7nBThsRrMFd/giphy.gif?cid=ecf05e47cxkzstu3fk4o2fo4fi8v8db1xfetwyjc14ur5tj2&ep=v1_gifs_related&rid=giphy.gif&ct=g://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExYzNqMWtvMHY5YmN1bWIwbzVmMWx3bWRvOXprdWs2ajZuNTR6aTZnciZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/QSGAndw5onj51I5A0a/giphy.gif);
+    background-size: cover;
+    height: 100vh;
+}
+
+.container{
+    height: 30rem;
+    width: 70%;
+    max-width: 555px;
+    background: rgb(228, 195, 151);
+    padding: 40px 30px 40px;
+    margin: 100px auto 20px;
+    border-radius: 20px;
+}
+
+h1{
+    display: flex;
+    color: white;
+    align-items: center;
+    /* margin: 20px; */
+    justify-content: center;
+    font-size: 40px;
+    border-bottom: 7px dotted white;
+    width: 45%;
+    width: 50%;
+    margin-left: 111px;
+    padding: 0 0 10px;
+}
+
+h1 svg{
+    height: 40px;
+    width: 50px;
+}
+
+h4{
+    color: rgba(156, 120, 73, 0.877);
+    font-size: 22px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0 0 10px 0;
+    margin-left: 128px;
+    border-bottom: 7px dotted rgba(185, 146, 95, 0.877);
+    width: 44%;
+}
+
+.row input{
+    display: flex;
+    flex: 1;
+    align-items: center;
+    border-radius: 30px;
+    justify-content: space-between;
+    margin: 33px 0 15px 25px;
+    border: 2px solid tan;
+    font-size: 20px;
+    /* width: 90%; */
+    padding: 10px
+
+}
+
+/* .row input {
+    flex: 1;
+    border: 1px solid tan;
+} */
+
+form .row{   /* keep or delete? */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.row .button{
+    display: flex;
+    border: 1px solid tan;
+    background: rgba(185, 146, 95, 0.877);
+    padding: 16px 30px;
+    color: white;
+    font-size: 15px;
+    cursor: pointer;
+    border-radius: 30px;
+    align-items: center;
+}
+
+ol {
+    font-size: 20px;
+    padding: 12px 8px 12px 50px;
+    cursor: pointer;
+    color: white;
+    /* border-bottom: 2px dotted rgb(134, 106, 69); */
+    /* position: relative; */
+}
+
+ul::before{
+    content: "";
+    /* position: absolute; */
+    height: 28px;
+    width: 20%;
+    border-radius: 45%;
+    background-image: url();
+
+}
+
+button{
+    border: 1px solid tan;
+    background: rgba(185, 146, 95, 0.877);
+    padding: 16px 30px;
+    color: rgb(236, 224, 208);
+    font-size: 15px;
+    cursor: pointer;
+    border-radius: 30px;
+    align-items: center;
+    margin: 0 31px;
+
+}
+
+button:hover{
+    background-color: tan;
+}
+
+#error{
+
+}
diff --git a/html/index.html b/html/index.html
@@ -0,0 +1,33 @@
+<!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="css/style.css">
+    <title>TO-DO-LIST</title>
+</head>
+<body>
+
+    <main class="container">
+        <h1>To-Do List <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="#f5f5f4" d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1 0 32c0 8.8 7.2 16 16 16l32 0zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"/></svg></h1>
+
+        <form id="form">
+                <div id="error"></div>
+
+            <div class="row">
+            <input id="type" type="text" placeholder="What's your task?">
+            <input class="button" type="submit" value="Add to List!"> <!-- id="add">Add</button> -->
+            </div>
+            <h4>Let's get it done!</h4>
+         </form>
+
+            <div>
+            <ol id="list"><i class="fa-regular fa-circle" style="color: #b19359;"></i></ol>
+            </div>
+
+        <!-- <button id="complete">Complete List</button>
+        <button id="new">New List</button> -->
+    </main>
+    <script type="text/javascript" src="js/main1.js"></script>
+</body>
+</html>
diff --git a/js/main1.js b/js/main1.js
@@ -0,0 +1,48 @@
+// Type in things to do 
+    // add a form with an input and button in the HTML
+    // submit to list
+    //create an ol put an empty tags in list
+    // display in the list with numbers
+    // check completed items done or trashed (HOW????)
+    // button to complete list
+    // button to clear
+    // document.querySelector("#complete").addEventListener("click", done)
+    // function done(){
+
+    const form = document.querySelector("#form");
+    const type = document.querySelector("#type"); //Type in the items
+    const add = document.querySelector("#add"); //button
+    const list = document.querySelector("#list");
+    const completeList = document.querySelector("#complete");
+    const newList = document.querySelector("#new");
+
+form.addEventListener("submit", addToList);
+
+    function addToList(e){
+        e.preventDefault();
+
+        console.log(type.value) //tried to add an error msg but its not working :(
+        if(addToList.value === ""){
+            msg.classList.add('error');
+            msg.innerHTML = 'Please enter an item.';
+
+            setTimeout(() => msg.remove(), 2000);
+        }else {
+            const li = document.createElement("li");
+            li.appendChild(document.createTextNode(`${type.value}`));
+            //this is how to add an item into the ol
+            list.appendChild(li);
+
+            //in order to clear
+            document.querySelector('#type').value = ''
+        }
+    }
+    //add event that draws a line through finished task
+document.querySelector('ol').addEventListener("click", crossOut)
+
+
+document.querySelector("#complete").addEventListener("click", done)
+
+    function done() {
+
+    }