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

Skip to content

Commit ae2ccaf

Browse files
humblecoder00humblecoder00
committed
update
1 parent a75df88 commit ae2ccaf

13 files changed

+324
-10
lines changed

‎Week1/homework/app.js

Lines changed: 129 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,132 @@
1-
'use strict';
2-
{
3-
const bookTitles = [
4-
// Replace with your own book titles
5-
'harry_potter_chamber_secrets'
6-
];
1+
"use strict";
72

3+
//2.1 - Declaring an array that contains 10 strings with book titles:
84

9-
// Replace with your own code
10-
console.log(bookTitles);
5+
const myBookArray = ["the_hobbit", "the_fellowship_of_the_ring", "the_two_towers", "the_return_of_the_king", "the_silmarillion", "the_book_of_lost_tales", "tree_and_leaf", "the_lays_of_beleriand", "the_return_of_the_shadow", "the_peoples_of_middle_earth"];
6+
7+
//Checking the array with console.log, to see if everything is in order:
8+
9+
//console.log(myBookArray);
10+
11+
/* Result:
12+
13+
[ 'the_hobbit',
14+
'the_fellowship_of_the_ring',
15+
'the_two_towers',
16+
'the_return_of_the_king',
17+
'the_silmarillion',
18+
'the_book_of_lost_tales',
19+
'tree_and_leaf',
20+
'the_lays_of_beleriand',
21+
'the_return_of_the_shadow',
22+
'the_peoples_of_middle_earth' ]
23+
24+
*/
25+
26+
//2.3 - Creating a function that generates a ul with li elements for each book ID in the array using a for loop:
27+
28+
/* Here is the function before changing it at the step 2.5:
29+
30+
function createListWithBooks() {
31+
32+
const genUlElement = document.createElement('ul');
33+
document.body.appendChild(genUlElement);
34+
35+
for (i = 0; i < myBookArray.length; i++) {
36+
const genLiElement = document.createElement('li');
37+
genUlElement.appendChild(genLiElement);
38+
}
39+
}*/
40+
41+
//2.4 - Creating an object containing information for each book:
42+
43+
44+
const myBookCollection = {
45+
the_hobbit: {
46+
Title: "The Hobbit",
47+
Language: "English",
48+
Author: "J.R.R. Tolkien",
49+
bookImg: "bookPics/the_hobbit.JPG",
50+
},
51+
the_fellowship_of_the_ring: {
52+
Title: "The Fellowship Of The Ring",
53+
Language: "English",
54+
Author: "J.R.R. Tolkien",
55+
bookImg: "bookPics/the_fellowship_of_the_ring.JPG",
56+
},
57+
the_two_towers: {
58+
Title: "The Two Towers",
59+
Language: "English",
60+
Author: "J.R.R. Tolkien",
61+
bookImg: "bookPics/the_two_towers.JPG",
62+
},
63+
the_return_of_the_king: {
64+
Title: "The Return Of The King",
65+
Language: "English",
66+
Author: "J.R.R. Tolkien",
67+
bookImg: "bookPics/the_return_of_the_king.JPG",
68+
},
69+
the_silmarillion: {
70+
Title: "The Silmarillion",
71+
Language: "English",
72+
Author: "J.R.R. Tolkien",
73+
bookImg: "bookPics/the_silmarillion.JPG",
74+
},
75+
the_book_of_lost_tales: {
76+
Title: "The Book Of Lost Tales",
77+
Language: "English",
78+
Author: "J.R.R. Tolkien",
79+
bookImg: "bookPics/the_book_of_lost_tales.JPG",
80+
},
81+
tree_and_leaf: {
82+
Title: "Tree and Leaf",
83+
Language: "English",
84+
Author: "J.R.R. Tolkien",
85+
bookImg: "bookPics/tree_and_leaf.JPG",
86+
},
87+
the_lays_of_beleriand: {
88+
Title: "The Lays Of Beleriand",
89+
Language: "English",
90+
Author: "J.R.R. Tolkien",
91+
bookImg: "bookPics/the_lays_of_beleriand.JPG",
92+
},
93+
the_return_of_the_shadow: {
94+
Title: "The Return Of The Shadow",
95+
Language: "English",
96+
Author: "J.R.R. Tolkien",
97+
bookImg: "bookPics/the_return_of_the_shadow.JPG",
98+
},
99+
the_peoples_of_middle_earth: {
100+
Title: "The Peoples Of Middle-Earth",
101+
Language: "English",
102+
Author: "J.R.R. Tolkien",
103+
bookImg: "bookPics/the_peoples_of_middle_earth.JPG",
104+
}
11105
}
106+
107+
108+
//2.5 - A function that takes the actual information about the book from the object and displays that:
109+
110+
function createListWithBooks() {
111+
112+
let genUlElement = document.createElement('ul');
113+
document.body.appendChild(genUlElement);
114+
115+
116+
for (let i in myBookCollection) {
117+
118+
let liChild = genUlElement.appendChild(document.createElement('li'));
119+
let imgChild = liChild.appendChild(document.createElement('img'));
120+
imgChild.src = myBookCollection[i].bookImg;
121+
let h2Child = liChild.appendChild(document.createElement('h2'));
122+
let h2Text = h2Child.appendChild(document.createTextNode(myBookCollection[i].Title));
123+
let h3Child = liChild.appendChild(document.createElement('h3'));
124+
let h3Text = h3Child.appendChild(document.createTextNode('Author : ' + myBookCollection[i].Author));
125+
let h4Child = liChild.appendChild(document.createElement('h4'));
126+
let h4Text = h4Child.appendChild(document.createTextNode('Language : ' + myBookCollection[i].Language));
127+
128+
liChild, h2Child, h2Text, h3Child, h3Text, h4Child, h4Text, imgChild = myBookCollection[i];
129+
130+
}
131+
132+
};

‎Week1/homework/bookPics/the_book_of_lost_tales.JPG

58.1 KB
Loading

‎Week1/homework/bookPics/the_fellowship_of_the_ring.JPG

56.4 KB
Loading

‎Week1/homework/bookPics/the_hobbit.JPG

73.4 KB
Loading

‎Week1/homework/bookPics/the_lays_of_beleriand.JPG

50 KB
Loading

‎Week1/homework/bookPics/the_peoples_of_middle_earth.JPG

39.7 KB
Loading

‎Week1/homework/bookPics/the_return_of_the_king.JPG

42.8 KB
Loading

‎Week1/homework/bookPics/the_return_of_the_shadow.JPG

67.2 KB
Loading

‎Week1/homework/bookPics/the_silmarillion.JPG

35.1 KB
Loading

‎Week1/homework/bookPics/the_two_towers.JPG

60.9 KB
Loading

‎Week1/homework/bookPics/tree_and_leaf.JPG

35.4 KB
Loading

‎Week1/homework/index.html

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,18 @@
1-
<!-- replace this with your HTML content -->
1+
<!DOCTYPE html>
2+
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Javascript 2 - Week 01 Homework</title>
7+
<link rel="stylesheet" href="style.css" type="text/css">
8+
<link href="https://fonts.googleapis.com/css?family=Cinzel|Cabin" rel="stylesheet">
9+
<script type='text/javascript' src='apps.js'></script>
10+
</head>
11+
<header>
12+
<h1>MIDDLE-EARTH BOOKSHOP</h1>
13+
</header>
14+
15+
<body onload="createListWithBooks();">
16+
</body>
17+
18+
</html>

‎Week1/homework/style.css

Lines changed: 177 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,177 @@
1-
/* add your styling here */
1+
html {
2+
box-sizing: border-box;
3+
}
4+
5+
*, *:before, *:after {
6+
box-sizing: inherit;
7+
}
8+
9+
body {
10+
background-image: linear-gradient(lightgray,white);
11+
margin-top: 0;
12+
color: #b6991e;
13+
}
14+
15+
header {
16+
background-color: #444;
17+
height: 5%;
18+
}
19+
20+
21+
img {
22+
max-width: 100%;
23+
height: auto;
24+
display: block;
25+
margin-left: auto;
26+
margin-right: auto;
27+
}
28+
29+
h1 {
30+
margin-top: 0;
31+
padding-top: 0.67em;
32+
text-align: center;
33+
font-size: 1em;
34+
font-family: "Cinzel"
35+
}
36+
37+
h2 {
38+
display: block;
39+
height: 45px;
40+
font-family: "Cinzel", Arial, Helvetica, sans-serif;
41+
font-size: 1em;
42+
text-align: center;
43+
margin-top: 0.3em;
44+
margin-bottom: 0.3em;
45+
}
46+
47+
h3, h4 {
48+
display: block;
49+
font-family: "Cabin", Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
50+
font-size: 0.75em;
51+
text-align: center;
52+
color: black;
53+
margin-top: 0.2em;
54+
margin-bottom: 0.2em;
55+
}
56+
57+
ul {
58+
list-style: none;
59+
margin-left: 5px;
60+
margin-right: 0;
61+
padding-left: 5px;
62+
padding-right: 0;
63+
}
64+
65+
li {
66+
display: block;
67+
margin-bottom: 10px;
68+
margin-left: 0;
69+
margin-right: 5px;
70+
padding-left: 0;
71+
padding-right: 5px;
72+
width: 48%;
73+
height: auto;
74+
text-align: justify;
75+
float: left;
76+
overflow: hidden;
77+
}
78+
79+
li:after {
80+
content: "";
81+
display: table;
82+
clear: both;
83+
}
84+
85+
li:hover, li:active {
86+
opacity: 0.8;
87+
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
88+
}
89+
90+
li > img {
91+
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
92+
}
93+
94+
95+
@keyframes rotation {
96+
from {
97+
transform: rotate(0deg);
98+
}
99+
to {
100+
transform: rotate(360deg);
101+
}
102+
}
103+
104+
@media only screen and (max-width: 374px) {
105+
img {
106+
max-height: 203px;
107+
}
108+
}
109+
110+
@media only screen and (min-width: 375px) and (max-width: 424px) {
111+
img {
112+
max-height: 240px;
113+
}
114+
}
115+
116+
@media only screen and (min-width: 425px) and (max-width: 767px) {
117+
img {
118+
max-height: 275px;
119+
}
120+
}
121+
122+
123+
@media only screen and (min-width: 768px) and (max-width: 1023px) {
124+
li {
125+
width: 32%;
126+
}
127+
128+
img {
129+
width: 100%;
130+
height: 60%;
131+
max-height: 350px;
132+
}
133+
134+
h1 {
135+
font-size: 2em;
136+
}
137+
138+
h2 {
139+
height: 45px;
140+
}
141+
}
142+
143+
@media only screen and (min-width: 1024px) {
144+
145+
h1 {
146+
font-size: 2.6em;
147+
}
148+
149+
h2 {
150+
font-size: 1.25em;
151+
margin-bottom: 1em;
152+
}
153+
154+
h3 {
155+
font-size: 1em;
156+
}
157+
158+
h4 {
159+
font-size: 0.75em;
160+
}
161+
162+
li {
163+
width: 19%;
164+
margin-bottom: 20px;
165+
}
166+
167+
img {
168+
display: block;
169+
margin-left: auto;
170+
margin-right: auto;
171+
width: auto;
172+
max-width: 100%;
173+
height: auto;
174+
max-height: 277px;
175+
}
176+
177+
}

0 commit comments

Comments
 (0)