From d92cb34e9bf78643f801c658177e61b8f19b63d6 Mon Sep 17 00:00:00 2001
From: raghad-smth <143431529+raghad-smth@users.noreply.github.com>
Date: Tue, 10 Sep 2024 13:09:23 +0300
Subject: [PATCH 1/2] Light mood slider was over flowing its container,used
padding to fix it
---
modified_homepage_css.css | 2 +-
resources/style/themeToggle.css | 1 +
2 files changed, 2 insertions(+), 1 deletion(-)
diff --git a/modified_homepage_css.css b/modified_homepage_css.css
index c030e3fe..66570e6f 100644
--- a/modified_homepage_css.css
+++ b/modified_homepage_css.css
@@ -35,7 +35,7 @@ nav {
font-size: 10px;
margin-right: 21px;
}
-.theme-toggle {
+.theme-toggle{
position: relative;
display: inline-block;
width: 44px !important;
diff --git a/resources/style/themeToggle.css b/resources/style/themeToggle.css
index 6c1c86a7..0476a464 100644
--- a/resources/style/themeToggle.css
+++ b/resources/style/themeToggle.css
@@ -54,6 +54,7 @@ html[theme='dark'] {
background-color: #CCCCCC;
transition: 0.4s;
cursor: pointer;
+ padding: 0 1.8rem;
}
.slider::before {
From 37a133c6342dd8dafd3d40e9e2a66cf1292b4891 Mon Sep 17 00:00:00 2001
From: raghad-smth <143431529+raghad-smth@users.noreply.github.com>
Date: Tue, 10 Sep 2024 14:14:07 +0300
Subject: [PATCH 2/2] Enhanced the to do list app layout after noticing a
problem with the way the delete item btn were not aligned.Achived that by
using a flex box for the entir form and grid of two columns for the list.
Also enhanced the styling of the btns.
---
TO-Do list/TODO.css | 1 +
TO-Do list/TODO.html | 7 ++--
todo_list.html | 91 ++++++++++++++++++++++++++++++++++++--------
3 files changed, 79 insertions(+), 20 deletions(-)
diff --git a/TO-Do list/TODO.css b/TO-Do list/TODO.css
index 28f159aa..d74a8afd 100644
--- a/TO-Do list/TODO.css
+++ b/TO-Do list/TODO.css
@@ -24,6 +24,7 @@ h6 {
#page-title {
font-size: 6rem;
+ font-family: 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.container {
diff --git a/TO-Do list/TODO.html b/TO-Do list/TODO.html
index 41e5f18a..d0b4baec 100644
--- a/TO-Do list/TODO.html
+++ b/TO-Do list/TODO.html
@@ -9,15 +9,14 @@
-
-
+
- Hit the gym
- Pay bills
diff --git a/todo_list.html b/todo_list.html
index 298656e1..06c1920b 100644
--- a/todo_list.html
+++ b/todo_list.html
@@ -31,47 +31,98 @@
}
h1 {
- margin-top: 10rem;
+ margin-top: 3rem;
margin-bottom: 30px;
font-size: 5em;
+ font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+
}
+
.navbar{
background-color: #009999;
position: fixed;
}
-
+ .first-div{
+ display: flex;
+ flex-direction: column;
+ background-color: rgb(112, 107, 107, 0.2);
+ position:absolute;
+ top:50%;
+ left:50%;
+ transform: translate(-50%, -50%);
+ padding:3vw;
+ border-radius:10px ;
+ }
li {
+ font-size: 1.5rem;
+ font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
list-style: none;
+ line-height: 0.6rem;
}
.newBtn {
- margin: 20px;
- background-color: #e15563;
+ padding:10px;
+ font-size: medium;
+ max-width: 10rem;
+ background-color: rgb(194, 44, 44);
+ border: none;
+ }
+
+ #btn-submit{
+ transition: 0.7s;
+ box-shadow: 2px 2px 6px rgb(0, 0, 0,0.7);
}
+
+
div button{
margin-bottom: 9px;
border-radius: 10px;
-
}
#product{
font-size: 1.5rem;
margin: 10px;
+ font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+ border-radius: 50px;
+ padding:0.7rem;
+ border: 2px solid #007bff;;
}
.done {
text-decoration: line-through;
}
-
+ #list{
+ display:grid;
+ grid-template-columns: 1fr 1fr;
+ gap:1.5rem;
+ }
#reload {
- padding: 10px;
+ padding:10px 25px;
font-size: medium;
+ max-width: 15rem;
+ background-color: rgb(0, 0, 0);
+ color: white;
+ border: none;
+ align-self: center;
+ transition: 0.7s;
+ box-shadow: 2px 2px 6px rgb(0, 0, 0,0.7);
+ }
+ div button{
+ transition: 0.5s;
}
div button:hover{
color: white;
background-color: black;
border-radius: 10px;
}
-
+ .under-line{
+ background-color:black;
+ width:6rem;
+ margin-top:0;
+ box-shadow: 2px 2px 10px rgb(0, 0, 0,0.7);
+ }
+ .space{
+ padding :2rem;
+ }
@@ -123,12 +174,16 @@
To Do List
-
List :
+
+
List
+
+
+
@@ -152,21 +207,25 @@ List :
form.addEventListener("submit", (event) => {
let li = document.createElement("li");
let btn = document.createElement("button");
- let span = document.createElement("span");
+
btn.innerText = "Delete Item";
btn.classList.add("newBtn");
- li.append(product.value, btn);
+
+ li.append(product.value);
li.addEventListener('click', () => {
li.classList.toggle('done');
});
- span.append(li);
+
+
let ul = document.querySelector("#list");
- ul.append(span);
+ ul.append(li);
+ ul.append(btn);
btn.addEventListener("click", () => {
- span.remove();
+ li.remove();
+ btn.remove();
})
product.value = "";