Skip to content

Commit 74910e3

Browse files
soolafsoolaf
committed
homework Week1
1 parent 2debd1b commit 74910e3

File tree

2 files changed

+53
-103
lines changed

2 files changed

+53
-103
lines changed

‎Week1/homework/app.js‎

Lines changed: 33 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -53,15 +53,15 @@
5353
Artist: 'Nick Lowndes'
5454
},
5555
id_book_seven: {
56-
author: 'Jim Thompson',
56+
author: 'Jim Th',
5757
language: 'english',
5858
name: 'Heed The Thunder',
5959
Artist: 'Unknown'
6060
},
6161
id_book_eight: {
6262
author: 'James Hawes',
6363
language: 'english',
64-
name: 'Title: Why You Should Read Kafka Before You Waste Your Life',
64+
name: 'You Should Read',
6565
Artist: 'Steve Snider'
6666
},
6767
id_book_nine: {
@@ -77,93 +77,46 @@
7777
Artist: 'Unknown'
7878
}
7979
};
80-
8180
const image = {
82-
id_book_one: './imag/id_book_one.jpg',
83-
id_book_two: './imag/id_book_two.jpg',
84-
id_book_three: './imag/id_book_three.jpg',
85-
id_book_four: './imag/id_book_four.jpg',
86-
id_book_five: './imag/id_book_five.jpg',
87-
id_book_six: './imag/id_book_six.jpg',
88-
id_book_seven: './imag/id_book_seven.jpg',
89-
id_book_eight: './imag/id_book_eight.jpg',
90-
id_book_nine: './imag/id_book_nine.jpg',
91-
id_book_ten: './imag/id_book_ten.jpg'
81+
id_book_one: './image/id_book_one.jpg',
82+
id_book_two: './image/id_book_two.jpg',
83+
id_book_three: './image/id_book_three.jpg',
84+
id_book_four: './image/id_book_four.jpg',
85+
id_book_five: './image/id_book_five.jpg',
86+
id_book_six: './image/id_book_six.jpg',
87+
id_book_seven: './image/id_book_seven.jpg',
88+
id_book_eight: './image/id_book_eight.jpg',
89+
id_book_nine: './image/id_book_nine.jpg',
90+
id_book_ten: './image/id_book_ten.jpg'
9291
};
93-
{
94-
function cover() {
95-
img => (divImgs += `<imag src='${imag}' width = 200>`);
96-
divImgs += '</div>';
97-
divImgs = divImgs
98-
.split('><')
99-
.join('>,<')
100-
.split(',');
101-
divImgs[0] = "<imag src='./imag/id_book_one.jpg' width = 200>";
102-
divImgs.pop();
103-
104-
for (let i = 0; i < listBooks.length; i++) {
105-
document.body.innerHTML += `${divlistBooks[i]}`;
106-
document.body.innerHTML += `${divImg[i]}`;
107-
}
108-
}
109-
window.addEventListener('load', cover);
110-
}
111-
112-
let div = document.getElementById('container');
92+
const div = document.getElementById('container');
11393

114-
let h1Tag = document.createElement('h1');
94+
const h1Tag = document.createElement('h1');
11595
h1Tag.innerHTML = 'My Favourite Books';
11696
div.appendChild(h1Tag);
11797
h1Tag.className = 'h1Tag';
11898

119-
let divTag = document.createElement('div');
99+
const divTag = document.createElement('div');
120100
divTag.className = 'myBooks';
121101

122-
let ultag = document.createElement('ul');
123-
ultag.className = 'books';
124-
125-
const body = document.body;
126-
body.appendChild(createList(listBooks));
127-
128-
function createList(books) {
129-
const listBooks = document.createElement('ul');
130-
131-
for (let i = 0; i < books.length; i++) {
132-
const item = document.createElement('li');
133-
item.id = books[i];
134-
item.appendChild(createChild('h2', 'Title', information[books[i]].name));
135-
item.appendChild(
136-
createChild('p', 'Author: By ', createChild('em', information[books[i]].author))
137-
);
138-
item.appendChild(
139-
createChild('div', 'Language: By ', createChild('em', information[books[i]].language))
140-
);
141-
item.appendChild(
142-
createChild('div', 'Cover Artist: By ', createChild('em', information[books[i]].Artist))
143-
);
144-
145-
listBooks.appendChild(item);
146-
}
147-
return listBooks;
148-
}
149-
150-
function createChild(type, ...children) {
151-
const node = document.createElement(type);
152-
153-
for (const child of children) {
154-
if (typeof child === 'string') {
155-
node.appendChild(document.createTextNode(child));
156-
} else {
157-
node.appendChild(child);
158-
}
159-
}
160-
161-
return node;
162-
}
163-
164-
function capitalizeFirstLetter(string) {
165-
return string.charAt(0).toUpperCase() + string.slice(1);
166-
}
102+
const ulTag = document.createElement('ul');
103+
ulTag.className = 'books';
104+
listBooks.forEach(function(id) {
105+
const img = document.createElement('img');
106+
img.src = image[id];
107+
img.className = 'cover';
108+
const title = document.createElement('h2');
109+
title.innerHTML = information[id].name;
110+
title.className = 'title';
111+
const liTag = document.createElement('li');
112+
liTag.innerHTML = information[id].author;
113+
liTag.className = 'book';
114+
liTag.appendChild(title);
115+
liTag.appendChild(img);
116+
ulTag.appendChild(liTag);
117+
div.appendChild(divTag);
118+
divTag.appendChild(ulTag);
119+
});
167120
}
168121

169122
window.addEventListener('load', main);

‎Week1/homework/style.css‎

Lines changed: 20 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,31 @@
1-
/* add your styling here */
21
body {
3-
background-color: aqua;
2+
background-image: url('http://celb.lu/wp-content/uploads/2014/04/Gray-plain-website-background.jpg');
3+
width: 100%;
44
}
55
ul {
6-
list-style: none;
7-
8-
padding: 50;
9-
10-
overflow: hidden;
6+
text-decoration-style: none;
7+
display: flex;
8+
justify-content: center;
9+
flex-wrap: wrap;
1110
}
11+
1212
li {
13-
float: left;
13+
list-style: none;
14+
margin-top: 0px;
1415
width: 300px;
15-
height: 300px;
16-
margin: 10 px;
17-
18-
text-align: center;
19-
20-
padding: 30px;
21-
22-
font-size: 1.5em;
23-
24-
margin: 9px;
25-
26-
text-decoration: none;
27-
28-
background-color: rgb(163, 160, 151);
16+
height: 400px;
17+
vertical-align: middle;
2918
}
3019
h1 {
3120
text-align: center;
32-
color: palevioletred;
21+
color: rgb(29, 124, 168);
3322
font-size: 5em;
3423
}
24+
img {
25+
width: 150px;
26+
height: 200px;
27+
border-radius: 30px;
28+
}
29+
.book {
30+
margin: 30px 10px 5px 20px;
31+
}

0 commit comments

Comments
 (0)