week1-homework-structure

old-profile · old-profile · commit 68d25e869e75 · 2020-03-01T13:28:59.000+01:00
diff --git 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
 <!DOCTYPE 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
 </html>
 ```
 
-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
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Book List</title>
+</head>
+
+<body>
+  <h1> My Book List</h1>
+  <div id="bookList">
+    <!-- put the ul element here -->
+  </div>
+</body>
+
+</html>
diff --git a/Week1/js-exercises/ex1-bookList.js 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 `<p>`
+  element with the book title and author and append it to the page.
+  3. Use a `<ul>`  and `<li>` to display the books.
+  4. Add an `<img>` to each book that links to a URL of the book cover.
+  5. Change the style of the book depending on whether you have read it(green) or not(red).
+
+  The end result should look something like this:
+  https: //hyf-js2-week1-makeme-ex1-demo.herokuapp.com/
+
+  */
+
+function createBookList(books) {
+  // your code goes in here, return the ul element
+}
+
+const books = [{
+    title: 'The Design of Everyday Things',
+    author: 'Don Norman',
+    alreadyRead: false
+  },
+  {
+    title: 'The Most Human Human',
+    author: 'Brian Christian',
+    alreadyRead: true
+  },
+  {
+    title: 'The Pragmatic Programmer',
+    author: 'Andrew Hunt',
+    alreadyRead: true
+  }
+];
+
+let ulElement = createBookList(books);
+
+document.querySelector("#bookList").appendChild(ulElement);
diff --git a/Week1/js-exercises/ex2-aboutMe.html b/Week1/js-exercises/ex2-aboutMe.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8" />
+  <title>About Me</title>
+
+  <!-- 5. Add a style tag that sets a rule for .list-item to make the color red. -->
+
+</head>
+
+<body>
+  <h1>About Me</h1>
+
+  <ul>
+    <li>Nickname: <span id="nickname"></span></li>
+    <li>Favorite food: <span id="fav-food"></span></li>
+    <li>Hometown: <span id="hometown"></span></li>
+  </ul>
+
+  <!-- 1. add a script tag here the links to ex2-aboutMe.js -->
+</body>
+
+</html>
diff --git a/Week1/js-exercises/ex2-aboutMe.js b/Week1/js-exercises/ex2-aboutMe.js
@@ -0,0 +1,11 @@
+/**
+ 
+ ** Exercise 2: About me **
+
+ 1. See HTML
+ 2. Change the body tag 's style so it has a font-family of "Arial, sans-serif".
+ 3. Replace each of the spans(nickname, fav - food, hometown) with your own information.
+ 4. Iterate through each li and change the class to "list-item".
+ 5. See HTML
+ 6. Create a new img element and set its src attribute to a picture of you.Append that element to the page.
+ */
diff --git a/Week1/js-exercises/ex3-hijackLogo.js b/Week1/js-exercises/ex3-hijackLogo.js
@@ -0,0 +1,19 @@
+/**
+ 
+ ** Exercise 3: The logo hijack **
+ 
+ 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.
+
+ 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. 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.
+
+ */
+
+function hijackGoogleLogo() {
+  // your code goes in here
+}
+
+hijackGoogleLogo();
diff --git a/Week1/js-exercises/ex4-whatsTheTime.html b/Week1/js-exercises/ex4-whatsTheTime.html
@@ -0,0 +1,4 @@
+<!--
+  1. Create a basic html file
+  2. Add a script tag that links to the ex4-whatsTheTime.js
+-->
diff --git a/Week1/js-exercises/ex4-whatsTheTime.js b/Week1/js-exercises/ex4-whatsTheTime.js
@@ -0,0 +1,18 @@
+/**
+ 
+ ** Exercise 4: What 's the time? **
+ 
+ Why wear a watch when you can check the time, live in your webpage ?
+
+  1. Create a basic HTML file
+  2. in the HTML file 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
+
+ */
+
+function displayCurrentTime() {
+  // your code goes in here
+}
+
+setInterval(displayCurrentTime, 1000);
diff --git a/Week1/js-exercises/ex5-catWalk.html b/Week1/js-exercises/ex5-catWalk.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8" />
+  <title>Cat Walk</title>
+</head>
+
+<body>
+  <img style="position:absolute;" src="http://www.anniemation.com/clip_art/images/cat-walk.gif" />
+
+  <script src="ex5-catWalk.js"></script>
+</body>
+
+</html>
diff --git a/Week1/js-exercises/ex5-catWalk.js b/Week1/js-exercises/ex5-catWalk.js
@@ -0,0 +1,13 @@
+/**
+ 
+ ** Exercise 5: The cat walk **
+ Starting with an HTML, which has a single img tag of an animated GIF of a cat walking.
+
+ 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.
+ 
+*/
diff --git a/Week1/project/index.css b/Week1/project/index.css
diff --git a/Week1/project/index.html b/Week1/project/index.html
@@ -0,0 +1 @@
+<!-- Your code goes in here -->
diff --git a/Week1/project/index.js b/Week1/project/index.js
@@ -0,0 +1 @@
+// your code goes in here

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +<!--
 +  1. Create a basic html file
 +  2. Add a script tag that links to the ex4-whatsTheTime.js
 +-->