diff --git a/dom_manipulation/button.html b/dom_manipulation/button.html index 790c6e8..7cc9c17 100644 --- a/dom_manipulation/button.html +++ b/dom_manipulation/button.html @@ -1,16 +1,73 @@ - JavaScript Button Example - - - - - - + + JavaScript Button Example + + + + + + + + + diff --git a/html_css/bg.jpg b/html_css/bg.jpg new file mode 100644 index 0000000..a6fca8b Binary files /dev/null and b/html_css/bg.jpg differ diff --git a/html_css/index.js b/html_css/index.js new file mode 100644 index 0000000..47ebb41 --- /dev/null +++ b/html_css/index.js @@ -0,0 +1,44 @@ +const input = document.getElementById("input-box"); +const shoppingList = document.getElementById("ul"); +const shoppingListButton = document.getElementById("but1"); +const recipe = document.getElementById("ol"); +const recipeButton = document.getElementById("but2"); + +shoppingListButton.addEventListener("click", function () { + if (!input.value == "") { + let li = document.createElement("li"); + let text = document.createTextNode(input.value); + + li.appendChild(text); + li.classList.add("list-item"); + shoppingList.appendChild(li); + + input.value = ""; + + eventListners(); + } +}); + +recipeButton.addEventListener("click", function () { + if (!input.value == "") { + const li = document.createElement("li"); + const text = document.createTextNode(input.value); + + li.appendChild(text); + li.classList.add("list-item"); + recipe.appendChild(li); + + input.value = ""; + + eventListners(); + } +}); + +function eventListners() { + listItems = document.querySelectorAll(".list-item"); + listItems.forEach((e) => { + e.addEventListener("click", function () { + e.remove(); + }); + }); +} diff --git a/html_css/style.css b/html_css/style.css new file mode 100644 index 0000000..ae2062f --- /dev/null +++ b/html_css/style.css @@ -0,0 +1,224 @@ +/* Variable Declaration */ +:root { + --body-height: 75vh; + --body-width: 80vw; +} + +/* General Styles */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + background-color: rgba(0, 0, 0, 0.15); + width: 100vw; + height: auto; + display: flex; + flex-direction: column; + align-items: center; +} + +/* Header Styles */ + +header { + display: grid; + place-items: center; + width: 100%; + height: calc(100vh - 10vh - var(--body-height)); + color: white; + font-family: "Ubuntu", sans-serif; + font-size: 2.5rem; +} + +#title { + animation: 1s ease-out 0s 1 fade-in; +} + +@keyframes fade-in { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + +/* Input Box Styling */ + +.insert-new-item { + width: 100vw; + height: 10vh; + display: flex; + justify-content: center; + align-items: center; +} + +form { + height: 100%; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +input { + padding-left: 20px; + padding-right: 20px; + font-family: "Roboto", sans-serif; + font-size: 1.15rem; + color: rgb(49, 49, 49); + width: 35vw; + height: 60px; + background-color: rgba(75, 88, 95, 0.6); + border: 3px solid rgb(98, 98, 98); + border-radius: 50px; + transition: 0.5s ease; +} + +input:focus { + border: 5px solid rgb(98, 98, 98); + background-color: rgba(96, 108, 114, 0.6); + outline: none; +} + +.buttons { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-around; +} + +button { + font-size: 17px; + color: #3a3a3a; + width: 30%; + outline: 3px solid rgb(98, 98, 98); + border-radius: 10px; + padding: 10px 20px 10px 20px; + background-color: rgba(75, 88, 95, 0.6); + border: none; + transition: 0.5s ease; +} + +button:hover { + outline: 5px solid rgb(98, 98, 98); + background-color: rgba(96, 108, 114, 0.6); +} + +/* Card Setup Styles */ + +.cards { + font-family: "Roboto", sans-serif; + width: 80vw; + height: var(--body-height); + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; +} + +@keyframes fade-in-move { + 0% { + opacity: 0; + transform: translateX(5%); + } + 100% { + opacity: 1; + transform: translateX(0); + } +} + +#card1 { + animation: 1s ease-out 0s 1 fade-in-move; +} + +#card2 { + animation: 1s ease-out 0.2s 1 fade-in-move; +} + +#card3 { + animation: 1s ease-out 0.4s 1 fade-in-move; +} + +.card { + padding: 20px; + border-radius: 10px; + outline: 2px solid rgba(71, 71, 71, 0.45); + height: 60vh; + background-color: rgba(75, 88, 95, 0.6); + width: calc(var(--body-width) / 3 - 2.5vw); + transition: 0.5s ease; +} + +.card:hover { + outline: 4px solid rgba(71, 71, 71, 0.45); +} + +.heading { + font-size: 2rem; + color: white; + padding-bottom: 5%; +} + +p { + padding-bottom: 5%; +} + +ul, +ol, +dl, +p { + color: rgb(193, 193, 193); + font-size: 1.1rem; +} + +li, +p { + line-height: 1.5; +} + +li, +.item { + transition: 0.2s; +} + +li:hover, +.item:hover { + color: white; + cursor: default; +} + +/* Description list styles */ + +dd, +dt { + line-height: 1.5; +} + +dt { + font-weight: bold; +} + +/* Media Queries for Smaller devices */ +@media (max-width: 1050px) { + button { + width: 45%; + } + input { + width: 60vw; + } + main { + padding-top: 5vh; + } + .cards { + width: 80vw; + height: auto; + flex-direction: column !important; + } + .card { + margin-top: 3vh; + width: 100%; + height: auto; + } +} diff --git a/html_css/styling-lists.html b/html_css/styling-lists.html index 5efcc09..0c252ae 100644 --- a/html_css/styling-lists.html +++ b/html_css/styling-lists.html @@ -1,100 +1,103 @@ - - - - Styling lists - - - -

Shopping (unordered) list

- -

Paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference.

- - - -

Recipe (ordered) list

- -

Paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference.

- -
    -
  1. Toast pitta, leave to cool, then slice down the edge.
    2. -
  2. Fry the halloumi in a shallow, non-stick pan, until browned on both sides.
    3. -
  3. Wash and chop the salad.
    4. -
  4. Fill pitta with salad, humous, and fried halloumi.
    5. -
- -

Ingredient description list

- -

Paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference.

- -
-
Humous
-
A thick dip/sauce generally made from chick peas blended with tahini, lemon juice, salt, garlic, and other ingredients.
-
Pitta
-
A soft, slightly leavened flatbread.
-
Halloumi
-
A semi-hard, unripened, brined cheese with a higher-than-usual melting point, usually made from goat/sheep milk.
-
Green salad
-
That green healthy stuff that many of us just use to garnish kebabs.
-
- - - - \ No newline at end of file + + + + Styling lists + + + + + + + + +
+

List Demonstration

+
+
+
+ +
+ + +
+
+
+
+
+
+
+

Shopping (unordered) list

+ +

+ Paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for + reference, paragraph for reference. +

+ +
    +
  • Humous
    • +
  • Pitta
    • +
  • Green salad
    • +
  • Halloumi
    • +
+
+
+
+
+

Recipe (ordered) list

+ +

+ Paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for + reference, paragraph for reference. +

+ +
    +
  1. Toast pitta, leave to cool, then slice down the edge.
    2. +
  2. Fry the halloumi in a shallow, non-stick pan, until browned on both sides.
    3. +
  3. Wash and chop the salad.
    4. +
  4. Fill pitta with salad, humous, and fried halloumi.
    5. +
+
+
+
+
+

Ingredient description list

+ +
+
+
Humous
+
+ A thick dip/sauce generally made from chick peas blended with tahini, lemon juice, salt, garlic, and other + ingredients. +
+
+
+
Pitta
+
A soft, slightly leavened flatbread.
+
+
+
Halloumi
+
+ A semi-hard, unripened, brined cheese with a higher-than-usual melting point, usually made from goat/sheep milk. +
+
+
+
Green salad
+
That green healthy stuff that many of us just use to garnish kebabs.
+
+
+
+
+
+
+ + +