Added an additional button

Contact manager app/index.html

@@ -37,7 +37,7 @@
                     <i class="far fa-image"></i>
                     <input type="url" required id="imgurl" placeholder="Enter image url" />
                 </div>
-                <button type="submit" class="submitbtn"></button>
+                <button type="submit" class="submitbtn">Submit</button>
             </form>
         </div>
     </main>

Contact manager app/style.css

@@ -112,6 +112,8 @@ form {
   margin-top: 15%;
   margin-left: 7%;
   position: fixed;
+  display: flex;
+  flex-direction: column;
 }
 
 .name,
@@ -146,5 +148,18 @@ input[type="tel"] {
 }
 
 .submitbtn {
-  display: none;
+  padding: 12px 24px;
+  margin-right: 50%;
+  margin-left: 25%;
+  font-size: 1rem;
+  background-color: #007bff;
+  color: #fff;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+.submitbtn:hover {
+  background-color: #0056b3;
 }

Todo-app/index.html

@@ -37,15 +37,17 @@
     <div class="container">
         <ul class="todo-list js-todo-list"></ul>
         <div class="empty-state">
+            <!-- <h1 class="app-title">My Todo</h1> -->
             <h1 class="app-title">My Todo</h1>
             <i class="fas fa-tasks icon"></i>
             <p class="empty-state__description">
-                Type in the below field 👇 and press enter to add your todo in the list
+                Press enter to add your todo in the list
             </p>
         </div>
         <form class="formselect">
-            <input autofocus type="text" class="inputselect" placeholder="Eg: Workout">
-        </form>
+            <input autofocus type="text" class="inputselect" placeholder="Enter the activities you want to do (Eg. Workout)">
+            <button type="submit" class="btn">Add</button>
+        </form>   
     </div>
 
     <script src="https://kit.fontawesome.com/dd8c49730d.js" crossorigin="anonymous"></script>

Todo-app/script.js

@@ -40,9 +40,6 @@ function renderTodo(todo) {
   } else {
     list.append(newlist);
   }
-
-  /* // disabled this after fixing a selection bug
-                list.append(newlist); */
 }
 
 // function for adding a todo
@@ -58,11 +55,6 @@ function myFunction(x) {
   demoarray.push(todoobject);
 
   renderTodo(todoobject);
-  console.log(demoarray);
-
-  /* disabled this because updated it show in list  */
-  /* // print demoarray in console
-                console.log(demoarray); */
 }
 
 function toggleDone(b) {

Todo-app/style.css

@@ -111,13 +111,16 @@ color: var(--color);
 
 .container {
 width: 100%;
-max-width: 700px;
+max-width: 800px;
 margin: 0 auto;
 padding-left: 10px;
 padding-right: 10px;
 color: var(--color);
 margin: auto;
 padding-top: 4rem;
+display: flex;
+flex-direction: column;
+justify-content: center;
 }
 
 .app-title {
@@ -228,6 +231,7 @@ margin-bottom: 20px;
 .empty-state__title,
 .empty-state__description {
 /* margin-bottom: 20px; */
+flex-shrink: 0;
 font-size: 25px;
 text-align: center;
 margin: 2rem;
@@ -264,3 +268,30 @@ em {
 display: none;
 }
 }
+
+
+.btn {
+    position: relative; 
+    margin-left: 10px; 
+    margin-top: 0.3rem;
+    padding: 10px 30px;
+    font-size: 1.2rem;
+    background-color: #007bff; 
+    color: #fff; 
+    border: 2px solid #007bff; 
+    border-radius: 6px; 
+    cursor: pointer;
+    transition: all 0.3s ease; 
+}
+
+form {
+    display: flex;
+    align-items: flex-end;
+}
+
+input[type="text"] {
+
+    padding: 10px;
+    border-radius: 4px;
+    border: 3px solid #333;
+}