Skip to content

Commit

Permalink
TCG
Browse files Browse the repository at this point in the history
  • Loading branch information
Bacon_Space committed Sep 27, 2023
1 parent 6e28f77 commit c3e9e60
Showing 1 changed file with 165 additions and 0 deletions.
165 changes: 165 additions & 0 deletions joke/chuck/index.html
View file
Original file line number Diff line number Diff line change
@@ -1 +1,166 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TheCursedGroup - Chuck Norris</title>
<meta name="description" content="Enjoy a random chuck norris from TheCursedGroup.">
<meta name="author" content="TheCursedGroup">
<link rel="icon" type="image/x-icon" href="https://i.imgur.com/62s95F1.png">

<!-- Include Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">

<!-- Include Font Awesome for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">

<!-- Include Moment.js for timestamp -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="https://thecursedgroup.github.io/joke/">TheCursedGroup</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="https://thecursedgroup.github.io/joke/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://thecursedgroup.github.io/joke/pun/">Puns</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://thecursedgroup.github.io/joke/dad/">Dad</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://thecursedgroup.github.io/joke/chuck/">Chuck</a>
</li>
</ul>
</div>
</div>
</nav>

<div class="container mt-5">
<div class="row mt-3">
<div class="col-12 text-center">
<div id="joke-container"></div>
</div>
</div>
<div class="row mt-3">
<div class="col-12 text-center">
<button type="button" class="btn btn-primary" id="copyButton">
<i class="fas fa-clipboard"></i> Copy Joke
</button>
<button type="button" class="btn btn-primary" id="reloadButton">
<i class="fas fa-sync-alt"></i> Get New Joke
</button>
</div>
</div>
</div>

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" id="successToast" style="position: absolute; top: 0; right: 0;">
<div class="toast-header">
<img src="https://i.imgur.com/62s95F1.png" class="rounded me-2 toast-icon" alt="TheCursedGroup">
<strong class="me-auto" id="title">TheCursedGroup</strong>
<small class="text-body-secondary" id="toastTimestamp"></small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body" id="successMessage">
Joke loaded successfully!
</div>
</div>

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" id="errorToast" style="position: absolute; top: 0; right: 0;">
<div class="toast-header">
<img src="https://i.imgur.com/62s95F1.png" class="rounded me-2 toast-icon" alt="TheCursedGroup">
<strong class="me-auto" id="errorTitle"></strong>
<small class="text-body-secondary" id="errorToastTimestamp"></small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body" id="errorMessage">
Error loading joke. Please try again.
</div>
</div>

<style>
/* Custom CSS to adjust the icon size in the toast */
.toast-icon {
width: 32px;
height: 32px;
}
</style>

<script>
var toastConfig = {
title: "TheCursedGroup",
iconUrl: "https://i.imgur.com/62s95F1.png",
successMessage: "Joke loaded successfully!",
errorMessage: "Error loading joke. Please try again."
};

function fetchJoke() {
fetch("https://api.chucknorris.io/jokes/random", {
method: 'GET',
headers: {
'Accept': 'application/json'
}
})
.then(response => response.json())
.then(data => {
// Update the joke content
document.getElementById('joke-container').textContent = data.value;

// Calculate the timestamp using Moment.js
var timestamp = moment().subtract(data.updated_at, 'minutes').fromNow();

// Update the toast timestamp
document.getElementById('toastTimestamp').textContent = timestamp;

// Show the success toast notification
var successToast = new bootstrap.Toast(document.getElementById('successToast'));
successToast.show();

// Enable the copy button
document.getElementById('copyButton').disabled = false;
})
.catch(error => {
// Calculate the error timestamp using Moment.js
var errorTimestamp = moment().subtract(0, 'minutes').fromNow();

// Update the toast timestamp
document.getElementById('errorToastTimestamp').textContent = errorTimestamp;

// Show the error toast notification
var errorToast = new bootstrap.Toast(document.getElementById('errorToast'));
errorToast.show();

// Enable the reload button
document.getElementById('reloadButton').disabled = false;
});
}

function copyJokeToClipboard() {
var jokeText = document.getElementById('joke-container').textContent;
var textArea = document.createElement("textarea");
textArea.value = jokeText;
document.body.appendChild(textArea);
textArea.select();
document.execCommand('copy');
document.body.removeChild(textArea);
}

// Initial fetch when the page loads
fetchJoke();

// Event listener for copy button
document.getElementById('copyButton').addEventListener('click', copyJokeToClipboard);

// Event listener for reload button
document.getElementById('reloadButton').addEventListener('click', fetchJoke);
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"></script>
</body>
</html>

0 comments on commit c3e9e60

Please sign in to comment.