Merge branch 'main' into expense-tracker

Avdhesh-Varshney · Jun 5, 2024 · df55c6f · df55c6f
2 parents 93bba0b + 10c4df2
commit df55c6f
Show file tree

Hide file tree

Showing 39 changed files with 1,816 additions and 66 deletions.
diff --git a/Node-JS-Projects/Intermediate/YouTube-Video-Downloader/README.md b/Node-JS-Projects/Intermediate/YouTube-Video-Downloader/README.md
@@ -0,0 +1,80 @@
+<h1 align='center'><b>💥 Youtube Video Downloader 💥</b></h1>
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+<h3 align='center'>Tech Stack Used 🎮</h3>
+<!-- enlist all the technologies used to create this project from them (Remove comment using 'ctrl+z' or 'command+z') -->
+<div align="center">
+   <img src="https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white" alt="HTML5" style="margin: 5px;"/>
+   <img src="https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white" alt="CSS3" style="margin: 5px;"/>
+   <img src="https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E" alt="JavaScript" style="margin: 5px;"/>
+   <img src="https://img.shields.io/badge/node.js-6DA55F?style=for-the-badge&logo=node.js&logoColor=white" alt="NodeJS" style="margin: 5px;"/>
+   <img src="https://img.shields.io/badge/express.js-%23404d59.svg?style=for-the-badge&logo=express&logoColor=%2361DAFB" alt="Express.js" style="margin: 5px;"/>
+</div>
+
+
+
+![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847)
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: Description 📃
+
+<div>
+  <!-- <p>Add Description of the project</p> -->
+    <p>
+      Download your favorite YouTube videos effortlessly with our YouTube Video Downloader. Built using HTML, CSS, JavaScript, and Node.js, this tool provides a simple and user-friendly interface for quick and easy video downloads.
+    </p>
+</div>
+
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: How to run it? 🕹️
+
+<!-- Add steps how to run this project -->
+- Clone the repository into your local machine
+  ```
+    git clone https://github.com/Avdhesh-Varshney/WebMasterLog.git
+  ```
+- Go to the `Youtube-Video-Downloader` directory
+- Go to the `server` folder and install Dependencies
+  ```
+    npm install
+  ```
+- Run the server
+  ```
+    nodemon server.js 
+  ```
+- Go to the `client` folder and run `index.html`
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: Screenshots 📸
+<!-- add the screenshot of the project (Mandatory) -->
+![img](./screenshot.webp)
+
+
+
+<!--## :zap: Working Video 📹-->
+<!-- directly add the link of video (If, possible) -->
+
+
+
+![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847)
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+<h4 align='center'>Developed By <b><i>Siddheya Kulkarni</i></b> 👦</h4>
+<p align='center'>
+  <a href='https://www.linkedin.com/in/siddheya-kulkarni/'>
+    <img src='https://img.shields.io/badge/linkedin-%230077B5.svg?style=for-the-badge&logo=linkedin&logoColor=white' />
+  </a>
+  <a href='https://github.com/Asymtode712'>
+    <img src='https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white' />
+  </a>
+</p>
+
+<h4 align='center'>Happy Coding 👦</h4>
+
+<h3 align="center">Show some &nbsp;❤️&nbsp; by &nbsp;🌟&nbsp; this repository!</h3>
diff --git a/Node-JS-Projects/Intermediate/YouTube-Video-Downloader/client/index.html b/Node-JS-Projects/Intermediate/YouTube-Video-Downloader/client/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>YouTube Video Downloader</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="container">
+        <h1>YouTube Video Downloader</h1><br>
+        <input type="text" id="videoUrl" placeholder="Enter YouTube video URL"><br>
+        <select id="quality">
+            <option value="">Select Quality</option>
+            <option value="144p">144p</option>
+            <option value="240p">240p</option>
+            <option value="360p">360p</option>
+            <option value="480p">480p</option>
+            <option value="720p">720p</option>
+            <option value="1080p">1080p</option>
+            <option value="1440p">1440p</option>
+        </select><br>
+        <button id="downloadBtn">Download</button>
+        <div id="downloadLinks"></div>
+        <div id="message"></div> <!-- Message div -->
+    </div>
+
+    <script src="index.js"></script>
+</body>
+</html>
diff --git a/Node-JS-Projects/Intermediate/YouTube-Video-Downloader/client/index.js b/Node-JS-Projects/Intermediate/YouTube-Video-Downloader/client/index.js
@@ -0,0 +1,68 @@
+document.querySelector('#downloadBtn').addEventListener('click', handleVideoDownload);
+
+async function handleVideoDownload() {
+    const videoLink = document.querySelector('#videoUrl').value;
+    const videoQuality = document.querySelector('#quality').value;
+
+    if (!validateYouTubeUrl(videoLink)) {
+        alert('Please enter a valid YouTube video URL.');
+        return;
+    }
+
+    const vidId = getVideoIdFromUrl(videoLink);
+
+    try {
+        displayMessage('Downloading...');
+
+        console.log(`Requesting video from: http://localhost:3000/download?videoId=${vidId}&quality=${videoQuality}`);
+        const response = await fetch(`http://localhost:3000/download?videoId=${vidId}&quality=${videoQuality}`);
+
+        if (!response.ok) {
+            const errorText = await response.text();
+            throw new Error(`Network response was not ok: ${response.statusText}. Error message: ${errorText}`);
+        }
+
+        const videoBlob = await response.blob();
+        const downloadUrl = URL.createObjectURL(videoBlob);
+
+        const anchorElement = document.createElement('a');
+        anchorElement.style.display = 'none';
+        anchorElement.href = downloadUrl;
+        anchorElement.download = 'video.mp4';
+        document.body.appendChild(anchorElement);
+        anchorElement.click();
+        URL.revokeObjectURL(downloadUrl);
+
+        displayMessage('Download completed.');
+    } catch (error) {
+        console.error('Error downloading the video:', error);
+        displayMessage('Error downloading the video.');
+    }
+}
+
+function validateYouTubeUrl(url) {
+    const regex = /^(http(s)?:\/\/)?((w){3}.)?youtu(be|.be)?(\.com)?\/.+/i;
+    return regex.test(url);
+}
+
+function getVideoIdFromUrl(url) {
+    let vidId = '';
+    const urlSearchParams = new URLSearchParams(new URL(url).search);
+    if (url.includes('youtube.com') && urlSearchParams.has('v')) {
+        vidId = urlSearchParams.get('v');
+    } else if (url.includes('youtu.be')) {
+        vidId = new URL(url).pathname.slice(1);
+    }
+
+    const idRegex = /^[a-zA-Z0-9-_]{11}$/;
+    if (!idRegex.test(vidId)) {
+        throw new Error(`Invalid video ID: ${vidId}`);
+    }
+
+    return vidId;
+}
+
+function displayMessage(msg) {
+    const msgDiv = document.querySelector('#message');
+    msgDiv.innerText = msg;
+}
diff --git a/Node-JS-Projects/Intermediate/YouTube-Video-Downloader/client/styles.css b/Node-JS-Projects/Intermediate/YouTube-Video-Downloader/client/styles.css
@@ -0,0 +1,85 @@
+body {
+    font-family: Arial, sans-serif;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-image: linear-gradient( to right, #FEB692 10%, #EA5455 100%);
+}
+
+.container {
+    margin-top: 200px;
+    width: 450px;
+    height: 300px;
+    padding: 20px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
+    background-color: #fff;
+    border-radius: 8px;
+    text-align: center;
+}
+
+h1 {
+    font-size: 1.8em;
+    margin-bottom: 20px;
+    color: #ff0000; 
+}
+
+input[type="text"] {
+    width: 250px; 
+    padding: 10px;
+    margin-bottom: 20px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    transition: border-color 0.3s ease;
+}
+
+input[type="text"]:focus {
+    border-color: #ff0000; 
+    outline: none;
+}
+
+select {
+    width: 150px;
+    padding: 10px;
+    margin-bottom: 20px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    background-color: #fff;
+    color: #000;
+}
+
+button {
+    padding: 10px 20px;
+    background-color: #ff0000;
+    color: #fff;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+button:hover {
+    background-color: #cc0000; 
+}
+
+#downloadLinks {
+    margin-top: 20px;
+    text-align: left;
+}
+
+#downloadLinks a {
+    display: block;
+    margin-bottom: 10px;
+    color: #ff0000;
+    text-decoration: none;
+    transition: color 0.3s ease;
+}
+
+#downloadLinks a:hover {
+    color: #cc0000; 
+}
+
+#message {
+    margin-top: 20px;
+    color: #555;
+    font-size: 1.2em;
+}
diff --git a/Node-JS-Projects/Intermediate/YouTube-Video-Downloader/screenshot.webp b/Node-JS-Projects/Intermediate/YouTube-Video-Downloader/screenshot.webp