Thanks to visit codestin.com
Credit goes to github.com

Skip to content
This repository was archived by the owner on May 14, 2024. It is now read-only.

Commit 8bb0643

Browse files
MariabgtMariabgt
committed
home work week2 js
1 parent 5f9e431 commit 8bb0643

File tree

18 files changed

+540
-0
lines changed

18 files changed

+540
-0
lines changed

‎Week2/homework/About me/index.css

Whitespace-only changes.

‎Week2/homework/About me/index.html

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" type="text/css" href="index.css">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<title>about me</title>
9+
</head>
10+
<body>
11+
<h1>about Me</h1>
12+
<ul>
13+
<li>Nickname: <span id="nickname"></span></li>
14+
<li>Favorite food: <span id="fav-food"></span></li>
15+
<li>Hometown: <span id="hometown"></span></li>
16+
</ul>
17+
<script src="index.js"></script>
18+
</body>
19+
</html>

‎Week2/homework/About me/index.js

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
var x = document.body.style.fontFamily = 'Arial,sans-serif';
2+
3+
var Nickname = document.getElementById("nickname");
4+
Nickname.innerText= "Maria Bouguettaya";
5+
6+
var FavFood = document.getElementById('fav-food');
7+
FavFood.innerText = "Couscous";
8+
9+
var Home = document.getElementById("hometown");
10+
Home.innerText = "Casablanca";
11+
12+
var liItems= document.querySelectorAll('li');
13+
console.log(liItems);
14+
for (var i = 0; i < liItems.length; i ++) {
15+
liItems[i].className= "list-item";
16+
}
17+
18+
var newImg = document.createElement('img');
19+
newImg.src= "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRiIhyAVK8Uv4V9kZiYoTrXiIgGAtCNYcNRCjcFKtBu4_AX1nIz&s";
20+
document.body.appendChild(newImg);

‎Week2/homework/Random Quote Generator/index.css

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
/*Default neerzetten om alles op marge 0 te zetten */
2+
3+
* {
4+
margin: 0px;
5+
padding: 0px;
6+
}
7+
8+
body {
9+
text-align: center;
10+
font-family: Arial, serif;
11+
background: url(https://c4.wallpaperflare.com/wallpaper/801/537/155/pen-ink-paper-letter-wallpaper-preview.jpg) no-repeat center fixed;
12+
background-size: cover;
13+
background-position: center;
14+
}
15+
16+
.quote {
17+
font-family: Dancing Script, serif;
18+
font-size: 2.0em;
19+
height: auto;
20+
margin: 0 auto;
21+
background-color: #efefef;
22+
padding: 30px;
23+
background-color: rgba(255, 255, 255, 0.7);
24+
border-radius: 20px;
25+
color: #000;
26+
box-shadow: -10px 10px 20px rgba(100, 100, 100, .9);
27+
}
28+
29+
.author {
30+
font-family: serif;
31+
font-size: .7em;
32+
font-style: italic;
33+
}
34+
35+
.source {
36+
font-family: serif;
37+
font-size: .7em;
38+
font-style: italic;
39+
}
40+
41+
p {
42+
font-size: 1.5em;
43+
text-align: center;
44+
margin: 20px auto 20px auto;
45+
font-weight: bold;
46+
color: lightblue;
47+
}
48+
49+
button {
50+
padding: 20px auto 20px auto;
51+
}
52+
53+
h1 {
54+
font-family: Sigmar One;
55+
font-weight: bold;
56+
color: lightblue;
57+
}
58+
59+
footer {
60+
font-size: 80%;
61+
padding: 7px 0px 0px 0px;
62+
text-align: left;
63+
color: white;
64+
}
65+
66+
67+
68+
69+

‎Week2/homework/Random Quote Generator/index.html

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<html>
2+
<head>
3+
<title>Random Quote Generator</title>
4+
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
5+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
6+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
7+
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
8+
<link href="https://fonts.googleapis.com/css?family=Dancing+Script" rel="stylesheet" type="text/css">
9+
<link href="https://fonts.googleapis.com/css?family=Sigmar+One" rel="stylesheet" type="text/css">
10+
<link rel="stylesheet" type="text/css" href="index.css">
11+
</head>
12+
13+
<body>
14+
<div class="container-fluid">
15+
<header>
16+
<h1>Random Quotes</h1>
17+
<p>Favorite quotes from Philosophy, Literature and Film</p>
18+
</header>
19+
<div class="quote"><span id="quote" class="text"></span>
20+
<br>
21+
<br>
22+
<span id="author" class="author"></span>
23+
<br>
24+
<span id="source" class="source"></span>
25+
</div>
26+
27+
  <button id="new-quote-button" class="btn btn-default" type="button">New Quote</button>
28+
<button id="twitter-button" class="btn btn-default btn-twitter" type="button"><i class="fa fa-twitter fa-lg"> Tweet</i></button>
29+
30+
31+
</div>
32+
<script src="index.js"></script>
33+
</body>
34+
</html>
35+

‎Week2/homework/Random Quote Generator/index.js

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
function Quote(text, author, source) {
2+
this.text = text;
3+
this.author = author;
4+
this.source = source
5+
}
6+
7+
var currentIndex = 0;
8+
9+
var quote1 = new Quote('"Wise men speak because they have something to say; Fools because they have to say something."', 'Plato', '');
10+
var quote2 = new Quote('"It is not death that a man should fear, but he should fear never beginning to live."', 'Marcus Aurelius', 'Meditations');
11+
var quote3 = new Quote('"Very little is needed to make a happy life; it is all within yourself, in your way of thinking."', 'Marcus Aurelius', 'Meditations');
12+
var quote4 = new Quote('"The fear of death follows from the fear of life. A man who lives fully is prepared to die at any time."', 'Mark Twain', '');
13+
var quote5 = new Quote('"I think the devil doesn\'t exist, but man has created him, he has created him in his own image and likeness."', 'Fyodor Dostoyevsky', 'The Brothers Karamazov');
14+
var quote6 = new Quote('“The mystery of human existence lies not in just staying alive, but in finding something to live for.”', 'Fyodor Dostoyevsky', 'The Brothers Karamazov');
15+
var quote7 = new Quote('NESTOR: "I have to follow the dictates of hateful old age"', 'Homer', 'Iliad');
16+
var quote8 = new Quote('ANTONIUS BLOCK: "I want to confess as honestly as I can, but my heart is empty. And Emptiness is a mirror turned to my own face. I see myself... and am seized by disgust and fear. Through my indifference for people, I\'ve been placed outside of their society. Now I live in a ghost world, enclosed in my dreams and imaginings."', 'Ingmar Bergman', 'The Seventh Seal');
17+
var quote9 = new Quote('ANTONIUS BLOCK: "We must make an idol of our fear and that idol we shall call God"', 'Ingmar Bergman', 'The Seventh Seal');
18+
var quote10 = new Quote('JOHN WILMOT:"Elegance and interest...all very well in their own way, but what do they illuminate?"', 'Stephen Jeffreys', 'The Libertine');
19+
var quote11 = new Quote('"Yesterday, upon the stair, I met a man who wasn\'t there. He wasn\'t there again today, I wish, I wish he\'d go away..."', 'Hughes Mearns', 'Antigonish');
20+
var quote12 = new Quote('“Where is the wisdom we have lost in knowledge? Where is the knowledge we have lost in infomation?”', 'T.S. Eliot', 'Choruses from the Rock');
21+
var quote13 = new Quote('“Look back now and consider how the bygone ages of eternity that elapsed before our birth were nothing to us. Here, then, is a mirror in which nature shows us the time to come after our death. Do you see anything fearful in it? Do you perceive anything grim? Does it not appear more peaceful than the deepest sleep?”', 'Lucretius', 'On The Nature of Things');
22+
var quote14 = new Quote('“Let death and exile and everything that is terrible appear before your eyes every day, especially death; and you will never have anything contemptible in your thoughts or crave anything excessively.”', 'Epictetus', 'The Handbook');
23+
var quote15 = new Quote('“You seek for knowledge and wisdom, as I once did; and I ardently hope that the gratification of your wishes may not be a serpent to sting you, as mine has been.”', 'Mary Shelley', 'Frankenstein');
24+
var quote16 = new Quote('“I got the boogie for the doctor, I got the boogie for the nurse. Got to keep on buggin\', \'til they throw me in a hearse!”', 'Dr Isayah Ross', 'Boogie Disease');
25+
var quote17 = new Quote('“A man cannot be comfortable without his own approval.”', 'Mark Twain', '');
26+
var quote18 = new Quote('“There is only one way to happiness and that is to cease worrying about things which are beyond the power of our will."', 'Epictetus', 'The Handbook');
27+
var quote19 = new Quote('"Wealth consists not in having great possessions, but in having few wants."', 'Epictetus', 'The Handbook');
28+
var quote20 = new Quote('"Make the best use of what is in your power, and take the rest as it happens."', 'Epictetus', 'The Handbook');
29+
var quote21 = new Quote('"We all start off as strangers"', 'unknown', 'From a lunchroom wall in Baarn (NL)');
30+
var quote22 = new Quote('"Do not mistake the rule of force for true power. Men are not shaped by force.”','Euripides','The Bacchae');
31+
var quote23 = new Quote('"Cleverness is not wisdom.”','Euripides','The Bacchae');
32+
var quote24 = new Quote('“He who believes needs no explanation.”','Euripides', 'The Bacchae');
33+
var quote25 = new Quote('“Talk sense to a fool and he calls you foolish.”', 'Euripides', 'The Bacchae');
34+
var quote26 = new Quote('“We spoil ourselves with scruples long as things go well.”', 'Aeschylus', 'Oresteia');
35+
var quote27 = new Quote('“Money is numbers and numbers never end. If it takes money to be happy, your search for happiness will never end."', 'Robert Nesta Marley', '');
36+
37+
var quoteCollection = [quote1, quote2, quote3, quote4, quote5, quote6, quote7, quote8, quote9, quote10, quote11, quote12, quote13, quote14, quote15, quote16, quote17, quote18, quote19, quote20, quote21, quote22, quote23, quote24, quote25, quote26, quote27];
38+
39+
function generateRandomQuote() {
40+
var randomQuoteIndex = getRandomIntInclusive(0, quoteCollection.length);
41+
42+
// Avoid getting the same quote twice using a while loop
43+
while (randomQuoteIndex === currentIndex) {
44+
randomQuoteIndex = getRandomIntInclusive(0, quoteCollection.length)
45+
}
46+
47+
// Set the index that is now current.
48+
currentIndex = randomQuoteIndex;
49+
50+
// Select a random quote from the list of quotes using the random index
51+
var randomQuote = quoteCollection[randomQuoteIndex];
52+
53+
// Return
54+
return randomQuote
55+
}
56+
57+
// Function to handle the presentation of the quote
58+
function showRandomQuote(randomQuote) {
59+
document.getElementById('quote').innerHTML = randomQuote.text;
60+
document.getElementById('author').innerHTML = randomQuote.author;
61+
document.getElementById('source').innerHTML = randomQuote.source
62+
}
63+
64+
// Standard method that returns a random integer between min (included) and max (included)
65+
// Apparaently we have to use Math.floor(), as Math.round() will give a non-uniform distribution!
66+
// Source:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random
67+
function getRandomIntInclusive(min, max) {
68+
return Math.floor(Math.random() * (max - min + 1)) + min
69+
}
70+
71+
// Main function that generates a quote and presents it.
72+
function getRandomQuote() {
73+
var randomQuote = generateRandomQuote();
74+
showRandomQuote(randomQuote)
75+
}
76+
77+
// Logic for sharing quote on Twitter. The method "scrapes" the quote from the presentationlayer and posts it to twitter.
78+
function shareTwitter() {
79+
var tweetText = document.getElementById('quote').innerHTML + " - " + document.getElementById('author').innerHTML + ", " + document.getElementById('source').innerHTML;
80+
81+
var tweetLink = 'https://twitter.com/intent/tweet?text=' + encodeURIComponent(tweetText);
82+
83+
if (tweetText.length > 280) {
84+
alert('Alas, my most learned friend! Twitter cannot handle a quote of ' + tweetText.length + ' characters long! Might I suggest the good ol\' homing pigeon?')
85+
} else {
86+
window.open(tweetLink, '_blank')
87+
}
88+
}
89+
90+
document.addEventListener('DOMContentLoaded', getRandomQuote);
91+
document.getElementById('new-quote-button').addEventListener('click', getRandomQuote);
92+
document.getElementById('twitter-button').addEventListener('click', shareTwitter);

‎Week2/homework/The book list/index.css

Whitespace-only changes.

‎Week2/homework/The book list/index.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" type="text/css" href="index.css">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<title></title>
9+
</head>
10+
<body>
11+
12+
13+
14+
<script src="index.js"></script>
15+
</body>
16+
</html>

‎Week2/homework/The book list/index.js

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
const books = [
2+
{
3+
title: 'The Design of Everyday Things',
4+
author: 'Don Norman',
5+
alreadyRead: false,
6+
7+
},
8+
{
9+
title: 'The Most Human Human',
10+
author: 'Brian Christian',
11+
alreadyRead: true,
12+
13+
},
14+
];
15+
var ListOfBooks = books.map(BookIndex);
16+
function BookIndex(books){
17+
var sentences = document.createElement("P");
18+
sentences.innerText= books.title + " written by " + books.author + ".";
19+
document.body.appendChild(sentences);
20+
}
21+
22+
var UlBooks = books.map(BookUl);
23+
24+
function BookUl(books){
25+
var list = document.createElement("LI");
26+
list.innerText = books.title + " by " +books.author;
27+
document.body.appendChild(list);
28+
};
29+
30+
31+
var coverImages = books.map(covers);
32+
33+
function covers(img) {
34+
var imageCover = document.createElement('img');
35+
36+
imageCover.src = "https://assets.wired.com/photos/w_1001/wp-content/uploads/2015/09/design-of-everyday-things.jpg";
37+
imageCover.width = "100";
38+
imageCover.height = "100";
39+
imageCover.style = "margin: 10px " ;
40+
document.body.appendChild(imageCover); };
41+
42+
43+
var imageCovers = document.getElementsByTagName("img");
44+
console.log(imageCovers);
45+
var i ;
46+
for (i = 0; i < books.length; i++) {
47+
if (books.alreadyRead === true) {
48+
imageCovers.style.border = "border: 10px solid green";
49+
}
50+
else { imageCovers.style = "border: 5px solid red";
51+
}
52+
};

‎Week2/homework/The logo hijack/index.css

Whitespace-only changes.

‎Week2/homework/The logo hijack/index.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" type="text/css" href="index.css">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<title>Document</title>
9+
</head>
10+
<body>
11+
<script src="index.js"></script>
12+
</body>
13+
</html>

‎Week2/homework/The logo hijack/index.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
(function hijackGoogleLogo(){
2+
var myLogo=document.querySelector("[alt=Google]");
3+
myLogo.srcset="https://www.hackyourfuture.dk/static/logo-dark.svg";
4+
})();

‎Week2/homework/dance cat/index.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
body{
2+
background-color: black;
3+
}

‎Week2/homework/dance cat/index.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<link rel="stylesheet" type="text/css" href="index.css">
6+
<title>Cat Walk</title>
7+
</head>
8+
<body>
9+
<img style="position:absolute;" src="http://www.anniemation.com/clip_art/images/cat-walk.gif" />
10+
<script src="index.js"></script>
11+
</body>
12+
13+
</html>

‎Week2/homework/dance cat/index.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
const a=document.getElementsByTagName('img')[0];
2+
a.style.left='0px';
3+
const width=window.innerWidth;
4+
let move=0;
5+
let interval=50;
6+
(function catWalk() {
7+
move >= width
8+
? move = 0
9+
: (move === (width/2) && a.src !== 'https://media1.tenor.com/images/2de63e950fb254920054f9bd081e8157/tenor.gif?itemid=10561424')
10+
? (a.src = 'https://media1.tenor.com/images/2de63e950fb254920054f9bd081e8157/tenor.gif?itemid=10561424',interval=5000)
11+
: (move === (width/2) && a.src === 'http://www.anniemation.com/clip_art/images/cat-walk.gif')
12+
? (a.src = 'https://media1.tenor.com/images/2de63e950fb254920054f9bd081e8157/tenor.gif?itemid=10561424',interval=50,move+=10)
13+
: move+=10
14+
a.style.left = `${move}px`
15+
setTimeout(catWalk, interval);
16+
})()

0 commit comments

Comments
 (0)