Comments and improved README

2024-11-22 11:19:59 -05:00
parent 42214ad6a1
commit 938a60bf99
3 changed files with 81 additions and 10 deletions
@@ -1,10 +1,14 @@
-<!DOCTYPE html>
+<!-- DOCTYPE html -->
 <html lang="en">
+<!-- head section -->
 <head>
+    <!-- Character encoding and viewport meta tags -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>YouTube Video Downloader</title>
+    <!-- CSS styles -->
    <style>
+        /* Body styles */
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
@@ -12,17 +16,21 @@
            padding: 20px;
            text-align: center;
        }
+        /* Container spacing */
        .container {
            margin-top: 50px;
        }
+        /* Input and select field styles */
        input[type="url"], select {
            width: 80%;
            padding: 10px;
            margin: 10px 0;
        }
+        /* Select field width override */
        select {
            width: auto;
        }
+        /* Button styles */
        button {
            padding: 10px 20px;
            background-color: #ff0000;
@@ -31,9 +39,11 @@
            border-radius: 4px;
            cursor: pointer;
        }
+        /* Button hover effect */
        button:hover {
            background-color: #cc0000;
        }
+        /* Status message styles */
        #status {
            margin-top: 20px;
            color: #666;
@@ -41,38 +51,54 @@
    </style>
 </head>
 <body>
+    <!-- Main container -->
    <div class="container">
+        <!-- Page title -->
        <h1>YouTube Video Downloader</h1>
+        <!-- Download form -->
        <form id="downloadForm">
+            <!-- URL input field -->
            <input type="url" id="videoUrl" placeholder="Enter YouTube URL" required>
+            <!-- Download type selector -->
            <select id="downloadType">
                <option value="video">Video</option>
                <option value="audio">Audio (MP3)</option>
            </select>
+            <!-- Submit button -->
            <button type="submit">Download</button>
        </form>
+        <!-- Status message container -->
        <div id="status"></div>
    </div>

+    <!-- JavaScript for handling form submission -->
    <script>
+        // Add event listener for form submission
        document.getElementById('downloadForm').addEventListener('submit', function(e) {
+            // Prevent default form submission
            e.preventDefault();
+            // Get form values
            const url = document.getElementById('videoUrl').value;
            const downloadType = document.getElementById('downloadType').value;
            const status = document.getElementById('status');
            
+            // Update status message
            status.textContent = 'Starting download...';
            
+            // Make API request to download endpoint
            fetch(`http://localhost:5000/download?url=${encodeURIComponent(url)}&type=${downloadType}`)
                .then(response => {
+                    // Check if response is ok
                    if (!response.ok) {
                        return response.text().then(text => {
                            throw new Error(text || 'Download failed');
                        });
                    }
+                    // Update status on successful download
                    status.textContent = 'Download completed!';
                })
                .catch(error => {
+                    // Handle and display any errors
                    console.error('Error:', error);
                    status.textContent = 'Error: ' + error.message;
                });