diff --git a/Week1/homework/app.js b/Week1/homework/app.js index a9b5f75d8..decf390e5 100644 --- a/Week1/homework/app.js +++ b/Week1/homework/app.js @@ -1,11 +1,129 @@ 'use strict'; +document.body.style.backgroundColor = '#40E0D0'; -{ - const bookTitles = [ - // Replace with your own book titles - 'harry_potter_chamber_secrets', - ]; +// array of books containing 10 strings. lowercase +const bookNames = [ + 'going_down_river_road', + 'the_river_and_the_source', + "salem's_lot", + 'americanah', + 'things_fall_apart', + 'animal_farm', + 'the_river_between', + 'the_dead_stay_dumb', + 'arrow_of_god', + 'a_song_of_ice_and_fire', +]; - // Replace with your own code - console.log(bookTitles); +const showBooks = Object.values(bookNames); +console.log(showBooks); + +// the part below not showing on console on chrome +// function printBookNames(bookNames) { +// console.table(bookNames); +// } + +//printing out the string of the above array: +for (let i = 0; i < bookNames.length; i++) { + console.log(bookNames[i]); +} + +const header = document.querySelector('header'); +const h1 = header.querySelector('h1'); //getting h1 elem inside of header +h1.textContent = 'Loading Book Recommendations ..'; + +const p1 = header.querySelector('p'); +p1.id = 'p1'; +p1.innerHTML = 'Some of the books I have read over the past years include the following'; + +// eslint-disable-next-line no-unused-vars +// 1.3. Make a function (or functions) that generate a ul with li elements for each book ID in the array using a for loop. + +// 1.4 create object containing details of each book: +const bookDetails = { + going_down_river_road: { + title: 'Going Down River Road', + author: 'Meja Mwangi', + language: 'English', + published: 1976, + }, + + the_river_and_the_source: { + title: 'The River And The Source', + author: 'Margaret Ogola', + language: 'English', + published: 1994, + }, + + homing_in: { + title: 'Salem´s Lot', + author: 'Stephen King', + language: 'English', + published: 1975, + }, + + americanah: { + title: 'Americanah', + author: 'Chimamanda Ngozi Adichie', + language: 'English', + published: 2013, + }, + + things_fall_apart: { + title: 'Things Fall Apart', + author: 'Chinua Achebe', + language: 'English', + published: 1958, + }, + + animal_farm: { + title: 'Animal Farm', + author: 'George Orwell', + language: 'English', + published: 1945, + }, + + the_river_between: { + title: 'The River Between', + author: 'Ngugi wa Thiong´o', + language: 'English', + published: 1965, + }, + + the_dead_stay_dumb: { + title: 'The Dead Stay Dumb', + author: 'James Hardley Chase', + language: 'English', + published: 1939, + }, + + fictitious_book: { + title: 'Arrow of God', + author: 'Chinua Achebe', + language: 'English', + published: 1964, + }, + + and_another_one: { + title: 'A Song of Ice and Fire', + author: 'George R.R. Martin', + language: 'English', + published: 1996, + }, +}; +console.log(Object.keys(bookDetails)); + +const createBookList = document.createElement('ul'); +for (let key in bookDetails) { + let li = document.createElement('li'); + li.id = 'book'; + //let = document.createElement('p'); + li.innerText = bookDetails[key].title; + li.innerText = bookDetails[key].author; + li.innerText = bookDetails[key].language; + li.innerText = bookDetails[key].published; + createBookList.appendChild(li); + document.getElementById('book-list').appendChild(createBookList); } + +console.log(createBookList); diff --git a/Week1/homework/example.js b/Week1/homework/example.js new file mode 100644 index 000000000..b658393df --- /dev/null +++ b/Week1/homework/example.js @@ -0,0 +1,85 @@ +function test(param) {} +const something = function() {}; + +const arrowFunc = () => {}; + +const ages = [21, 41, 5, 1, 6, 4, 7]; + +const lessThan10 = []; + +for (age of ages) { + if (age < 10) { + lessThan10.push(age); + } +} + +/* + I want console to show: + Book title is Deathly Hallows + Book author is JKRowling + Book price is 23.12 +*/ +const harryPotter = { title: 'Deathly Hallows', author: 'JKRowling', price: 23.12 }; + +const gabe = { age: 30 }; +gabe.age; // 30 +gabe['age']; // 30 +const something = 'age'; +gabe[something]; // 30 + +for (let key in harryPotter) { + console.log(`Book ${key} is ${harryPotter[key]}`); +} + +// Book title is Deathly Hallows +// Book author is JKRowling +// Book price is 23.12 + +// const lessThan10Alt = ages.filter(age => { +// // boolean---true or false +// // if you return true--- it will be in the new array +// // if you return false--- it won't +// return age < 10; // true or false +// }); + +const lessThan10Alt = ages.filter(age => age < 10); + +const lessThan10Alt = ages.filter(age => { + return age < 10; +}); +const lessThan10Alt = ages.filter(function(age) { + return age < 10; +}); +const lessThan10Alt = ages.filter(function lessThan10(age) { + return age < 10; +}); + +lessThan10(102); + +function lessThan10(age) { + return age < 10; +} +const lessThan10Alt = ages.filter(lessThan10); + +const spotifUsers = [ + { username: 'luxor123', userId: '1235' }, + { username: 'monkey', userId: '6245' }, + { username: 'spsa22', userId: '858393' }, +]; + +// console.log all of the userId's +console.log(spotifUsers[0].userId); +console.log(spotifUsers[1].userId); +console.log(spotifUsers[2].userId); + +// use a forEach to do the same thing + +spotifUsers.forEach(userObj => { + console.log(userObj.userId); +}); +/* + Will print:the user id´s + 1235 + 6245 + 858393 +*/ diff --git a/Week1/homework/index.html b/Week1/homework/index.html index b22147cd1..6170a45e6 100644 --- a/Week1/homework/index.html +++ b/Week1/homework/index.html @@ -1 +1,23 @@ - \ No newline at end of file + + + + + Books: Javascript 2 Exercise 1 + + + +
+
+
+ + + +
+ + diff --git a/Week1/homework/pictures/Going-Down-River-Road.jpg b/Week1/homework/pictures/Going-Down-River-Road.jpg new file mode 100644 index 000000000..cebc108f7 Binary files /dev/null and b/Week1/homework/pictures/Going-Down-River-Road.jpg differ diff --git a/Week1/homework/pictures/a_song_of_ice_and_fire.jpg b/Week1/homework/pictures/a_song_of_ice_and_fire.jpg new file mode 100644 index 000000000..3b2b90f68 Binary files /dev/null and b/Week1/homework/pictures/a_song_of_ice_and_fire.jpg differ diff --git a/Week1/homework/pictures/americanah.jpg b/Week1/homework/pictures/americanah.jpg new file mode 100644 index 000000000..d0daa79a6 Binary files /dev/null and b/Week1/homework/pictures/americanah.jpg differ diff --git a/Week1/homework/pictures/animal_farm.jpeg b/Week1/homework/pictures/animal_farm.jpeg new file mode 100644 index 000000000..8adc31149 Binary files /dev/null and b/Week1/homework/pictures/animal_farm.jpeg differ diff --git a/Week1/homework/pictures/arrow_of_god.jpg b/Week1/homework/pictures/arrow_of_god.jpg new file mode 100644 index 000000000..bcf71ec50 Binary files /dev/null and b/Week1/homework/pictures/arrow_of_god.jpg differ diff --git a/Week1/homework/pictures/the_dead.jpg b/Week1/homework/pictures/the_dead.jpg new file mode 100644 index 000000000..d0248d2a3 Binary files /dev/null and b/Week1/homework/pictures/the_dead.jpg differ diff --git a/Week1/homework/pictures/the_river.jpg b/Week1/homework/pictures/the_river.jpg new file mode 100644 index 000000000..c137c8dcd Binary files /dev/null and b/Week1/homework/pictures/the_river.jpg differ diff --git a/Week1/homework/pictures/things_fall_apart.jpg b/Week1/homework/pictures/things_fall_apart.jpg new file mode 100644 index 000000000..ad0dd75a5 Binary files /dev/null and b/Week1/homework/pictures/things_fall_apart.jpg differ diff --git a/Week1/homework/style.css b/Week1/homework/style.css index bab13ec23..56c97b4c7 100644 --- a/Week1/homework/style.css +++ b/Week1/homework/style.css @@ -1 +1,12 @@ -/* add your styling here */ \ No newline at end of file +/* add your styling here */ +* { + margin: auto; +} +body { + background-color: turquoise; +} +#book-list > * { + display: grid; + grid-column: 50%, 50%; + grid-row: 50vh, 50vh; +} pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy