Skip to content

Commit 3f404f3

Browse files
Dusch4593Dusch4593
authored
Merge pull request #30 from codedex-io/add-solutions-js-ch-8
add solutions for JS. Ch. 8:Trifecta
2 parents 3b5c980 + 1f1422a commit 3f404f3

File tree

15 files changed

+330
-0
lines changed

15 files changed

+330
-0
lines changed

‎8-trifecta/39-green-light-go/index.html

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!-- Green Light Go! 🚦 -->
2+
<!-- Codédex -->
3+
4+
<!DOCTYPE html>
5+
<html lang="en">
6+
<head>
7+
<title>Green Light Go!</title>
8+
<link href="styles.css" rel="stylesheet" />
9+
<script src="script.js"></script>
10+
</head>
11+
<body onClick="changeLight()">
12+
<h1>Click Anywhere!</h1>
13+
<div id="traffic-light-div">
14+
<div id="red" class="light"></div>
15+
<div id="yellow" class="light"></div>
16+
<div id="green" class="light"></div>
17+
</div>
18+
</body>
19+
</html>

‎8-trifecta/39-green-light-go/script.js

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
// Green Light Go! 🚦
2+
// Codédex
3+
4+
let lightIndex = 0;
5+
6+
function changeLight() {
7+
const redLight = document.getElementById("red");
8+
const yellowLight = document.getElementById("yellow");
9+
const greenLight = document.getElementById("green");
10+
11+
if (lightIndex === 0) {
12+
redLight.style.backgroundColor = "#ff0000";
13+
yellowLight.style.backgroundColor = "";
14+
greenLight.style.backgroundColor = "";
15+
} else if (lightIndex === 1) {
16+
yellowLight.style.backgroundColor = "#ffff00";
17+
redLight.style.backgroundColor = "";
18+
greenLight.style.backgroundColor = "";
19+
} else {
20+
greenLight.style.backgroundColor = "#00ff00";
21+
redLight.style.backgroundColor = "";
22+
yellowLight.style.backgroundColor = "";
23+
}
24+
25+
lightIndex = (lightIndex + 1) % 3;
26+
}

‎8-trifecta/39-green-light-go/styles.css

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
/* Green Light Go! 🚦 */
2+
/* Codédex */
3+
4+
#traffic-light-div {
5+
border: 7px solid;
6+
width: 150px;
7+
height: 400px;
8+
background-color: grey;
9+
}
10+
11+
.light {
12+
border: 3px solid;
13+
width: 100px;
14+
height: 100px;
15+
margin: 20px auto;
16+
border-radius: 50%;
17+
}

‎8-trifecta/41-hotline-bling/index.html

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!-- Hotline Bling 💎 -->
2+
<!-- Codédex -->
3+
4+
<!DOCTYPE html>
5+
<html lang="en">
6+
<head>
7+
<link href="styles.css" rel="stylesheet" />
8+
<title>Hotline Bling</title>
9+
</head>
10+
<body>
11+
<div id="wrapper">
12+
<div>
13+
<img width="450" id="drake-pic-1" src="https://i.imgur.com/1YQsiOq.png" />
14+
<h1 id="heading-1">Watch and Learn</h1>
15+
</div>
16+
<div>
17+
<img width="450" id="drake-pic-2" src="https://i.imgur.com/1YQsiOq.png" />
18+
<h1 id="heading-2">Watch and Learn</h1>
19+
</div>
20+
</div>
21+
<script src="script.js"></script>
22+
</body>
23+
</html>

‎8-trifecta/41-hotline-bling/script.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
// Hotline Bling 💎
2+
// Codédex
3+
4+
let drakePicTwo = document.getElementById("drake-pic-2");
5+
let heading = document.getElementById("heading-2");
6+
7+
drakePicTwo.src = "https://i.imgur.com/RGbh6zY.png";
8+
heading.innerText = "Learn By Doing";

‎8-trifecta/41-hotline-bling/styles.css

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
/* Hotline Bling 💎 */
2+
/* Codédex */
3+
4+
body {
5+
background-color: #d7ba19;
6+
}
7+
8+
#wrapper {
9+
width: 75%;
10+
margin: auto;
11+
}
12+
13+
div {
14+
width: 75%;
15+
margin: auto;
16+
}
17+
18+
h1 {
19+
display: inline;
20+
position: relative;
21+
bottom: 4em;
22+
}

‎8-trifecta/42-mood-ring/index.html

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!-- Mood Ring 💍 -->
2+
3+
<!DOCTYPE html>
4+
<html lang="en">
5+
<head>
6+
<meta charset="UTF-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<link rel="stylesheet" href="styles.css">
9+
<title>Mood Ring</title>
10+
</head>
11+
<body>
12+
<div class="mood-ring" id="moodRing">
13+
<div class="stone" id="stone"></div>
14+
</div>
15+
<h1>How Are You Feeling?</h1>
16+
<script src="script.js"></script>
17+
</body>
18+
</html>

‎8-trifecta/42-mood-ring/script.js

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
// Mood Ring 💍
2+
// Codédex
3+
4+
const stone = document.getElementById('stone');
5+
6+
const randomNumber = Math.floor(Math.random(9) * 10) + 1;
7+
8+
if (randomNumber == 1) {
9+
stone.style.backgroundColor = "red";
10+
} else if (randomNumber == 2) {
11+
stone.style.backgroundColor = "orange";
12+
} else if (randomNumber == 3) {
13+
stone.style.backgroundColor = "yellow";
14+
} else if (randomNumber == 4) {
15+
stone.style.backgroundColor = "green";
16+
} else if (randomNumber == 5) {
17+
stone.style.backgroundColor = "blue";
18+
} else if (randomNumber == 6) {
19+
stone.style.backgroundColor = "#4169e1";
20+
} else if (randomNumber == 7) {
21+
stone.style.backgroundColor = "#00008b";
22+
} else if (randomNumber == 8) {
23+
stone.style.backgroundColor = "purple";
24+
} else {
25+
stone.style.backgroundColor = "black";
26+
}

‎8-trifecta/42-mood-ring/styles.css

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
/* Mood Ring 💍 */
2+
/* Codédex */
3+
4+
body {
5+
text-align: center;
6+
}
7+
8+
.mood-ring {
9+
width: 150px;
10+
height: 150px;
11+
margin: 20px auto;
12+
border: 15px solid #ccc;
13+
border-radius: 50%;
14+
position: relative;
15+
}
16+
17+
.stone {
18+
width: 125px;
19+
height: 125px;
20+
background-color: #3498db; /* Default color */
21+
border-radius: 50%;
22+
position: absolute;
23+
top: 50%;
24+
left: 50%;
25+
transform: translate(-50%, -50%);
26+
transition: background-color 0.5s ease-in-out;
27+
}

‎8-trifecta/43-chill-pill/index.html

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!-- Chill Pill 🧘🏽‍♀️ -->
2+
<!-- Codédex -->
3+
4+
<!DOCTYPE html>
5+
<html lang="en">
6+
<head>
7+
<link href="styles.css" rel="stylesheet" />
8+
<title>Chill Pill</title>
9+
</head>
10+
<body>
11+
<div id="wrapper">
12+
<h1>Quote Generator</h1>
13+
<h2>Relax and Take a Chill Pill</h2>
14+
<div id="quote-div">
15+
<p id="quote-text"></p>
16+
</div>
17+
<button id="quote-button">Generate Quote</button>
18+
</div>
19+
<script src="script.js"></script>
20+
</body>
21+
</html>

‎8-trifecta/43-chill-pill/script.js

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
// Chill Pill 🧘🏽‍♀️
2+
// Codédex
3+
4+
const quoteList = [
5+
"Some doors only open from the inside. Breath is a way of accessing that door.",
6+
"What has to be taught first, is the breath.",
7+
"Remember the blue sky. It may at times be obscured by clouds, but it is always there.",
8+
"In the midst of movement and chaos, keep stillness inside of you.",
9+
"We can't control the sea, but we can learn how to surf the waves.",
10+
"Feelings come and go like clouds in a windy sky. Conscious breathing is my anchor.",
11+
"To understand the immeasurable, the mind must be extraordinarily quiet, still."
12+
];
13+
14+
const colors = ["#e81416", "#ffa500", "#faeb36", "#79c314", "#487de7", "#4b369d", "#70369d"];
15+
16+
let wrapperDiv = document.getElementById("wrapper");
17+
let quoteText = document.getElementById("quote-text");
18+
let quoteButton = document.getElementById("quote-button");
19+
20+
quoteButton.addEventListener("click", function() {
21+
const randomIndex = Math.floor(Math.random() * quoteList.length);
22+
const randomQuote = quoteList[randomIndex];
23+
24+
quoteText.innerText = randomQuote;
25+
wrapperDiv.style.backgroundColor = colors[randomIndex];
26+
});

‎8-trifecta/43-chill-pill/styles.css

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
/* Chill Pill 🧘🏽‍♀️ */
2+
/* Codédex */
3+
4+
#wrapper {
5+
border: 2px solid black;
6+
border-radius: 5px;
7+
width: 50%;
8+
margin: 25vh auto;
9+
padding: 10px;
10+
text-align: center;
11+
transition: background-color 0.5s ease-in-out;
12+
}
13+
14+
#quote-div {
15+
border: 1px solid black;
16+
border-radius: 5px;
17+
width: 75%;
18+
margin: 10px auto;
19+
background-color: #fff;
20+
}

‎8-trifecta/44-cap-that/index.html

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!-- Cap That 🤪 -->
2+
<!-- Codédex -->
3+
4+
<!DOCTYPE html>
5+
<html lang="en">
6+
<head>
7+
<link href="styles.css" rel="stylesheet" />
8+
<title>Cap That</title>
9+
</head>
10+
<body>
11+
<h1>Welcome to the Meme Machine</h1>
12+
<button id="generator-button">Generate Meme</button>
13+
<div id="meme-wrapper">
14+
<img width="600" id="random-meme" src="" />
15+
<h2 id="random-caption"></h2>
16+
</div>
17+
<script src="script.js"></script>
18+
</body>
19+
</html>

‎8-trifecta/44-cap-that/script.js

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
// Cap That 🤪
2+
// Codédex
3+
4+
const memeArray = [
5+
"./images/evil-kermit.png",
6+
"./images/eddie-murphy-thinking.png",
7+
"./images/futurama-fry.png",
8+
"./images/confused-person.png"
9+
];
10+
11+
const captionArray = [
12+
"I am a level 60 on inferno mode!",
13+
"Voted most likely to change the world.",
14+
"Get this hair off my head!",
15+
"Oooh that must have hurt."
16+
];
17+
18+
const generatorButton = document.getElementById("generator-button");
19+
const randomMeme = document.getElementById("random-meme");
20+
const randomCaption = document.getElementById("random-caption");
21+
22+
generatorButton.addEventListener("click", function() {
23+
const randomMemeIndex = Math.floor(Math.random() * memeArray.length);
24+
const randomCaptionIndex = Math.floor(Math.random() * captionArray.length);
25+
26+
randomMeme.src = memeArray[randomMemeIndex];
27+
randomCaption.innerText = captionArray[randomCaptionIndex];
28+
})

‎8-trifecta/44-cap-that/styles.css

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
/* Cap That 🤪 */
2+
/* Codédex */
3+
4+
body {
5+
text-align: center;
6+
}
7+
8+
#generator-button {
9+
padding: 10px;
10+
border: 2px solid black;
11+
border-radius: 5px;
12+
font-weight: bolder;
13+
font-size: xx-large;
14+
}
15+
16+
#meme-wrapper {
17+
border: 4px solid black;
18+
width: 700px;
19+
height: 500px;
20+
padding: 5px;
21+
margin: 15px auto;
22+
}
23+
24+
#random-meme {
25+
border-radius: 5px;
26+
}
27+
28+
#random-caption {
29+
margin: 0;
30+
}

0 commit comments

Comments
 (0)