diff --git a/Week1/homework/app.js b/Week1/homework/app.js index 6131f54ea..303e0d8da 100644 --- a/Week1/homework/app.js +++ b/Week1/homework/app.js @@ -2,10 +2,112 @@ { const bookTitles = [ - // Replace with your own book titles - 'harry_potter_chamber_secrets' + 'the_psychopath_test', + 'against_happiness', + 'the_bell_jar', + 'american_psycho', + 'amsterdam', + 'the_brief_history_of_the_dead', + 'a_clockwork_orange', + 'columbine', + 'on_seeing_and_noticing', + 'the_craftsman' ]; - // Replace with your own code - console.log(bookTitles); + // 1.3 + function createList() { + const ol = document.createElement('ol'); + bookTitles.forEach(title => { + const li = document.createElement('li'); + li.textContent = title; + ol.appendChild(li); + }); + document.body.appendChild(ol); + } + window.onload = createList; + + // 1.4 + const booksObj = { + the_psychopath_test: { + title: 'the psychopath test', + language: 'English', + author: 'Jon Ronson' + }, + against_happiness: { + title: 'against happiness', + language: 'English', + author: 'Eric G. Wilson' + }, + the_bell_jar: { title: 'the bell jar', language: 'English', author: 'Sylvia Plaith' }, + american_psycho: { title: 'american psycho', language: 'English', author: 'Bret Easton Ellis' }, + amsterdam: { title: 'amsterdam', language: 'English', author: 'Ian McEwan' }, + the_brief_history_of_the_dead: { + title: 'the brief history of the dead', + language: 'English', + author: 'Kevin Brockmeier' + }, + a_clockwork_orange: { + title: 'a clockwork orange', + language: 'English', + author: 'Anthony Burgess' + }, + columbine: { title: 'columbine', language: 'English', author: 'Dave Cullen' }, + on_seeing_and_noticing: { + title: 'on seeing and noticing', + language: 'English', + author: 'Alain de Botton' + }, + the_craftsman: { title: 'the craftsman', language: 'English', author: 'Richard Sennett' } + }; + + const h2 = document.createElement('h2'); + const p = document.createElement('p'); + const h3 = document.createElement('h3'); + const valuesBooksObj = Object.values(booksObj); + const body = document.body; + function displayBooksObjInfo() { + valuesBooksObj.forEach(obj => { + h2.textContent = obj.title; + p.textContent = obj.language; + h3.textContent = obj.author; + body.appendChild(h2); + body.appendChild(p); + body.appendChild(h3); + body.innerHTML += '
'; + }); + } + window.onload = displayBooksObjInfo; + + // 1.7 + const booksCoversObj = { + the_psychopath_test: './imgs/the_psychopath_test.jpg', + against_happiness: './imgs/against_happiness.jpg', + the_bell_jar: './imgs/the_bell_jar.jpg', + american_psycho: './imgs/american_psycho.jpg', + amsterdam: './imgs/amsterdam.jpg', + the_brief_history_of_the_dead: './imgs/the_brief_history_of_the_dead.jpg', + a_clockwork_orange: './imgs/a_clockwork_orange.jpg', + columbine: './imgs/columbine.jpg', + on_seeing_and_noticing: './imgs/on_seeing_and_noticing.jpg', + the_craftsman: './imgs/the_craftsman.jpg' + }; + + // 1.8 + const keysBooksCoversObj = Object.keys(booksCoversObj); + const valuesCovers = Object.values(booksCoversObj); + function displayBooksCovers() { + keysBooksCoversObj.forEach(book => { + const li = document.createElement('li'); + li.textContent = book; + document.body.appendChild(li); + valuesCovers.forEach(cover => { + const img = document.createElement('img'); + img.setAttribute('src', `${cover}`); + if (cover.includes(book)) { + document.body.appendChild(img); + } + }); + }); + } + window.onload = displayBooksCovers; } diff --git a/Week1/homework/imgs/a_clockwork_orange.jpg b/Week1/homework/imgs/a_clockwork_orange.jpg new file mode 100644 index 000000000..08a77eddb Binary files /dev/null and b/Week1/homework/imgs/a_clockwork_orange.jpg differ diff --git a/Week1/homework/imgs/against_happiness.jpg b/Week1/homework/imgs/against_happiness.jpg new file mode 100644 index 000000000..a40720635 Binary files /dev/null and b/Week1/homework/imgs/against_happiness.jpg differ diff --git a/Week1/homework/imgs/american_psycho.jpg b/Week1/homework/imgs/american_psycho.jpg new file mode 100644 index 000000000..983cd8165 Binary files /dev/null and b/Week1/homework/imgs/american_psycho.jpg differ diff --git a/Week1/homework/imgs/amsterdam.jpg b/Week1/homework/imgs/amsterdam.jpg new file mode 100644 index 000000000..3d9467d80 Binary files /dev/null and b/Week1/homework/imgs/amsterdam.jpg differ diff --git a/Week1/homework/imgs/columbine.jpg b/Week1/homework/imgs/columbine.jpg new file mode 100644 index 000000000..40772cca6 Binary files /dev/null and b/Week1/homework/imgs/columbine.jpg differ diff --git a/Week1/homework/imgs/on_seeing_and_noticing.jpg b/Week1/homework/imgs/on_seeing_and_noticing.jpg new file mode 100644 index 000000000..7b861258f Binary files /dev/null and b/Week1/homework/imgs/on_seeing_and_noticing.jpg differ diff --git a/Week1/homework/imgs/the_bell_jar.jpg b/Week1/homework/imgs/the_bell_jar.jpg new file mode 100644 index 000000000..5dc06b426 Binary files /dev/null and b/Week1/homework/imgs/the_bell_jar.jpg differ diff --git a/Week1/homework/imgs/the_brief_history_of_the_dead.jpg b/Week1/homework/imgs/the_brief_history_of_the_dead.jpg new file mode 100644 index 000000000..46819baf3 Binary files /dev/null and b/Week1/homework/imgs/the_brief_history_of_the_dead.jpg differ diff --git a/Week1/homework/imgs/the_craftsman.jpg b/Week1/homework/imgs/the_craftsman.jpg new file mode 100644 index 000000000..f4def5438 Binary files /dev/null and b/Week1/homework/imgs/the_craftsman.jpg differ diff --git a/Week1/homework/imgs/the_psychopath_test.jpg b/Week1/homework/imgs/the_psychopath_test.jpg new file mode 100644 index 000000000..92fea5010 Binary files /dev/null and b/Week1/homework/imgs/the_psychopath_test.jpg differ diff --git a/Week1/homework/index.html b/Week1/homework/index.html index b22147cd1..ba391d07c 100644 --- a/Week1/homework/index.html +++ b/Week1/homework/index.html @@ -1 +1,15 @@ - \ No newline at end of file + + + + + + + + JS: Week 1 Homework + + + + + + + \ No newline at end of file diff --git a/Week1/homework/style.css b/Week1/homework/style.css index bab13ec23..1b4a78857 100644 --- a/Week1/homework/style.css +++ b/Week1/homework/style.css @@ -1 +1,41 @@ -/* add your styling here */ \ No newline at end of file +body { + margin: auto; + padding: 5%; + background-color: #333; + color: gray; + text-align: center; +} + +h2 { + width: 40%; + margin: auto; + color: blue; + text-shadow: 1px 1px yellow; + background: lightgray; + line-height: 2em; + border: 1px inset maroon; +} + +h3 { + color: mediumvioletred; + text-decoration: underline; +} + +hr { + width: 40%; + margin: 12% auto 0; +} + +img { + width: 30%; + border: 1px ridge maroon; + margin: auto auto 10%; +} + +li { + list-style-type: none; + font-size: 300%; + font-weight: bold; + margin: 3%; + color: beige; +} diff --git a/Week3/homework/index.html b/Week3/homework/index.html new file mode 100644 index 000000000..beb3a9317 --- /dev/null +++ b/Week3/homework/index.html @@ -0,0 +1,13 @@ + + + + + + + 3wk homework js2 + + +

:)

+ + + \ No newline at end of file diff --git a/Week3/homework/step2-1.js b/Week3/homework/step2-1.js index d5699882c..71867aae0 100644 --- a/Week3/homework/step2-1.js +++ b/Week3/homework/step2-1.js @@ -1,9 +1,10 @@ 'use strict'; - +// document.body.style.backgroundColor = "sky blue"; function foo(func) { // What to do here? + func(); // Replace this comment and the next line with your code - console.log(func); + console.log('thank you'); } function bar() { @@ -13,4 +14,4 @@ function bar() { foo(bar); // Do not change or remove anything below this line -module.exports = foo; +module.exports = foo; \ No newline at end of file