diff --git a/android-chrome-192x192.png b/android-chrome-192x192.png new file mode 100644 index 0000000..82a0d74 Binary files /dev/null and b/android-chrome-192x192.png differ diff --git a/android-chrome-512x512.png b/android-chrome-512x512.png new file mode 100644 index 0000000..ac8692e Binary files /dev/null and b/android-chrome-512x512.png differ diff --git a/apple-touch-icon.png b/apple-touch-icon.png new file mode 100644 index 0000000..b4abba2 Binary files /dev/null and b/apple-touch-icon.png differ diff --git a/favicon-16x16.png b/favicon-16x16.png new file mode 100644 index 0000000..b9219bc Binary files /dev/null and b/favicon-16x16.png differ diff --git a/favicon-32x32.png b/favicon-32x32.png new file mode 100644 index 0000000..4508364 Binary files /dev/null and b/favicon-32x32.png differ diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000..8881836 Binary files /dev/null and b/favicon.ico differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..e089cdc --- /dev/null +++ b/index.html @@ -0,0 +1,39 @@ + + + + + + Quote Generator + + + + + + + + +
+ +
+ + + +
+ +
+ +
+ +
+ + +
+
+ +
+ + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..ce82c17 --- /dev/null +++ b/script.js @@ -0,0 +1,98 @@ +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 = []; + +/* Show Loading */ +function loading(){ + loader.hidden = false; + quoteContainer.hidden = true; +} + +/* Hide Loading */ +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 (1) +async function getQuotes(callback) { + loading(); + const apiUrl = 'https://jacintodesign.github.io/quotes-api/data/quotes.json'; + try { + const response = await fetch(apiUrl); + + if (!response.ok) { + throw new Error(`Errore nella richiesta: ${response.status} - ${response.statusText}`); + } + + apiQuotes = await response.json(); + + // Verifica la struttura dei dati + console.log(apiQuotes); + + // Assicurati che 'author' sia definito prima di accedervi + if (apiQuotes && apiQuotes.length > 0) { + apiQuotes.forEach(quote => { + if (quote && quote.author) { + console.log('Author:', quote.author); + // Puoi fare qualcos'altro con quote.author qui + } else { + console.error('La proprietà "author" non è definita per questo oggetto quote.'); + } + }); + } else { + console.error('Dati non validi o vuoti.'); + } + // Chiamata a newQuote dopo aver ottenuto le citazioni + if (typeof callback === 'function') { + callback(); + } + } catch(error) { + console.error('Errore nella richiesta:', error.message); + alert('Si è verificato un errore durante il recupero delle citazioni.'); + // Gestisci l'errore in modo appropriato + } +} + + +// Tweet Quote +function tweetQuote(){ + const twitterUrl = `https://twitter.com/intent/tweet?text=${quoteText.textContent} - ${authorText.textContent}`; + window.open(twitterUrl, '_blank'); +} + +// Event Listeners +newQuoteBtn.addEventListener('click', newQuote); +twitterBtn.addEventListener('click', tweetQuote); + +//On load +window.addEventListener('load', function (){ + getQuotes(newQuote); +}); diff --git a/site.webmanifest b/site.webmanifest new file mode 100644 index 0000000..45dc8a2 --- /dev/null +++ b/site.webmanifest @@ -0,0 +1 @@ +{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"} \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..41edc1e --- /dev/null +++ b/style.css @@ -0,0 +1,108 @@ +@import url('https://fonts.googleapis.com/css2?family=Comfortaa&family=Roboto&display=swap'); +html { + box-sizing: border-box; +} + +body { + margin: 0; + min-height: 100vh; + background-color: #ffffff; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='%23e7e10b' fill-opacity='1'%3E%3Cpolygon fill-rule='evenodd' points='8 4 12 6 8 8 6 12 4 8 0 6 4 4 6 0 8 4'/%3E%3C/g%3E%3C/svg%3E"); + color: black; + font-family: 'Comfortaa', sans-serif; + font-weight: 700; + text-align: center; + display: flex; + align-items: center; + justify-content: center; +} + +.quote-container { + width: auto; + max-width: 900px; + padding: 20px 30px; + border-radius: 10px; + background-color: rgba(255, 255, 255, 0.85); + box-shadow: 0 10px 10px 10px rgba(0, 0, 0, 0.2); +} + +.quote-text { + font-size: 2.75rem; +} + +.long-quote { + font-size: 2rem; +} + +.fa-quote-left{ + font-size: 4rem; +} + +.quote-author { + margin-top: 15px; + font-size: 2rem; + font-weight: 400; + font-style: italic; +} + +.button-container { + margin-top: 15px; + display: flex; + justify-content: space-between; +} + +button { + cursor: pointer; + font-size: 1.2rem; + border: none; + border-radius: 10px; + color: white; + background: black; + outline: none; + padding: 0.5rem 1.8rem; + box-shadow: 0 0.3rem rgba(121,121,121, 0.65) +} + +button:hover { + filter: brightness(110%); +} + +button:active { + transform: translate(0, 0.3rem); + box-shadow: 0 0.1rem rgba(255, 255, 255, 0.65); +} + +.x-twitter-button:hover { + color: #38a1f3; +} + +.fa-brands { + font-size: 1.5rem; +} + +/* Loader */ +/* HTML:
*/ +.loader { + width: 50px; + aspect-ratio: 1; + border-radius: 50%; + border: 8px solid; + border-color: #000 #0000; + animation: l1 1s infinite; + } + @keyframes l1 {to{transform: rotate(.5turn)}} + +/* Media Query: Tablet or Smaller */ +@media screen and (max-width: 1000px) { + .quote-container { + margin: auto 10px; + } + + .quote-text{ + font-size: 3vh; + } + + .quote-author{ + font-size: 2vh; + } +} \ No newline at end of file