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

WM5 | AISHA_ATHMAN_LALI | MODULE_JS2 | WEEK_3 | QUOTE_GENERATOR_APP #88

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

WM5 | AISHA_ATHMAN_LALI | MODULE_JS2 | WEEK_3 | QUOTE_GENERATOR_APP #88

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
105ab20
create quote generator site
aishaathmanlali Nov 17, 2023
5126b6e
edit the js
aishaathmanlali Nov 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 14 additions & 5 deletions week-3/quote-generator/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,22 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Title here</title>
<link rel="stylesheet" href="style.css" />
<title>Quote Generator App</title>
<script defer src="quotes.js"></script>
</head>
<body>
<h1>hello there</h1>
<p id="quote"></p>
<p id="author"></p>
<button type="button" id="new-quote">New quote</button>
<section class="quote-box">
<h1>Get A Quote 💬</h1>
<p id="quote"></p>
<p id="author"></p>
<button type="button" id="new-quote">New quote</button>
<div>
<label class="switch" for="checkbox">
<input id="checkbox" type="checkbox" name="checkbox" />
<span class="slider round"></span>
</label>
</div>
</section>
</body>
</html>
43 changes: 43 additions & 0 deletions week-3/quote-generator/quotes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -491,3 +491,46 @@ const quotes = [
];

// call pickFromArray with the quotes array to check you get a random quote

const quote = document.getElementById("quote");
const author = document.getElementById("author");
const quoteBtn = document.getElementById("new-quote");

const getRandomQuote = () => {
const pickedQuote = pickFromArray(quotes);
quote.innerText = pickedQuote.quote;
author.innerText = pickedQuote.author;
};

getRandomQuote();
quoteBtn.addEventListener("click", getRandomQuote);

// Auto Play

const checkbox = document.querySelector("input[name=checkbox]");

function autoPlay() {

let currentCheck;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What would the difference be between if you put this line of code where it is, if you put it outside the function autoPlay (e.g. on line 511), and if you put it inside the start function (e.g. on line 518)?


return {
start() {
currentCheck = setInterval(getRandomQuote, 1000);
},
stop() {
clearInterval(currentCheck);
},
};
}

let checkboxChange = autoPlay();

checkbox.addEventListener("change", function (event) {
if (event.target.checked) {
checkboxChange.start();
console.log("Checkbox is checked..");
} else {
checkboxChange.stop();
console.log("Checkbox is not checked..");
}
});
106 changes: 105 additions & 1 deletion week-3/quote-generator/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,105 @@
/** Write your CSS in here **/
body {
background-image: url("https://hips.hearstapps.com/hmg-prod/images/flower-meanings-pink-tulips-1671510494.jpg");
/* background-color: #eaa2a2; */
}

.quote-box {
background-color: #f5efef;
margin-top: 15rem;
margin-right: 10rem;
margin-left: 10rem;
border-radius: 4rem;
padding: 3rem;
text-align: center;
}

h1 {
font-weight: bold;
margin-bottom: 5rem;
font-size: xx-large;
}

p {
font-size: x-large;
}

#author {
margin-left: 41rem;
margin-top: 3rem;
font-style: italic;
}

#new-quote {
background-color: #da3871;
color: #f5efef;
font-size: medium;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 20px;
padding-left: 20px;
border-radius: 10px;
border: #da3871;
margin-top: 3rem;
}

.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
margin-top: 1em;
}

.switch input {
opacity: 0;
width: 0;
height: 0;
}

.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}

.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}

input:checked + .slider {
background-color: #da3871;
}

input:focus + .slider {
box-shadow: 0 0 1px #f32121;
}

input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
border-radius: 34px;
}

.slider.round:before {
border-radius: 50%;
}