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

Skip to content

Commit f3171dd

Browse files
CmlSphCmlSph
committed
Completed JavaScript2 Week 1 exercises and project
1 parent 6026563 commit f3171dd

18 files changed

+344
-34
lines changed

‎Week1/js-exercises/book1.jpg

20.3 KB
Loading

‎Week1/js-exercises/book2.jpg

63.7 KB
Loading

‎Week1/js-exercises/book3.jpg

12.1 KB
Loading

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
ul {
2+
list-style: none;
3+
display: flex;
4+
flex-wrap: wrap;
5+
padding: 20px;
6+
width: calc(100% - 10px);
7+
}
8+
9+
li {
10+
width: calc(25% - 51px);
11+
margin: 15px;
12+
padding: 10px;
13+
min-width: 350px;
14+
float: left;
15+
}

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<title>Book List</title>
8+
<link rel="stylesheet" href="ex1-bookList.css">
89
</head>
910

1011
<body>
@@ -13,5 +14,6 @@ <h1> My Book List</h1>
1314
<!-- put the ul element here -->
1415
</div>
1516
</body>
17+
<script src='ex1-bookList.js'></script>
1618

1719
</html>

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

Lines changed: 64 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -16,27 +16,73 @@
1616
1717
*/
1818

19+
20+
const books = [{
21+
title: 'The Design of Everyday Things',
22+
author: 'Don Norman',
23+
alreadyRead: false
24+
},
25+
{
26+
title: 'The Most Human Human',
27+
author: 'Brian Christian',
28+
alreadyRead: true
29+
},
30+
{
31+
title: 'The Pragmatic Programmer',
32+
author: 'Andrew Hunt',
33+
alreadyRead: true
34+
35+
}];
36+
1937
function createBookList(books) {
20-
// your code goes in here, return the ul element
38+
// your code goes in here, return the ul element
39+
40+
41+
42+
//First, we are creating an <ul>;
43+
let bookList = document.createElement('ul');
44+
45+
for (let i = 0; i < books.length; i++){
46+
47+
// Then we are creating a paragraph for each book.
48+
49+
let titleAndAuthor = document.createElement('p');
50+
titleAndAuthor.innerText = books[i].title + ' - ' + books[i].author;
51+
52+
console.log(titleAndAuthor);//to check if everything is good so far.
53+
54+
//Now we need to append the paragraphs in to the <li> items.
55+
let appendToListItems = document.createElement('li');
56+
appendToListItems.appendChild(titleAndAuthor);
57+
58+
//We are creating the images for each book.
59+
let imageOfBooks = document.createElement('img');
60+
imageOfBooks.src = `book${i+1}.jpg`
61+
62+
//Now we need to append the images in to the <li> items.
63+
appendToListItems.appendChild(imageOfBooks);
64+
65+
/*We already appended the paragraphs and images to <li> items.
66+
Now we need to append the <li> items to <ul>*/
67+
bookList.appendChild(appendToListItems);
68+
69+
70+
// We are checking whether the books are already red or not.
71+
72+
books[i].alreadyRead ? appendToListItems.style.backgroundColor= 'green'
73+
: appendToListItems.style.backgroundColor = 'red';
74+
75+
76+
2177
}
2278

23-
const books = [{
24-
title: 'The Design of Everyday Things',
25-
author: 'Don Norman',
26-
alreadyRead: false
27-
},
28-
{
29-
title: 'The Most Human Human',
30-
author: 'Brian Christian',
31-
alreadyRead: true
32-
},
33-
{
34-
title: 'The Pragmatic Programmer',
35-
author: 'Andrew Hunt',
36-
alreadyRead: true
37-
}
38-
];
79+
return bookList;
80+
81+
}
3982

4083
let ulElement = createBookList(books);
4184

42-
document.querySelector("#bookList").appendChild(ulElement);
85+
document.querySelector('div').appendChild(ulElement);
86+
87+
88+

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

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,15 @@
44
<head>
55
<meta charset="utf-8" />
66
<title>About Me</title>
7+
<link rel="stylesheet" href="javex2.css">
78

89
<!-- 5. Add a style tag that sets a rule for .list-item to make the color red. -->
9-
10+
<style>
11+
.list-item {
12+
color: red;
13+
border: 3px solid green;
14+
}
15+
</style>
1016
</head>
1117

1218
<body>
@@ -19,6 +25,7 @@ <h1>About Me</h1>
1925
</ul>
2026

2127
<!-- 1. add a script tag here the links to ex2-aboutMe.js -->
28+
<script src='ex2-aboutMe.js'></script>
2229
</body>
2330

2431
</html>

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

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,4 +8,26 @@
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+
const body = document.querySelector ('body');
14+
body.style.fontFamily = 'Arial, sans-serif'
15+
16+
const newLi = document.getElementById("nickname");
17+
newLi.innerHTML = 'Cem'
18+
19+
const newLi1 = document.getElementById('fav-food');
20+
newLi1.innerHTML = 'Meatball'
21+
22+
const newLi2 = document.getElementById('hometown');
23+
newLi2.innerHTML = 'Istanbul'
24+
25+
26+
var v = document.getElementsByTagName("li");
27+
v.className = "list-item";
28+
console.log(v);
29+
30+
31+
const myPicture = document.createElement('img');
32+
myPicture.src = 'javex2_2.jpg'
33+
document.body.append(myPicture);

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

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,11 @@
1313
*/
1414

1515
function hijackGoogleLogo() {
16-
// your code goes in here
17-
}
16+
// your code goes in here
17+
var imgReplace = document.getElementById("hplogo");
18+
imgReplace.src = "https://tse2.mm.bing.net/th?id=OIP.KK71iXlfGx_47EVr5lDc-AAAAA&pid=Api&P=0&w=300&h=300";
19+
1820

19-
hijackGoogleLogo();
21+
}
22+
23+
hijackGoogleLogo();

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

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,26 @@
11
<!--
22
1. Create a basic html file
33
2. Add a script tag that links to the ex4-whatsTheTime.js
4-
-->
4+
-->
5+
<!--
6+
1. Create a basic html file
7+
2. Add a script tag that links to the ex4-whatsTheTime.js
8+
-->
9+
<!DOCTYPE html>
10+
<html lang="en">
11+
12+
<head>
13+
<meta charset="UTF-8">
14+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
15+
<title>Document</title>
16+
</head>
17+
18+
<BODY onLoad="StartClock12();" ;>
19+
<FORM name="CForm">
20+
<INPUT type="text" name="Clock12" size="12">
21+
22+
</FORM>
23+
</body>
24+
<script src='ex4-whatsTheTime.js'></script>
25+
26+
</html>

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

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,19 @@
1111
1212
*/
1313

14-
function displayCurrentTime() {
15-
// your code goes in here
16-
}
17-
18-
setInterval(displayCurrentTime, 1000);
14+
function StartClock12() {
15+
Time12 = new Date();
16+
Cur12Hour = Time12.getHours();
17+
Cur12Mins = Time12.getMinutes();
18+
Cur12Secs = Time12.getSeconds();
19+
The12Time = (Cur12Hour > 12) ? Cur12Hour - 12 : Cur12Hour;
20+
The12Time += ((Cur12Mins < 10) ? ':0' : ':') + Cur12Mins;
21+
The12Time += ((Cur12Secs < 10) ? ':0' : ':') + Cur12Secs;
22+
The12Time += (Cur12Hour > 12) ? ' PM': ' AM';
23+
document.CForm.Clock12.value = The12Time;
24+
window.status = The12Time;
25+
setTimeout('StartClock12()',1000);
26+
}
27+
28+
29+
setInterval(displayCurrentTime, 1000);

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

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,19 @@
77
</head>
88

99
<body>
10-
<img style="position:absolute;" src="http://www.anniemation.com/clip_art/images/cat-walk.gif" />
1110

12-
<script src="ex5-catWalk.js"></script>
11+
<p><button onclick="myMove()">Click Me</button></p>
12+
<img id="myImage" style="position:absolute;" src="http://www.anniemation.com/clip_art/images/cat-walk.gif" />
13+
14+
15+
16+
17+
18+
19+
20+
21+
1322
</body>
23+
<script src="ex5-catWalk.js"></script>
1424

1525
</html>

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

Lines changed: 57 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,4 +10,60 @@
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+
16+
** Exercise 5: The cat walk **
17+
Starting with an HTML, which has a single img tag of an animated GIF of a cat walking.
18+
19+
1. Create a variable to store a reference to the img.
20+
2. Change the style of the img to have a "left" of "0px", so that it starts at the left hand of the screens.
21+
3. Create a function called catWalk() that moves the cat 10 pixels to the right of where it started, by changing the "left" style property.
22+
4. Call that function every 50 milliseconds.Your cat should now be moving across the screen from left to right.Hurrah!
23+
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.
24+
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.
25+
26+
*/
27+
28+
29+
var img = document.querySelector('img');
30+
console.log(img)
31+
img.style.left = '0px';
32+
33+
34+
35+
function myMove() {
36+
var elem = document.getElementById("myImage");
37+
var pos = 0;
38+
setInterval(frame, 10);
39+
40+
function frame() {
41+
42+
43+
44+
45+
if (pos == screen.width) {
46+
// clearInterval(id);
47+
pos = 0;
48+
49+
50+
}else if (pos == 350){
51+
elem.src = 'tenor.gif';
52+
pos++
53+
elem.style.animationDuration = "5s";
54+
55+
}else if (pos == 850){
56+
elem.src = 'http://www.anniemation.com/clip_art/images/cat-walk.gif';
57+
pos++
58+
59+
60+
}else {
61+
pos++;
62+
elem.style.left = pos + "px";
63+
64+
}
65+
}
66+
67+
}
68+
69+

‎Week1/js-exercises/javex2_2.jpg

461 KB
Loading

‎Week1/js-exercises/tenor.gif

621 KB
Loading

0 commit comments

Comments
 (0)