Skip to content

Homework Week1 #26

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
nuanprae wants to merge 20 commits into
base: master
Choose a base branch
from
Open

Homework Week1 #26

Changes from 1 commit
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
02c6a13
Add array, object containing book info and function listItems
nuanprae Feb 15, 2021
9387ad0
Remove bookTitles array and use Object.keys in listItems function
nuanprae Feb 16, 2021
735092a
Add img folder and display book covers
nuanprae Feb 16, 2021
61d5e1d
Change to follow instructions
nuanprae Feb 16, 2021
fd66828
Add info and image by checking id
nuanprae Feb 17, 2021
49064c3
Refactor functions to follow instructions
nuanprae Feb 17, 2021
ca88fda
Style page using grid
nuanprae Feb 17, 2021
ca82d97
Add minmax auto-fit
nuanprae Feb 17, 2021
ed5aa41
Change bookCovers to images
nuanprae Feb 17, 2021
68f9d14
Change background colour
nuanprae Feb 17, 2021
dbfc4c4
Refactor placeImage() to be part of generateItems()
nuanprae Feb 19, 2021
453613d
Remove 2nd for loop
nuanprae Feb 19, 2021
38f6ef7
Refactor so image can be moved within li and always corresponds to sa…
nuanprae Feb 19, 2021
791b986
Comment out unused array and function
nuanprae Feb 19, 2021
ba1e81c
Use bookTitles array to display items and create a function to inject…
nuanprae Feb 19, 2021
cd254ea
Add semantic html
nuanprae Feb 19, 2021
8cbfd89
Refactor to get keys from books object
nuanprae Feb 22, 2021
06bedc6
Insert image after title of book
nuanprae Feb 22, 2021
a1bbfde
Pull from remote and fix conflict
nuanprae Feb 23, 2021
cfac9ce
Remove extra ul in style.css
nuanprae Feb 23, 2021
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
Prev Previous commit
Next Next commit
Add info and image by checking id
  • Loading branch information
@nuanprae
nuanprae committed Feb 17, 2021
commit fd668285723ef308cdcaa9aeff121b21db317973
81 changes: 24 additions & 57 deletions Week1/homework/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,14 @@
const bookTitles = [
'the_capture',
'the_journey',
'the_rescue',
'the_siege',
'the_shattering',
'the_burning',
'the_hatchling',
'the_outcast',
'the_first_collier',
'the_coming_of_hoole',
'the_rescue',
];
const bookCovers = {
the_capture: './img/thecapture.jpg',
Expand Down Expand Up @@ -77,67 +77,34 @@
author: 'Kathryn Lasky',
},
};

// list bookTitle from array called bookTitles
// const listItems = bookTitles => {
// const ul = document.createElement('ul');
// document.body.appendChild(ul);
// for (let i = 0; i < bookTitles.length; i++) {
// const li = document.createElement('li');
// const bookTitle = bookTitles[i];
// li.innerHTML = bookTitle;
// ul.appendChild(li);
// }
// };
// listItems(bookTitles);
const listItems = (ids, bookInfo) => {
const listItems = (ids, info, images) => {
const ul = document.createElement('ul');
document.body.appendChild(ul);
for (let i = 0; i < ids.length; i++) {
const li = document.createElement('li');
const id = ids[i];
const bookInfoKeys = Object.keys(bookInfo);
if (id === bookInfoKeys[i]) {
li.innerHTML = bookInfo[bookInfoKeys[i]].title;
ul.appendChild(li);
}
}
};
listItems(bookTitles, guardiansOfGahooleSeries);
const img = document.createElement('img');
const heading = document.createElement('h1');
const subHeading1 = document.createElement('h2');
const subHeading2 = document.createElement('h2');
li.setAttribute('id', ids[i]);

// const listItems = (img, info) => {
// const ul = document.createElement('ul');
// document.body.appendChild(ul);
// const imgKeys = Object.keys(img);
// const infoKeys = Object.keys(info);
// for (let i = 0; i < infoKeys.length; i++) {
// const li = document.createElement('li');
// const image = document.createElement('img');
// const heading = document.createElement('h1');
// const subHeading1 = document.createElement('h2');
// const subHeading2 = document.createElement('h2');
ul.appendChild(li);
const id = li.getAttribute('id');
const src = images[id];
const title = info[id].title;
const language = info[id].language;
const author = info[id].author;

// // accessing values inside object
// const title = info[infoKeys[i]].title;
// const language = info[infoKeys[i]].language;
// const author = info[infoKeys[i]].author;
// heading.innerHTML = title;
// subHeading1.innerHTML = `Language: ${author}`;
// subHeading2.innerHTML = `Author: ${language}`;
img.src = src;
heading.innerHTML = title;
subHeading1.innerHTML = `Language: ${language}`;
subHeading2.innerHTML = `Author: ${author}`;

// const check = () => {
// if (image) {
// }
// };
// image.src = img[imgKeys[i]];

// ul.appendChild(li);
// li.appendChild(image);
// li.appendChild(heading);
// li.appendChild(subHeading1);
// li.appendChild(subHeading2);
// }
// };

// listItems(bookCovers, guardiansOfGahooleSeries);
li.appendChild(img);
li.appendChild(heading);
li.appendChild(subHeading1);
li.appendChild(subHeading2);
}
};
listItems(bookTitles, guardiansOfGahooleSeries, bookCovers);
}