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

Commit 923604b

Browse files
JalalalattarJalalalattar
committed
There are some fixes
1 parent 7a4f6af commit 923604b

11 files changed

Lines changed: 136 additions & 101 deletions

File tree

‎Week1/homework/js2-exercises/1-books.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
img{
2+
width: 350px;
3+
height: 350px;
4+
}

‎Week1/homework/js2-exercises/1-books.html‎

Lines changed: 3 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -3,54 +3,14 @@
33

44
<head>
55
<meta charset="UTF-8">
6+
<link rel="stylesheet" href="1-books.css">
67
<title>Book list</title>
78
</head>
8-
99
<body>
1010
<h1>My book list</h1>
1111

12-
<script>
13-
const books = [
14-
{
15-
title : 'An Artist of the Floating World',
16-
author : 'Kazuo Ishiguro',
17-
alreadyRead :false
18-
},
19-
{
20-
title : 'Underworld',
21-
author : 'Don DeLillo',
22-
alreadyRead :true
23-
}
24-
];
25-
26-
const ul = document.createElement('ul');
27-
// 1
28-
for (let obj of books) {
29-
// 2
30-
const p = document.createElement('p');
31-
p.innerText = `${obj.title} was written by ${obj.author.toUpperCase()}`;
32-
// 5
33-
34-
if (obj.alreadyRead === true) {
35-
p.style.color = 'green';
36-
} else {
37-
p.style.color = 'red';
38-
}
39-
40-
// 3
41-
const li = document.createElement('li');
42-
li.appendChild(p);
43-
ul.appendChild(li);
44-
document.body.appendChild(ul);
45-
}
46-
// 4
47-
let img1 = document.createElement('img');
48-
let img2 = document.createElement('img');
49-
img1.src = 'https://upload.wikimedia.org/wikipedia/en/thumb/e/e1/ArtistOfTheFloatingWorld.jpg/220px-ArtistOfTheFloatingWorld.jpg';
50-
img2.src = 'http://xoxoafterdark.com/wp-content/uploads/2014/10/Delillo-Underworld.jpg';
51-
let lis = document.querySelectorAll('li');
52-
lis[0].appendChild(img1).style.width = '350px';
53-
lis[1].appendChild(img2).style.width = '350px';
12+
<script src="1-books.js">
13+
5414
</script>
5515
</body>
5616

‎Week1/homework/js2-exercises/1-books.js‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
const books = [
2+
{
3+
title : 'An Artist of the Floating World',
4+
author : 'Kazuo Ishiguro',
5+
alreadyRead :false,
6+
imgSrc : 'https://upload.wikimedia.org/wikipedia/en/thumb/e/e1/ArtistOfTheFloatingWorld.jpg/220px-ArtistOfTheFloatingWorld.jpg'
7+
8+
},
9+
{
10+
title : 'Underworld',
11+
author : 'Don DeLillo',
12+
alreadyRead :true,
13+
imgSrc : 'http://xoxoafterdark.com/wp-content/uploads/2014/10/Delillo-Underworld.jpg'
14+
15+
},
16+
{
17+
title : 'أطفال مزعجون',
18+
author : 'مصطفى أبو سعد',
19+
alreadyRead :true,
20+
imgSrc : 'https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/books/1244583516i/6536897._UY341_SS341_.jpg'
21+
}
22+
];
23+
24+
const ul = document.createElement('ul');
25+
// 1
26+
27+
for (let obj of books) {
28+
// 2
29+
const p = document.createElement('p');
30+
p.innerText = `${obj.title} was written by ${obj.author}`;
31+
32+
const img = document.createElement('img');
33+
img.innerHTML = obj.imgSrc;
34+
35+
// 5
36+
37+
//let color =p.style.color; // it's not work :(
38+
let style = p.style;
39+
if (obj.alreadyRead === true ? style.color = 'green': style.color = 'red');
40+
41+
42+
// 3
43+
const li = document.createElement('li');
44+
ul.appendChild(li);
45+
li.appendChild(p);
46+
li.appendChild(img);
47+
document.body.appendChild(ul);
48+
}
49+
50+
// 4
51+
/*
52+
let img1 = document.createElement('img');
53+
let img2 = document.createElement('img');
54+
let img3 = document.createElement('img');
55+
56+
img1.src = 'https://upload.wikimedia.org/wikipedia/en/thumb/e/e1/ArtistOfTheFloatingWorld.jpg/220px-ArtistOfTheFloatingWorld.jpg';
57+
img2.src = 'http://xoxoafterdark.com/wp-content/uploads/2014/10/Delillo-Underworld.jpg';
58+
img3.src = 'https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/books/1244583516i/6536897._UY341_SS341_.jpg';
59+
60+
let lis = document.querySelectorAll('li');
61+
lis[0].appendChild(img1);
62+
lis[1].appendChild(img2);
63+
lis[2].appendChild(img3);
64+
*/

‎Week1/homework/js2-exercises/2-aboutMe.html‎

Lines changed: 1 addition & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -12,23 +12,7 @@ <h1>About Me</h1>
1212
<li>Favorite food: <span id="fav-food"></span></li>
1313
<li>Hometown: <span id="hometown"></span></li>
1414
</ul>
15-
<script>
16-
document.body.style.fontFamily=`Arial,sans-serif`;
17-
18-
document.querySelector('#nickname').innerText='David';
19-
document.querySelector('#fav-food').innerText='Charcoal grilled meat';
20-
document.querySelector('#hometown').innerText='London';
21-
22-
const items=document.querySelectorAll('ul li');
23-
items.forEach(item=> {item.classList.add('list-item')})
24-
25-
const styleTag=document.createElement('style');
26-
document.querySelector("head").appendChild(styleTag);
27-
document.querySelector('style').innerText= '.list-item {color:red}'
28-
29-
const img = document.createElement('img');
30-
img.src = 'https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/d9585883-0c30-448b-8cee-6eac6d5c695f/d80kp71-a8d13ec7-6e9a-4268-9312-222184443314.png/v1/fill/w_1024,h_576,q_75,strp/real_madrid_david_beckham_wallpaper_by_sameerhd-d80kp71.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwic3ViIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl0sIm9iaiI6W1t7InBhdGgiOiIvZi9kOTU4NTg4My0wYzMwLTQ0OGItOGNlZS02ZWFjNmQ1YzY5NWYvZDgwa3A3MS1hOGQxM2VjNy02ZTlhLTQyNjgtOTMxMi0yMjIxODQ0NDMzMTQucG5nIiwid2lkdGgiOiI8PTEwMjQiLCJoZWlnaHQiOiI8PTU3NiJ9XV19.DsmMSnKtljCP7zEAAUsax4S3Lf9oASSChxWHmyPAT0g'
31-
document.body.appendChild(img);
15+
<script src="2-aboutMe.js">
3216
</script>
3317
</body>
3418
</html>

‎Week1/homework/js2-exercises/2-aboutMe.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
2+
document.body.style.fontFamily=`Arial,sans-serif`;
3+
4+
document.querySelector('#nickname').innerText='David';
5+
document.querySelector('#fav-food').innerText='Charcoal grilled meat';
6+
document.querySelector('#hometown').innerText='London';
7+
8+
const items=document.querySelectorAll('ul li');
9+
items.forEach(item=> {item.classList.add('list-item')})
10+
11+
12+
const styleTag=document.createElement('style');
13+
document.querySelector("head").appendChild(styleTag);
14+
document.querySelector('style').innerText= '.list-item {color:red}'
15+
16+
const img = document.createElement('img');
17+
img.src = 'https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/d9585883-0c30-448b-8cee-6eac6d5c695f/d80kp71-a8d13ec7-6e9a-4268-9312-222184443314.png/v1/fill/w_1024,h_576,q_75,strp/real_madrid_david_beckham_wallpaper_by_sameerhd-d80kp71.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwic3ViIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl0sIm9iaiI6W1t7InBhdGgiOiIvZi9kOTU4NTg4My0wYzMwLTQ0OGItOGNlZS02ZWFjNmQ1YzY5NWYvZDgwa3A3MS1hOGQxM2VjNy02ZTlhLTQyNjgtOTMxMi0yMjIxODQ0NDMzMTQucG5nIiwid2lkdGgiOiI8PTEwMjQiLCJoZWlnaHQiOiI8PTU3NiJ9XV19.DsmMSnKtljCP7zEAAUsax4S3Lf9oASSChxWHmyPAT0g'
18+
document.body.appendChild(img);

‎Week1/homework/js2-exercises/3-hijackGoogleLogo.js‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,13 @@ function hijackGoogleLogo () {
44
googleImage.srcset='https://www.hackyourfuture.dk/static/logo-dark.svg'
55

66
}
7-
hijackGoogleLogo ();
7+
hijackGoogleLogo ();
8+
9+
// or like this way
10+
/*
11+
function hijackGoogleLogo() {
12+
const logo = document.querySelector('#hplogo');
13+
logo.setAttribute('srcset', 'https://www.hackyourfuture.dk/static/logo-dark.svg');
14+
}
15+
16+
hijackGoogleLogo();*/

‎Week1/homework/js2-exercises/4-forTime.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
div {
2+
height: 100px;
3+
background-color: lightgray;
4+
text-align: center;
5+
font-weight: 900;
6+
font-size: 90px;
7+
color: orange;
8+
}

‎Week1/homework/js2-exercises/4-showCurrentTime.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
12
function eenklok() {
23
const datum = new Date();
34
const tijd = datum.toLocaleTimeString();

‎Week1/homework/js2-exercises/4-theTime.html‎

Lines changed: 3 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,23 +3,13 @@
33

44
<head>
55
<title>Klok :)</title>
6-
<style>
7-
div {
8-
height: 100px;
9-
background-color: lightgray;
10-
text-align: center;
11-
font-weight: 900;
12-
font-size: 90px;
13-
color: orange;
14-
}
15-
</style>
6+
<link rel="stylesheet" href="4-forTime.css">
167
</head>
178

189
<body>
1910
<div id="klok"></div>
20-
<script src="./showCurrentTime.js">
21-
22-
</script>
11+
<script src="./4-showCurrentTime.js">
12+
</script>
2313
</body>
2414

2515
</html>

‎Week1/homework/js2-exercises/5-catWalking.html‎

Lines changed: 1 addition & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -6,34 +6,8 @@
66
</head>
77
<body>
88
<img style="position:absolute;" src="http://www.anniemation.com/clip_art/images/cat-walk.gif" />
9-
<script >
10-
const img = document.querySelector('img');
11-
const srcCatWalking = 'http://www.anniemation.com/clip_art/images/cat-walk.gif';
12-
const srcCatDancIng = 'https://media2.giphy.com/media/3mXcJgVhPxWZa/giphy.gif';
13-
let left = 0
9+
<script src="5-catWalking.js">
1410

15-
function catWalk() {
16-
17-
setInterval(frame, 50)
18-
function frame() {
19-
20-
left = left > 1500 ? 0 : left;
21-
img.style.left = left + 'px';
22-
23-
if (left === 750) {
24-
if (img.src != srcCatDancIng) {
25-
26-
setTimeout(() => { img.src = srcCatWalking; left += 10 }, 5000)
27-
img.src = srcCatDancIng;
28-
29-
}
30-
} else {
31-
img.style.left;
32-
left += 10;
33-
}
34-
}
35-
}
36-
catWalk();
3711
</script>
3812
</body>
3913
</html>

0 commit comments

Comments
 (0)