Skip to content
This repository was archived by the owner on May 14, 2024. It is now read-only.

JS2/Week1/Shvan #326

Closed
Shvan1 wants to merge 3 commits into from
Closed

JS2/Week1/Shvan #326

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
80a89c7
TEST
Shvan1 May 5, 2019
4cd9f1b
Update and rename app.component.html to app.component.js
Shvan1 May 25, 2019
4c816dc
Update app.component.js
Shvan1 Jun 1, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
137 changes: 137 additions & 0 deletions app.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,137 @@
'use strict';
//1.

const bookIds = [
'oliver_twist',
'hamlet',
'antony_and_cleopatra',
'macbeth',
'waiting_for_godot',
'arms_and_the_man',
'merchant_of_venice',
'crime_and_punishment',
'romeo_and_juliet',
'a_tale_of_two_cities',
];
//console.log(bookIds);

//3.
function books(bookIds) {
Copy link
Contributor

@NoerGitKat NoerGitKat Jun 4, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's better to give a function a more 'active' name, that includes a verb. This is because a function is a tool you're using to get a certain job done. In this case, you could call it "displayBookList" or "renderBookTitles".

const container1 = document.getElementById('container');
const ul = document.createElement('ul');
container1.appendChild('ul');
for (let index = 0; index < bookIds.length; index++) {
const li = document.createElement('li');
(li.textContent = 'List of Books:'), bookIds[index];
ul.appendChild(li);
}
}
window.addEventListener('load', books);

//4.
const DifferentBooks = {
Copy link
Contributor

@NoerGitKat NoerGitKat Jun 4, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The name of this variable can be more meaningful, like "bookDetails".

oliver_twist: {
name: 'Oliver Twist',
language: 'English',
author: 'Charles-Dickens',
},
hamlet: {
name: 'Hamlet',
language: 'English',
author: 'Shakespeare',
},
antony_and_cleopatra: {
name: 'Antony and Cleopatra',
language: 'English',
author: 'Shakespeare',
},
macbeth: {
name: 'Macbeth',
language: 'English',
author: 'Shakespeare',
},
waiting_for_godot: {
name: 'Waiting for Godot',
language: 'English',
author: 'Samuel Becket',
},
arms_and_the_man: {
name: 'Arms and the Man',
language: 'English',
author: 'George Bernard Show',
},
merchant_of_venice: {
name: 'The Merchant of Venice',
language: 'English',
author: 'Shakespeare',
},
crime_and_punishment: {
name: 'Crime and Punishment',
language: 'Russian',
author: 'Fyodor Dostoevsky',
},
romeo_and_juliet: {
name: 'Romeo and Juliet',
language: 'English',
author: 'Shakespeare',
},
a_tale_of_two_cities: {
name: 'A Tale of Two Cities',
language: 'English',
author: 'Charles Dickens',
},
};

//5. Working on it.
// const images = document.createElement('img');
// images.src =
// 'https://static01.nyt.com/images/2018/11/05/arts/05godot/05godot-articleLarge.jpg?quality=75&auto=webp&disable=upscale';
// document.body.appendChild(images);
// document.write('<br/>This is a great pic of Godot Cover');

//7.
const newBookIds = {
oliver_twist: './img/OLIVER_TWIST-2.jpg',
hamlet: './img/Hamlet.jpg',
antony_and_cleopatra: './img/AntonyAndCleopatra.jpg',
macbeth: './img/Macbeth.jpg',
waiting_for_godot: './img/Godot.jpg',
arms_and_the_man: './img/ArmsAndTheMan.jpg',
the_merchant_of_venice: './img/MerchantOfVenice.jpg',
crime_and_punishment: './img/CrimeAndPunishment.jpg',
romeo_and_juliet: './img/RomeoAndJuliet.jpg',
a_tale_of_two_cities: './img/a-tale-of-two-cities.jpg',
};

//8.
function covers() {
const div = document.getElementById('items');
const div2 = document.createElement('h1');
Copy link
Contributor

@NoerGitKat NoerGitKat Jun 4, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same advice here: naming variables and functions to be meaningful is very important. This is because you'll be reading your code over and over again, so a meaningful name helps you much quicker understand what's happening.

div2.innerHTML = 'My Favorite Books';
div.appendChild(div2);
div2.className = 'moreItems';

const divTag = document.createElement('div');
divTag.className = 'my-books';
const ul = document.createElement('ul');
ul.className = 'books';
bookIds.forEach(function(index) {
Copy link
Contributor

@NoerGitKat NoerGitKat Jun 4, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For consistency you could've used a for-loop again. It might look different, but both constructs (a for-loop and forEach) essentially do the same.

const img = document.createElement('img');
img.src = newBookIds[index];
img.style.width = '200px';
//img.style.cssFloat = 'left';
img.className = 'cover';
const title = document.createElement('h2');
title.innerHTML = DifferentBooks[index].name;
title.className = 'title';
const liTag = document.createElement('li');
liTag.innerHTML = DifferentBooks[index].author;
liTag.className = 'book';
liTag.appendChild(title);
liTag.appendChild(img);
ul.appendChild(liTag);
div.appendChild(divTag);
divTag.appendChild(ul);
});
}
window.addEventListener('load', covers);