VideoPicker
Mon Feb 27 2023 01:19:12 GMT+0000 (Coordinated Universal Time)
Saved by @swiftui_spanish #html #css #javascript
<!DOCTYPE html> <html> <head> <title>Video Picker</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Video Picker</h1> <form> <input type="text" id="videoUrl" placeholder="Enter video URL..."> <button type="button" id="addVideoBtn">Add Video</button> </form> <hr> <h3 id="videoCount"></h3> <div id="videoList"></div> <script src="script.js"> alert("If you want you can modify the UI of this project, to adapt on your needs\n" + "\nhave a great and blessed day 🤝🏼😊"); alert("Enter as many YouTube video links as you want to, and see the magic") window.onload = function() { const videoList = document.getElementById('videoList'); const addVideoBtn = document.getElementById('addVideoBtn'); // Load videos from LocalStorage on page load loadVideos(); addVideoBtn.addEventListener('click', addVideo); function addVideo() { const videoUrl = document.getElementById('videoUrl').value; const videoId = getVideoId(videoUrl); if (videoId) { const videoItem = createVideoItem(videoId); videoList.appendChild(videoItem); // Save video to LocalStorage saveVideo(videoId); } document.getElementById('videoUrl').value = ''; } function getVideoId(url) { const regex = /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/; const match = url.match(regex); if (match && match[1]) { return match[1]; } else { alert('Invalid video URL'); return null; } } function createVideoItem(videoId) { const videoItem = document.createElement('div'); videoItem.className = 'video-item'; const thumbnailUrl = `https://img.youtube.com/vi/${videoId}/mqdefault.jpg`; const videoUrl = `https://www.youtube.com/watch?v=${videoId}`; videoItem.innerHTML = ` <a href="${videoUrl}" target="_blank"> <img src="${thumbnailUrl}" alt="Video thumbnail"> <h2>${videoId}</h2> </a> <button class="remove-video-btn">Remove</button> `; // Add event listener to the 'Remove' button const removeBtn = videoItem.querySelector('.remove-video-btn'); removeBtn.addEventListener('click', () => { removeVideo(videoId); videoItem.remove(); }); return videoItem; } function removeVideo(videoId) { let videos = []; if (localStorage.getItem('videos')) { videos = JSON.parse(localStorage.getItem('videos')); } const index = videos.indexOf(videoId); if (index !== -1) { // Display confirmation dialog box const confirmed = confirm("Are you sure you want to remove this video? 😥"); if (confirmed) { // Remove video from list videos.splice(index, 1); localStorage.setItem('videos', JSON.stringify(videos)); const videoItem = document.getElementById(videoId); videoList.removeChild(videoItem); } } } function saveVideo(videoId) { let videos = []; if (localStorage.getItem('videos')) { videos = JSON.parse(localStorage.getItem('videos')); } if (!videos.includes(videoId)) { videos.push(videoId); localStorage.setItem('videos', JSON.stringify(videos)); } } function loadVideos() { if (localStorage.getItem('videos')) { const videos = JSON.parse(localStorage.getItem('videos')); const videoCount = document.getElementById('videoCount'); videoCount.textContent = `You have ${videos.length} videos in the list.`; videos.forEach(videoId => { const videoItem = createVideoItem(videoId); videoList.appendChild(videoItem); }); } } } /* The saveVideo() function takes the video ID and saves it to an array in LocalStorage. The loadVideos() function is called on page load and loads the videos from LocalStorage, creating a videoItem for each one and appending it to the videoList. This way, the user's added videos will persist even if they close and reopen the page.*/ </script> </body> </html>
Comments