Celebration Events
About this app
App that shows the month, number, year, description, and video link of various celebration events.
Celebration Events Celebration Events
Put this on your site
Related apps
VoiceSong Studio - Créez votre propre hit !
Baccara Suite Master - Prédiction 1xBet & Casino
Elite Baccarat - Professional Casino Experience
YTPMV Scan - Ultimate Meme Sequencer
YTPMV Scan - Ultimate Audio Visual Sequencer
Pro-Roulette 0-14 Predictor | Advanced Strategic Analytics
Twelve - The Ultimate 12-Step Daily Harmony Planner
Otter Python - Calc Runner Game
Harmony - Гид по здоровым отношениям и романтике
LoopTube 2016 - Infinite Video Looper & Repeater
VoxTransform - 50+ Pro Video Voice Effects
TinyTip | Simple Tip Calculator & Bill Splitter
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!