YouTube Video Management App - Easy Video Takedown Tool
About this app
Manage your YouTube videos with this comprehensive app, featuring an easy video takedown tool, video upload tracking, and a vibrant user interface.
YouTube Video Management App - Easy Video Takedown Tool YouTube Video Management App Video ID Video Title Add Video Videos List
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>YouTube Video Management App - Easy Video Takedown Tool</title>
<meta name="description" content="Manage your YouTube videos with this comprehensive app, featuring an easy video takedown tool, video upload tracking, and a vibrant user interface." />
<meta name="keywords" content="YouTube, video management, video takedown, video upload tracking, video app" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.6.0/css/fontawesome.min.css" crossorigin="anonymous">
<script src="https://unpkg.com/@tailwindcss/browser@4" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.8/dist/cdn.min.js" crossorigin="anonymous"></script>
<script type="text/javascript">
try {
// App Javascript Goes Here.
document.addEventListener("DOMContentLoaded", function() {
const videoList = [];
const handleAddVideo = () => {
const videoId = document.getElementById("video-id").value;
const videoTitle = document.getElementById("video-title").value;
if (videoId && videoTitle) {
videoList.push({ id: videoId, title: videoTitle });
document.getElementById("video-id").value = "";
document.getElementById("video-title").value = "";
renderVideoList();
}
};
const handleRemoveVideo = (id) => {
const index = videoList.findIndex(video => video.id === id);
if (index > -1) {
videoList.splice(index, 1);
}
renderVideoList();
};
const renderVideoList = () => {
const listContainer = document.getElementById("video-list");
listContainer.innerHTML = "";
videoList.forEach(video => {
const videoItem = document.createElement("div");
videoItem.className = "alert alert-info d-flex justify-content-between align-items-center";
videoItem.innerHTML = `Video: ${video.title}
<button class="btn btn-danger btn-sm" onclick="removeVideo('${video.id}')">
Remove
</button>`;
listContainer.appendChild(videoItem);
});
};
window.removeVideo = handleRemoveVideo;
document.getElementById("add-video-btn").addEventListener("click", handleAddVideo);
});
} catch (error) {
throw error;
}
</script>
<style>
body {
background: linear-gradient(135deg, #5B86E5, #36D1DC);
color: white;
font-family: Arial, sans-serif;
}
#main-container {
margin-top: 50px;
}
.btn {
margin-left: 10px;
}
.alert {
background-color: #007BFF;
border-color: #0056b3;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<h1 class="text-center">YouTube Video Management App</h1>
<div class="form-group">
<label for="video-id">Video ID</label>
<input type="text" class="form-control" id="video-id" placeholder="Enter YouTube Video ID">
</div>
<div class="form-group">
<label for="video-title">Video Title</label>
<input type="text" class="form-control" id="video-title" placeholder="Enter Video Title">
</div>
<button id="add-video-btn" class="btn btn-success">Add Video</button>
<h3 class="text-center">Videos List</h3>
<div id="video-list"></div>
</div>
</body>
</html>
NEW APPS
These are apps made by the community!