diff --git a/week-1/fix/median.js b/week-1/fix/median.js index 046be3d0..dc74e432 100644 --- a/week-1/fix/median.js +++ b/week-1/fix/median.js @@ -2,10 +2,22 @@ // Start by running the tests for this function // If you're in the week-1 directory, you can run npm test -- fix to run the tests in the fix directory +// function calculateMedian(list) { +// const middleIndex = Math.floor(list.length / 2); +// const median = list.splice(middleIndex, 1)[0]; +// return median; +// } + function calculateMedian(list) { - const middleIndex = Math.floor(list.length / 2); - const median = list.splice(middleIndex, 1)[0]; - return median; + let count = 0; + + for (item of list) { + count += item; + } + + const middleIndex = count / list.length; + return middleIndex; } + module.exports = calculateMedian; diff --git a/week-1/implement/dedupe.js b/week-1/implement/dedupe.js index 781e8718..ebe12056 100644 --- a/week-1/implement/dedupe.js +++ b/week-1/implement/dedupe.js @@ -1 +1,10 @@ -function dedupe() {} +function dedupe(array) { + + const uniqueElements = new Set(array); + + const dedupedArray = [...uniqueElements]; + + return dedupedArray; +} + +module.exports = dedupe; \ No newline at end of file diff --git a/week-1/implement/dedupe.test.js b/week-1/implement/dedupe.test.js index 145f4440..6493716d 100644 --- a/week-1/implement/dedupe.test.js +++ b/week-1/implement/dedupe.test.js @@ -15,12 +15,28 @@ E.g. dedupe([5, 1, 1, 2, 3, 2, 5, 8]) target output: [5, 1, 2, 3, 8] // Given an empty array // When passed to the dedupe function // Then it should return an empty array -test.todo("given an empty array, it returns an empty array"); +test.todo("given an empty array, it returns an empty array", () =>{ + const input = []; + const result = dedupe(input); + expect(result).toEqual([]); +}); // Given an array with no duplicates // When passed to the dedupe function // Then it should return a copy of the original array +test("given an array with no duplicates, it returns a copy of the original array", () => { + const input = ['a', 'b', 'c']; + const result = dedupe(input); + expect(result).toEqual(['a', 'b', 'c']); + }); + // Given an array with strings or numbers // When passed to the dedupe function // Then it should remove the duplicate values + +test("given an array with strings or numbers, it should remove the duplicate values", () => { + const input = [5, 1, 1, 2, 3, 2, 5, 8]; + const result = dedupe(input); + expect(result).toEqual([5, 1, 2, 3, 8]); + }); \ No newline at end of file diff --git a/week-1/implement/max.js b/week-1/implement/max.js index e69de29b..accd15a1 100644 --- a/week-1/implement/max.js +++ b/week-1/implement/max.js @@ -0,0 +1,14 @@ +function max(numbers) { + const largestNumber = Math.max(...numbers); + for (element of numbers) { + if (typeof element === "string") { + const arrWithoutStrings = numbers.filter( + (strings) => typeof strings === "number" + ); + return Math.max(...arrWithoutStrings); + } + } + return largestNumber; + } + + module.exports = max; \ No newline at end of file diff --git a/week-1/implement/max.test.js b/week-1/implement/max.test.js index b1ba2556..728a967e 100644 --- a/week-1/implement/max.test.js +++ b/week-1/implement/max.test.js @@ -9,20 +9,49 @@ E.g. max(['hey', 10, 'hi', 60, 10]), target output: 60 (sum ignores any non-nume // Given an empty array // When passed to the max function // Then it should return -Infinity -test.todo("given an empty array, returns -Infinity"); + // Given an array with one number // When passed to the max function // Then it should return that number + // Given an array with both positive and negative numbers // When passed to the max function // Then it should return the largest number overall + // Given an array with decimal numbers // When passed to the max function // Then it should return the largest decimal number + // Given an array with non-number values // When passed to the max function // Then it should return the max and ignore non-numeric values + + +const max = require("./max"); + +test("given an empty array returns -infinity", function () { + expect(max([])).toBe(-Infinity); +}); + + +test("given an array with one number, returns that number", function () { + expect(max([2])).toBe(2); + }); + + + + test("given an array with + & - numbers it returns the largest number overall", function () { + expect(max([-1, 2, 25, -3, 0])).toBe(25); + }); + + test("returns the largest from a decimal number array", function () { + expect(max([1.1, 2.3, 25.8, 3.9, 0.3])).toBe(25.8); + }); + + test("seperates strings from numbers and then identifies the largest number", function () { + expect(max(["hi", 2.3, 62, "q", 3.9, 0.3])).toBe(62); + }); \ No newline at end of file diff --git a/week-1/implement/sum.js b/week-1/implement/sum.js index e69de29b..000061a6 100644 --- a/week-1/implement/sum.js +++ b/week-1/implement/sum.js @@ -0,0 +1,18 @@ +function sum(array) { + + let total = 0; + + + for (const element of array) { + + if (typeof element === 'number') { + + total += element; + } + } + + + return total; + } + + module.exports = sum; \ No newline at end of file diff --git a/week-1/implement/sum.test.js b/week-1/implement/sum.test.js index 6b623592..9295d90a 100644 --- a/week-1/implement/sum.test.js +++ b/week-1/implement/sum.test.js @@ -8,22 +8,54 @@ E.g. sum(['hey', 10, 'hi', 60, 10]), target output: 80 (ignore any non-numerical // Acceptance Criteria: +const sum = require("./sum.js"); + // Given an empty array // When passed to the sum function // Then it should return 0 +test("given an empty array, it returns 0", () => { + const input = []; + const result = sum(input); + expect(result).toBe(0); + }); + // Given an array with just one number // When passed to the sum function // Then it should return that number +test("given an array with just one number, it returns that number", () => { + const input = [42]; + const result = sum(input); + expect(result).toBe(42); + }); + // Given an array containing negative numbers // When passed to the sum function // Then it should still return the correct total sum +test("given an array containing negative numbers, it returns the correct total sum", () => { + const input = [10, -5, 20, 0, -15]; + const result = sum(input); + expect(result).toBe(10); + }); + // Given an array with decimal/float numbers // When passed to the sum function // Then it should return the correct total sum +test("given an array with decimal/float numbers, it returns the correct total sum", () => { + const input = [2.5, 1.1, 3.0, 2.7]; + const result = sum(input); + expect(result).toBe(9.3); + }); + // Given an array containing non-number values // When passed to the sum function // Then it should ignore the non-numerical values and return the sum of the numerical elements + +test("given an array containing non-number values, it ignores non-numerical values and returns the sum of the numerical elements", () => { + const input = ['hey', 10, 'hi', 60, 10, 'oops', '42.5']; + const result = sum(input); + expect(result).toBe(80); + }); \ No newline at end of file diff --git a/week-1/refactor/find.js b/week-1/refactor/find.js index 7df447b9..5f35976c 100644 --- a/week-1/refactor/find.js +++ b/week-1/refactor/find.js @@ -1,13 +1,10 @@ // Refactor the implementation of find to use a for...of loop function find(list, target) { - for (let index = 0; index < list.length; index++) { - const element = list[index]; - if (element === target) { - return index; - } + if (list.includes(target)) { + return list.indexOf(target); } - return -1; +return -1; } module.exports = find; diff --git a/week-2/debug/address.js b/week-2/debug/address.js index 940a6af8..b4c510ea 100644 --- a/week-2/debug/address.js +++ b/week-2/debug/address.js @@ -12,4 +12,5 @@ const address = { postcode: "XYZ 123", }; -console.log(`My house number is ${address[0]}`); +// console.log(`My house number is ${address[0]}`); +console.log(`My house number is ${address.houseNumber}`); diff --git a/week-2/debug/author.js b/week-2/debug/author.js index 8c212597..6d6ca0f5 100644 --- a/week-2/debug/author.js +++ b/week-2/debug/author.js @@ -3,6 +3,8 @@ // This program attempts to log out all the property values in the object. // But it isn't working. Explain why first and then fix the problem +//It is not working because the for loop is trying to iterate the object author which is not iterable. Instead we need to link it to the values inside the array. + const author = { firstName: "Zadie", lastName: "Smith", @@ -11,6 +13,11 @@ const author = { alive: true, }; -for (const value of author) { - console.log(value); +// for (const value of author) { +// console.log(value); +// } + +for (const value of Object.values(author)) { + + console.log(value); } diff --git a/week-2/debug/recipe.js b/week-2/debug/recipe.js index 6cbdd22c..995b252a 100644 --- a/week-2/debug/recipe.js +++ b/week-2/debug/recipe.js @@ -10,6 +10,10 @@ const recipe = { ingredients: ["olive oil", "tomatoes", "salt", "pepper"], }; +// console.log(`${recipe.title} serves ${recipe.serves} +// ingredients: +// ${recipe}`); + console.log(`${recipe.title} serves ${recipe.serves} - ingredients: -${recipe}`); +ingredients: +${recipe.ingredients.join("\n")}`); diff --git a/week-2/implement/contains.js b/week-2/implement/contains.js index cd779308..1307defa 100644 --- a/week-2/implement/contains.js +++ b/week-2/implement/contains.js @@ -1,3 +1,11 @@ -function contains() {} +function contains(x, contains) { + if ( + Object.values(x).includes(contains) || + Object.keys(x).includes(contains) + ) { + return true; + } + return false; +} module.exports = contains; diff --git a/week-2/implement/contains.test.js b/week-2/implement/contains.test.js index e75984b8..75bd9db2 100644 --- a/week-2/implement/contains.test.js +++ b/week-2/implement/contains.test.js @@ -17,18 +17,38 @@ as the object doesn't contains a key of 'c' // When passed an object and a property name // Then it should return true if the object contains the property, false otherwise +test("returns true or false based on wether object includes specified char/num", function () { + expect(contains({ a: 1, b: 2, c: 3 }, "a")).toBe(true); + }); // Given an empty object // When passed to contains // Then it should return false +test("returns true or false based on wether object includes specified char/num", function () { + expect(contains({}, "a")).toBe(false); + }); + // Given an object with properties // When passed to contains with an existing property name // Then it should return true +test("returns true or false based on wether object includes specified char/num", function () { + expect(contains({ a: 1, b: 2, c: 3 }, "a")).toBe(true); + }); + + // Given an object with properties // When passed to contains with a non-existent property name // Then it should return false +test("returns true or false based on wether object includes specified char/num", function () { + expect(contains({ a: 1, b: 2, c: 3 }, 5)).toBe(false); + }); + // Given invalid parameters like arrays // When passed to contains // Then it should return false or throw an error + +test("returns true or false based on wether object includes specified char/num", function () { + expect(contains([], 5)).toBe(false); + }); \ No newline at end of file diff --git a/week-2/implement/lookup.js b/week-2/implement/lookup.js index d4677714..61c164e1 100644 --- a/week-2/implement/lookup.js +++ b/week-2/implement/lookup.js @@ -1,17 +1,23 @@ -function createLookup() { +function createLookup(countryCurrencyPairs) { // implementation here + const countryCurrencyAsObject = {}; // Creates an empty object + const [key, value] = countryCurrencyPairs; + countryCurrencyAsObject[key] = value; + return countryCurrencyAsObject; + } +module.exports = createLookup; /* ======= Test suite is provided below... ===== */ -test("converts a single pair of currency codes", () => { - expect(createLookup([["GB", "GBP"]])).toEqual({ - GB: "GBP", - }); - expect(createLookup([["DE", "EUR"]])).toEqual({ - DE: "EUR", - }); -}); +// test("converts a single pair of currency codes", () => { +// expect(createLookup([["GB", "GBP"]])).toEqual({ +// GB: "GBP", +// }); +// expect(createLookup([["DE", "EUR"]])).toEqual({ +// DE: "EUR", +// }); +// }); -test.todo("creates a country currency code lookup for multiple codes"); +// test.todo("creates a country currency code lookup for multiple codes"); diff --git a/week-2/implement/lookup.test.js b/week-2/implement/lookup.test.js index 8804cb65..d0e53773 100644 --- a/week-2/implement/lookup.test.js +++ b/week-2/implement/lookup.test.js @@ -1,3 +1,5 @@ +const createLookup = require("./lookup"); + /* Create a lookup object of key value pairs from an array of code pairs @@ -29,3 +31,6 @@ It should return: 'CA': 'CAD' } */ +test("converts a single pair of currency codes", () => { + expect(createLookup(["GB", "GBP"])).toEqual({ GB: "GBP" }); +}); \ No newline at end of file diff --git a/week-2/implement/tally.js b/week-2/implement/tally.js index e69de29b..d5cffc30 100644 --- a/week-2/implement/tally.js +++ b/week-2/implement/tally.js @@ -0,0 +1,21 @@ +function tally(arr) { + const counter = {}; + + if (typeof arr === "string") { + return "Error, you should pass an array of values"; + } + + arr.forEach((item) => { + if (counter[item]) { + counter[item] += 1; + } else { + counter[item] = 1; + } + }); + return counter; + } + + console.log(tally(["a", "a", "a", "hello", "bahadory", "bahadory", "marcus"])); + console.log(tally("hello")); + + module.exports = tally; \ No newline at end of file diff --git a/week-2/implement/tally.test.js b/week-2/implement/tally.test.js index b473b750..d8ee2049 100644 --- a/week-2/implement/tally.test.js +++ b/week-2/implement/tally.test.js @@ -1,3 +1,5 @@ +const tally = require("./tally"); + /** * tally array * @@ -18,14 +20,42 @@ // When passed an array of items // Then it should return an object containing the count for each unique item +test("returns an object containing the count of each unique item", () => { + const currentOutput = tally(["a"]); + const targetOutput = { a: 1 }; + + expect(currentOutput).toEqual(targetOutput); + }); + // Given an empty array // When passed to tally // Then it should return an empty object +test("if tally is empty returns an empty object", () => { + const currentOutput = tally([]); + const targetOutput = {}; + + expect(currentOutput).toEqual(targetOutput); + }); + // Given an array with duplicate items // When passed to tally // Then it should return counts for each unique item +test("returns an object containing the count of each unique item", () => { + const currentOutput = tally(["a", "a", "a", "b", "square", "square"]); + const targetOutput = { a: 3, b: 1, square: 2 }; + + expect(currentOutput).toEqual(targetOutput); + }); + // Given an invalid input like a string // When passed to tally // Then it should throw an error + +test("returns an object containing the count of each unique item", () => { + const currentOutput = tally("Hello"); + const targetOutput = "Error, you should pass an array of values"; + + expect(currentOutput).toBe(targetOutput); + }); \ No newline at end of file diff --git a/week-2/interpret/invert.js b/week-2/interpret/invert.js index 00d27025..0f477663 100644 --- a/week-2/interpret/invert.js +++ b/week-2/interpret/invert.js @@ -10,18 +10,33 @@ function invert(obj) { const invertedObj = {}; for (const [key, value] of Object.entries(obj)) { - invertedObj.key = value; + invertedObj [value] = key; } return invertedObj; } +console.log(invert({ x: 10, y: 20 })); + // a) What is the current return value when invert is called with { a : 1 } +// { a : 1 } + // b) What is the current return value when invert is called with { a: 1, b: 2 } +// { a: 1, b: 2 } + // c) What is the target return value when invert is called with {a : 1, b: 2} +// { 1 : a, 2 : b } + // c) What does Object.entries return? Why is it needed in this program? +// Object.entries creates an array of the key-value pairs. This allows us to identify in the for loop +// what key and value should be paired. Then we can reverse the pair instead of the complete object? + // d) Explain why the current return value is different from the target output + +// Because the values and keys are turned into arrays in an object. Whereas before, they were just +// key pair values inside of an Object. Also, there positions have now changed. The values are now the keys, +// and the keys are now the values. \ No newline at end of file diff --git a/week-3/quote-generator/index.html b/week-3/quote-generator/index.html index 30b434bc..a99142c5 100644 --- a/week-3/quote-generator/index.html +++ b/week-3/quote-generator/index.html @@ -3,13 +3,20 @@ - Title here + Quote Generator + -

hello there

-

-

- +
+
+

+

"

+
+
+

+ +
+
diff --git a/week-3/quote-generator/quotes.js b/week-3/quote-generator/quotes.js index 4a4d04b7..7ca30353 100644 --- a/week-3/quote-generator/quotes.js +++ b/week-3/quote-generator/quotes.js @@ -491,3 +491,16 @@ const quotes = [ ]; // call pickFromArray with the quotes array to check you get a random quote + +function displayQuotes() { + const randomQuote = pickFromArray(quotes); + + document.getElementById("quote").textContent = randomQuote.quote; + + document.getElementById("author").textContent = `- ${randomQuote.author}`; +} + +window.onload = displayQuotes; + +document.getElementById("new-quote").addEventListener("click", displayQuotes); + diff --git a/week-3/quote-generator/style.css b/week-3/quote-generator/style.css index 63cedf2d..bee8b8b8 100644 --- a/week-3/quote-generator/style.css +++ b/week-3/quote-generator/style.css @@ -1 +1,50 @@ /** Write your CSS in here **/ + +body { + background-color: rgb(187, 89, 244); + } + .quote-Content { + background-color: white; + margin: 6rem 5rem; + padding: 1rem; + } + .quote-mark { + color: rgb(49, 174, 241); + font-size: 8rem; + margin-top: 5.5rem; + padding: 1rem; + } + .quote-wrapper { + display: flex; + align-items: center; + flex-direction: row-reverse; + margin-top: 1rem; + } + + #quote { + font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif; + color: rgb(49, 174, 241); + font-size: 40px; + margin-right: 2rem; + margin-left: 1rem; + } + #author { + font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif; + color: rgb(49, 174, 241); + font-size: 40px; + } + #new-quote { + padding: 22px 25px; + background-color: rgb(49, 174, 241); + font-size: 20px; + color: white; + font-weight: 200; + border: none; + } + .btn-wrapper { + display: flex; + flex-direction: column; + align-items: end; + margin-right: 1rem; + } + \ No newline at end of file diff --git a/week-3/reading-list/script.js b/week-3/reading-list/script.js index 6024d73a..dfe01b4a 100644 --- a/week-3/reading-list/script.js +++ b/week-3/reading-list/script.js @@ -21,3 +21,27 @@ const books = [ }, ]; + + +const ulList = document.querySelector('#reading-list'); + for (const book of books) { + const li = document.createElement("li"); + ulList.appendChild(li); + + const bookInfo = document.createElement("p"); + bookInfo.innerText = book.title + "-------"+book.author; + li.appendChild(bookInfo); + + const img = document.createElement("img"); + img.src = book.bookCoverImage; + li.appendChild(img); + + if(!book.alreadyRead){ + li.style.background="red" + } else { + li.style.background="green" + } +} + + + diff --git a/week-3/reading-list/style.css b/week-3/reading-list/style.css index 74406e64..46d3e210 100644 --- a/week-3/reading-list/style.css +++ b/week-3/reading-list/style.css @@ -1,159 +1,29 @@ -/** - * Base styles to use at the start of the class - * - * Module: HTML/CSS - * Lesson: 1,2 - * Class: Scotland 2017 - */ -html, body { - font-family: "Source Sans Pro", -apple-system, system-ui, BlinkMacSystemFont, - "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -} - -.site-footer { - margin-top: 4em; -} - -.site-footer p { - border-top: 1px solid #dccdc6; - padding-top: 2em; - padding-bottom: 2em; -} - -.navbar-brand > img { - max-height: 40px; - width: auto; -} - -.navbar-light .navbar-nav .nav-link { - color: #292b2c; + min-height: 100vh; + box-sizing: border-box; +} +#content{ + width: 40%; +} +.heading { + text-align: center; + color: brown; +} + +ul li { + height: 20rem; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: left; + padding-inline: 1rem; + border: 1px solid red; + font-size: 1.2rem; font-weight: 600; - text-transform: uppercase; -} - -/* Buttons */ -.btn { - border-radius: 0.15em; -} - -/* Alert */ -.alert { - position: relative; - margin-top: 2em; - margin-bottom: 3em; - padding-top: 1.5em; - padding-bottom: 1.5em; - border: 1px solid #dccdc6; - border-radius: 0; - font-size: 0.85rem; - line-height: 1.3em; - background: transparent; - color: #292b2c; -} - -.alert:before { - content: ""; - position: absolute; - left: -1px; - top: 0; - height: 100%; - width: 1px; - background: #ce5f31; -} - -/* Jumbotron */ -.jumbotron { - border-radius: 0; -} - -/* Headings */ -.heading-underline { - position: relative; - margin-bottom: 2em; - padding-bottom: 0.5em; - border-bottom: 1px solid #dccdc6; - font-size: 1rem; - font-weight: 600; - text-transform: uppercase; -} - -.heading-underline:before { - content: ""; - position: absolute; - bottom: -1px; - left: 0; - width: 25%; - height: 1px; - max-width: 100px; - background: #ce5f31; -} - -/* Article */ -.article { - margin-bottom: 2em; -} - -.article-title { - margin-bottom: 0.5em; - font-weight: 700; -} - -.article-read-more a { - font-size: 0.85em; - font-weight: 700; - text-decoration: uppercase; -} - -.article-read-more a:hover, -.article-read-more a:focus { - text-decoration: none; -} - -.article-read-more .fa { - margin-right: 0.5em; - color: #ce5f31; -} - -.article-read-more:last-child { - margin-bottom: 0; -} - -.red { - background-color: red; -} - -.addArticle { - margin-bottom: 10px; -} - -#addArticleBtn { - margin-left: 20px; - height: 37px; -} - -.colorButton { - margin-bottom: 20px; - margin-right: 20px; - width: 100px; - height: 50px; -} - -#blueBtn { - background: #588fbd; -} - -#orangeBtn { - background: #f0ad4e; -} - -#greenBtn { - background: #87ca8a; -} - -@media screen and (min-width: 992px) { - .navbar-brand > img { - max-height: 80px; - } + margin-bottom: 2rem; } +img { + height: 15rem; + width: 10rem; +} \ No newline at end of file diff --git a/week-3/slideshow/assets/pexels-dzenina-lukac-1469897.jpg b/week-3/slideshow/assets/pexels-dzenina-lukac-1469897.jpg new file mode 100644 index 00000000..264f3918 Binary files /dev/null and b/week-3/slideshow/assets/pexels-dzenina-lukac-1469897.jpg differ diff --git a/week-3/slideshow/assets/pexels-expect-best-247007.jpg b/week-3/slideshow/assets/pexels-expect-best-247007.jpg new file mode 100644 index 00000000..a18ce000 Binary files /dev/null and b/week-3/slideshow/assets/pexels-expect-best-247007.jpg differ diff --git a/week-3/slideshow/index.html b/week-3/slideshow/index.html index 50f2eb1c..292325a2 100644 --- a/week-3/slideshow/index.html +++ b/week-3/slideshow/index.html @@ -3,12 +3,23 @@ - Title here + + slideshow + + +
cat-pic - - +
+ + + + + +
diff --git a/week-3/slideshow/slideshow.js b/week-3/slideshow/slideshow.js index 063ceefb..05900d0f 100644 --- a/week-3/slideshow/slideshow.js +++ b/week-3/slideshow/slideshow.js @@ -2,7 +2,63 @@ const images = [ "./assets/cute-cat-a.png", "./assets/cute-cat-b.jpg", "./assets/cute-cat-c.jpg", + "./assets/pexels-expect-best-247007.jpg", + "./assets/pexels-dzenina-lukac-1469897.jpg", ]; -// Write your code here \ No newline at end of file +// Write your code here + +const forwardSlide = document.querySelector("#forward-btn"); +const backwardSlide = document.querySelector("#backward-btn"); +const imageSelector = document.querySelector("#carousel-img"); +const stopBtn = document.querySelector("#stop-btn"); +const autoBackBtn = document.querySelector("#auto-back-btn"); +const autoForwardBtn = document.querySelector("#auto-forward-btn"); + +let num = 0; +imageSelector.style.width = "600px"; +imageSelector.style.height = "600px"; + +forwardSlide.addEventListener("click", function () { + num++; + if (num === images.length) { + num = 0; + } + imageSelector.src = images[num]; +}); + +let autoSlideShow; + +autoForwardBtn.addEventListener("click", function () { + autoSlideShow = setInterval(() => { + num++; + if (num === images.length) { + num = 0; + } + imageSelector.src = images[num]; + }, 2000); +}); + +autoBackBtn.addEventListener("click", function () { + autoSlideShow = setInterval(() => { + num--; + if (num < 0) { + num = images.length - 1; + } + imageSelector.src = images[num]; + }, 2000); +}); + +stopBtn.addEventListener("click", function () { + clearInterval(autoSlideShow); +}); + +backwardSlide.addEventListener("click", function () { + num--; + if (num < 0) { + num = images.length - 1; + } + imageSelector.src = images[num]; +}); + diff --git a/week-3/slideshow/style.css b/week-3/slideshow/style.css index 63cedf2d..747452c1 100644 --- a/week-3/slideshow/style.css +++ b/week-3/slideshow/style.css @@ -1 +1,25 @@ /** Write your CSS in here **/ + +* { + padding: 0; + margin: 0; + box-sizing: border-box; + } + + .layout { + margin-top: 3rem; + text-align: center; + column-gap: 1.6rem; + } + + .btn { + height: min-content; + padding: 0.7rem 1.2rem; + border: 1px solid black; + font-size: 1.3rem; + background-color: white; + transition: ease-in-out 0.8s; + cursor: pointer; + border-radius: 1rem; + margin-top: 0.6rem; + } diff --git a/week-3/todo-list/index.html b/week-3/todo-list/index.html index ee3ef64f..671ebf9a 100644 --- a/week-3/todo-list/index.html +++ b/week-3/todo-list/index.html @@ -3,25 +3,27 @@ - Title here + To Do List -
-
- + +
+
+

Add new todo

+
+ + + + +
+
    -
    - - -
    - +
    diff --git a/week-3/todo-list/script.js b/week-3/todo-list/script.js index 61982a54..bb41cb42 100644 --- a/week-3/todo-list/script.js +++ b/week-3/todo-list/script.js @@ -1,25 +1,64 @@ -function populateTodoList(todos) { - let list = document.getElementById("todo-list"); - // Write your code to create todo list elements with completed and delete buttons here, all todos should display inside the "todo-list" element. +const inputBox = document.getElementById("input-box"); +const listContainer = document.getElementById("list-container"); + +function populateTodoList() { + if (inputBox.value === "") { + alert("You must write a task"); + } else { + let li = document.createElement("li"); + li.innerHTML = inputBox.value; + listContainer.appendChild(li); + let span = document.createElement("span"); + span.innerHTML = "🗑"; + // cross code \u00d7 + li.appendChild(span); + } + inputBox.value = ""; + // after type in input it should kep empty the input filed + saveData(); } -// These are the same todos that currently display in the HTML -// You will want to remove the ones in the current HTML after you have created them using JavaScript -let todos = [ - { task: "Wash the dishes", completed: false }, - { task: "Do the shopping", completed: false }, -]; +// writing test for click function +listContainer.addEventListener( + "click", + function (e) { + if (e.target.tagName === "LI") { + //to check if the tag name of a target element is "LI" (list item) + e.target.classList.toggle("checked"); + // we call the toggle function to toggle if the chec + saveData(); + + } else if (e.target.tagName === "SPAN") { + e.target.parentElement.remove(); + saveData(); + } + }, + false +); + +// we save our data in the local storage through saveData function +function saveData() { + localStorage.setItem("data", listContainer.innerHTML); +} +// to display data we write localStorage.getItem("data") -populateTodoList(todos); +// display the data whenever we open or refresh the browser -// This function will take the value of the input field and add it as a new todo to the bottom of the todo list. These new todos will need the completed and delete buttons adding like normal. -function addNewTodo(event) { - // The code below prevents the page from refreshing when we click the 'Add Todo' button. - event.preventDefault(); - // Write your code here... and remember to reset the input field to be blank after creating a todo! +function showList() { + listContainer.innerHTML = localStorage.getItem("data"); } +//showList(); +// calling the function + +function deleteList() { + // Get the reference to the ul element + var list = document.querySelector(".checked"); -// Advanced challenge: Write a fucntion that checks the todos in the todo list and deletes the completed ones (we can check which ones are completed by seeing if they have the line-through styling applied or not). -function deleteAllCompletedTodos() { - // Write your code here... + // Check if the ul element exists + if (list) { + // Remove the ul element from its parent + list.parentNode.removeChild(list); + } else { + console.log("UL element not found"); + } } diff --git a/week-3/todo-list/style.css b/week-3/todo-list/style.css index 8b137891..288dc8df 100644 --- a/week-3/todo-list/style.css +++ b/week-3/todo-list/style.css @@ -1 +1,137 @@ +* { + margin: 0; + padding: 0; + font-family: sans-serif; + box-sizing: border-box; + } + nav { + display: flex; + justify-content: center; + align-items: center; + padding: 12px; + margin: 17px; + background-color: #fff; + color: black; + font-size: x-large; + } + + body { + background-image: url(https://chrisowen101.github.io/ToDoListSolution/assets/world.jpg); + background-repeat: no-repeat; + background-attachment: fixed; + background-position: center; + background-size: auto 100%; + /* padding: 10px; */ + } + + body img { + width: 30%; + height: 30%; + } + + .container { + margin: 0rem 0rem 0rem 26rem; + } + + .todo-app { + width: 100%; + max-width: 699px; + background: #fff; + margin: 100px auto 20px; + padding: 6px 4px 60px; + border-radius: 6px; + } + + .todo-app h2 { + + padding: 0.5rem 1rem; + margin-bottom: 0; + background-color: rgba(0, 0, 0, 0.03); + border-bottom: 2px solid rgba(0, 0, 0, 0.125); + font-size: 17px; + font-weight: 100; + } + + .row { + display: flex; + align-items: center; + gap: 4px; + margin: 12px; + } + + input { + padding: 12px; + width: 50%; + border-radius: 3px; + border: solid 0.3px gray; + } + + + .add-btn { + border: none; + outline: none; + padding: 12px 30px; + color: white; + background-color: blue; + cursor: pointer; + margin: 12px; + border-radius: 3px; + } + + .delete-btn { + padding: 12px; + border-radius: 3px; + border: none; + background-color: blue; + color: white; + } + + ul li { + list-style: none; + font-size: 17px; + padding: 12px 8px 12px 50px; + user-select: none; + cursor: pointer; + position: relative; + } + + ul li::before { + content: ""; + position: absolute; + height: 28px; + width: 28px; + border-radius: 50%; + background-image: url(https://cdn-icons-png.flaticon.com/128/10914/10914668.png); + background-size: cover; + background-position: center; + top: 13px; + left: 8px; + } + + ul li.checked { + color: red; + text-decoration: line-through; + } + + ul li.checked::before { + background-image: url(https://cdn-icons-png.flaticon.com/128/5610/5610944.png); + } + + ul li span { + position: absolute; + right: 0; + top: 5px; + width: 40px; + height: 40px; + font-size: 22px; + color: red; + line-height: 40px; + text-align: center; + margin: 10px; + } + + ul li span:hover { + background: black; + border-radius: 50%; + } \ No newline at end of file