Skip to content

Commit

Permalink
AI Class
Browse files Browse the repository at this point in the history
  • Loading branch information
@MafuSaku
MafuSaku authored Oct 30, 2024
1 parent b4da363 commit ccda8a4
Show file tree
Hide file tree
Showing 8 changed files with 607 additions and 0 deletions.
27 changes: 27 additions & 0 deletions 2024/AI Generated Site/Claude/Reddit Meme Gen/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Random Meme Generator</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<div class="container">
<!-- This is where the random meme image will be displayed -->
<img id="meme-image" src="" alt="Random Meme">

<!-- This button will fetch a new random meme when clicked -->
<button id="generate-button">Generate Meme</button>

<!-- This div will display the cooldown timer -->
<div id="cooldown-timer"></div>
</div>

<!-- This script file contains the JavaScript code -->
<script src="script.js"></script>
</body>

</html>
63 changes: 63 additions & 0 deletions 2024/AI Generated Site/Claude/Reddit Meme Gen/script.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
// Get references to the HTML elements
const memeImage = document.getElementById('meme-image');
const generateButton = document.getElementById('generate-button');
const cooldownTimer = document.getElementById('cooldown-timer');

// Initialize the cooldown interval
let cooldownInterval;

// Function to fetch a random meme from the Reddit API
function fetchRandomMeme() {
// Fetch a random meme from the r/memes subreddit
fetch('https://www.reddit.com/r/memes/random.json')
.then(response => response.json())
.then(data => {
// Get the URL of the meme image
const memeUrl = data[0].data.children[0].data.url;

// Set the src attribute of the meme image to the fetched URL
memeImage.src = memeUrl;
})
.catch(error => {
// Log any errors that occur during the fetch request
console.error('Error fetching random meme:', error);
});
}

// Function to start the cooldown timer
function startCooldown() {
// Set the initial cooldown time to 5 seconds
let cooldownSeconds = 5;

// Update the cooldown timer text
cooldownTimer.textContent = `Cooldown: ${cooldownSeconds} seconds`;

// Disable the generate button during the cooldown period
generateButton.disabled = true;

// Start the cooldown interval
cooldownInterval = setInterval(() => {
// Decrement the cooldown time
cooldownSeconds--;

// Update the cooldown timer text
cooldownTimer.textContent = `Cooldown: ${cooldownSeconds} seconds`;

// If the cooldown time has reached 0, clear the interval and enable the button
if (cooldownSeconds === 0) {
clearInterval(cooldownInterval);
generateButton.disabled = false;
cooldownTimer.textContent = '';
}
}, 1000);
}

// Add a click event listener to the generate button
generateButton.addEventListener('click', () => {
// Fetch a new random meme and start the cooldown timer
fetchRandomMeme();
startCooldown();
});

// Fetch the first random meme when the page loads
fetchRandomMeme();
45 changes: 45 additions & 0 deletions 2024/AI Generated Site/Claude/Reddit Meme Gen/style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
/* Center the content on the page */
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}

/* Style the container */
.container {
text-align: center;
}

/* Style the meme image */
#meme-image {
max-width: 100%;
max-height: 500px;
margin-bottom: 20px;
}

/* Style the generate button */
#generate-button {
display: block;
margin: 0 auto;
padding: 10px 20px;
font-size: 16px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}

/* Disable the generate button during the cooldown period */
#generate-button:disabled {
background-color: #ccc;
cursor: not-allowed;
}

/* Style the cooldown timer */
#cooldown-timer {
margin-top: 10px;
font-size: 14px;
}
154 changes: 154 additions & 0 deletions 2024/AI Generated Site/Claude/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,154 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Portfolio</title>
<style>
/* Google Font Import */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

Code body {
font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
}

header {
background-color: #0077b6;
color: #fff;
padding: 30px;
text-align: center;
}

header h1 {
font-size: 36px;
margin-bottom: 10px;
}

header p {
font-size: 18px;
margin-top: 0;
}

nav {
background-color: #f2f2f2;
padding: 15px;
text-align: center;
}

nav a {
color: #0077b6;
text-decoration: none;
padding: 10px 20px;
margin: 5px;
border-radius: 5px;
transition: background-color 0.3s, color 0.3s;
}

nav a:hover {
background-color: #0077b6;
color: #fff;
}

main {
padding: 30px;
}

section {
margin-bottom: 50px;
}

h2 {
color: #0077b6;
font-size: 24px;
margin-bottom: 20px;
}

p {
line-height: 1.6;
}

ul {
list-style-type: none;
padding: 0;
}

li {
margin-bottom: 10px;
}

form label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}

form input,
form textarea {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
margin-bottom: 20px;
}

form button {
background-color: #0077b6;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}

form button:hover {
background-color: #005a8c;
}

footer {
background-color: #0077b6;
color: #fff;
padding: 15px;
text-align: center;
}
</style>

</head>

<body>
<header>
<h1>My Portfolio</h1>
<p>Showcasing my web development skills and projects</p>
</header>
<nav> <a href="#">Home</a> <a href="#">About</a> <a href="#">Projects</a> <a href="#">Contact</a> </nav>
<main>
<section>
<h2>About Me</h2>
<p>Hi, I'm a web developer with a passion for creating beautiful and functional websites. I have experience
in HTML, CSS, JavaScript, and various frameworks and libraries.</p>
</section>
<section>
<h2>My Projects</h2>
<ul>
<li>Project 1</li>
<li>Project 2</li>
<li>Project 3</li>
</ul>
</section>
<section>
<h2>Contact Me</h2>
<form> <label for="name">Name:</label> <input type="text" id="name" name="name" required> <label
for="email">Email:</label> <input type="email" id="email" name="email" required> <label
for="message">Message:</label> <textarea id="message" name="message" required></textarea> <button
type="submit">Send</button> </form>
</section>
</main>
<footer>
<p>&copy; 2023 My Portfolio. All rights reserved.</p>
</footer>
</body>

</html>
40 changes: 40 additions & 0 deletions 2024/AI Generated Site/Codeium/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
<!-- Define the document type and character encoding -->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta tags for SEO -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A list of my blogs">
<meta name="keywords" content="blog, list, articles">
<title>My Blog Site</title>
<!-- Link to external stylesheet -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Main content wrapper -->
<main>
<!-- Header section -->
<header>
<h1>My Blog Site</h1>
<nav>
<ul>
<!-- List of blog categories -->
<li><a href="#">Category 1</a></li>
<li><a href="#">Category 2</a></li>
<li><a href="#">Category 3</a></li>
</ul>
</nav>
</header>
<!-- Article list section -->
<section>
<h2>Latest Articles</h2>
<ul id="article-list">
<!-- Article list items will be generated dynamically using JavaScript -->
</ul>
</section>
</main>
<!-- Script tag to link to external JavaScript file -->
<script src="script.js"></script>
</body>
</html>
36 changes: 36 additions & 0 deletions 2024/AI Generated Site/Codeium/script.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
// Get the article list element
const articleList = document.getElementById('article-list');

// Sample data for articles
const articles = [
{
title: 'Article 1',
category: 'Category 1',
date: '2023-02-20'
},
{
title: 'Article 2',
category: 'Category 2',
date: '2023-02-22'
},
{
title: 'Article 3',
category: 'Category 3',
date: '2023-02-25'
}
];

// Function to generate article list items
function generateArticleList() {
articles.forEach(article => {
const articleListItem = document.createElement('li');
const articleLink = document.createElement('a');
articleLink.href = '#';
articleLink.textContent = article.title;
articleListItem.appendChild(articleLink);
articleList.appendChild(articleListItem);
});
}

// Call the function to generate the article list
generateArticleList();
Loading

0 comments on commit ccda8a4

Please sign in to comment.