diff --git a/app.js b/app.js
index 52ac219..a0b61c4 100644
--- a/app.js
+++ b/app.js
@@ -9,6 +9,10 @@ for (i = 0; i < myNodelist.length; i++) {
myNodelist[i].appendChild(span);
}
+
+function setFocus(){
+ document.getElementById("myInput").focus();
+}
// Click on a close button to hide the current list item
var close = document.getElementsByClassName("close");
var i;
@@ -19,6 +23,8 @@ for (i = 0; i < close.length; i++) {
}
}
+
+
// Add a "checked" symbol when clicking on a list item
var list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
@@ -26,6 +32,13 @@ list.addEventListener('click', function(ev) {
ev.target.classList.toggle('checked');
}
}, false);
+list.addEventListener('keypress', function(ev) {
+ if(ev.key==='enter'){
+ if (ev.target.tagName === 'LI') {
+ ev.target.classList.toggle('checked');
+ }
+ }
+}, false);
// Create a new list item when clicking on the "Add" button
function newElement() {
diff --git a/index.html b/index.html
index ef4f915..04e1744 100644
--- a/index.html
+++ b/index.html
@@ -1,3 +1,17 @@
+
+
+ To Do List
+
+
+
+
+
My To Do List
+
+
+ Add
+
+
+
@@ -7,7 +21,7 @@
To Do List
-
+
diff --git a/styles.css b/styles.css
index 81696dd..7233186 100644
--- a/styles.css
+++ b/styles.css
@@ -1,26 +1,11 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400&family=Outfit:wght@100;200;300;400;500;600;700;800;900&family=Poppins:wght@100;200;300;400;500;700;800;900&family=Raleway:wght@100;200;300;400;500;600;700;800;900&display=swap');
/* Include the padding and border in an element's total width and height */
* {
box-sizing: border-box;
+ padding: 0;
+ margin: 0;
+ font-family: 'Poppins',sans-serif;
-}
-body{
- background-color: #D2DAFF;
-}
-
-
-.title{
- text-align: center;
-}
-
-
-#myDIV{
-width: 50%;
-margin: 0 auto;
-border-radius: 30px 30px 0px 0px
-
-
-
-
}
#divunder{
padding-top: 10px;
@@ -34,7 +19,9 @@ border-radius: 30px 30px 0px 0px
/* Remove margins and padding from the list */
ul {
- margin: 0;
+ margin: auto;
+ max-width: 1000px;
+ list-style-type: none;
padding: 0;
}
@@ -42,6 +29,7 @@ ul {
ul li {
cursor: pointer;
position: relative;
+
padding: 12px 8px 12px 40px;
background: #eee;
font-size: 18px;
@@ -100,10 +88,21 @@ ul li.checked::before {
/* Style the header */
.header {
- background-color:#FFE3E1;
- padding: 30px 40px;
+ background: linear-gradient(90deg, rgba(149,61,203,1) 19%, rgba(203,61,95,1) 41%, rgba(255,179,0,1) 77%);;
+ padding: 50px 0px;
+
color: white;
text-align: center;
+ padding-bottom:70px ;
+}
+
+.header h2{
+ padding: 20px 0;
+}
+
+div .button{
+ margin:auto;
+ max-width: 1000px;
}
/* Clear floats after the header */
@@ -114,16 +113,20 @@ ul li.checked::before {
}
/* Style the input */
-#myInput {
- margin-left: 150px ;
+input {
+
border: none;
border-radius: 0;
width: 45%;
padding: 10px;
float: left;
font-size: 16px;
+ autofocus:true;
+}
+input:focus{
+ outline: none;
+
}
-
/* Style the "Add" button */
.addBtn {
padding: 10px;