Skip to content

Commit bd26c32

Browse files
Stef-LevStef-Lev
committed
Only codeAlong left
1 parent faad510 commit bd26c32

4 files changed

Lines changed: 147 additions & 4 deletions

File tree

‎Week1/Homework/js-exercises/catWalk/catWalk.js‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,22 @@
11
'use strict'
2+
//Variables
23
let catImage = document.querySelector("img");
34
let positionNum = 10
45
let positionStyle = catImage.style.left = positionNum + "px";
56
let screenWidth = window.innerWidth;
6-
7+
//Function that moves the cat 10px to the right every 50 milliseconds
78
setInterval(function () {
89
positionNum += 10;
910
catImage.style.left = positionNum + "px";
10-
if (positionNum === screenWidth / 2) {
11+
let halfScreen = screenWidth / 2;
12+
//Changing image source in the middle of the screen
13+
if (positionNum == halfScreen) {
1114
catImage.src = "https://media1.tenor.com/images/2de63e950fb254920054f9bd081e8157/tenor.gif?itemid=10561424";
1215
}
16+
//Restarting the animation when it reaches the end of the screen
1317
else if (positionNum === screenWidth) {
1418
positionNum = 10;
1519
catImage.src = "http://www.anniemation.com/clip_art/images/cat-walk.gif"
1620
}
17-
18-
}, 60)
21+
}, 50)
1922

‎Week1/Homework/project-RandomQuoteGenerator/index.html‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7+
8+
9+
<link rel="stylesheet" href="style.css">
10+
<script src="https://kit.fontawesome.com/b039c65688.js" crossorigin="anonymous"></script>
11+
12+
<title>Hello, world!</title>
13+
</head>
14+
15+
<body>
16+
<div class="full-container">
17+
<div class="quote-box">
18+
<div class="text">
19+
<h2 class=""><i class="fas fa-quote-left"></i><span class="space"></span><span id="quote">Welcome to
20+
random quotes!</span><span class="space"></span><i class="fas fa-quote-right"></i></h2>
21+
22+
<p class="explain">Click on the following button for your personal quote</p>
23+
<a><button class="new-quote">New Quote</button></a>
24+
</div>
25+
</div>
26+
</div>
27+
28+
29+
<script src="script.js"></script>
30+
</body>
31+
32+
</html>

‎Week1/Homework/project-RandomQuoteGenerator/script.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
"use strict"
2+
//Creating array with quotes
3+
const quotes = [
4+
"Science is nothing but perception",
5+
"The greatest wealth is to live content with little",
6+
"When the mind is thinking it is talking to itself",
7+
"Life must be lived as play",
8+
"Learning never exhausts the mind",
9+
"Independence is happiness"
10+
];
11+
//Selecting button and quote text
12+
let button = document.querySelector(".new-quote");
13+
let quoteText = document.querySelector("#quote");
14+
15+
//Function that returns a random quote from the array above
16+
function returnQuote() {
17+
quoteText.innerHTML = quotes[Math.floor(Math.random() * quotes.length)];
18+
}
19+
//Returning a random quote when the button is clicked
20+
button.addEventListener("click", returnQuote);

‎Week1/Homework/project-RandomQuoteGenerator/style.css‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
@import url('https://fonts.googleapis.com/css?family=Exo+2:400,700&display=swap');
2+
3+
*{
4+
margin: 0;
5+
padding: 0;
6+
}
7+
body {
8+
font-family: 'Exo 2', sans-serif;
9+
background-color: rgb(0, 97, 104);
10+
}
11+
.full-container {
12+
height: 100vh;
13+
display: flex;
14+
flex-direction: column;
15+
justify-content: center;
16+
}
17+
.quote-box {
18+
background-color: white;
19+
margin-left: 8vw;
20+
margin-right: 8vw;
21+
text-align: center;
22+
height: 320px;
23+
display: flex;
24+
flex-direction: column;
25+
justify-content: center;
26+
}
27+
.text {
28+
display: inline-block;
29+
vertical-align: middle;
30+
text-align: center;
31+
padding: 12px;
32+
}
33+
34+
h2 {
35+
color: rgb(255, 122, 89);
36+
font-size: 2.6rem;
37+
margin: 10px 0 35px 0;
38+
}
39+
p {
40+
font-size: 1.1rem;
41+
margin: 10px 0 20px 0;
42+
}
43+
44+
i {
45+
color: rgb(0, 97, 104);
46+
}
47+
48+
span#quote {
49+
margin-right: 15px;
50+
margin-left: 15px;
51+
}
52+
53+
button {
54+
height: 40px;
55+
width: 100px;
56+
border-radius: 15%;
57+
color: white;
58+
font-weight: bold;
59+
font-size: 1rem;
60+
padding: 5px;
61+
box-shadow: 2px 2px rgb(197, 82, 54);
62+
}
63+
64+
a button.new-quote {
65+
background-color: rgb(255, 122, 89);
66+
border: 2px solid rgb(255, 122, 89);
67+
}
68+
69+
a button.new-quote:link {
70+
background-color: rgb(255, 122, 89);
71+
border: 2px solid rgb(255, 122, 89);
72+
}
73+
a button.new-quote:visited {
74+
background-color: rgb(255, 122, 89);
75+
border: 2px solid rgb(255, 122, 89);
76+
}
77+
78+
a button.new-quote:hover {
79+
background-color: rgb(255, 153, 128);
80+
border: 2px solid rgb(255, 153, 128);
81+
cursor: pointer;
82+
}
83+
84+
a button.new-quote:active {
85+
background-color: rgb(255, 199, 154);
86+
border: 2px solid rgb(255, 199, 154);
87+
}
88+

0 commit comments

Comments
 (0)