HackYourFuture · mahmoudbd · Dec 28, 2019 · Jan 11, 2020
diff --git a/Week1/homework/The book list/The book list.html b/Week1/homework/The book list/The book list.html
@@ -0,0 +1,65 @@
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+	<title>The book list</title>
+	<style>
+		body{
+			background-color: #f4f4f4;
+			font-size: 25px;
+			font-weight: 500;
+			font-family:sans-serif;
+		}
+	</style>
+</head>
+
+<body>
+
+
+
+    <script>
+   const books = [
+	{
+		title: 'The Design of Everyday Things',
+		author: 'Don Norman',
+		alreadyRead: false,
+		cover: 'https://qph.fs.quoracdn.net/main-qimg-7d4758e04c4bd6b1d5340607540d8b9b-c'
+	},
+	{
+		title: 'The Most Human Human',
+		author: 'Brian Christian',
+		alreadyRead: true,
+		cover:
+			'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRBmDMZRadXIWMhSt64WCOqTY_DYijVHm2ZmJ_tZuxWnda3b9B1'
+	}
+];
+
+let title = document.createElement('h1');
+title.textContent = 'Book List';
+document.body.appendChild(title).style.textAlign = 'center';
+
+let list = document.createElement('ul');
+document.body.appendChild(list);
+
+for (let i of books) {
+	let li = document.createElement('li');
+	list.appendChild(li).style.fontSize = '25px';
+	let para = document.createElement('p');
+	para.innerText = `${i.title} by "${i.author}"`;
+	li.appendChild(para);
+	let img = document.createElement('img');
+	img.src = i.cover;
+	li.insertBefore(img, para).style.width = '175px';
+	list.appendChild(li);
+	if (i.alreadyRead === false) {
+		para.style.backgroundColor = 'red';
+	} else {
+		para.style.backgroundColor = 'green';
+	}
+} 
+    </script>
+</body>
+
+</html>
+
+
diff --git a/Week1/homework/The cat walk/catWalk.html b/Week1/homework/The cat walk/catWalk.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Cat Walk</title>
+  </head>
+  <body>
+    <div>
+    <img id='cat' style="position:absolute;" src="http://www.anniemation.com/clip_art/images/cat-walk.gif" />
+  </div>
+
+
+
+  <script>
+
+let img = document.getElementById('cat');
+let srcCat1 ="http://www.anniemation.com/clip_art/images/cat-walk.gif"
+let srcCat2 ='https://media2.giphy.com/media/3mXcJgVhPxWZa/giphy.gif';
+let left=0;
+
+function catWalk() {
+
+setInterval(frame, 50)
+function frame() {
+    left = left > 1500 ? 0 : left;
+    img.style.left = left + 'px';
+
+    if (left === 750) {
+        if (img.src != srcCat2) {
+
+            setTimeout(function() { img.src = srcCat1; left += 10 }, 5000) //5 seconds
+            img.src = srcCat2;
+
+        }
+    } else {
+        img.style.left;
+        left += 10;
+    }
+}
+}
+catWalk() 
+
+
+  </script>
+
+    </body>
+</html>
diff --git a/Week1/homework/The logo hijack/The logo hijack.js b/Week1/homework/The logo hijack/The logo hijack.js
@@ -0,0 +1,8 @@
+'use strict';
+const googleLogo = document.getElementById('hplogo');
+
+function hijackGoogleLogo() {
+	googleLogo.src = 'https://www.hackyourfuture.dk/static/logo-dark.svg';
+	googleLogo.srcset = 'https://www.hackyourfuture.dk/static/logo-dark.svg';
+}
+hijackGoogleLogo();
diff --git a/Week1/homework/The logo hijack/Untitled.png b/Week1/homework/The logo hijack/Untitled.png
diff --git a/Week1/homework/The logo hijack/[Originals]/Untitled.png b/Week1/homework/The logo hijack/[Originals]/Untitled.png
diff --git a/Week1/homework/What's the time/showCurrentTime.js b/Week1/homework/What's the time/showCurrentTime.js
@@ -0,0 +1,9 @@
+function currentTime() {
+	const timeToShow = setInterval(timer, 1000);
+
+	function timer() {
+		const CT = new Date();
+		document.querySelector('#showLocalTime').innerHTML = CT.toLocaleTimeString();
+	}
+}
+currentTime();
diff --git a/Week1/homework/What's the time/time.html b/Week1/homework/What's the time/time.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>What's the time</title>
+    <style>
+        #showLocalTime{
+            font-size: 50px;
+            text-align: center;
+            background-color: #f4f4f4;
+        }
+    </style>
+</head>
+<body>
+
+<p id="showLocalTime"></p>
+
+    <script src='showCurrentTime.js'> 
+        </script>
+</body>
+</html>
diff --git a/Week1/homework/about_me/DSC-3.jpg b/Week1/homework/about_me/DSC-3.jpg
diff --git a/Week1/homework/about_me/about_me.html b/Week1/homework/about_me/about_me.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>About Me</title>
+    <style>
+        .list-item{ color: red;}
+    </style>
+  </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>
+    <script> 
+    //(In the JavaScript) Change the body tag's style 
+    //so it has a font-family of "Arial, sans-serif".
+    document.querySelector('body').style.fontFamily="Arial, sans-serif"
+
+    // (In the JavaScript) Replace each of the spans (nickname, fav-food, hometown) with your own information.
+    document.getElementById('nickname').innerText ='mahmoud'
+    document.getElementById('fav-food').innerText ='apple'
+    document.getElementById('hometown').innerText ='Syria'
+
+    //Iterate through each li and change the class to "list-item".
+    let list = document.querySelectorAll('li');
+    for(let i of list) {
+      i.className ='list-item'
+    }
+
+    //(In the HTML head) Add a style tag that sets a rule for .list-item to make the color red. done 
+
+    //Create a new img element and set its src attribute to a picture of you. Append that element to the page.
+
+
+     const img = document.createElement("img");
+         img.src = "DSC-3.jpg";
+         img.width = '150';
+      document.body.appendChild(img)
+
+
+
+    </script>
+  </body>
+</html>
diff --git a/Week1/homework/project/index.html b/Week1/homework/project/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <script src='https://kit.fontawesome.com/a076d05399.js'></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link rel="stylesheet" href="style.css">
+    <title>Random Quote Generator</title>
+</head>
+<body>
+
+ <div id='container'>
+    <div class="quoteArea ">
+
+    <div id='quoteDisplay'>
+
+    </div>
+    <br> 
+    <div class=button>
+    <button onclick="newQuote(random_bg_color())" > New Quote
+
+    </button>
+    </div>
+<div class="icon">
+
+    <i style="font-size:35px" class="fa">&#xf081;</i>
+    <i style="font-size:35px" class="fa">&#xf174;</i>
+</div>
+</div> 
+
+
+</div>
+<div class='empty'></div>
+
+
+
+    <script src='project.js'> </script>
+</body>
+
+</html>
diff --git a/Week1/homework/project/project.js b/Week1/homework/project/project.js
@@ -0,0 +1,25 @@
+const quotes = [
+	'<q> The Way Get Started Is To Quit Talking And Begin Doing.</q> <br> <br> <cite> -Walt Diseny </cite> <br>',
+	'<q>You only live once, but if you do it right, once is enough.</q> <br> <br><cite>-Mae West</cite> <br>',
+	'<q>I am so clever that sometimes I dont understand a single word of what I am saying.</q> <br> <br> <cite> -Oscar Wilde</cite> <br>',
+	'<q>Two things are infinite: the universe and human stupidity and Im not sure about the universe.</q> <br> <br><cite> -Albert Einstein</cite>  <br>',
+	'<q>All men who have turned out worth anything have had the chief hand in their own education.</q> <br> <br><cite>-Walter Scott</cite> <br>',
+	'<q>Trust yourself You know more than you think you do. </q><br><br><cite> -Benjamin Spock</cite><br> ',
+	'<q>The Way Get Started Is To Quit Talking And Begin Doing. </q> <br> <br><cite> -Walt Diseny</cite> <br>'
+];
+function newQuote() {
+	const randomNumber = Math.floor(Math.random() * quotes.length);
+	document.getElementById('quoteDisplay').innerHTML = quotes[randomNumber];
+}
+
+function random_bg_color() {
+	const x = Math.floor(Math.random() * 256);
+	const y = Math.floor(Math.random() * 256);
+	const z = Math.floor(Math.random() * 256);
+	const bgColor = 'rgb(' + x + ',' + y + ',' + z + ')';
+	console.log(bgColor);
+
+	document.getElementById('container').style.background = bgColor;
+}
+
+random_bg_color();
diff --git a/Week1/homework/project/style.css b/Week1/homework/project/style.css
@@ -0,0 +1,48 @@
+body {
+	font-family: 'Acme', sans-serif;
+	background: #34495e;
+	color: #fff;
+}
+cite {
+	float: right;
+	font-size: 20px;
+	font-weight: 600;
+	padding-right: 15px;
+}
+#container {
+	margin: auto;
+	margin-top: 50px;
+	width: 70%;
+	padding-top: 40px;
+	text-align: center;
+	margin-bottom: 50px;
+}
+.quoteArea {
+	padding: 30px;
+	font-size: 40px;
+
+	margin-bottom: 30px;
+	color: #fff;
+}
+
+button {
+	float: right;
+	font-size: 20px;
+	cursor: pointer;
+	background-color: #34495e;
+	color: #fff;
+	padding: 5px;
+}
+.icon {
+	text-align: left;
+	cursor: pointer;
+}
+
+.empty {
+	position: relative;
+	width: 40%;
+	height: 60px;
+	background-color: #fff;
+	margin: 0 auto;
+	margin-top: -35px;
+}
diff --git a/Week2/homework/Collective age/Exercise 4.js b/Week2/homework/Collective age/Exercise 4.js
@@ -0,0 +1,14 @@
+'use strict';
+
+const hackYourFutureMembers = [
+	{ name: 'Wouter', age: 33 },
+	{ name: 'Federico', age: 32 },
+	{ name: 'Noer', age: 27 },
+	{ name: 'Tjebbe', age: 22 }
+];
+
+const combinedAge = hackYourFutureMembers.map((totalAges) => totalAges.age).reduce((a, b) => {
+	return a + b;
+}, 0);
+
+console.log(`The collective age of the HYF team is: ${combinedAge}`);
diff --git a/Week2/homework/Extra homework/homework-ex2.css b/Week2/homework/Extra homework/homework-ex2.css
@@ -0,0 +1,13 @@
+ul {
+    list-style:none;
+    display: flex;
+    flex-wrap: wrap;
+    padding: 20px;
+    width: calc( 100% - 41px);
+}
+
+li {
+    width: calc(25% - 51px);
+    margin: 15px;
+    padding: 10px;
+}
diff --git a/Week2/homework/Extra homework/homework-ex2.html b/Week2/homework/Extra homework/homework-ex2.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
+<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
+<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
+<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <title>Book list</title>
+        <meta name="description" content="">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link rel="stylesheet" href="homework-ex2.css">
+    </head>
+    <body>
+        <!--[if lt IE 7]>
+            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
+        <![endif]-->
+
+
+        <script src="homework-ex2.js" async defer></script>
+    </body>
+</html>