Skip to content

Commit

Permalink
Initial commit & completed
Browse files Browse the repository at this point in the history
  • Loading branch information
@naijamesz
naijamesz committed Sep 19, 2023
0 parents commit ad86c6f
Show file tree
Hide file tree
Showing 4 changed files with 323 additions and 0 deletions.
Binary file added favicon.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
57 changes: 57 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Quote Generator</title>
<link rel="icon" type="image/png" href="favicon.png" />
<link rel="icon" type="image/png" href="https://s2.googleusercontent.com/s2/favicons?domain=jacinto.design" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="quote-container" id="quote-container">
<!-- Quote -->
<div class="quote-text">
<i class="fas fa-quote-left"></i>
<span id="quote"></span>
<i class="fas fa-quote-right"></i>
</div>
<!-- Author -->
<div class="quote-author">
<span id="author"></span>
</div>
<!-- Buttons -->
<div class="button-container">
<button class="twitter-button" id="twitter" title="Tweet This!">
<i class="fab fa-twitter"></i>
</button>

<button id="new-quote">New Quote</button>
</div>
</div>
<!-- Loader -->
<div class="loader" id="loader"></div>
<!-- <div class="quote-container" id="quoter-container"> -->
<!-- Quote -->
<!-- <div class="quoter-text">
<i class="fas fa-quoter-left"></i>
<span id="quote">What you are is what you have been. What you'll be is what you do now.</span>
</div> -->
<!-- Author -->
<!-- <div class="quote-author">
<span id="author">Buddha</span>
</div> -->
<!-- Buttons -->
<!-- <div class="button-container">
<button class="twitter-button" id="twitter" title="Tweet This"><i class="fab fa-twitter"></i></button
><button id="new-quote">New Quote</button>
</div>
</div> -->
<!-- Loader -->
<!-- <div class="loader" id="loader"></div> -->
<!-- Script -->
<script src="script.js"></script>
<!-- <script src="quotes.json"></script> -->
</body>
</html>
136 changes: 136 additions & 0 deletions script.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,136 @@
const quoteContainer = document.getElementById('quote-container')
const quoteText = document.getElementById('quote')
const authorText = document.getElementById('author')
const twitterBtn = document.getElementById('twitter')
const newQuoteBtn = document.getElementById('new-quote')
const loader = document.getElementById('loader')

let apiQuotes = []

// Loading Spinner Shown
function loading() {
loader.hidden = false
quoteContainer.hidden = true
}

// Remove Loading Spinner
function complete() {
quoteContainer.hidden = false
loader.hidden = true
}

// Show New Quote
function newQuote() {
loading()
// Pick a random quote from apiQuotes array
const quote = apiQuotes[Math.floor(Math.random() * apiQuotes.length)]
// check if author field is blank and replace it with 'Unknown'
if (!quote.author) {
authorText.textContent = 'Unknown'
} else {
authorText.textContent = quote.author
}
// check Quote length to determine styling
if (quote.text > 120) {
quoteText.classList.add('long-quote')
} else {
quoteText.classList.remove('long-quote')
}
// Set Quote, Hide Loader
quoteText.textContent = quote.text
complete() // call function complete
}

// Get Quotes From API
async function getQuotes() {
loading()
const apiUrl = 'https://jacintodesign.github.io/quotes-api/data/quotes.json'
try {
const response = await fetch(apiUrl)
apiQuotes = await response.json()
newQuote()
} catch (error) {
// Catch Error Here
}
}

// Tweet Quoter
function tweetQuote() {
const twitterUrl = `https://twitter.com/intent/tweet?text=${quoteText.innerText} - ${authorText.innerText}`
window.open(twitterUrl, '_blank')
}
// Event Listeners
newQuoteBtn.addEventListener('click', newQuote)
twitterBtn.addEventListener('click', tweetQuote)

// On Load
getQuotes()

// const quoteContainer = document.getElementById('quote-container')
// const quoteText = document.getElementById('quote')
// const authorText = document.getElementById('author')
// const twitterBtn = document.getElementById('twitter')
// const newQuoteBtn = document.getElementById('new-quote')
// const loader = document.getElementById('loader')

// let apiQuotes = []

// // Loading Spinner Shown
// function loading() {
// loader.hidden = false
// quoteContainer.hidden = true
// }

// // Remove Loading Spinner
// function complete() {
// quoteContainer.hidden = false
// loader.hidden = true
// }

// // Show New Quote
// function newQuote() {
// loading()
// // Pick a random quote from apiQuotes array
// const quote = apiQuotes[Math.floor(Math.random() * apiQuotes.length)]
// // Check if Author field is blank and replace it with 'Unknown'
// if (!quote.author) {
// authorText.textContent = 'Unknown'
// } else {
// authorText.textContent = quote.author
// }
// // Check Quote length to determine styling
// if (quote.text.length > 120) {
// quoteText.classList.add('long-quote')
// } else {
// quoteText.classList.remove('long-quote')
// }
// // Set Quote, Hide Loader
// quoteText.textContent = quote.text
// complete()
// }

// // Get Quotes From API
// async function getQuotes() {
// loading()
// const apiUrl = 'https://type.fit/api/quotes'
// try {
// const response = await fetch(apiUrl)
// apiQuotes = await response.json()
// newQuote()
// } catch (error) {
// // Catch Error Here
// }
// }

// // Tweet Quote
// function tweetQuote() {
// const twitterUrl = `https://twitter.com/intent/tweet?text=${quoteText.innerText} - ${authorText.innerText}`
// window.open(twitterUrl, '_blank')
// }

// // Event Listeners
// newQuoteBtn.addEventListener('click', newQuote)
// twitterBtn.addEventListener('click', tweetQuote)

// // On Load
// getQuotes()
130 changes: 130 additions & 0 deletions style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,130 @@
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

* {
box-sizing: border-box;
}

body {
margin: 0;
min-height: 100vh;
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
height: 100vh;
color: #000;
font-family: 'Roboto', sans-serif;
font-weight: 300;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}

.quote-container {
width: auto;
max-width: 900px;
padding: 20px 30px;
border-radius: 10px;
background-color: rgba(255, 255, 255, 0.4);
box-shadow: 0 10px 10px 10px rgba(0, 0, 0, 0.2);
}

.quote-text {
font-size: 1rem;
}

.long-quote {
font-size: 2.75rem;
}

.fa-quote-left {
font-size: 1rem;
}
.fa-quote-right {
font-size: 1rem;
}

.quote-author {
margin: 1rem;
font-size: 2.5rem;
font-weight: 400;
font-style: italic;
}

.button-container {
margin-top: 15px;
display: flex;
justify-content: space-between;
}

button {
cursor: pointer;
font-size: 1.5rem;
height: 2.5rem;
border: none;
border-radius: 10px;
color: #fff;
background-color: #23a6d5;
outline: none;
padding: 0.5rem 1.8rem 0.5rem 1.8rem;
box-shadow: 0 0.3rem rgba(121, 121, 121, 0.65);
}

button:hover {
background-color: rgba(0, 0, 0, 0.8);
filter: brightness(150%);
}

button:active {
transform: translate(0, 0.3rem);
box-shadow: 0 0.1rem rgba(255, 255, 255, 0.65);
}

.twitter-button:hover {
color: #38a1f3;
}

.fa-twitter {
font-size: 1.875rem;
}

/* Loader */
.loader {
border: 16px solid #f3f3f3;
border-top: 16px solid #333;
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}

@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

/* Media Query: Tablet or Smaller */
@media screen and (max-width: 1000px) {
.quote-container {
margin: auto 10px;
}

.quote-text {
font-size: 2.5rem;
}
}

0 comments on commit ad86c6f

Please sign in to comment.