Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit bd19148

Browse files
YahefuYusufuYahefuYusufu
committed
week 1 homework has done
1 parent edc62d9 commit bd19148

16 files changed

+256
-24
lines changed

‎.eslintrc.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@
66
"jest": true
77
},
88
"rules": {
9-
"prettier/prettier": ["error"],
9+
"prettier/prettier": "off",
10+
"no-unused-vars": "error",
1011
"strict": "off",
1112
"func-names": "off",
1213
"import/no-dynamic-require": "off",

‎Week1/homework/app.js

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,16 @@
33
{
44
const bookTitles = [
55
// Replace with your own book titles
6-
'harry_potter_chamber_secrets',
6+
'harry_potter_chamber_secrets1',
7+
'harry_potter_chamber_secrets2',
8+
'harry_potter_chamber_secrets3',
9+
'harry_potter_chamber_secrets4',
10+
'harry_potter_chamber_secrets5',
11+
'harry_potter_chamber_secrets6',
12+
'harry_potter_chamber_secrets7',
13+
'harry_potter_chamber_secrets8',
14+
'harry_potter_chamber_secrets9',
15+
'harry_potter_chamber_secrets10',
716
];
817

918
// Replace with your own code

‎Week1/homework/index.html

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,16 @@
1-
<!-- replace this with your HTML content -->
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>homework</title>
9+
</head>
10+
<div>Book Title</div>
11+
12+
<body>
13+
<script src="./app.js"></script>
14+
</body>
15+
16+
</html>

‎Week1/homework/style.css

Lines changed: 74 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,74 @@
1-
/* add your styling here */
1+
*,
2+
*::after,
3+
*::before {
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
display: flex;
9+
flex-direction: column;
10+
align-items: center;
11+
height: 100vh;
12+
margin: 0;
13+
padding: 0;
14+
}
15+
h1 {
16+
background-color: brown;
17+
color: aliceblue;
18+
padding: 1rem;
19+
border-radius: 1rem;
20+
}
21+
22+
.bookList {
23+
display: flex;
24+
max-width: 100%;
25+
}
26+
.bookList ul {
27+
display: flex;
28+
flex-wrap: wrap;
29+
}
30+
.bookList ul li {
31+
color: rgb(34, 139, 230);
32+
padding: 1.4rem;
33+
border-radius: 0.4rem;
34+
list-style-type: none;
35+
margin: 0.5rem 0.5rem;
36+
border: 2px solid black;
37+
}
38+
39+
.container {
40+
background-color: aliceblue;
41+
max-width: 100%;
42+
width: 70%;
43+
height: 100vh;
44+
}
45+
.container ul {
46+
display: flex;
47+
flex-wrap: wrap;
48+
justify-content: center;
49+
}
50+
.container ul li {
51+
background-color: lightblue;
52+
color: black;
53+
width: 220px;
54+
margin: 1rem auto;
55+
padding: 1rem;
56+
border: 1px solid red;
57+
border-radius: 1rem;
58+
list-style-type: none;
59+
}
60+
.container ul li h2 {
61+
text-align: center;
62+
font-size: medium;
63+
}
64+
.container ul li h3 {
65+
text-align: center;
66+
font-size: medium;
67+
}
68+
.container p {
69+
text-align: center;
70+
}
71+
.container img {
72+
width: 1rem;
73+
margin: 1rem;
74+
}

‎Week1/js-exercises/ex1-bookList.html

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,20 @@
22
<html lang="en">
33

44
<head>
5-
<meta charset="UTF-8">
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<title>Book List</title>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" href="../homework//style.css">
8+
<title>Book List</title>
89
</head>
910

1011
<body>
11-
<h1> My Book List</h1>
12-
<div id="bookList">
13-
<!-- put the ul element here -->
14-
</div>
12+
<h1> My Book List</h1>
13+
<div id="bookList" class="bookList">
14+
<!-- put the ul element here -->
15+
</div>
16+
<div class="header"></div>
17+
<div class="container"></div>
18+
<script src="./ex1-bookList.js"></script>
1519
</body>
1620

1721
</html>

‎Week1/js-exercises/ex1-bookList.js

Lines changed: 143 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
/* eslint-disable no-use-before-define */
2+
/* eslint-disable no-prototype-builtins */
3+
/* eslint-disable no-empty */
4+
/* eslint-disable array-callback-return */
5+
/* eslint-disable no-unused-vars */
6+
/* eslint-disable prettier/prettier */
17
/**
28
39
** Exercise 1: The book list **
@@ -12,31 +18,155 @@
1218
5. Change the style of the book depending on whether you have read it(green) or not(red).
1319
1420
The end result should look something like this:
15-
https: //hyf-js2-week1-makeme-ex1-demo.herokuapp.com/
21+
https: //hyf-js2-week1-make me-ex1-demo.heroku app.com/
1622
1723
*/
1824

19-
function createBookList(books) {
20-
// your code goes in here, return the ul element
25+
const bookTitles = [
26+
'twilight',
27+
'secret_garden',
28+
'frankenstein',
29+
'little_women',
30+
'matilda',
31+
'alice',
32+
'dorian_gray',
33+
'petit_prince',
34+
'inferno',
35+
'great_gatsby',
36+
];
37+
38+
function createBookList() {
39+
const ul = document.createElement('ul');
40+
for (let i = 0; bookTitles.length > i; i++) {
41+
const item = bookTitles[i];
42+
const li = document.createElement('li');
43+
ul.appendChild(li);
44+
li.innerHTML = item;
45+
}
46+
return ul;
2147
}
48+
document.querySelector('#bookList').appendChild(createBookList());
2249

23-
const books = [{
24-
title: 'The Design of Everyday Things',
50+
const booksInfo = [
51+
{
52+
title: 'The Design of Everyday Things1',
2553
author: 'Don Norman',
26-
alreadyRead: false
54+
language: 'english',
55+
alreadyRead: false,
2756
},
2857
{
29-
title: 'The Most Human Human',
58+
title: 'The Most Human Human2',
3059
author: 'Brian Christian',
31-
alreadyRead: true
60+
language: 'chinese',
61+
alreadyRead: true,
3262
},
3363
{
34-
title: 'The Pragmatic Programmer',
64+
title: 'The Pragmatic Programmer3',
3565
author: 'Andrew Hunt',
36-
alreadyRead: true
37-
}
66+
language: 'turkish',
67+
alreadyRead: true,
68+
},
69+
{
70+
title: 'The Pragmatic Programmer4',
71+
author: 'Andrew Hunt',
72+
language: 'uighur',
73+
alreadyRead: true,
74+
},
75+
{
76+
title: 'The Pragmatic Programmer5',
77+
author: 'Andrew Hunt',
78+
language: 'kazak',
79+
alreadyRead: true,
80+
},
81+
{
82+
title: 'The Pragmatic Programmer6',
83+
author: 'Andrew Hunt',
84+
language: 'swedish',
85+
alreadyRead: true,
86+
},
87+
{
88+
title: 'The Pragmatic Programmer7',
89+
author: 'Andrew Hunt',
90+
language: 'ganja',
91+
alreadyRead: true,
92+
},
93+
{
94+
title: 'The Pragmatic Programmer8',
95+
author: 'Andrew Hunt',
96+
language: 'korean',
97+
alreadyRead: true,
98+
},
99+
{
100+
title: 'The Pragmatic Programmer9',
101+
author: 'Andrew Hunt',
102+
language: 'japan',
103+
alreadyRead: true,
104+
},
105+
{
106+
title: 'The Pragmatic Programmer10',
107+
author: 'Andrew Hunt',
108+
language: 'franca',
109+
alreadyRead: true,
110+
},
38111
];
39112

40-
let ulElement = createBookList(books);
113+
const bookCovers = {
114+
twilight: './img/alice.jpeg',
115+
secret_garden: './img/secret_garden.jpeg',
116+
frankenstein: './img/frankenstein.jpeg',
117+
little_women: './img/little_women.jpeg',
118+
matilda: './img/matilda.jpeg',
119+
alice: './img/alice.jpeg',
120+
dorian_gray: './img/dorian_gray.jpeg',
121+
petit_prince: './img/petit_prince.jpeg',
122+
inferno: './img/inferno.jpeg',
123+
great_gatsby: './img/great_gatsby.jpeg',
124+
};
125+
126+
// 1.5
127+
128+
const header = document.querySelector('.header');
129+
const h1 = document.createElement('h1');
130+
h1.innerHTML = 'my Bookshelf ';
131+
header.appendChild(h1);
132+
133+
const createMyBookShelf = () => {
134+
const container = document.querySelector('.container');
135+
const ul = document.createElement('ul');
136+
container.appendChild(ul);
137+
138+
for (const key in booksInfo) {
139+
if (booksInfo.hasOwnProperty(key)) {
140+
console.log(key, booksInfo[key]);
141+
const item = booksInfo[key];
142+
143+
const li = document.createElement('li');
144+
ul.appendChild(li);
145+
146+
const title = document.createElement('h2');
147+
li.appendChild(title);
148+
title.innerHTML = `${item.title}`;
149+
150+
const author = document.createElement('h3');
151+
li.appendChild(author);
152+
author.innerHTML = `By : ${item.author}`;
153+
154+
const language = document.createElement('p');
155+
li.appendChild(language);
156+
language.innerHTML = `Language : ${item.language}`;
157+
158+
displayCover(li, bookCovers[key], booksInfo[key].title);
159+
}
160+
}
161+
};
162+
createMyBookShelf();
163+
164+
function displayCover(book, id, alt) {
165+
const img = document.createElement('img');
166+
book.appendChild(img);
167+
img.src = id;
168+
img.alt = alt;
169+
}
170+
// const ulElement = createBookList(bookTitles);
41171

42-
document.querySelector("#bookList").appendChild(ulElement);
172+
// document.querySelector('#bookList').appendChild(ulElement);

‎Week1/js-exercises/img/alice.jpeg

74.2 KB
Loading

‎Week1/js-exercises/img/dorian_gray.jpeg

282 KB
Loading

‎Week1/js-exercises/img/frankenstein.jpeg

172 KB
Loading

‎Week1/js-exercises/img/great_gatsby.jpeg

19.9 KB
Loading

‎Week1/js-exercises/img/inferno.jpeg

380 KB
Loading

‎Week1/js-exercises/img/little_women.jpeg

376 KB
Loading

‎Week1/js-exercises/img/matilda.jpeg

291 KB
Loading

‎Week1/js-exercises/img/petit_prince.jpeg

336 KB
Loading

‎Week1/js-exercises/img/secret_garden.jpeg

61.4 KB
Loading

‎Week1/js-exercises/img/twilight.jpeg

50.4 KB
Loading

0 commit comments

Comments
 (0)