From d4fc0c0d489c1f2488739015693bfc01887cac19 Mon Sep 17 00:00:00 2001 From: "Scarlett S." <58628602+MafuSaku@users.noreply.github.com> Date: Mon, 16 Dec 2024 15:39:40 +0700 Subject: [PATCH] Updated to the latest AI class work --- 2024/16-12-2024 (Week 8.1 AI)/index.html | 41 +++++++++ 2024/16-12-2024 (Week 8.1 AI)/script.js | 74 ++++++++++++++++ 2024/16-12-2024 (Week 8.1 AI)/style.css | 105 +++++++++++++++++++++++ 3 files changed, 220 insertions(+) create mode 100644 2024/16-12-2024 (Week 8.1 AI)/index.html create mode 100644 2024/16-12-2024 (Week 8.1 AI)/script.js create mode 100644 2024/16-12-2024 (Week 8.1 AI)/style.css diff --git a/2024/16-12-2024 (Week 8.1 AI)/index.html b/2024/16-12-2024 (Week 8.1 AI)/index.html new file mode 100644 index 0000000..315e048 --- /dev/null +++ b/2024/16-12-2024 (Week 8.1 AI)/index.html @@ -0,0 +1,41 @@ + + + + + + + + + Random - saku + + + + +
+

Random Fun App

+
+ +
+
+
+

Click the button to get a random quote!

+ +
+
+ +
+
+

Click the button to see a random meme!

+ +
+
+
+
+ + + + + + \ No newline at end of file diff --git a/2024/16-12-2024 (Week 8.1 AI)/script.js b/2024/16-12-2024 (Week 8.1 AI)/script.js new file mode 100644 index 0000000..215d5b3 --- /dev/null +++ b/2024/16-12-2024 (Week 8.1 AI)/script.js @@ -0,0 +1,74 @@ +// Quote function +const quotes = [ + "Do not take life too seriously. You will never get out of it alive.", + "I'm writing a book. I've got the page numbers done.", + "The only time to be positive you've got a clear path is when you're on the edge of a cliff.", + "The problem with quotes on the internet is that it's hard to verify their authenticity.", + "Behind every great man, there is a woman rolling her eyes." +]; + +function getRandomQuote() { + const randomIndex = Math.floor(Math.random() * quotes.length); + document.getElementById("quote-text").innerText = quotes[randomIndex]; +} + +// Quote function (fetches random quote from the API) +// async function getRandomQuote() { +// try { +// const response = await fetch('https://api.quotable.io/random'); +// const data = await response.json(); + +// const quoteText = data.content; +// const authorName = data.author; + +// // Display the quote and the author +// document.getElementById("quote-text").innerHTML = `"${quoteText}"
- ${authorName}`; +// } catch (error) { +// console.error('Error fetching quote:', error); +// document.getElementById("quote-text").innerText = "Oops! Couldn't fetch a quote at the moment."; +// } +// } + +// Quote function (fetches random quote from the API) +// async function getRandomQuote() { +// try { +// const response = await fetch('https://api.quotable.io/random'); // New API endpoint for random quotes +// const data = await response.json(); + +// const quoteText = data.content; +// const authorName = data.author; + +// // Display the quote and the author +// document.getElementById("quote-text").innerHTML = `"${quoteText}"
- ${authorName}`; +// } catch (error) { +// console.error('Error fetching quote:', error); +// document.getElementById("quote-text").innerText = "Oops! Couldn't fetch a quote at the moment."; +// } +// } + +document.getElementById("quote-btn").addEventListener("click", getRandomQuote); + +// Meme function (from imgflip API) +async function getRandomMeme() { + try { + const response = await fetch('https://api.imgflip.com/get_memes'); + const data = await response.json(); + const memes = data.data.memes; + const randomMeme = memes[Math.floor(Math.random() * memes.length)]; + + const memeImage = document.createElement('img'); + memeImage.src = randomMeme.url; + memeImage.alt = randomMeme.name; + memeImage.style.maxWidth = '100%'; + memeImage.style.height = 'auto'; + + // Clear previous meme if any + const memeContainer = document.getElementById('meme-container'); + memeContainer.innerHTML = ''; + memeContainer.appendChild(memeImage); + } catch (error) { + console.error('Error fetching meme:', error); + } +} + +document.getElementById("meme-btn").addEventListener("click", getRandomMeme); \ No newline at end of file diff --git a/2024/16-12-2024 (Week 8.1 AI)/style.css b/2024/16-12-2024 (Week 8.1 AI)/style.css new file mode 100644 index 0000000..ab301e7 --- /dev/null +++ b/2024/16-12-2024 (Week 8.1 AI)/style.css @@ -0,0 +1,105 @@ +/* Base styles */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Arial', sans-serif; + background-color: #f0f8ff; + color: #333; + min-height: 100vh; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + padding: 2rem; +} + +header, footer { + text-align: center; +} + +header h1 { + font-size: 2.5rem; + color: #ff6347; + margin-bottom: 1.5rem; +} + +footer p { + font-size: 1rem; + color: #555; +} + +/* Main content */ +main { + width: 100%; + max-width: 1200px; + padding: 2rem 1rem; + display: flex; + flex-direction: column; + align-items: center; +} + +section { + margin-bottom: 2rem; + width: 100%; + max-width: 900px; + text-align: center; +} + +.quote-section, .meme-section { + background-color: #fff; + padding: 1.5rem; + border-radius: 8px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); +} + +.quote p, .meme p { + font-size: 1.2rem; + margin-bottom: 1rem; + color: #333; + line-height: 1.5; +} + +/* Buttons */ +.button { + background-color: #ff6347; + color: white; + font-size: 1rem; + padding: 1rem 2rem; + border: none; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s ease; + margin: 1rem; +} + +.button:hover { + background-color: #e53e29; +} + +/* Meme Image Styles */ +.meme-container img { + max-width: 100%; + height: auto; + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); +} + +/* Responsive Styles */ +@media (max-width: 768px) { + header h1 { + font-size: 2rem; + } + + .button { + font-size: 0.9rem; + padding: 0.8rem 1.5rem; + } + + section { + padding: 1rem; + } +} \ No newline at end of file