Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

West-Midlands ITP-Jan-2025 | Ifeanyi Madubugwu | Module-Data-Group | Sprint -3| Quote-generator #454

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

West-Midlands ITP-Jan-2025 | Ifeanyi Madubugwu | Module-Data-Group | Sprint -3| Quote-generator #454

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
70f6337
refactored the title on the html
Elchacode Mar 29, 2025
301ba96
implemented a function that generate new codes
Elchacode Mar 29, 2025
2c2a2f0
.
Elchacode Mar 29, 2025
caa6866
added style properties for my webpage
Elchacode Mar 29, 2025
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
13 changes: 8 additions & 5 deletions Sprint-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,16 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Title here</title>
<title>Quote generator app</title>
<link rel="stylesheet" href="style.css" />
<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>
<div class="loader">
<h1>Daily Dose of Inspiration!</h1>
<p id="quote"></p>
<p id="author"></p>
<button type="button" id="new-quote">New quote</button>
</div>
</body>
</html>
19 changes: 19 additions & 0 deletions Sprint-3/quote-generator/quotes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
// ---------------
// pickFromArray(['a','b','c','d']) // maybe returns 'c'

// DO NOT EDIT ABOVE HERE
// You don't need to change this function
function pickFromArray(choices) {
return choices[Math.floor(Math.random() * choices.length)];
Expand Down Expand Up @@ -491,3 +492,21 @@ const quotes = [
];

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

// import { quotes } from "./quotes.js"; // we implemented an import statement to import the quotes array and in other to access the quotes array as const quotes can not be resigned.

// Get the elements from the HTML
const quoteHolder = document.getElementById("quote");
const authorHolder = document.getElementById("author");
const newQuoteBtn = document.getElementById("new-quote");

function displayQuote() {
const randomQuote = pickFromArray(quotes); // assign the function pickFromArray to a variable randomQuote and pass the quotes array as an argument to the function.
quoteHolder.textContent = randomQuote.quote; // this will display the quote in the quoteHolders element which is <p> in html.
authorHolder.textContent = randomQuote.author;
// this will display the author in the authorHolders element which is <p> in html.
}

displayQuote(); // call the displayQuote function to display the quote and author when the page loads.

newQuoteBtn.addEventListener("click", displayQuote); // this will add a click event listener to the newQuoteBtn and call the displayQuote function when the button is clicked.
2 changes: 1 addition & 1 deletion Sprint-3/quote-generator/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,6 @@ For this task you will return to your quote generator and improve it with "auto-

## Hints:

Use https://rot13.com/ to decipher this hint:
Use https://rot13.com/ to decipher this hint::

`Pubbfr bar bs frgGvzrbhg be frgVagreiny.`
55 changes: 55 additions & 0 deletions Sprint-3/quote-generator/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,56 @@
/** Write your CSS in here **/
body {
background-color: #d5cdba;
font-family: Arial, sans-serif;
text-align: center;
color: #1a1a1a;
padding: 50px;
}

h1 {
font-size: 2.5em;
margin-bottom: 20px;
color: #322128;
}

p {
font-size: 1.5em;
margin: 20px 0;
font-style: italic;
}

button {
background-color: #322128;
color: #d5cdba;
font-size: 1.5em;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}

button:hover {
background-color: #1a1a1a;
}

.loader {
background: #f5ebe0;
padding: 20px;
border-radius: 10px;
margin-top: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
max-width: 500px;
margin: 0 auto;
}
#quote {
font-style: italic;
font-weight: 500;
color: #322128;
}

#author {
font-style: italic;
margin-top: 18px;
color: #322128;
Copy link

Choose a reason for hiding this comment

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

Nice design work!

font-size: 18px;
}