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

Skip to content

Commit d204bf0

Browse files
lfcoding1lfcoding1
committed
homework from the last 7 days
1 parent bcf127e commit d204bf0

13 files changed

+208
-8
lines changed

‎Week1/homework/app.js

Lines changed: 152 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,157 @@
11
'use strict';
2-
{
3-
const bookTitles = [
2+
3+
const bookTitles = [
44
// Replace with your own book titles
5-
'harry_potter_chamber_secrets'
6-
];
5+
'harry_potter_chamber_secrets',
6+
'harry_potter_philosophers_stone',
7+
'the_fiery_cross',
8+
'madame_bovary',
9+
'anna_karenina',
10+
'harry_potter_goblet_of_fire',
11+
'twilight',
12+
'outlander',
13+
'harry_potter_deathly_hallows',
14+
'harry_potter_and_the_half_blood_prince'
15+
];
16+
/* const divForBookList = document.createElement('div'); //creates the div
17+
const listOfBooks = document.createElement('ul'); // creates the unord list
18+
19+
function makeBookList(){
20+
document.getElementsByTagName('body')[0].appendChild(divForBookList); //add the div to the body tag
21+
divForBookList.appendChild(listOfBooks); //adds the ul to the div
22+
23+
24+
for (let i = 0; i < bookTitles.length; i++){ //for each book title
25+
const listItems = document.createElement('li'); // create a li for each of the items
26+
listItems.innerHTML = bookTitles[i]; //add each book title index item to the listItems
27+
listOfBooks.appendChild(listItems); //add the list items to the ul
28+
}
29+
30+
}
31+
makeBookList() */
32+
33+
34+
const nameOfList = {
35+
'harry_potter_chamber_secrets': {
36+
'title': 'Harry Potter and the Chamber of Secrets',
37+
language: 'English',
38+
author: 'JK Rowling'
39+
},
40+
41+
'harry_potter_philosophers_stone': {
42+
'title': 'Harry Potter and the Philosopher\s Stone',
43+
language: 'English',
44+
author: 'JK Rowling'
45+
},
46+
47+
'the_fiery_cross': {
48+
'title': 'The Fiery Cross',
49+
language: 'English',
50+
author: 'Diana Galbaldon'
51+
},
52+
53+
'madame_bovary': {
54+
'title': 'Madame Bovary',
55+
language: 'French',
56+
author: 'Gustav Flaubert'
57+
},
58+
59+
'anna_karenina': {
60+
'title': 'Anna Karenina',
61+
language: 'English',
62+
author: 'Leo Tolstoy'
63+
},
64+
65+
'harry_potter_goblet_of_fire': {
66+
'title': 'Harry Potter and the Goblet of Fire',
67+
language: 'English',
68+
author: 'JK Rowling'
69+
},
70+
71+
'twilight': {
72+
'title': 'Twlight',
73+
language: 'English',
74+
author: 'Stephanie Meyer'
75+
},
76+
77+
'outlander': {
78+
'title': 'Outlander',
79+
language: 'English',
80+
author: 'Diana Galbadon'
81+
},
82+
83+
'harry_potter_the_deathly_hallows': {
84+
'title': 'Harry Potter and the Deathly Hallows',
85+
language: 'English',
86+
author: 'JK Rowling'
87+
},
88+
89+
'harry_potter_and_the_halfblood_prince': {
90+
'title': 'Harry Potter and the Half Blood Prince',
91+
language: 'English',
92+
author: 'JK Rowling'
93+
}
94+
}
95+
96+
var fieldset = document.createElement( 'fieldset' );
97+
fieldset.setAttribute( 'class' , 'nameOfList' );
98+
99+
var legend = document.createElement( 'legend' );
100+
legend.innerHTML = 'My Book List';
101+
fieldset.appendChild(legend);
102+
103+
function makeBookList(){
104+
const ul = document.createElement('ul'); // creates the unord list
105+
const myBooks = Object.keys(nameOfList)
106+
107+
108+
const div = document.createElement('div'); //creates the div
109+
110+
const h1second = document.createElement('h1'); // creates language h1
111+
const h1third = document.createElement('h1'); // creates author h1
112+
document.getElementsByTagName('body')[0].appendChild(div); //add the div to the body tag
113+
div.appendChild(ul); //adds the ul to the div
114+
const img = document.createElement('img');
115+
116+
117+
118+
for( let i = 0; i < myBooks.length; i++){
119+
const li = document.createElement('li');
120+
const li2 = document.createElement('li');
121+
var bookImage = document.createElement( 'img' );
122+
const h2 = document.createElement('h2');
123+
const h2second = document.createElement('h2');
124+
const h1 = document.createElement('h1'); // creates title h1
125+
var bookId = myBooks[i];
126+
127+
const myBook = nameOfList[bookId];
128+
h1.innerHTML = myBook.title;
129+
h2.innerHTML = ("author");
130+
li.innerHTML = myBook.language;
131+
h2second.innerHTML = ("language");
132+
li2.innerHTML = myBook.author;
133+
ul.appendChild(h1second);
134+
135+
ul.appendChild(h1);
136+
ul.appendChild(h1third);
137+
ul.appendChild(h2second);
138+
ul.appendChild(li);
139+
ul.appendChild(h2);
140+
ul.appendChild(li2);
141+
div.append( bookImage );
142+
143+
7144

8145

9-
// Replace with your own code
10-
console.log(bookTitles);
146+
var bookImage = document.createElement( 'img' ); //Create a img for the book in the div and give it an attribute
147+
bookImage.src = 'img/' + bookTitles[ i ] + '.jpg';
148+
bookImage.setAttribute( 'alt' , bookTitles[ i ] );
149+
bookImage.setAttribute('height', '300px');
150+
bookImage.setAttribute('width', '200px');
151+
ul.append( bookImage );
152+
11153
}
154+
fieldset.appendChild(div);
155+
document.body.append(fieldset );
156+
};
157+
makeBookList();

‎Week1/homework/img/anna_karenina.jpg

36 KB
Loading

‎Week1/homework/img/harry_potter_and_the_half_blood_prince.jpg

22.6 KB
Loading

‎Week1/homework/img/harry_potter_chamber_secrets.jpg

30.9 KB
Loading

‎Week1/homework/img/harry_potter_deathly_hallows.jpg

31.1 KB
Loading

‎Week1/homework/img/harry_potter_goblet_of_fire.jpg

327 KB
Loading

‎Week1/homework/img/harry_potter_philosophers_stone.jpg

34.6 KB
Loading

‎Week1/homework/img/madame_bovary.jpg

35.9 KB
Loading

‎Week1/homework/img/outlander.jpg

26.8 KB
Loading

‎Week1/homework/img/the_fiery_cross.jpg

142 KB
Loading

‎Week1/homework/img/twilight.jpg

24.1 KB
Loading

‎Week1/homework/index.html

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,23 @@
1-
<!-- replace this with your HTML content -->
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<link rel="stylesheet" href="style.css">
7+
<link href="https://fonts.googleapis.com/css?family=Tangerine" rel="stylesheet">
8+
<link href="https://fonts.googleapis.com/css?family=Crimson+Text|Lora" rel="stylesheet">
9+
10+
11+
</head>
12+
13+
<body>
14+
15+
16+
<script src ="app.js"></script>
17+
</body>
18+
19+
20+
21+
</html>
22+
23+
<!-- replace this with your HTML content -->

‎Week1/homework/style.css

Lines changed: 33 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,33 @@
1-
/* add your styling here */
1+
/* add your styling here */
2+
3+
4+
body {
5+
6+
text-align: center;
7+
font-family: 'Lora', serif;
8+
9+
}
10+
11+
h1 {
12+
color: black;
13+
margin-left: 20px;
14+
font-family: 'Tangerine', serif;
15+
font-size: 48px;
16+
text-shadow: 4px 4px 4px #aaa;
17+
font-size: 50px;
18+
}
19+
20+
h2 {
21+
color:navy;
22+
margin-left: 20px;
23+
font-size: 30px;
24+
font-family: 'Crimson Text', serif;
25+
}
26+
ul {
27+
list-style-type: none;
28+
}
29+
30+
img {
31+
margin-top: 1em;
32+
33+
}

0 commit comments

Comments
 (0)