From b644055decd74aaa286c8a5ac091f3c8f04ec67f Mon Sep 17 00:00:00 2001 From: Chigozie Mbama Mykel <92220456+mbamamykel77@users.noreply.github.com> Date: Thu, 16 Nov 2023 00:07:39 +0100 Subject: [PATCH 1/2] added name to contributors --- Contributors.md | 1 + 1 file changed, 1 insertion(+) diff --git a/Contributors.md b/Contributors.md index a9e9ede..ca12385 100644 --- a/Contributors.md +++ b/Contributors.md @@ -5,4 +5,5 @@ 1. icodejsx 2. ogbon(Segun Amosu) 3. Solomon Eseme +4. Chigozie Mbama (Mykel) From 843b44a2b82b4783211d9e82e0b94152bace3bc3 Mon Sep 17 00:00:00 2001 From: Chigozie Mbama Mykel <92220456+mbamamykel77@users.noreply.github.com> Date: Sat, 18 Nov 2023 18:40:30 +0100 Subject: [PATCH 2/2] weeks 2 calculator and to-do list --- week-2/To-do/index.html | 35 +++ week-2/To-do/script.js | 218 +++++++++++++++++ week-2/To-do/style.css | 335 ++++++++++++++++++++++++++ week-2/calculator-task/calculator.css | 249 +++++++++++++++++++ week-2/calculator-task/calculator.js | 78 ++++++ week-2/calculator-task/index.html | 92 +++++++ 6 files changed, 1007 insertions(+) create mode 100644 week-2/To-do/index.html create mode 100644 week-2/To-do/script.js create mode 100644 week-2/To-do/style.css create mode 100644 week-2/calculator-task/calculator.css create mode 100644 week-2/calculator-task/calculator.js create mode 100644 week-2/calculator-task/index.html diff --git a/week-2/To-do/index.html b/week-2/To-do/index.html new file mode 100644 index 0000000..8f04c2e --- /dev/null +++ b/week-2/To-do/index.html @@ -0,0 +1,35 @@ + + + + + + To-Do List + + + + + + +
+ +
+

+

To-Do List

+
+ + +
+
+ +
+
+ +
+
+ + + + \ No newline at end of file diff --git a/week-2/To-do/script.js b/week-2/To-do/script.js new file mode 100644 index 0000000..551ba22 --- /dev/null +++ b/week-2/To-do/script.js @@ -0,0 +1,218 @@ +// ****** select items ********** + +const form = document.querySelector(".grocery-form"); +const alert = document.querySelector(".alert"); +const grocery = document.getElementById("grocery"); +const submitBtn = document.querySelector(".submit-btn"); +const container = document.querySelector(".grocery-container"); +const list = document.querySelector(".grocery-list"); +const clearBtn = document.querySelector(".clear-btn"); +// edit option +let editElement; +let editFlag = false; +let editID = ""; +// ****** event listeners ********** + +// submit form +form.addEventListener("submit", addItem); +// clear list +clearBtn.addEventListener("click", clearItems); +// display items onload +window.addEventListener("DOMContentLoaded", setupItems); + +// ****** functions ********** + +// add item +function addItem(e) { + e.preventDefault(); + const value = grocery.value; + const id = new Date().getTime().toString(); + + if (value !== "" && !editFlag) { + const element = document.createElement("article"); + let attr = document.createAttribute("data-id"); + attr.value = id; + element.setAttributeNode(attr); + element.classList.add("grocery-item"); + element.innerHTML = `

${value}

+
+ + + + +
+ `; + // add event listeners to both buttons; + const deleteBtn = element.querySelector(".delete-btn"); + deleteBtn.addEventListener("click", deleteItem); + const editBtn = element.querySelector(".edit-btn"); + editBtn.addEventListener("click", editItem); + + // append child + list.appendChild(element); + // display alert + displayAlert("item added to the list", "success"); + // show container + container.classList.add("show-container"); + // set local storage + addToLocalStorage(id, value); + // set back to default + setBackToDefault(); + } else if (value !== "" && editFlag) { + editElement.innerHTML = value; + displayAlert("value changed", "success"); + + // edit local storage + editLocalStorage(editID, value); + setBackToDefault(); + } else { + displayAlert("please enter value", "danger"); + } +} +// display alert +function displayAlert(text, action) { + alert.textContent = text; + alert.classList.add(`alert-${action}`); + // remove alert + setTimeout(function () { + alert.textContent = ""; + alert.classList.remove(`alert-${action}`); + }, 1000); +} + +// clear items +function clearItems() { + const items = document.querySelectorAll(".grocery-item"); + if (items.length > 0) { + items.forEach(function (item) { + list.removeChild(item); + }); + } + container.classList.remove("show-container"); + displayAlert("empty list", "danger"); + setBackToDefault(); + localStorage.removeItem("list"); +} + +// delete item + +function deleteItem(e) { + const element = e.currentTarget.parentElement.parentElement; + const id = element.dataset.id; + + list.removeChild(element); + + if (list.children.length === 0) { + container.classList.remove("show-container"); + } + displayAlert("item removed", "danger"); + + setBackToDefault(); + // remove from local storage + removeFromLocalStorage(id); +} +// edit item +function editItem(e) { + const element = e.currentTarget.parentElement.parentElement; + // set edit item + editElement = e.currentTarget.parentElement.previousElementSibling; + // set form value + grocery.value = editElement.innerHTML; + editFlag = true; + editID = element.dataset.id; + // + submitBtn.textContent = "edit"; +} +// set backt to defaults +function setBackToDefault() { + grocery.value = ""; + editFlag = false; + editID = ""; + submitBtn.textContent = "submit"; +} + +// ****** local storage ********** + +// add to local storage +function addToLocalStorage(id, value) { + const grocery = { id, value }; + let items = getLocalStorage(); + items.push(grocery); + localStorage.setItem("list", JSON.stringify(items)); +} + +function getLocalStorage() { + return localStorage.getItem("list") + ? JSON.parse(localStorage.getItem("list")) + : []; +} + +function removeFromLocalStorage(id) { + let items = getLocalStorage(); + + items = items.filter(function (item) { + if (item.id !== id) { + return item; + } + }); + + localStorage.setItem("list", JSON.stringify(items)); +} +function editLocalStorage(id, value) { + let items = getLocalStorage(); + + items = items.map(function (item) { + if (item.id === id) { + item.value = value; + } + return item; + }); + localStorage.setItem("list", JSON.stringify(items)); +} + +// SETUP LOCALSTORAGE.REMOVEITEM('LIST'); + +// ****** setup items ********** + +function setupItems() { + let items = getLocalStorage(); + + if (items.length > 0) { + items.forEach(function (item) { + createListItem(item.id, item.value); + }); + container.classList.add("show-container"); + } +} + +function createListItem(id, value) { + const element = document.createElement("article"); + let attr = document.createAttribute("data-id"); + attr.value = id; + element.setAttributeNode(attr); + element.classList.add("grocery-item"); + element.innerHTML = `

${value}

+
+ + + + +
+ `; + // add event listeners to both buttons; + const deleteBtn = element.querySelector(".delete-btn"); + deleteBtn.addEventListener("click", deleteItem); + const editBtn = element.querySelector(".edit-btn"); + editBtn.addEventListener("click", editItem); + + // append child + list.appendChild(element); +} \ No newline at end of file diff --git a/week-2/To-do/style.css b/week-2/To-do/style.css new file mode 100644 index 0000000..a0fdcf9 --- /dev/null +++ b/week-2/To-do/style.css @@ -0,0 +1,335 @@ +/* +=============== +Fonts +=============== +*/ +@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,700&display=swap"); + +/* +=============== +Variables +=============== +*/ + +:root { + /* dark shades of primary color*/ + --clr-primary-1: hsl(205, 86%, 17%); + --clr-primary-2: hsl(205, 77%, 27%); + --clr-primary-3: hsl(205, 72%, 37%); + --clr-primary-4: hsl(205, 63%, 48%); + /* primary/main color */ + --clr-primary-5: #49a6e9; + /* lighter shades of primary color */ + --clr-primary-6: hsl(205, 89%, 70%); + --clr-primary-7: hsl(205, 90%, 76%); + --clr-primary-8: hsl(205, 86%, 81%); + --clr-primary-9: hsl(205, 90%, 88%); + --clr-primary-10: hsl(205, 100%, 96%); + /* darkest grey - used for headings */ + --clr-grey-1: hsl(209, 61%, 16%); + --clr-grey-2: hsl(211, 39%, 23%); + --clr-grey-3: hsl(209, 34%, 30%); + --clr-grey-4: hsl(209, 28%, 39%); + /* grey used for paragraphs */ + --clr-grey-5: hsl(210, 22%, 49%); + --clr-grey-6: hsl(209, 23%, 60%); + --clr-grey-7: hsl(211, 27%, 70%); + --clr-grey-8: hsl(210, 31%, 80%); + --clr-grey-9: hsl(212, 33%, 89%); + --clr-grey-10: hsl(210, 36%, 96%); + --clr-white: #fff; + --clr-red-dark: hsl(360, 67%, 44%); + --clr-red-light: hsl(360, 71%, 66%); + --clr-green-dark: hsl(125, 67%, 44%); + --clr-green-light: hsl(125, 71%, 66%); + --clr-black: #222; + --ff-primary: "Roboto", sans-serif; + --ff-secondary: "Open Sans", sans-serif; + --transition: all 0.3s linear; + --spacing: 0.25rem; + --radius: 0.5rem; + --light-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); + --dark-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); + --max-width: 1170px; + --fixed-width: 620px; +} +/* +=============== +Global Styles +=============== +*/ + +*, +::after, +::before { + margin: 0; + padding: 0; + box-sizing: border-box; +} +body { + font-family: var(--ff-secondary); + background: var(--clr-grey-10); + color: var(--clr-grey-1); + line-height: 1.5; + font-size: 0.875rem; + background-color: rgb(218, 108, 218); + +} +ul { + list-style-type: none; +} +a { + text-decoration: none; +} +img:not(.logo) { + width: 100%; +} +img { + display: block; +} + +h1, +h2, +h3, +h4 { + letter-spacing: var(--spacing); + text-transform: capitalize; + line-height: 1.25; + margin-bottom: 0.75rem; + font-family: var(--ff-primary); +} +h1 { + font-size: 3rem; +} +h2 { + font-size: 2rem; +} +h3 { + font-size: 1.25rem; +} +h4 { + font-size: 0.875rem; +} +p { + margin-bottom: 1.25rem; + color: var(--clr-grey-5); +} +@media screen and (min-width: 800px) { + h1 { + font-size: 4rem; + } + h2 { + font-size: 2.5rem; + } + h3 { + font-size: 1.75rem; + } + h4 { + font-size: 1rem; + } + body { + font-size: 1rem; + } + h1, + h2, + h3, + h4 { + line-height: 1; + } +} +/* global classes */ + +.btn { + text-transform: uppercase; + background: transparent; + color: var(--clr-black); + padding: 0.375rem 0.75rem; + letter-spacing: var(--spacing); + display: inline-block; + transition: var(--transition); + font-size: 0.875rem; + border: 2px solid var(--clr-black); + cursor: pointer; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); + border-radius: var(--radius); +} +.btn:hover { + color: var(--clr-white); + background: var(--clr-black); +} +/* section */ +.section { + padding: 5rem 0; +} + +.section-center { + width: 90vw; + margin: 0 auto; + max-width: 35rem; + margin-top: 8rem; +} +@media screen and (min-width: 992px) { + .section-center { + width: 95vw; + } +} +main { + min-height: 100vh; + display: grid; + place-items: center; +} +/* +=============== +Grocery List +=============== +*/ +.section-center { + background: var(--clr-white); + border-radius: var(--radius); + box-shadow: var(--light-shadow); + transition: var(--transition); + padding: 2rem; +} +.section-center:hover { + box-shadow: var(--dark-shadow); +} +.alert { + margin-bottom: 1rem; + height: 1.25rem; + display: grid; + align-items: center; + text-align: center; + font-size: 0.7rem; + border-radius: 0.25rem; + letter-spacing: var(--spacing); + text-transform: capitalize; +} +.alert-danger { + color: #721c24; + background: #f8d7da; +} +.alert-success { + color: #155724; + background: #d4edda; +} +.grocery-form h3 { + color: var(--clr-primary-1); + margin-bottom: 1.5rem; + text-align: center; +} +.form-control { + display: flex; + justify-content: center; +} +#grocery { + padding: 0.25rem; + padding-left: 1rem; + background: var(--clr-grey-10); + border-top-left-radius: var(--radius); + border-bottom-left-radius: var(--radius); + border-color: transparent; + font-size: 1rem; + flex: 1 0 auto; + color: var(--clr-grey-5); +} +#grocery::placeholder { + font-family: var(--ff-secondary); + color: var(--clr-grey-5); +} +.submit-btn { + background: var(--clr-primary-8); + border-color: transparent; + flex: 0 0 5rem; + display: grid; + align-items: center; + padding: 0.25rem; + text-transform: capitalize; + letter-spacing: 2px; + border-top-right-radius: var(--radius); + border-bottom-right-radius: var(--radius); + cursor: pointer; + content: var(--clr-primary-5); + transition: var(--transition); + font-size: 0.85rem; +} +.submit-btn:hover { + background: var(--clr-primary-5); + color: var(--clr-white); +} + +.grocery-container { + margin-top: 2rem; + transition: var(--transition); + visibility: hidden; +} +.show-container { + visibility: visible; +} +.grocery-item { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 0.5rem; + transition: var(--transition); + padding: 0.25rem 1rem; + border-radius: var(--radius); + text-transform: capitalize; +} +.grocery-item:hover { + color: var(--clr-grey-5); + background: var(--clr-grey-10); +} +.grocery-item:hover .title { + color: var(--clr-grey-5); +} +.title { + margin-bottom: 0; + color: var(--clr-grey-1); + letter-spacing: 2px; + transition: var(--transition); +} +.edit-btn, +.delete-btn { + background: transparent; + border-color: transparent; + cursor: pointer; + font-size: 0.7rem; + margin: 0 0.15rem; + transition: var(--transition); +} +.edit-btn { + color: var(--clr-green-light); +} +.edit-btn:hover { + color: var(--clr-green-dark); +} +.delete-btn { + color: var(--clr-red-light); +} +.delete-btn:hover { + color: var(--clr-red-dark); +} + +.grocery-list { + display: flex; + flex-direction: column-reverse; +} +.clear-btn { + text-transform: capitalize; + width: 10rem; + height: 1.5rem; + display: grid; + align-items: center; + background: transparent; + border-color: transparent; + color: var(--clr-red-light); + margin: 0 auto; + font-size: 0.85rem; + letter-spacing: var(--spacing); + cursor: pointer; + transition: var(--transition); + margin-top: 1.25rem; +} +.clear-btn:hover { + color: var(--clr-red-dark); +} \ No newline at end of file diff --git a/week-2/calculator-task/calculator.css b/week-2/calculator-task/calculator.css new file mode 100644 index 0000000..3d8d918 --- /dev/null +++ b/week-2/calculator-task/calculator.css @@ -0,0 +1,249 @@ +@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@500&family=Space+Mono:wght@700&display=swap'); + +body{ + font-family: 'Space Mono', monospace; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + } + +.header{ + background-color: hsl(185, 41%, 84%); + color: hsl(183, 100%, 15%); + height: 7rem; + text-align: center; + padding-top: 2rem; +} + +/* Bill amount */ +.bill_input{ + margin-left: 1.5rem; + padding-top: 2rem; +} +.bill_input h3{ + color: hsl(186, 14%, 43%); + margin-bottom: 0.2rem; +} +.bill_input input{ + border-radius: 0.9rem; + background-color: hsl(185, 41%, 84%); + border: none; + height: 3rem; + width: 90%; + color: hsl(183, 100%, 15%); + font-weight: bold; + font-size: 1rem; + padding-left: 0.5rem; + outline: none; +} + +/* select tip button */ +.button_cont{ + margin-top: 2rem; +} +.button_cont h3{ + color: hsl(186, 14%, 43%); + margin-left: 2rem; + +} +.percent_button{ + display: grid; + grid-template-columns: auto auto; + /* justify-content: center; */ + margin-top: 1rem; + margin-left: 1.5rem; + width: 92%; +} +.tipBtn button{ + width: 7.5rem; + height: 3rem; + background-color: hsl(183, 81%, 29%); + color: white; + border-radius: 0.9rem; + margin-bottom: 1rem; + font-size: 1.3rem; + font-weight: bold; + border: none; + box-shadow: 4px 4px 4px gray; +} +.tipBtn.selected button{ + background-color: hsl(172, 71%, 54%); + color: hsl(183, 100%, 15%); +} + /* .tipBtn button:hover{ + background-color: hsl(172, 67%, 45%); + color: hsl(183, 100%, 15%); +} */ + +.percent_button input{ + width: 7.5rem; + height: 3rem; + border-radius: 0.9rem; + text-align: center; + background-color: hsl(185, 41%, 84%); + border: none; + font-weight: bold; + font-size: 1.3rem; + color: hsl(186, 14%, 43%); + box-shadow: 4px 4px 4px gray; + outline: none; +} + +/* Tip container */ +.tip_cont{ + margin-top: 2rem; + background-color: hsl(183, 100%, 15%); + padding: 1rem; + width: 85%; + height: 19rem; + border-radius: 1.5rem; + margin-left: 1.5rem; + margin-bottom: 1rem; +} +.tip_div{ + display: flex; + justify-content: center; + color: white; + margin-bottom: 1.5rem; +} +.tip_div h3{ + margin-right: 2rem; +} +.tip_div span{ + color: hsl(186, 14%, 43%); +} + +.tip_amount{ + font-size: 2rem; + color: hsl(172, 67%, 45%); +} + +/* Reset */ + +.calculate{ + display: flex; + justify-content: center; +} +.calculate button{ + width: 8rem; + height: 3rem; + background-color: hsl(172, 67%, 45%); + color: hsl(183, 100%, 15%); + border-radius: 0.9rem; + font-size: 1.3rem; + font-weight: bold; + border: none; + margin-bottom: 1rem; + box-shadow: 4px 4px 4px black; +} +.calculate button:hover{ + background-color: hsl(185, 41%, 84%); + +} +.reset{ + display: flex; + justify-content: center; +} +.reset button{ + width: 8rem; + height: 3rem; + background-color: hsl(172, 67%, 45%); + color: hsl(183, 100%, 15%); + border-radius: 0.9rem; + font-size: 1.3rem; + font-weight: bold; + border: none; + margin-bottom: 1rem; + box-shadow: 4px 4px 4px black; +} + +.reset button:hover{ + background-color: hsl(185, 41%, 84%); + +} +.personTotal.selected{ + background-color: red; + color: black; +} + +/* desktop view */ +@media (min-width: 760px){ + *{ + box-sizing: border-box; + padding: 0; + margin: 0; + +} +body{ + background-color: hsl(185, 41%, 84%); +} + +.main { + display: flex; + justify-content: center; + border-radius: 1rem; +} + +/* container for both div */ +.house { + background-color: white; + display: flex; + justify-content: center; + border-radius: 1.5rem; +} +/* left section */ +.leftSection{ + width: 28rem; + /* padding-bottom: 1rem; */ + margin-left: 1rem; +} +.percent_button{ + display: grid; + grid-template-columns: auto auto auto; +} + +/* right section */ +.rightSection{ + width: 25rem; + height: 25rem; + margin-left: -2rem; + margin-right: -1rem; + +} +/* right side inside container */ +.tip_cont{ + height: 22rem; + padding-top: 2rem; + +} +.calculateButtons{ +display: flex; +margin-left: 1rem; +margin-top: 7rem; +} +.calculateButtons button{ + margin-right: 1rem; +} +.tipBtn button{ + width: 7rem; + height: 2.5rem; +} + +.percent_button input{ + width: 7rem; + height: 2.5rem; +} +.noOfPeople { + margin-top: -2rem; +} + +.personAmount{ + margin-right: 4rem; +} +.personTotal{ + margin-right: 4rem; +} +} \ No newline at end of file diff --git a/week-2/calculator-task/calculator.js b/week-2/calculator-task/calculator.js new file mode 100644 index 0000000..c9cb92d --- /dev/null +++ b/week-2/calculator-task/calculator.js @@ -0,0 +1,78 @@ + +let reset = document.querySelector('.reset'); +let calculate = document.querySelector('.calculate'); +let amount = document.querySelector('.amount'); +let plusPeople = document.querySelector('.multiplyPeople'); +let amountPerPerson = document.querySelector('#amountPerson') +let totalPerPerson = document.querySelector('#totalPerson') +let custom = document.querySelector('.custom') + +amount.value = 0 +plusPeople.value = 1 + +function calculateAll () { + +let billAmount = parseFloat(amount.value) +let people = parseFloat(plusPeople.value) + +const tipPercentage = getTipPercentage(); + +// Calculate tip amount +const tipAmount = billAmount * (tipPercentage / 100); + +// Calculate amount per person +const perPerson = billAmount + tipAmount; + +// Calculate total amount +const totalAmount = people * perPerson; + +totalPerPerson.textContent = '$' + totalAmount +amountPerPerson.textContent = '$' + perPerson + +} + +// Function to get tip percentage +function getTipPercentage() { + // Get selected tip percentage + let tipButton = document.querySelector('.tipBtn.selected'); + if (tipButton) { + return parseFloat(tipButton.textContent); + } + // Get custom tip percentage + const customTipPercentage = parseFloat(custom.value); + if (!isNaN(customTipPercentage)) { + return customTipPercentage; + } + // Default to 0% if no percentage is selected + return 0; +} + + // Attach event listeners to tip buttons + const tipButtons = document.querySelectorAll('.tipBtn'); + for (let i = 0; i < tipButtons.length; i++) { + tipButtons[i].addEventListener("click", function() { + // Deselect all buttons + for (let j = 0; j < tipButtons.length; j++) { + tipButtons[j].classList.remove("selected"); + } + // Select clicked button + this.classList.add("selected"); + }); + } +calculate.addEventListener('click', calculateAll) + + + + +// Reset selected input +function resetBtn(){ + amountPerPerson.textContent = '$0'; + totalPerPerson.textContent = '$0'; + amount.value = 0; + plusPeople.value = 1; + custom.value = ''; + for (let j = 0; j < tipButtons.length; j++) { + tipButtons[j].classList.remove("selected"); + } + } +reset.addEventListener('click', resetBtn) \ No newline at end of file diff --git a/week-2/calculator-task/index.html b/week-2/calculator-task/index.html new file mode 100644 index 0000000..1c6faed --- /dev/null +++ b/week-2/calculator-task/index.html @@ -0,0 +1,92 @@ + + + + + + + Document + + + + +
+
+

Tip Calculator

+
+
+ +
+
+
+
+

Bill

+ +
+ + + +
+
+

Select Tip %

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

Number of people

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

+ Amount
+ / person +

+
+

0.00

+
+ +
+
+

+ Total
+ / person +

+
+

0.00

+
+ +
+
+ +
+ +
+ +
+
+
+ +
+
+
+ + + + \ No newline at end of file