Celebration Events
About this app
App that shows the month, number, year, description, and video link of various celebration events.
Celebration Events Celebration Events
Related apps
IPTV M3U8 & EPG Generator Studio | Image to M3U Playlist & Guide
Image to IPTV Converter & M3U Playlist Generator
Image to IPTV Converter & M3U Playlist Generator
Image to M3U Playlist Converter | IPTV & Media Stream Generator
Roulette Row Predictor Pro - Live Pattern & Trend Stats Analyzer
Video to Repeated Sequence Generator - Rhythm & Glitch Loop Maker
LoopCraft - Video to Repeated Sequence Converter
LoopMatrix - Video Sequence Repeater & Stutter Maker
MuffleFX - Video & Audio Low-Pass Filter Studio
Seeding Rate Calculator
Irrigation Set Time Calculator
Fertilizer Nutrient Units Calculator
Put this on your site
Source
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Celebration Events</title>
<meta name="description" content="App that shows the month, number, year, description, and video link of various celebration events.">
<meta name="keywords" content="celebration, events, New Year, Christmas Day, Valentine's Day, International Women's Day, Fools' Day, Easter, Victory Day, Defence of Children Day, Constitution Day, Independence Day, Day of Knowledge, Teachers Day">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script type="text/javascript">
try {
// App Javascript Goes Here. Place your entire script content inside the try block for error handling.
document.addEventListener("DOMContentLoaded", function() {
// Array of celebration events
var events = [
{
month: "January",
number: "1st",
year: "2022",
description: "New Year",
videoLink: "https://www.youtube.com/watch?v=ABhDiXbUaBE"
},
{
month: "December",
number: "25th",
year: "2022",
description: "Christmas Day",
videoLink: "https://www.youtube.com/watch?v=3tmd-ClpJxA"
},
{
month: "February",
number: "14th",
year: "2022",
description: "Valentine's Day",
videoLink: "https://www.youtube.com/watch?v=ZyFzvs0vlg0"
},
{
month: "March",
number: "8th",
year: "2022",
description: "International Women's Day",
videoLink: "https://www.youtube.com/watch?v=JfVw1kXjZMo"
},
{
month: "April",
number: "1st",
year: "2022",
description: "Fools' Day",
videoLink: "https://www.youtube.com/watch?v=g3zqk8k7V6c"
},
{
month: "April",
number: "17th",
year: "2022",
description: "Easter",
videoLink: "https://www.youtube.com/watch?v=5_6CJ3Dfq3o"
},
{
month: "May",
number: "9th",
year: "2022",
description: "Victory Day (VE Day)",
videoLink: "https://www.youtube.com/watch?v=8m6OO_lrJZ8"
},
{
month: "June",
number: "1st",
year: "2022",
description: "Defence of Children Day",
videoLink: "https://www.youtube.com/watch?v=8SmK4C2L6Ls"
},
{
month: "July",
number: "17th",
year: "2022",
description: "Constitution Day",
videoLink: "https://www.youtube.com/watch?v=4zD-Sc0qkjs"
},
{
month: "August",
number: "15th",
year: "2022",
description: "Independence Day",
videoLink: "https://www.youtube.com/watch?v=J0a9wq5tVIs"
},
{
month: "September",
number: "1st",
year: "2022",
description: "Day of Knowledge",
videoLink: "https://www.youtube.com/watch?v=bhOqE9EBuVc"
},
{
month: "October",
number: "5th",
year: "2022",
description: "Teachers Day",
videoLink: "https://www.youtube.com/watch?v=4fsuqK4J9gU"
}
];
// Function to render the event cards
function renderEventCards() {
var eventCardsContainer = document.getElementById("event-cards-container");
events.forEach(function(event) {
// Create card element
var card = document.createElement("div");
card.classList.add("card", "mb-4");
// Create card body element
var cardBody = document.createElement("div");
cardBody.classList.add("card-body");
// Create card title element
var cardTitle = document.createElement("h5");
cardTitle.classList.add("card-title");
cardTitle.textContent = event.description;
// Create card subtitle element
var cardSubtitle = document.createElement("h6");
cardSubtitle.classList.add("card-subtitle", "mb-2", "text-muted");
cardSubtitle.textContent = event.month + " " + event.number + ", " + event.year;
// Create card description element
var cardDescription = document.createElement("p");
cardDescription.classList.add("card-text");
cardDescription.textContent = event.description;
// Create card video link element
var cardVideoLink = document.createElement("a");
cardVideoLink.classList.add("card-link");
cardVideoLink.href = event.videoLink;
cardVideoLink.target = "_blank";
cardVideoLink.textContent = "Watch Video";
// Append elements to card body
cardBody.appendChild(cardTitle);
cardBody.appendChild(cardSubtitle);
cardBody.appendChild(cardDescription);
cardBody.appendChild(cardVideoLink);
// Append card body to card
card.appendChild(cardBody);
// Append card to event cards container
eventCardsContainer.appendChild(card);
});
}
// Call the function to render the event cards
renderEventCards();
});
} catch (error) {
// This will throw the error to the parent window.
throw error;
}
</script>
<style>
/* App CSS Goes Here */
body {
font-family: 'Arial', sans-serif;
background-color: #f8f9fa;
}
.card {
border: none;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.card-title {
font-size: 24px;
font-weight: bold;
margin-bottom: 8px;
}
.card-subtitle {
font-size: 18px;
font-weight: bold;
margin-bottom: 4px;
}
.card-text {
font-size: 16px;
margin-bottom: 8px;
}
.card-link {
color: #007bff;
text-decoration: none;
font-weight: bold;
}
.card-link:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<h1 class="mt-5 mb-4 text-center">Celebration Events</h1>
<div id="event-cards-container"></div>
</div>
</body>
</html>
NEW APPS
These are apps made by the community!