From b5f28f3626b5e19bea3de32c90addd50442eb8d2 Mon Sep 17 00:00:00 2001
From: HassanShanJava <hassanshan675@gmail.com>
Date: Fri, 7 Oct 2022 23:38:04 +0500
Subject: [PATCH] many changes commited

---
 app.js     | 13 +++++++++++++
 index.html |  8 +++++---
 styles.css | 30 +++++++++++++++++++++++++-----
 3 files changed, 43 insertions(+), 8 deletions(-)
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 d7fa301..cd7a628 100644
--- a/index.html
+++ b/index.html
@@ -4,10 +4,12 @@
     <link rel="stylesheet" href="./styles.css" type="text/css" />
   </head>
   <body>
-    <div id="myDIV" class="header">
+    <div id="myDIV" class="header" onchange="newElement()">
       <h2>My To Do List</h2>
-      <input type="text" id="myInput" placeholder="Title..." />
-      <span onclick="newElement()" class="addBtn">Add</span>
+      <div class="button">
+        <input type="text" id="myInput" placeholder="Title..." />
+      <span class="addBtn">Add</span>
+      </div>
     </div>
 
     <ul id="myUL">
diff --git a/styles.css b/styles.css
index c520494..1104074 100644
--- a/styles.css
+++ b/styles.css
@@ -1,11 +1,17 @@
+@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;
 }
 
 /* Remove margins and padding from the list */
 ul {
-  margin: 0;
+  margin: auto;
+  max-width: 1000px;
+  list-style-type: none;
   padding: 0;
 }
 
@@ -13,6 +19,7 @@ ul {
 ul li {
   cursor: pointer;
   position: relative;
+
   padding: 12px 8px 12px 40px;
   background: #eee;
   font-size: 18px;
@@ -71,10 +78,20 @@ ul li.checked::before {
 
 /* Style the header */
 .header {
-  background-color: #63ae35;
-  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 */
@@ -86,15 +103,18 @@ ul li.checked::before {
 
 /* Style the input */
 input {
-  margin: 0;
   border: none;
   border-radius: 0;
   width: 75%;
   padding: 10px;
   float: left;
   font-size: 16px;
+  autofocus:true;
+}
+input:focus{
+  outline: none;
+  
 }
-
 /* Style the "Add" button */
 .addBtn {
   padding: 10px;
