Skip to content

Commit 1542d16

Browse files
GMouzakisGMouzakis
committed
JS2 week1 exercises
1 parent 5f9e431 commit 1542d16

9 files changed

Lines changed: 214 additions & 0 deletions

File tree

‎Week1/homework/js-exercises/JS2_w1e1/JS2_w1e1_theBookList.js‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
'use strict';
2+
3+
const books = [
4+
{
5+
title: 'The Design of Everyday Things',
6+
img: 'http://icons.iconarchive.com/icons/mattahan/ultrabuuf/32/Things-Grape-Soda-Safety-Pin-icon.png', //4a
7+
author: 'Don Norman',
8+
alreadyRead: false,
9+
},
10+
{
11+
title: 'The Most Human Human',
12+
img: 'http://icons.iconarchive.com/icons/firstline1/tv-show-mega-pack-1/32/Almost-Human-icon.png', //4a
13+
author: 'Brian Christian',
14+
alreadyRead: true,
15+
},
16+
{
17+
title: 'The Forgotten to Read Book',
18+
img: 'http://icons.iconarchive.com/icons/jen/sailor-moon/32/Read-This-Please-icon.png', //4a
19+
author: 'Alzheimer',
20+
alreadyRead: false,
21+
}
22+
];
23+
24+
25+
let bookList = document.createElement('ul'); //3
26+
for (let i = 0; i < books.length; i++) { //1
27+
let book = document.createElement('li'); //3
28+
let bookImg = document.createElement('img'); //4b*
29+
bookImg.src = books[i].img;
30+
book.appendChild(bookImg); //*4b
31+
let bookInfo = document.createTextNode(books[i].title + ' by ' + books[i].author); //2*
32+
book.appendChild(bookInfo); //*2
33+
if (books[i].alreadyRead == false) { //5*
34+
book.style.backgroundColor = "red";
35+
} //*5
36+
bookList.appendChild(book);
37+
}
38+
document.body.appendChild(bookList);
39+
40+
41+
/*
42+
I'd like to display my three favorite books inside a nice webpage!
43+
1. Iterate through the array of books.
44+
2. For each book, create a `<p>` element with the book title and author and append it to the page.
45+
3. Use a `<ul>` and `<li>` to display the books.
46+
4. Add an `<img>` to each book that links to a URL of the book cover.
47+
5. Change the style of the book depending on whether you have read it (green) or not (red).
48+
*/

‎Week1/homework/js-exercises/JS2_w1e1/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>The Book List</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
10+
<body></body>
11+
<script src=".\JS2_w1e1_theBookList.js"></script>
12+
13+
</html>

‎Week1/homework/js-exercises/JS2_w1e2/JS2_w1e2_about_me.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
'use strict';
2+
3+
document.body.style.fontFamily = 'Arial, sans-serif'; //2
4+
document.getElementById('nickname').textContent = 'HackerMan'; //3*
5+
document.getElementById('fav-food').textContent = 'Pizza';
6+
document.getElementById('hometown').textContent = 'Area 51'; //*3
7+
let listItem = document.getElementsByTagName('li');
8+
for (let i = 0; i < listItem.length; i++) { //4*
9+
listItem[i].className = 'item';
10+
} //*4
11+
12+
let image = document.createElement('img'); //6*
13+
image.src = 'https://farm9.static.flickr.com/8522/8642935003_8c846ed365.jpg';
14+
document.body.appendChild(image); //*6
15+
16+
/*
17+
1. Add a script tag to the bottom of the HTML body.
18+
2.(In the JavaScript) Change the body tag's style so it has a font-family of "Arial, sans-serif".
19+
3.(In the JavaScript) Replace each of the spans(nickname, fav - food, hometown) with your own information.
20+
4. Iterate through each li and change the class to "list-item".
21+
5.(In the HTML head) Add a style tag that sets a rule for .list - item to make the color red.
22+
6. Create a new img element and set its src attribute to a picture of you.Append that element to the page.
23+
*/

‎Week1/homework/js-exercises/JS2_w1e2/about_me.html‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<title>About Me</title>
7+
8+
<!--5-->
9+
<style>
10+
li {
11+
color: red;
12+
}
13+
</style>
14+
15+
</head>
16+
17+
<body>
18+
<h1>About Me</h1>
19+
<!--5-->
20+
<ul>
21+
<li>Nickname: <span id="nickname"></span></li>
22+
<li>Favorite food: <span id="fav-food"></span></li>
23+
<li>Hometown: <span id="hometown"></span></li>
24+
</ul>
25+
</body>
26+
27+
</html>
28+
<!--1-->
29+
<script src=".\JS2_w1e2_about_me.js"></script>

‎Week1/homework/js-exercises/JS2_w1e3_hijackGoogleLogo.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
'use strict';
2+
3+
function changeLogo(id) {
4+
let logo = document.getElementById(id);
5+
logo.srcset = 'https://www.hackyourfuture.dk/static/logo-dark.svg'; //3
6+
}
7+
8+
changeLogo('hplogo'); //2
9+
10+
/*
11+
No homepage is safe from the logo bandit! Everytime he sees a Google Logo he replaces
12+
it with a logo from HackYourfuture instead: https://www.hackyourfuture.dk/static/logo-dark.svg.
13+
14+
In this exercise you're expected to write a JavaScript function that can be executed in the console of the [Google website](https://www.google.com).
15+
16+
1. Inside a JavaScript file, called `hijackGoogleLogo.js`, create a function called hijackGoogleLogo
17+
2. Find out how to select the element that contains the Google logo, and store it in a variable
18+
3. Modify the source and sourceset of the logo so that it's replaced by the HackYourFuture logo instead
19+
*/

‎Week1/homework/js-exercises/JS2_w1e4/showCurrentTime.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
'use strict';
2+
3+
let clock = setInterval(time, 1000); //3
4+
5+
function time() { //3
6+
let time = new Date();
7+
document.getElementById("time").innerHTML = time.toLocaleTimeString();
8+
}
9+
time(); //4
10+
11+
12+
/*
13+
Why wear a watch when you can check the time, live in your webpage?
14+
15+
1. Create an empty HTML file, called `time.html`
16+
2. Create a JavaScript file called `showCurrentTime.js` and include it in the HTML file
17+
3. Inside the JS file, write a function that adds the current time to the webpage. Make sure it's written in the HH:MM:SS notation (hour, minute, second). Hint: use `setInterval()` to make sure the time stays current
18+
4. Have the function execute when it's loading in the browser
19+
*/

‎Week1/homework/js-exercises/JS2_w1e4/time.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>What's the time?</title>
7+
</head>
8+
9+
<body>
10+
<p id="time"></p>
11+
12+
</body>
13+
<script src=".\showCurrentTime.js"></script>
14+
15+
</html>

‎Week1/homework/js-exercises/JS2_w1e5/JS2_w1e5_theCatWalk.js‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
'use strict';
2+
let cat = document.getElementsByTagName('img')[0]; //2
3+
cat.style.left = '0px'; //3
4+
let moveFwd = true;
5+
let leftValue = 0;
6+
7+
function catWalk() { //4-
8+
leftValue = parseInt(cat.style.left);
9+
if (moveFwd && (leftValue > (window.innerWidth - cat.width))) moveFwd = false; //6-
10+
if (!moveFwd && (leftValue <= 0)) moveFwd = true; //-6-
11+
if (moveFwd) cat.style.left = (leftValue += 10) + 'px'; //-4
12+
else cat.style.left = (leftValue -= 10) + 'px'; //-6
13+
14+
if ((leftValue >= (window.innerWidth / 2)) && (leftValue <= window.innerWidth)) cat.src = 'https://media1.tenor.com/images/2de63e950fb254920054f9bd081e8157/tenor.gif?itemid=10561424';//7*
15+
else cat.src = 'http://www.anniemation.com/clip_art/images/cat-walk.gif'; //*7
16+
}
17+
window.setInterval(catWalk, 50); //5
18+
19+
/*
20+
The cat walk **
21+
22+
Start with this webpage, which has a single img tag of an animated GIF of a cat walking.
23+
24+
1. Add a script tag at the bottom of the page, where you'll put all your code.
25+
2. Create a variable to store a reference to the img.
26+
3. Change the style of the img to have a "left" of "0px", so that it starts at the left hand of the screens.
27+
4. Create a function called catWalk() that moves the cat 10 pixels to the right of where it started, by changing the "left" style property.
28+
5. Call that function every 50 milliseconds.Your cat should now be moving across the screen from left to right.Hurrah!
29+
6. 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,
30+
forever and ever.
31+
7. 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,
32+
and then replace the img with the original image and have it continue the walk.
33+
*/

‎Week1/homework/js-exercises/JS2_w1e5/index.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<title>Cat Walk</title>
7+
</head>
8+
9+
<body>
10+
<img style="position:absolute;" src="http://www.anniemation.com/clip_art/images/cat-walk.gif" />
11+
</body>
12+
13+
</html>
14+
<!--1-->
15+
<script src=".\JS2_w1e5_theCatWalk.js"></script>

0 commit comments

Comments
 (0)