diff --git a/Week1/js-exercises/ex1-bookList.html b/Week1/js-exercises/ex1-bookList.html
index b3864ac18..dceb8f159 100644
--- a/Week1/js-exercises/ex1-bookList.html
+++ b/Week1/js-exercises/ex1-bookList.html
@@ -5,6 +5,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Book List</title>
+
</head>
<body>
@@ -12,6 +13,7 @@ <h1> My Book List</h1>
<div id="bookList">
<!-- put the ul element here -->
</div>
+ <script src = 'ex1-bookList.js'> </script>
</body>
</html>
\ No newline at end of file
diff --git a/Week1/js-exercises/ex1-bookList.js b/Week1/js-exercises/ex1-bookList.js
index 2db54ba5e..47ce9acad 100644
--- a/Week1/js-exercises/ex1-bookList.js
+++ b/Week1/js-exercises/ex1-bookList.js
@@ -5,8 +5,7 @@
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.
+ 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).
@@ -17,26 +16,59 @@
*/
function createBookList(books) {
- // your code goes in here, return the ul element
+
+ var ul = document.createElement("ul");
+
+ for (var i = 0; i < books.length; i++) {
+ var myBook = books[i];
+
+ const para = document.createElement("p");
+ const paraInfo = document.createTextNode(myBook.title + " " + myBook.author);
+ para.appendChild(paraInfo);
+
+ if (myBook.alreadyRead === false) { para.style.backgroundColor = "red";
+
+ } else {
+ para.style.backgroundColor = "green"; }
+ var li = document.createElement('li');
+ li.appendChild(para);
+ ul.appendChild(li);
+
+ const coverImage = document.createElement("img");
+ coverImage.src = myBook.bookCover
+ coverImage.style.maxHeight = '300px'
+ li.appendChild(coverImage);
+ }
+
+ return ul
+
+
}
const books = [{
title: 'The Design of Everyday Things',
author: 'Don Norman',
- alreadyRead: false
+ alreadyRead: false,
+ bookCover: 'https://assets.wired.com/photos/w_1001/wp-content/uploads/2015/09/design-of-everyday-things.jpg'
},
{
title: 'The Most Human Human',
author: 'Brian Christian',
- alreadyRead: true
+ alreadyRead: true,
+ bookCover: 'https://th.bing.com/th/id/OIP.Bwdfwq825Plrhn6iHAH1ggHaLZ?pid=Api&rs=1'
+
},
{
title: 'The Pragmatic Programmer',
author: 'Andrew Hunt',
- alreadyRead: true
+ alreadyRead: true,
+ bookCover: 'http://www.informit.com/ShowCover.aspx?isbn=0135957052'
+
}
];
let ulElement = createBookList(books);
-document.querySelector("#bookList").appendChild(ulElement);
\ No newline at end of file
+document.querySelector("#bookList").appendChild(ulElement);
+
+//https://www.w3schools.com/jsref/met_node_appendchild.asp
\ No newline at end of file
diff --git a/Week1/js-exercises/ex2-aboutMe.html b/Week1/js-exercises/ex2-aboutMe.html
index 5e77f49a6..660380dd7 100644
--- a/Week1/js-exercises/ex2-aboutMe.html
+++ b/Week1/js-exercises/ex2-aboutMe.html
@@ -19,6 +19,7 @@ <h1>About Me</h1>
</ul>
<!-- 1. add a script tag here the links to ex2-aboutMe.js -->
+ <script src = 'ex2-aboutMe.js'> </script>
</body>
</html>
\ No newline at end of file
diff --git a/Week1/js-exercises/ex2-aboutMe.js b/Week1/js-exercises/ex2-aboutMe.js
index 2244d7d30..46e212d2d 100644
--- a/Week1/js-exercises/ex2-aboutMe.js
+++ b/Week1/js-exercises/ex2-aboutMe.js
@@ -1,11 +1,40 @@
-/**
+let fontStyle = document.body.style.font = "Arial, sans-serif";
+
+let myName = document.getElementById('nickname').innerHTML = 'Han';
+let myFood = document.getElementById('fav-food').innerHTML = 'Gyudon';
+let myTown = document.getElementById('hometown').innerHTML = 'Neverhood';
+
+// const myList = document.querySelectorAll("ul > li");
+// for (let i = 0; i < myList.length; i++) {
+// let li = myList[i];
+// li.classList.add("list-item");
+// }
+
+for (i = 1; i <= 3; i++) {
+ console.log(document.querySelector(`li:nth-child(${i})`));
+ document.querySelector(`li:nth-child(${i}`).classList.add("list-item");
+}
+
+/* Credit goes to Yahs for list-item*/
+
+var url = 'https://smashedcompass.files.wordpress.com/2016/06/silly-walk.jpg';
- ** 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.
- */
\ No newline at end of file
+var image = new Image();
+image.src = url;
+image.style.maxHeight = '300px'
+document.body.appendChild(image);
+
+
+
+/**
+** Exercise 2: About me **
+
+ + See HTML
+ + Change the body tag 's style so it has a font-family of "Arial, sans-serif".
+ + Replace each of the spans(nickname, fav - food, hometown) with your own information.
+ + Iterate through each li and change the class to "list-item".
+ + 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
index 5ca291435..36f405f01 100644
--- a/Week1/js-exercises/ex3-hijackLogo.js
+++ b/Week1/js-exercises/ex3-hijackLogo.js
@@ -2,7 +2,7 @@
** 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.
+ No homepage is safe from the logo bandit!Everytime he sees a Google Logo he replaces it with a logo from
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).
@@ -13,7 +13,19 @@
*/
function hijackGoogleLogo() {
- // your code goes in here
+
+let parent = document.getElementById('lga');
+
+let gImage = document.getElementById("hplogo");
+gImage.style.display = 'none';
+
+parent.style.backgroundImage = "url('https://www.hackyourfuture.dk/static/logo-dark.svg')";
+parent.style.backgroundRepeat = 'no-repeat';
+parent.style.backgroundPosition = 'center';
+
}
-hijackGoogleLogo();
\ No newline at end of file
+hijackGoogleLogo();
+
+
+
diff --git a/Week1/js-exercises/ex4-whatsTheTime.html b/Week1/js-exercises/ex4-whatsTheTime.html
index 2c357e7cd..873318718 100644
--- a/Week1/js-exercises/ex4-whatsTheTime.html
+++ b/Week1/js-exercises/ex4-whatsTheTime.html
@@ -1,4 +1,13 @@
-<!--
- 1. Create a basic html file
- 2. Add a script tag that links to the ex4-whatsTheTime.js
--->
\ No newline at end of file
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>What's the time!</title>
+</head>
+<body>
+
+
+ <script src='ex4-whatsTheTime.js'></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/Week1/js-exercises/ex4-whatsTheTime.js b/Week1/js-exercises/ex4-whatsTheTime.js
index 4024c1016..096db8a58 100644
--- a/Week1/js-exercises/ex4-whatsTheTime.js
+++ b/Week1/js-exercises/ex4-whatsTheTime.js
@@ -12,7 +12,9 @@
*/
function displayCurrentTime() {
- // your code goes in here
+ const currentTime = new Date();
+ const n = currentTime.toLocaleTimeString();
+ document.body.innerHTML = '<h1>'+ n + '</h1>';
}
setInterval(displayCurrentTime, 1000);
\ No newline at end of file
diff --git a/Week1/js-exercises/ex5-catWalk.js b/Week1/js-exercises/ex5-catWalk.js
index 309eca0eb..24ade0a28 100644
--- a/Week1/js-exercises/ex5-catWalk.js
+++ b/Week1/js-exercises/ex5-catWalk.js
@@ -1,3 +1,40 @@
+//**shamleslsy copied from Yash */
+
+
+const img = document.querySelector('img');
+const dancingCat = 'https://media1.tenor.com/images/2de63e950fb254920054f9bd081e8157/tenor.gif?itemid=10561424'
+const originalImgSrc = img.src;
+const originalImgWidth = img.width;
+
+fucntion setCatPositionToStart() {
+ Image.style.left = '0px';
+}
+
+setCatPositionToStart ();
+
+fucntion catWalk() {
+ const.currentPosition = parseFloat(img.style.left);
+ img.style.left = (currentPosition + 10).toString().concat('px');
+
+ const.middlePosition = (window.innerWidth - originalImgSrc) / 2;
+
+ if (currentPosition >= middlePosition - 10 && currentPosition <= middlePosition) {
+ clearInterval(internval);
+ img.src = dancingCat;
+ setTimeout(fucntion() {
+ img.src = originalImgSrc;
+ img.style.left = (currentPosition + 20).toString().concat('px');
+ internval = setInterval(catWalk, 50);
+ }, 5000);
+
+ if (position > window.innerWidth) {
+ setCatPositionToStart();
+ }
+}
+
+let internval = setInterval(catWalk, 50);
+
+
/**
** Exercise 5: The cat walk **
diff --git a/Week1/project/img_1.png b/Week1/project/img_1.png
new file mode 100644
index 000000000..577e8939f
Binary files /dev/null and b/Week1/project/img_1.png differ
diff --git a/Week1/project/index.css b/Week1/project/index.css
index e69de29bb..40efe23fc 100644
--- a/Week1/project/index.css
+++ b/Week1/project/index.css
@@ -0,0 +1,41 @@
+* {
+ margin: 0;
+ padding:0;
+}
+
+body {
+background-color: orange;
+margin: auto;
+}
+
+h1 {
+margin-bottom: 100px;
+}
+
+.container {
+ display: block;
+ background-color: whitesmoke;
+ width: 900px;
+ align: center;
+ margin:0px auto;
+ margin-top: 200px;
+ padding: 100px;
+
+}
+
+button {
+ margin-top: 100px;
+ background-color: orange;
+ border: none;
+ color: white;
+ padding: 15px 32px;
+ text-align: center;
+ text-decoration: none;
+ font-size: 16px;
+
+}
+
+#displayQuote {
+ color: orange;
+ font-size: 20px;
+}
\ No newline at end of file
diff --git a/Week1/project/index.html b/Week1/project/index.html
index 87d3c8b86..cfd8e68f1 100644
--- a/Week1/project/index.html
+++ b/Week1/project/index.html
@@ -1 +1,27 @@
-<!-- Your code goes in here -->
\ No newline at end of file
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="stylesheet" href="index.css">
+ <title>The quote of the day</title>
+</head>
+<body>
+
+<div class="container">
+
+ <div class="child">
+
+
+ <h1><img src="image_1.png" width="50px"></h1>
+
+ <div id="displayQuote"> </div>
+ <button onclick="nextQuote()">Next Quote</button>
+
+
+ </div>
+</div>
+
+<script src="index.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/Week1/project/index.js b/Week1/project/index.js
index 8427aa356..d06370ea1 100644
--- a/Week1/project/index.js
+++ b/Week1/project/index.js
@@ -1 +1,18 @@
-// your code goes in here
\ No newline at end of file
+const theQuotes =[
+'Ever tried. Ever failed. No matter. Try Again. Fail again. Fail better. -- S. Beckett',
+'Is that a gun in your pocket, or are you just happy to see me? -- Mae WEST',
+'Carpe diem. Seize the day, boys. Make your lives extraordinary. -- Dead Poets Society, 1989',
+'Houston, we have a problem. -- Apollo 13, 1995',
+'You can not handle the truth! -- A Few Good Men, 1992',
+'Hasta la vista, baby. -- the Terminator 2: Judgment Day, 1991',
+]
+
+
+
+function nextQuote() {
+ const randomNumber = Math.floor(Math.random() * (theQuotes.length));
+ document.getElementById('displayQuote').innerHTML = theQuotes[randomNumber];
+}
+
+// https://www.freecodecamp.org/news/creating-a-bare-bones-quote-generator-with-javascript-and-html-for-absolute-beginners-5264e1725f08/
+