Sparta Dailymotion Base: Share and Discover Videos
About this app
Sparta Dailymotion Base is a fun video-sharing web app to upload, discover, and share videos while interacting with a vibrant community.
Sparta Dailymotion Base: Share and Discover Videos Sparta Dailymotion Base Share Your Favorite Videos! Add Video Videos
Related apps
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>Sparta Dailymotion Base: Share and Discover Videos</title>
<meta name="description" content="Sparta Dailymotion Base is a fun video-sharing web app to upload, discover, and share videos while interacting with a vibrant community.">
<meta name="keywords" content="video, share, discover, upload, Dailymotion, community, social interaction">
<!-- Libraries -->
<!-- jQuery (3.6.0) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" crossorigin="anonymous"></script>
<!-- Bootstrap CSS (5.3.3) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" crossorigin="anonymous">
<!-- Bootstrap JS (5.3.3) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
<!-- Font Awesome (6.6.0) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.6.0/css/fontawesome.min.css" crossorigin="anonymous">
<script type="text/javascript">
try {
// App Javascript Goes Here. Place your entire script content inside the try block for error handling.
let videos = [];
function displayVideos() {
const videoContainer = $('#video-container');
videoContainer.empty();
videos.forEach((video, index) => {
videoContainer.append(`
<div class="card mb-3">
<div class="row no-gutters">
<div class="col-md-4">
<img src="${video.thumbnail}" class="card-img" alt="${video.title}">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">${video.title}</h5>
<p class="card-text">${video.description}</p>
<button class="btn btn-danger" onclick="deleteVideo(${index})">Delete</button>
</div>
</div>
</div>
</div>
`);
});
}
function addVideo() {
const title = $('#video-title').val();
const description = $('#video-description').val();
const thumbnail = $('#video-thumbnail').val();
if (title && description && thumbnail) {
videos.push({ title, description, thumbnail });
$('#video-title, #video-description, #video-thumbnail').val('');
displayVideos();
} else {
alert("Please fill in all fields.");
}
}
function deleteVideo(index) {
videos.splice(index, 1);
displayVideos();
}
document.addEventListener("DOMContentLoaded", function() {
$('#add-video-btn').click(addVideo);
});
} catch (error) {
// This will throw the error to the parent window.
throw error;
}
</script>
<style>
body {
background: linear-gradient(90deg, rgba(255,145,0,1) 0%, rgba(255,207,0,1) 100%);
color: #333;
}
#main-container {
margin-top: 50px;
}
.card {
box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
transition: 0.3s;
}
.card:hover {
transform: scale(1.01);
}
.form-control {
margin-top: 15px;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<h1 class="text-center">Sparta Dailymotion Base</h1>
<h4 class="text-center">Share Your Favorite Videos!</h4>
<div class="text-center">
<input type="text" id="video-title" placeholder="Video Title" class="form-control" required>
<input type="text" id="video-description" placeholder="Video Description" class="form-control" required>
<input type="text" id="video-thumbnail" placeholder="Video Thumbnail URL" class="form-control" required>
<button id="add-video-btn" class="btn btn-primary">Add Video</button>
</div>
<h3 class="mt-5">Videos</h3>
<div id="video-container"></div>
</div>
</body>
</html>
NEW APPS
These are apps made by the community!