Skip to content

Update money_memory_game.py #913

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

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

Update money_memory_game.py #913

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
d8010ba
Update money_memory_game.py
TacticalReader Sep 22, 2025
a5d9c60
Update money_memory_game.py
TacticalReader Sep 25, 2025
e91f302
Update index.html
TacticalReader Sep 26, 2025
31016be
Update style.css
TacticalReader Sep 26, 2025
f8a78c3
Update index.html
TacticalReader Sep 26, 2025
4cc5877
Update script.js
TacticalReader Sep 26, 2025
3920a0d
Update styles.css
TacticalReader Sep 26, 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
53 changes: 40 additions & 13 deletions AI Quote Generator/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,48 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Quotes Generator</title>
<link rel="stylesheet" href="styles.css">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>AI Quotes Generator</title>

<!-- Google Fonts: Dancing Script (cursive) -->
<!-- Recommended link usage; preconnect hints improve performance -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;600;700&display=swap"
rel="stylesheet"
/>

<!-- Font Awesome v6 (Free) via cdnjs -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
/>

<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<h1>AI Quotes Generator</h1>
</header>
<div class="container">
<div id="quoteContainer">
<p id="quoteText"></p>
</div>
<button id="getQuoteBtn" style="background-color: 3498db;">Get Quote</button>
<header>
<h1>
<i class="fa-solid fa-robot" aria-hidden="true"></i>
AI Quotes Generator
</h1>
</header>

<main class="container">
<div id="quoteContainer" aria-live="polite" aria-busy="false">
<i class="fa-solid fa-quote-left" aria-hidden="true"></i>
<p id="quoteText">Press the button to get an inspirational quote.</p>
<i class="fa-solid fa-quote-right" aria-hidden="true"></i>
</div>
<script src="script.js"></script>

<button id="getQuoteBtn" type="button" aria-label="Get a new quote">
<i class="fa-solid fa-wand-magic-sparkles" aria-hidden="true"></i>
Get Quote
</button>
</main>

<script src="script.js"></script>
</body>
</html>
67 changes: 43 additions & 24 deletions AI Quote Generator/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,47 @@
const getQuoteBtn = document.getElementById("getQuoteBtn");
const quoteText = document.getElementById("quoteText");
// your code goes here
// script.js

getQuoteBtn.addEventListener("click", () => {
getQuoteBtn.classList.add("loading");
getQuoteBtn.textContent = "Loading...";
getQuote();
});
const btn = document.getElementById('getQuoteBtn');
const quoteText = document.getElementById('quoteText');
const quoteContainer = document.getElementById('quoteContainer');

// Initially, remove loading state
getQuoteBtn.classList.remove("loading");
getQuoteBtn.textContent = "Get Quote";
// Util: set loading state with a spinner icon on the button
function setLoading(isLoading) {
quoteContainer.setAttribute('aria-busy', String(isLoading));
if (isLoading) {
btn.setAttribute('disabled', 'true');
// Replace wand icon with spinner
btn.innerHTML = `<i class="fa-solid fa-spinner fa-spin" aria-hidden="true"></i> Loading...`;
} else {
btn.removeAttribute('disabled');
btn.innerHTML = `<i class="fa-solid fa-wand-magic-sparkles" aria-hidden="true"></i> Get Quote`;
}
}

// Fetch a random quote from Quotable
async function fetchQuote() {
try {
setLoading(true);
// Quotable: GET https://api.quotable.io/random
const res = await fetch('https://api.quotable.io/random', { cache: 'no-store' });
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const data = await res.json();

// Expecting { content, author }
const content = data.content?.trim() || 'No quote available right now.';
const author = data.author ? ` — ${data.author}` : '';

function getQuote() {
fetch("https://api.quotable.io/random")
.then((response) => response.json())
.then((data) => {
quoteText.innerHTML = `"${data.content}" - ${data.author}`;
getQuoteBtn.classList.remove("loading");
getQuoteBtn.textContent = "Get Quote";
})
.catch((error) => {
console.error("Error fetching quote:", error);
quoteText.innerHTML = "Failed to fetch a quote. Please try again later.";
getQuoteBtn.classList.remove("loading");
getQuoteBtn.textContent = "Get Quote";
});
quoteText.textContent = `${content}${author}`;
} catch (err) {
console.error(err);
quoteText.textContent = 'Could not fetch a quote. Please try again.';
} finally {
setLoading(false);
}
}

// Events
btn.addEventListener('click', fetchQuote);

// Initial fetch on page load
window.addEventListener('DOMContentLoaded', fetchQuote);
122 changes: 82 additions & 40 deletions AI Quote Generator/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,56 +1,98 @@
/* styles.css */
:root {
--accent: #3498db;
--bg: #0f172a;
--card: #111827;
--text: #e5e7eb;
--muted: #9ca3af;
}

* { box-sizing: border-box; }

body {
font-family: Arial, sans-serif;
background-color: #3498db;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start; /* Adjusted to align header at the top */
height: 100vh;
margin: 0;
background:
radial-gradient(1200px 600px at 10% -10%, #1e293b, transparent),
radial-gradient(1200px 600px at 90% -20%, #0b3a67, transparent),
var(--bg);
color: var(--text);
font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Noto Sans", "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
min-height: 100vh;
display: grid;
place-items: center;
}

header {
background-color: #2c3e50;
color: #ecf0f1;
text-align: center;
padding: 10px;
width: 100%;
text-align: center;
margin-top: 2rem;
}

header h1 {
font-family: "Dancing Script", cursive;
font-weight: 700;
font-size: 2.4rem;
letter-spacing: 0.5px;
margin: 0 1rem;
}

header h1 .fa-robot {
color: var(--accent);
margin-right: 0.5rem;
}

.container {
text-align: center;
background-color: #fff;
padding: 20px;
margin-left: 2%;
margin-right: 2%;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
width: min(680px, 92vw);
margin: 2rem auto 4rem;
display: grid;
gap: 1rem;
}

button {
padding: 10px 20px;
font-size: 18px;
cursor: pointer; /* Set default cursor to pointer */
background-color: #3498db; /* Default background color */
color: #fff;
border: none;
border-radius: 5px;
transition: background-color 0.3s, transform 0.3s, filter 0.3s;
#quoteContainer {
background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
border: 1px solid rgba(255,255,255,0.06);
border-radius: 16px;
padding: 1.5rem 1.25rem;
position: relative;
box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

button.loading {
background-color: #ddd;
cursor: not-allowed;
#quoteContainer .fa-quote-left,
#quoteContainer .fa-quote-right {
color: var(--muted);
font-size: 1rem;
opacity: 0.9;
}

button:hover {
background-color: #2980b9;
transform: scale(1.05); /* Zoom in effect on hover */
filter: brightness(0.9); /* Darken the button on hover */
#quoteContainer .fa-quote-right {
float: right;
}

#quoteContainer {
margin-top: 20px;
font-size: 20px;
#quoteText {
font-family: "Dancing Script", cursive;
font-size: 1.8rem;
line-height: 1.5;
margin: 0.5rem 0;
color: var(--text);
text-wrap: pretty;
}

#getQuoteBtn {
background-color: var(--accent);
color: white;
border: none;
border-radius: 12px;
padding: 0.9rem 1.1rem;
font-size: 1rem;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 0.6rem;
justify-self: start;
transition: transform 0.05s ease, filter 0.2s ease, opacity 0.2s ease;
}

#getQuoteBtn:hover { filter: brightness(1.05); }
#getQuoteBtn:active { transform: translateY(1px); }
#getQuoteBtn[disabled] { opacity: 0.7; cursor: not-allowed; }

#getQuoteBtn .fa-wand-magic-sparkles { font-size: 1.05rem; }
86 changes: 53 additions & 33 deletions Basic Contact Form/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,40 +1,60 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Contact Form</title>
</head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">

<!-- Font Awesome 6 Free (cdnjs) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">

<link rel="stylesheet" href="style.css">
<title>Contact Form</title>
</head>
<body>
<form id="form">
<h1>Please Contact me</h1>
<div>
<label for="name">Name</label></br>
<input id="name" name="name">
</div>
<div>
<label for="email">Email</label><br>
<input type="email" id="email" name="email">
</div>
<div>
<label for="message">Message</label><br>
<textarea id="message" name="message"></textarea>
</div>
<div id="buttons-row">
<div class="buttons">
<button type="submit" id="send">Send</button>
</div>
<div class="buttons">
<button id="reset">Reset</button>
</div>
</div>
</form>
<script src="app.js"></script>
</body>
<form id="form">
<h1>Please Contact me</h1>

</html>
<div>
<label for="name">
<i class="fa-solid fa-user" aria-hidden="true"></i>
Name
</label><br>
<input id="name" name="name">
</div>

<div>
<label for="email">
<i class="fa-solid fa-envelope" aria-hidden="true"></i>
Email
</label><br>
<input type="email" id="email" name="email">
</div>

<div>
<label for="message">
<i class="fa-solid fa-comment-dots" aria-hidden="true"></i>
Message
</label><br>
<textarea id="message" name="message"></textarea>
</div>

<div id="buttons-row">
<div class="buttons">
<button type="submit" id="send">
<i class="fa-solid fa-paper-plane" aria-hidden="true"></i>
Send
</button>
</div>
<div class="buttons">
<button id="reset">
<i class="fa-solid fa-rotate-right" aria-hidden="true"></i>
Reset
</button>
</div>
</div>
</form>

<script src="app.js"></script>
</body>
</html>
2 changes: 2 additions & 0 deletions Basic Contact Form/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ form h1 {
text-align: center;
font-size: 22px;
}
label .fa-solid { margin-right: 0.5rem; color: #666; }
button .fa-solid { margin-right: 0.4rem; }

label {
color: rgb(43, 134, 209);
Expand Down
Loading