Skip to content

Commit 1415c71

Browse files
niloufrabniloufrab
committed
added ex-javascript2-week1
1 parent 51b2c29 commit 1415c71

13 files changed

Lines changed: 289 additions & 47 deletions

‎.DS_Store‎

2 KB
Binary file not shown.

‎Week1/.DS_Store‎

8 KB
Binary file not shown.

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

Lines changed: 27 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,32 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Book List</title>
7+
</head>
38

4-
<head>
5-
<meta charset="UTF-8">
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<title>Book List</title>
8-
</head>
9+
<body>
10+
<h1>My Book List</h1>
11+
<div id="bookList">
12+
<!-- put the ul element here -->
913

10-
<body>
11-
<h1> My Book List</h1>
12-
<div id="bookList">
13-
<!-- put the ul element here -->
14-
</div>
15-
</body>
14+
<ul>
15+
<li style="">
16+
<p></p>
17+
<img src="" />
18+
</li>
19+
<li style="">
20+
<p></p>
21+
<img src="" />
22+
</li>
23+
<li style="">
24+
<p></p>
25+
<img src="" />
26+
</li>
27+
</ul>
28+
</div>
1629

17-
</html>
30+
<script src="ex1-bookList.js"></script>
31+
</body>
32+
</html>

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

Lines changed: 50 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -16,27 +16,67 @@
1616
1717
*/
1818

19-
function createBookList(books) {
20-
// your code goes in here, return the ul element
21-
}
22-
23-
const books = [{
19+
const books = [
20+
{
2421
title: 'The Design of Everyday Things',
2522
author: 'Don Norman',
26-
alreadyRead: false
23+
alreadyRead: false,
2724
},
2825
{
2926
title: 'The Most Human Human',
3027
author: 'Brian Christian',
31-
alreadyRead: true
28+
alreadyRead: true,
3229
},
3330
{
3431
title: 'The Pragmatic Programmer',
3532
author: 'Andrew Hunt',
36-
alreadyRead: true
37-
}
33+
alreadyRead: true,
34+
},
3835
];
3936

37+
function createBookList(books) {
38+
// your code goes in here, return the ul element
39+
40+
// 3. Use a `<ul>` and `<li>` to display the books.
41+
let ul = document.createElement('ul');
42+
ul.style.listStyle = 'none';
43+
ul.style.display = 'flex';
44+
ul.style.justifyContent = 'flex-start';
45+
ul.style.flexWrap = 'wrap';
46+
47+
//// 3. Use a `<ul>` and `<li>` to display the books.
48+
const li = document.createElement('li');
49+
ul.appendChild(li);
50+
51+
// 1. Iterate through the array of books.
52+
books.foreach((element) => {
53+
const p = document.createElement('p');
54+
p.innerText = element.title + '-' + element.author;
55+
li.appendChild(p);
56+
57+
// 4. Add an `<img>` to each book that links to a URL of the book cover.
58+
const image = document.createElement('img');
59+
image.className = 'bcPic';
60+
li.appendChild(image);
61+
62+
//5. Change the style of the book depending on whether you have read it(green) or not(red).
63+
if (element.alreadyRead === true) {
64+
li.style.backgroundColor = 'green';
65+
} else {
66+
li.style.backgroundColor = 'red';
67+
}
68+
});
69+
70+
// 4. Add an `<img>` to each book that links to a URL of the book cover.
71+
let sourceImage = document.querySelectorAll('.bcPic');
72+
sourceImage[0].src = 'https://media.s-bol.com/7ov383lj3Rr/550x824.jpg';
73+
74+
sourceImage[1].src =
75+
'https://d1w7fb2mkkr3kw.cloudfront.net/assets/images/book/mid/9780/3074/9780307476708.jpg';
76+
77+
sourceImage[2].src = 'https://www.studystore.nl/images/9780132119177/3/1';
78+
}
79+
4080
let ulElement = createBookList(books);
4181

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

‎Week1/js-exercises/ex2-aboutMe.html‎

Lines changed: 17 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,23 @@
11
<!DOCTYPE html>
22
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>About Me</title>
36

4-
<head>
5-
<meta charset="utf-8" />
6-
<title>About Me</title>
7+
<!-- 5. Add a style tag that sets a rule for .list-item to make the color red. -->
8+
<style></style>
9+
</head>
710

8-
<!-- 5. Add a style tag that sets a rule for .list-item to make the color red. -->
11+
<body>
12+
<h1>About Me</h1>
913

10-
</head>
14+
<ul>
15+
<li>Nickname: <span id="nickname"></span></li>
16+
<li>Favorite food: <span id="fav-food"></span></li>
17+
<li>Hometown: <span id="hometown"></span></li>
18+
</ul>
1119

12-
<body>
13-
<h1>About Me</h1>
14-
15-
<ul>
16-
<li>Nickname: <span id="nickname"></span></li>
17-
<li>Favorite food: <span id="fav-food"></span></li>
18-
<li>Hometown: <span id="hometown"></span></li>
19-
</ul>
20-
21-
<!-- 1. add a script tag here the links to ex2-aboutMe.js -->
22-
</body>
23-
24-
</html>
20+
<!-- 1. add a script tag here the links to ex2-aboutMe.js -->
21+
<script src="ex2-aboutMe.js"></script>
22+
</body>
23+
</html>

‎Week1/js-exercises/ex2-aboutMe.js‎

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,4 +8,29 @@
88
4. Iterate through each li and change the class to "list-item".
99
5. See HTML
1010
6. Create a new img element and set its src attribute to a picture of you.Append that element to the page.
11-
*/
11+
*/
12+
13+
// 2. Change the body tag 's style so it has a font-family of "Arial, sans-serif".
14+
document.body.style.fontFamily = 'Arial, sans-serif';
15+
16+
// 3. Replace each of the spans(nickname, fav - food, hometown) with your own information.
17+
document.getElementById('nickname').innerText = 'Niloufar';
18+
document.getElementById('fav-food').innerText = 'juj';
19+
document.getElementById('hometown').innerText = 'Shiraz';
20+
21+
//4. Iterate through each li and change the class to "list-item".
22+
let listItem = document.getElementsByTagName('ul');
23+
listItem.foreach((li) => {
24+
li.className = 'list-item';
25+
});
26+
27+
//5.(In the HTML head) Add a style tag that sets a rule for .list-item to make the color red.
28+
const style = document.getElementsByTagName('style');
29+
style.innerText = '.list-item {color : red;}';
30+
document.head.appendChild(style);
31+
32+
//6. Create a new img element and set its src attribute to a picture of you.Append that element to the page.
33+
const myImage = document.createElement('img');
34+
myImage.src = './myImage.jpg';
35+
myImage.style.width = '';
36+
document.body.appendChild(myImage);

‎Week1/js-exercises/ex3-hijackLogo.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,10 @@
1414

1515
function hijackGoogleLogo() {
1616
// your code goes in here
17+
18+
const hpLogo = document.getElementById('hplogo');
19+
hpLogo.src = 'https://www.hackyourfuture.dk/static/logo-dark.svg';
20+
hpLogo.srcset = 'https://www.hackyourfuture.dk/static/logo-dark.svg';
1721
}
1822

19-
hijackGoogleLogo();
23+
hijackGoogleLogo();

‎Week1/js-exercises/ex4-whatsTheTime.html‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,15 @@
11
<!--
22
1. Create a basic html file
33
2. Add a script tag that links to the ex4-whatsTheTime.js
4-
-->
4+
-->
5+
<!DOCTYPE html>
6+
<html lang="en">
7+
<head>
8+
<meta charset="UTF-8" />
9+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
10+
<title>Document</title>
11+
</head>
12+
<body>
13+
<script src="ex4-whatsTheTime.js"></script>
14+
</body>
15+
</html>

‎Week1/js-exercises/ex4-whatsTheTime.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,9 @@
1313

1414
function displayCurrentTime() {
1515
// your code goes in here
16+
var time = new Date();
17+
document.body.innerText = time.getHours() + ':' + time.getMinutes() + ':' + time.getSeconds();
1618
}
1719

18-
setInterval(displayCurrentTime, 1000);
20+
//setInterval(displayCurrentTime, 1000);
21+
window.onload = () => setInterval(displayCurrentTime, 1000);

‎Week1/js-exercises/ex5-catWalk.js‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,4 +10,18 @@
1010
5. When the cat reaches the right - hand of the screen, restart them at the left hand side("0px").So they should keep walking from left to right across the screen, forever and ever.
1111
6. When the cat reaches the middle of the screen, replace the img with an image of a cat dancing(use this URL: https: //tenor.com/StFI.gif), keep it dancing for 5 seconds, and then replace the img with the original image and have it continue the walk.
1212
13-
*/
13+
*/
14+
15+
const img = document.querySelector('img');
16+
17+
img.style.left = '0';
18+
19+
function catWalk() {
20+
img.style.left = img.style.left + 10;
21+
22+
if (img.style.left === window.innerWidth / 2) {
23+
img.src = 'tenor.gif';
24+
}
25+
}
26+
27+
setInterval(catWalk, 50);

0 commit comments

Comments
 (0)