Skip to content

Commit 68d25e8

Browse files
old-profileold-profile
committed
week1-homework-structure
1 parent e2e658f commit 68d25e8

13 files changed

+178
-15
lines changed

‎Week1/MAKEME.md

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ Before we head into the exercises, it might be nice to do some interactive exerc
1515

1616
## **2. JavaScript exercises**
1717

18-
> Inside of your `JavaScript2` fork, create a folder called `week1`. Inside of that folder, create a folder called `js-exercises`. For all the following exercises create a new `.js` file in that folder (5 files in total). Make sure the name of each file reflects its content: for example, the filename for exercise one could be `bookList.js`.
18+
> Inside of your `JavaScript2` fork, find the folder called `Week1`. Inside of that folder, find the folder called `js-exercises`. In this folder you will find five `.js` files (sometimes with a matching `.html` file), one for each exercise where you need to write your code. Please use the correct file for the respective exercise.
1919
2020
**Exercise 1: The book list**
2121

@@ -52,7 +52,7 @@ https://hyf-js2-week1-makeme-ex1-demo.herokuapp.com/
5252

5353
**Exercise 2: About me**
5454

55-
Start with this HTML and save it as "about_me.html":
55+
Given this HTML:
5656

5757
```html
5858
<!DOCTYPE html>
@@ -86,16 +86,15 @@ No homepage is safe from the logo bandit! Everytime he sees a Google Logo he rep
8686

8787
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).
8888

89-
1. Inside a JavaScript file, called `hijackGoogleLogo.js`, create a function called hijackGoogleLogo
90-
2. Find out how to select the element that contains the Google logo, and store it in a variable
91-
3. Modify the source and sourceset of the logo so that it's replaced by the HackYourFuture logo instead
89+
1. Find out how to select the element that contains the Google logo, and store it in a variable
90+
2. Modify the source and sourceset of the logo so that it's replaced by the HackYourFuture logo instead
9291

9392
**Exercise 4: What's the time?**
9493

9594
Why wear a watch when you can check the time, live in your webpage?
9695

97-
1. Create an empty HTML file, called `time.html`
98-
2. Create a JavaScript file called `showCurrentTime.js` and include it in the HTML file
96+
1. Create a basic HTML file
97+
2. Include a script tag and link the JavaScript file
9998
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
10099
4. Have the function execute when it's loading in the browser
101100

@@ -116,13 +115,12 @@ Start with this webpage, which has a single img tag of an animated GIF of a cat
116115
</html>
117116
```
118117

119-
1. Add a script tag at the bottom of the page, where you'll put all your code.
120-
2. Create a variable to store a reference to the img.
121-
3. Change the style of the img to have a "left" of "0px", so that it starts at the left hand of the screens.
122-
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.
123-
5. Call that function every 50 milliseconds. Your cat should now be moving across the screen from left to right. Hurrah!
124-
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, forever and ever.
125-
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, and then replace the img with the original image and have it continue the walk.
118+
1. Create a variable to store a reference to the img.
119+
2. Change the style of the img to have a "left" of "0px", so that it starts at the left hand of the screens.
120+
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.
121+
4. Call that function every 50 milliseconds. Your cat should now be moving across the screen from left to right. Hurrah!
122+
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.
123+
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.
126124

127125
## **3. Code along**
128126

@@ -136,7 +134,7 @@ Enjoy!
136134

137135
> Every week ends with a project you have to build on your own. Instead of getting clear-cut instructions, you'll get a list of criteria that your project needs to measure up to.
138136
139-
> Before you start, create a new folder called `project` that includes the files for the following app you'll be building.
137+
> Write the project code in the folder `Week1 \ project`.
140138
141139
In this week's project you'll be making a Random Quote Generator! It includes a text box and a simple button that, when clicked, take a random quote out of a set amount of quotes and show it in the page. Here's how it should look:
142140

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
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+
10+
<body>
11+
<h1> My Book List</h1>
12+
<div id="bookList">
13+
<!-- put the ul element here -->
14+
</div>
15+
</body>
16+
17+
</html>

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

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
/**
2+
3+
** Exercise 1: The book list **
4+
5+
I 'd like to display my three favorite books inside a nice webpage!
6+
7+
1. Iterate through the array of books.
8+
2. For each book, create a `<p>`
9+
element with the book title and author and append it to the page.
10+
3. Use a `<ul>` and `<li>` to display the books.
11+
4. Add an `<img>` to each book that links to a URL of the book cover.
12+
5. Change the style of the book depending on whether you have read it(green) or not(red).
13+
14+
The end result should look something like this:
15+
https: //hyf-js2-week1-makeme-ex1-demo.herokuapp.com/
16+
17+
*/
18+
19+
function createBookList(books) {
20+
// your code goes in here, return the ul element
21+
}
22+
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+
];
39+
40+
let ulElement = createBookList(books);
41+
42+
document.querySelector("#bookList").appendChild(ulElement);

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<title>About Me</title>
7+
8+
<!-- 5. Add a style tag that sets a rule for .list-item to make the color red. -->
9+
10+
</head>
11+
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>

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
/**
2+
3+
** Exercise 2: About me **
4+
5+
1. See HTML
6+
2. Change the body tag 's style so it has a font-family of "Arial, sans-serif".
7+
3. Replace each of the spans(nickname, fav - food, hometown) with your own information.
8+
4. Iterate through each li and change the class to "list-item".
9+
5. See HTML
10+
6. Create a new img element and set its src attribute to a picture of you.Append that element to the page.
11+
*/

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
/**
2+
3+
** Exercise 3: The logo hijack **
4+
5+
No homepage is safe from the logo bandit!Everytime he sees a Google Logo he replaces it with a logo from HackYourfuture instead: https: //www.hackyourfuture.dk/static/logo-dark.svg.
6+
7+
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).
8+
9+
10+
1. Find out how to select the element that contains the Google logo, and store it in a variable.
11+
2. Modify the source and sourceset of the logo so that it 's replaced by the HackYourFuture logo instead.
12+
13+
*/
14+
15+
function hijackGoogleLogo() {
16+
// your code goes in here
17+
}
18+
19+
hijackGoogleLogo();

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<!--
2+
1. Create a basic html file
3+
2. Add a script tag that links to the ex4-whatsTheTime.js
4+
-->

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
/**
2+
3+
** Exercise 4: What 's the time? **
4+
5+
Why wear a watch when you can check the time, live in your webpage ?
6+
7+
1. Create a basic HTML file
8+
2. in the HTML file Include a script tag and link the JavaScript file
9+
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
10+
4. Have the function execute when it 's loading in the browser
11+
12+
*/
13+
14+
function displayCurrentTime() {
15+
// your code goes in here
16+
}
17+
18+
setInterval(displayCurrentTime, 1000);

‎Week1/js-exercises/ex5-catWalk.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+
12+
<script src="ex5-catWalk.js"></script>
13+
</body>
14+
15+
</html>

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
/**
2+
3+
** Exercise 5: The cat walk **
4+
Starting with an HTML, which has a single img tag of an animated GIF of a cat walking.
5+
6+
1. Create a variable to store a reference to the img.
7+
2. Change the style of the img to have a "left" of "0px", so that it starts at the left hand of the screens.
8+
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.
9+
4. Call that function every 50 milliseconds.Your cat should now be moving across the screen from left to right.Hurrah!
10+
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.
11+
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.
12+
13+
*/

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy