Skip to content

Commit ba2fb2e

Browse files
CatsudemoCatsudemo
committed
adding book homework
1 parent 0ab3385 commit ba2fb2e

3 files changed

Lines changed: 156 additions & 41 deletions

File tree

‎Week1/homework/app.js‎

Lines changed: 58 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ const booksInfo = {
2323
enma_the_immortal: {
2424
properties: {
2525
title: 'Enma the Immortal',
26-
language: 'English',
26+
language: 'Japanese',
2727
author: 'Fumi Nakamura',
2828
},
2929
},
@@ -65,7 +65,7 @@ const booksInfo = {
6565
the_next_continent: {
6666
properties: {
6767
title: 'The Next Continent',
68-
language: 'english',
68+
language: 'English',
6969
author: 'Issui Ogawa',
7070
},
7171
},
@@ -79,7 +79,7 @@ const booksInfo = {
7979
after_dark: {
8080
properties: {
8181
title: 'After Dark',
82-
language: 'japanese',
82+
language: 'Japanese',
8383
author: 'Haruki Murakami',
8484
},
8585
},
@@ -102,14 +102,33 @@ const booksInfo = {
102102
// };
103103

104104
window.onload = () => {
105+
const quotes = [
106+
'If you only read the books that everyone else is reading, you can only think what everyone else is thinking. ― Haruki Murakami',
107+
'Memories warm you up from the inside. But they also tear you apart. ― Haruki Murakami',
108+
"If you remember me, then I don't care if everyone else forgets. ― Haruki Murakami",
109+
"There's no such thing as perfect writing, just like there's no such thing as perfect despair. - Haruki Murakami",
110+
'They were words that came out of nothing, but they seemed to him somehow significant.He muttered them over again. - Yasunari Kawabata',
111+
'Remember the good things; write the bad ones down in here and forget about them.― Kanae Minato',
112+
"Just because I've written this book, don't think I've changed. I'm like I was back then, really. - Ryu Murakami",
113+
];
114+
console.log(quotes);
115+
const rand = quotes[Math.floor(Math.random() * quotes.length)];
116+
117+
const quoteSpace = document.querySelector('#quoteSpace');
118+
const quoteDiv = document.createElement('div');
119+
quoteDiv.innerText = rand;
120+
quoteSpace.appendChild(quoteDiv);
121+
105122
const myBookSpot = document.querySelector('#bookList');
106123

107124
const div = document.createElement('div');
108-
div.innerText = "This is a list of Catt's favourite books";
125+
div.setAttribute('class', 'wrapper');
109126

127+
// eslint-disable-next-line guard-for-in
110128
for (book in booksInfo) {
111129
const eachBookDiv = document.createElement('div');
112130
eachBookDiv.id = book;
131+
eachBookDiv.setAttribute('class', 'box');
113132
const name = document.createElement('h4');
114133
name.innerText = booksInfo[book].properties.title;
115134
eachBookDiv.appendChild(name);
@@ -129,36 +148,39 @@ window.onload = () => {
129148

130149
myBookSpot.appendChild(div);
131150
}
151+
console.log('loaded');
152+
153+
const bookImages = [
154+
{ memoirs_of_a_geisha: 'book_covers/memoirs_of_a_geisha_img.jpg' },
155+
{ enma_the_immortal: 'book_covers/enma_the_immortal_img.jpg' },
156+
{ confessions: 'book_covers/confessions_img.jpg' },
157+
{ coin_locker_babies: 'book_covers/coin_locker_babies_img.jpg' },
158+
{ beauty_and_sadness: 'book_covers/beauty_and_sadness_img.jpg' },
159+
{ house_of_sleeping_beauties: 'book_covers/house_of_sleeping_beauties_img.jpg' },
160+
{ empress: 'book_covers/empress_img.jpg' },
161+
{ the_next_continent: 'book_covers/the_next_continent_img.jpg' },
162+
{ underground: 'book_covers/underground_img.jpg' },
163+
{ after_dark: 'book_covers/after_dark_img.jpg' },
164+
];
165+
166+
// function addBookImages(bookPics) {
167+
// const length = bookPics.length;
168+
// for (let i = 0; i < length; i++) {
169+
// console.log(i);
170+
// // document.querySelector(bookPics.pic)
171+
// }
172+
// }
173+
// addBookImages(bookImages);
174+
// console.log(bookImages);
175+
176+
// eslint-disable-next-line guard-for-in
177+
for (image in bookImages) {
178+
const imageID = Object.keys(bookImages[image])[0];
179+
const lookFor = document.querySelector(`#${imageID}`);
180+
const picture = document.createElement('IMG');
181+
picture.src = bookImages[image][imageID];
182+
lookFor.appendChild(picture);
183+
184+
console.log(imageID, lookFor);
185+
}
132186
};
133-
console.log('loaded');
134-
135-
const bookImages = [
136-
{ memoirs_of_a_geisha: 'book_covers/memoirs_of_a_geisha_img.jpg' },
137-
{ enma_the_immortal: 'book_covers/enma_the_immortal_img.jpg' },
138-
{ confessions: 'book_covers/confessions_img.jpg' },
139-
{ coin_locker_babies: 'book_covers/coin_locker_babies_img.jpg' },
140-
{ beauty_and_sadness: 'book_covers/beauty_and_sadness_img.jpg' },
141-
{ house_of_sleeping_beauties: 'book_covers/house_of_sleeping_beauties_img.jpg' },
142-
{ empress: 'book_covers/empress_img.jpg' },
143-
{ the_next_continent: 'book_covers/the_next_continent_img.jpg' },
144-
{ underground: 'book_covers/underground_img.jpg' },
145-
{ after_dark: 'book_covers/after_dark_img.jpg' },
146-
];
147-
148-
// function addBookImages(bookPics) {
149-
// const length = bookPics.length;
150-
// for (let i = 0; i < length; i++) {
151-
// console.log(i);
152-
// // document.querySelector(bookPics.pic)
153-
// }
154-
// }
155-
// addBookImages(bookImages);
156-
// console.log(bookImages);
157-
158-
for (image in bookImages) {
159-
const imageID = Object.keys(bookImages[image])[0];
160-
const queryID = '#' + imageID;
161-
const lookFor = document.querySelector(queryID);
162-
163-
console.log(imageID, lookFor, queryID, document.querySelector('#confessions'));
164-
}

‎Week1/homework/index.html‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,25 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4+
<link rel="stylesheet" href="style.css" />
45
<meta charset="UTF-8" />
56
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
67
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
78
<title>Foo Coding Book Array</title>
89
</head>
910
<body>
10-
<h2>Book list</h2>
11-
<div id="bookList"></div>
12-
<script src="app.js"></script>
13-
<div id="div1">I'm the next div</div>
11+
<section class="section">
12+
<h2>Catt's Recommended Reading</h2>
13+
<br />
14+
<div id="quoteSpace"></div>
15+
16+
<div id="bookList"></div>
17+
<script src="app.js"></script>
18+
<div id="footer">
19+
Visit
20+
<a href="https://www.goodreads.com/user/show/6395246-cattrina" target="_blank">Goodreads</a>
21+
to see more of my favourite books.
22+
</div>
23+
</section>
1424
</body>
1525
</html>

‎Week1/homework/style.css‎

Lines changed: 84 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,84 @@
1-
/* add your styling here */
1+
@import url('https://fonts.googleapis.com/css?family=Abel');
2+
@import url('https://fonts.googleapis.com/css?family=Karla');
3+
body {
4+
background-color: #2E2C2F;
5+
font-family: Karla;
6+
margin: 40px;
7+
color: #F4F4ED;
8+
font-size: 30px;
9+
}
10+
11+
h4 {
12+
text-decoration: underline;
13+
}
14+
15+
a:visited {
16+
color: turquoise;
17+
}
18+
19+
section {
20+
position: absolute;
21+
left: 0;
22+
right: 0;
23+
margin-left: auto;
24+
margin-right: auto;
25+
width: 85%;
26+
height: auto;
27+
background-color: #2E2C2F;
28+
text-align: center;
29+
}
30+
31+
.wrapper {
32+
font-family: Abel;
33+
text-align: left;
34+
padding-top: 25px;
35+
padding-bottom: 25px;
36+
font-size: 20px;
37+
display: grid;
38+
align-items: center;
39+
grid-template-columns: 1fr 1fr 1fr;
40+
grid-gap: 10px;
41+
background-color: #2E2C2F;
42+
color: #444;
43+
}
44+
45+
.box {
46+
background-color: #313638;
47+
color: #C6C5B9;
48+
border-radius: 5px;
49+
font-size: 100%;
50+
min-width: 200px;
51+
min-height: 400px;
52+
}
53+
54+
img {
55+
width: auto;
56+
height: 500px;
57+
padding: 10px;
58+
margin: 10px;
59+
}
60+
61+
#quoteSpace {
62+
padding: 20px;
63+
font-family: Abel;
64+
font-size: 25px;
65+
font-style: italic;
66+
}
67+
68+
#footer {
69+
font-size: 20px;
70+
}
71+
72+
@media screen and (max-width: 600px) {
73+
img {
74+
display: none;
75+
}
76+
@media only screen and (max-width: 800px) {
77+
.wrapper {
78+
display: grid;
79+
align-items: center;
80+
grid-template-columns: 1fr 1fr
81+
}
82+
.box {
83+
height: 400px;
84+
}

0 commit comments

Comments
 (0)