From d9a766b0c58feea0c50762078cb379f23c7a2386 Mon Sep 17 00:00:00 2001 From: Kaitlyn Date: Sat, 8 Mar 2025 23:35:17 -0500 Subject: [PATCH] Kaitlyns To Do List --- css/style.css | 129 ++++++++++++++++++++++++++++++++++++++++++++++++ html/index.html | 33 +++++++++++++ js/main1.js | 48 ++++++++++++++++++ 3 files changed, 210 insertions(+) create mode 100644 css/style.css create mode 100644 html/index.html create mode 100644 js/main1.js diff --git a/css/style.css b/css/style.css new file mode 100644 index 00000000..e988e8a2 --- /dev/null +++ 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{ + +} \ No newline at end of file diff --git a/html/index.html b/html/index.html new file mode 100644 index 00000000..6fa51231 --- /dev/null +++ b/html/index.html @@ -0,0 +1,33 @@ + + + + + + + TO-DO-LIST + + + +
+

To-Do List

+ +
+
+ +
+ + +
+

Let's get it done!

+
+ +
+
+
+ + +
+ + + \ No newline at end of file diff --git a/js/main1.js b/js/main1.js new file mode 100644 index 00000000..76f715aa --- /dev/null +++ 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() { + + }