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

Skip to content
This repository was archived by the owner on May 14, 2024. It is now read-only.

Commit 625c863

Browse files
AllouhMAllouhM
committed
add my home work week1
1 parent cb27f4c commit 625c863

17 files changed

+234
-13
lines changed

‎Week1/homework/app.js

Lines changed: 0 additions & 11 deletions
This file was deleted.

‎Week1/homework/image/Great Expectations.jpg

34.3 KB
Loading

‎Week1/homework/image/Memory of the body.jpg

106 KB
Loading

‎Week1/homework/image/Murder on the Orient Express.jpg

70.4 KB
Loading

‎Week1/homework/image/Tell Me a Riddle.jpg

47.4 KB
Loading

‎Week1/homework/image/The Grate Gatsby.jpg

49.6 KB
Loading

‎Week1/homework/image/To Kill a Mockingbird.jpg

57.1 KB
Loading

‎Week1/homework/image/Triple Granada.jpg

59.1 KB
Loading

‎Week1/homework/image/War and Peace.jpg

46.1 KB
Loading

‎Week1/homework/image/a river dies of thirst.jpg

6.83 KB
Loading

‎Week1/homework/image/background.jpg

237 KB
Loading

‎Week1/homework/image/in the presence of absence.jpg

71.1 KB
Loading

‎Week1/homework/index.html

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎Week1/homework/mybooks.css

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
*{
2+
box-sizing:border-box;
3+
}
4+
5+
body {
6+
7+
width: 100%;
8+
background-color: rgb(220, 220, 243);
9+
background-image:url(https://s31.postimg.cc/nj8wb5jrv/background.jpg);
10+
background-repeat: no-repeat;
11+
background-size: 100% 100%;
12+
}
13+
14+
li {
15+
list-style: none;
16+
width:50%;
17+
float: left;
18+
text-align: center;
19+
padding: 20px;
20+
color:rgb(241, 241, 241);
21+
margin-bottom: 70px;
22+
23+
}
24+
25+
img {
26+
width:400px;
27+
height:400px;
28+
border:2px solid black;
29+
margin-top: 30px;
30+
}
31+
32+
h1{
33+
width:900px;
34+
color:yellowgreen;
35+
margin:10% 0 10% 10%;
36+
font-size: 4em;
37+
font-family: cursive;
38+
padding:20px;
39+
background-color: rgba(189, 140, 140, 0.4);
40+
border-radius: 5px;
41+
}
42+
43+
h2{
44+
font-family: cursive;
45+
font-size: 1.8em;
46+
}
47+
48+
p{
49+
font-family: sans-serif;
50+
font-size: 1.5em;
51+
}
52+
53+
h4{
54+
font-family: sans-serif;
55+
font-size: 1em;
56+
}

‎Week1/homework/mybooks.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<title>My Favorite Books</title>
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
<link rel="stylesheet" type="text/css" media="screen" href="mybooks.css" />
9+
10+
</head>
11+
12+
<body>
13+
<script src="mybooks.js"></script>
14+
</body>
15+
16+
</html>

‎Week1/homework/mybooks.js

Lines changed: 162 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
1+
'use strict';
2+
3+
const myFavorite = [
4+
'a_river_dies_of_thirst',
5+
'in_the_presence_of_absence',
6+
'the_grate_gatsby',
7+
'to_kill_a_mockingbird ',
8+
'tell_me_a_Riddle',
9+
'triple_ granada',
10+
'memory_of_the_body',
11+
'great_expectations',
12+
'war_and_peace',
13+
'murder_on_the_orient_express',
14+
];
15+
16+
// console.log(myFavorite);
17+
18+
function constructElements() {
19+
20+
const ul = document.createElement('ul');
21+
22+
myFavorite.forEach(function (bookItems) {
23+
// console.log(bookItems);
24+
25+
const li = document.createElement('li');
26+
ul.appendChild(li);
27+
li.innerHTML += bookItems;
28+
});
29+
document.body.appendChild(ul);
30+
}
31+
32+
// constructElements();
33+
34+
const addH1 = document.createElement('h1');
35+
document.body.appendChild(addH1);
36+
addH1.innerHTML = 'Books I Enjoyed';
37+
38+
39+
const booksDetails = {
40+
41+
a_river_dies_of_thirst: {
42+
title: 'A River of Thirst',
43+
author: 'Mahmoud Darwish',
44+
year: 2009,
45+
language: 'Translated to English',
46+
},
47+
in_the_presence_of_absence: {
48+
title: 'In The Presence of Absence',
49+
author: 'Mahmoud Darwish',
50+
year: 2006,
51+
language: 'Translated to English',
52+
},
53+
the_grate_gatsby: {
54+
title: 'The Grate Gatsby',
55+
author: ' F. Scott Fitzgerald',
56+
year: 1925,
57+
language: 'English',
58+
},
59+
to_kill_a_mockingbird: {
60+
title: 'To Kill a Mockingbird ',
61+
author: ' Harper Lee',
62+
year: 1960,
63+
language: 'English',
64+
},
65+
tell_me_a_Riddle: {
66+
title: 'Tell me a Riddle',
67+
author: ' Tillie Olsen',
68+
year: 1961,
69+
language: 'English',
70+
},
71+
triple_granada: {
72+
title: 'Triple Granada',
73+
author: 'Radwa Ashour',
74+
year: 2009,
75+
language: 'Arabic',
76+
},
77+
memory_of_the_body: {
78+
title: 'Memory of the body',
79+
author: ' Ahlam Mosteghanemi ',
80+
year: 2010,
81+
language: 'Arabic',
82+
},
83+
great_expectations: {
84+
title: 'Great Expectations',
85+
author: ' Charles Dickens',
86+
year: 1860,
87+
language: 'English',
88+
},
89+
war_and_peace: {
90+
title: 'War and Peace',
91+
author: 'Leo Tolstoy',
92+
year: 1869,
93+
language: 'English',
94+
},
95+
murder_on_the_orient_express: {
96+
title: 'Murder on the Orient Express',
97+
author: 'Agatha Christie',
98+
year: 1934,
99+
language: 'English',
100+
}
101+
102+
};
103+
104+
function createBooksList() {
105+
const bookList = document.createElement('ul');
106+
bookList.setAttribute('id', 'main_list');
107+
document.body.appendChild(bookList);
108+
109+
for (const bookIndex in booksDetails) {
110+
const bookListInfo = document.createElement('li');
111+
bookListInfo.setAttribute('id', bookIndex);
112+
bookList.appendChild(bookListInfo);
113+
114+
const titleIn = document.createElement('h2');
115+
bookListInfo.appendChild(titleIn);
116+
titleIn.innerHTML = booksDetails[bookIndex].title;
117+
118+
const authorIn = document.createElement('h4');
119+
bookListInfo.appendChild(authorIn);
120+
authorIn.innerHTML = 'By : ' + booksDetails[bookIndex].author;
121+
122+
const yearIn = document.createElement('p');
123+
bookListInfo.appendChild(yearIn);
124+
yearIn.innerHTML = 'Published : ' + booksDetails[bookIndex].year;
125+
126+
const languageIn = document.createElement('p');
127+
bookListInfo.appendChild(languageIn);
128+
languageIn.innerHTML = 'Language : ' + booksDetails[bookIndex].language;
129+
}
130+
131+
document.body.appendChild(bookList);
132+
}
133+
134+
135+
createBooksList();
136+
137+
const covers = {
138+
a_river_dies_of_thirst: 'https://s31.postimg.cc/x3s2ees3f/a_river_dies_of_thirst.jpg',
139+
in_the_presence_of_absence: 'https://s31.postimg.cc/c6vu9u9iz/in_the_presence_of_absence.jpg',
140+
the_grate_gatsby: 'https://s31.postimg.cc/gg0kc17nf/The_Grate_Gatsby.jpg',
141+
to_kill_a_mockingbird: 'https://s31.postimg.cc/vbz3jn67f/To_Kill_a_Mockingbird.jpg',
142+
tell_me_a_Riddle: 'https://s31.postimg.cc/41dsbsvln/Tell_Me_a_Riddle.jpg',
143+
triple_granada: 'https://s31.postimg.cc/frrpsqtej/Triple_Granada.jpg',
144+
memory_of_the_body: 'https://s31.postimg.cc/9qu0vpwij/Memory_of_the_body.jpg',
145+
great_expectations: 'https://s31.postimg.cc/hjkonqzxn/Great_Expectations.jpg',
146+
war_and_peace: 'https://s31.postimg.cc/5ugozsw4b/War_and_Peace.jpg',
147+
murder_on_the_orient_express: 'https://s31.postimg.cc/omsk3f2t7/Murder_on_the_Orient_Express.jpg',
148+
};
149+
150+
function content() {
151+
152+
for (const keys in booksDetails) {
153+
const addImage = document.createElement('img');
154+
addImage.setAttribute('src', covers[keys]);
155+
addImage.setAttribute('alt', 'This is the cover image of ' + keys + ' book');
156+
document.getElementById(keys).appendChild(addImage);
157+
158+
}
159+
}
160+
161+
content();
162+

‎Week1/homework/style.css

Lines changed: 0 additions & 1 deletion
This file was deleted.

0 commit comments

Comments
 (0)