From 68d25e869e7536643c5b80f5340b4a6a4a6df259 Mon Sep 17 00:00:00 2001 From: gajduk-mansystems Date: Sun, 1 Mar 2020 13:28:59 +0100 Subject: [PATCH] week1-homework-structure --- Week1/MAKEME.md | 28 ++++++++-------- Week1/js-exercises/ex1-bookList.html | 17 ++++++++++ Week1/js-exercises/ex1-bookList.js | 42 ++++++++++++++++++++++++ Week1/js-exercises/ex2-aboutMe.html | 24 ++++++++++++++ Week1/js-exercises/ex2-aboutMe.js | 11 +++++++ Week1/js-exercises/ex3-hijackLogo.js | 19 +++++++++++ Week1/js-exercises/ex4-whatsTheTime.html | 4 +++ Week1/js-exercises/ex4-whatsTheTime.js | 18 ++++++++++ Week1/js-exercises/ex5-catWalk.html | 15 +++++++++ Week1/js-exercises/ex5-catWalk.js | 13 ++++++++ Week1/project/index.css | 0 Week1/project/index.html | 1 + Week1/project/index.js | 1 + 13 files changed, 178 insertions(+), 15 deletions(-) create mode 100644 Week1/js-exercises/ex1-bookList.html create mode 100644 Week1/js-exercises/ex1-bookList.js create mode 100644 Week1/js-exercises/ex2-aboutMe.html create mode 100644 Week1/js-exercises/ex2-aboutMe.js create mode 100644 Week1/js-exercises/ex3-hijackLogo.js create mode 100644 Week1/js-exercises/ex4-whatsTheTime.html create mode 100644 Week1/js-exercises/ex4-whatsTheTime.js create mode 100644 Week1/js-exercises/ex5-catWalk.html create mode 100644 Week1/js-exercises/ex5-catWalk.js create mode 100644 Week1/project/index.css create mode 100644 Week1/project/index.html create mode 100644 Week1/project/index.js diff --git a/Week1/MAKEME.md b/Week1/MAKEME.md index 97fcb029f..9f6846072 100644 --- a/Week1/MAKEME.md +++ b/Week1/MAKEME.md @@ -15,7 +15,7 @@ Before we head into the exercises, it might be nice to do some interactive exerc ## **2. JavaScript exercises** -> 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`. +> 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. **Exercise 1: The book list** @@ -52,7 +52,7 @@ https://hyf-js2-week1-makeme-ex1-demo.herokuapp.com/ **Exercise 2: About me** -Start with this HTML and save it as "about_me.html": +Given this HTML: ```html @@ -86,16 +86,15 @@ No homepage is safe from the logo bandit! Everytime he sees a Google Logo he rep 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). -1. Inside a JavaScript file, called `hijackGoogleLogo.js`, create a function called hijackGoogleLogo -2. Find out how to select the element that contains the Google logo, and store it in a variable -3. Modify the source and sourceset of the logo so that it's replaced by the HackYourFuture logo instead +1. Find out how to select the element that contains the Google logo, and store it in a variable +2. Modify the source and sourceset of the logo so that it's replaced by the HackYourFuture logo instead **Exercise 4: What's the time?** Why wear a watch when you can check the time, live in your webpage? -1. Create an empty HTML file, called `time.html` -2. Create a JavaScript file called `showCurrentTime.js` and include it in the HTML file +1. Create a basic HTML file +2. Include a script tag and link the JavaScript file 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 4. Have the function execute when it's loading in the browser @@ -116,13 +115,12 @@ Start with this webpage, which has a single img tag of an animated GIF of a cat ``` -1. Add a script tag at the bottom of the page, where you'll put all your code. -2. Create a variable to store a reference to the img. -3. Change the style of the img to have a "left" of "0px", so that it starts at the left hand of the screens. -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. -5. Call that function every 50 milliseconds. Your cat should now be moving across the screen from left to right. Hurrah! -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. -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. +1. Create a variable to store a reference to the img. +2. Change the style of the img to have a "left" of "0px", so that it starts at the left hand of the screens. +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. +4. Call that function every 50 milliseconds. Your cat should now be moving across the screen from left to right. Hurrah! +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. +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. ## **3. Code along** @@ -136,7 +134,7 @@ Enjoy! > 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. -> Before you start, create a new folder called `project` that includes the files for the following app you'll be building. +> Write the project code in the folder `Week1 \ project`. 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: diff --git a/Week1/js-exercises/ex1-bookList.html b/Week1/js-exercises/ex1-bookList.html new file mode 100644 index 000000000..b3864ac18 --- /dev/null +++ b/Week1/js-exercises/ex1-bookList.html @@ -0,0 +1,17 @@ + + + + + + + Book List + + + +

My Book List

+
+ +
+ + + \ No newline at end of file diff --git a/Week1/js-exercises/ex1-bookList.js b/Week1/js-exercises/ex1-bookList.js new file mode 100644 index 000000000..2db54ba5e --- /dev/null +++ b/Week1/js-exercises/ex1-bookList.js @@ -0,0 +1,42 @@ +/** + + ** Exercise 1: The book list ** + + I 'd like to display my three favorite books inside a nice webpage! + + 1. Iterate through the array of books. + 2. For each book, create a `

` + element with the book title and author and append it to the page. + 3. Use a `