Updated to the latest AI class work

MafuSaku · Dec 16, 2024 · d4fc0c0 · d4fc0c0
1 parent ac85691
commit d4fc0c0
Show file tree

Hide file tree

Showing 3 changed files with 220 additions and 0 deletions.
diff --git a/2024/16-12-2024 (Week 8.1 AI)/index.html b/2024/16-12-2024 (Week 8.1 AI)/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="A jolly and fun web app that gives random quotes and memes every time you click a button!">
+    <meta name="keywords" content="random, quotes, memes, fun">
+    <meta name="author" content="saku">
+    <title>Random - saku</title>
+
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <header>
+        <h1>Random Fun App</h1>
+    </header>
+
+    <main>
+        <section class="quote-section">
+            <article class="quote">
+                <p id="quote-text">Click the button to get a random quote!</p>
+                <button id="quote-btn" class="button">Get Random Quote</button>
+            </article>
+        </section>
+
+        <section class="meme-section">
+            <article class="meme">
+                <p id="meme-text">Click the button to see a random meme!</p>
+                <button id="meme-btn" class="button">Get Random Meme</button>
+                <div id="meme-container" class="meme-container"></div>
+            </article>
+        </section>
+    </main>
+
+    <footer>
+        <p>&copy; 2024 Random Fun App. All rights reserved.</p>
+    </footer>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/2024/16-12-2024 (Week 8.1 AI)/script.js 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}" <br><strong>- ${authorName}</strong>`;
+//     } 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}" <br><strong>- ${authorName}</strong>`;
+//     } 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);
diff --git a/2024/16-12-2024 (Week 8.1 AI)/style.css 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;
+    }
+}