diff --git a/Contact manager app/index.html b/Contact manager app/index.html index b16916d..e7381f8 100644 --- a/Contact manager app/index.html +++ b/Contact manager app/index.html @@ -37,7 +37,7 @@ - + diff --git a/Contact manager app/style.css b/Contact manager app/style.css index 9b5d42e..39ee0dd 100644 --- a/Contact manager app/style.css +++ b/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; } diff --git a/Todo-app/index.html b/Todo-app/index.html index a2d1385..6b65bb0 100644 --- a/Todo-app/index.html +++ b/Todo-app/index.html @@ -37,15 +37,17 @@
+

My Todo

- Type in the below field 👇 and press enter to add your todo in the list + Press enter to add your todo in the list

- -
+ + +
diff --git a/Todo-app/script.js b/Todo-app/script.js index 08e4b7e..8c58991 100644 --- a/Todo-app/script.js +++ b/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) { diff --git a/Todo-app/style.css b/Todo-app/style.css index e2de747..d663f3d 100644 --- a/Todo-app/style.css +++ 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; +} \ No newline at end of file