diff --git a/css/styles.css b/css/styles.css new file mode 100644 index 00000000..1f9c69b8 --- /dev/null +++ b/css/styles.css @@ -0,0 +1,96 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Arial', sans-serif; + background-color: #f5f5f5; + color: #333; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; +} + +section { + background-color: #fff; + padding: 20px; + border-radius: 8px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + width: 100%; + max-width: 400px; + text-align: center; +} + +h1 { + font-size: 24px; + margin-bottom: 20px; + color: #333; +} + +input { + width: 80%; + padding: 10px; + margin-bottom: 10px; + border: 1px solid #ddd; + border-radius: 4px; + font-size: 16px; +} + +button { + padding: 10px 20px; + border: none; + border-radius: 4px; + font-size: 16px; + cursor: pointer; + margin: 5px; +} + + +#submit { + background-color: #4CAF50; + color: white; +} + +#submit:hover { + background-color: #45a049; +} + +#clear { + background-color: #f44336; + color: white; +} + +#clear:hover { + background-color: #e53935; +} + +#toDoList { + list-style-type: none; + padding: 0; + margin-top: 20px; +} + +#toDoList li { + background-color: #f9f9f9; + padding: 12px; + margin: 8px 0; + border-radius: 4px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + display: flex; + justify-content: space-between; + align-items: center; +} + +#toDoList li:hover { + background-color: #e9e9e9; +} + +#toDoList li::before { + content: '✔'; + margin-right: 10px; + color: #4CAF50; +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 00000000..f949954f --- /dev/null +++ b/index.html @@ -0,0 +1,22 @@ + + + + + + + + +
+ + + +
+ +
+
+ + + + + diff --git a/js/main.js b/js/main.js new file mode 100644 index 00000000..ec80a022 --- /dev/null +++ b/js/main.js @@ -0,0 +1,37 @@ +// need an input and a submit button inside a form +// then i need a space where each item on the list is being added +// then i need a button that will clear the list + + //Extra (not necessary) + // if i wanna check off an item, have a line go through it using css/styling (after clicking a button) + // each list will have checkbox or trash icon to delete a particular item--> + + +// create an event listener for the submit button, which connects to a function + //the function will add whatever the person writes in the input button +//create an event listener for the clear button + //the function will delete everything + +document.querySelector('#submit').addEventListener('click', addListItem) +document.querySelector('#clear').addEventListener('click', clearList) + +function addListItem(){ + + let text = document.querySelector('#addSomething').value + + if (text !== "") { + let listItem = document.createElement('li'); + listItem.innerText = text + document.querySelector('#toDoList').appendChild(listItem); + document.querySelector('#addSomething').value = ''; + } +} + +function clearList(){ + document.querySelector('#toDoList').innerHTML = ''; +} + + +// if(document.querySelector('#listItem1').containssomething){ + // text = document.querySelector('#listItem2').innerText + // }