Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added Youtube Video Downloader #232

Closed
wants to merge 11 commits into from
80 changes: 80 additions & 0 deletions Node-JS-Projects/Intermediate/YouTube-Video-Downloader/README.md
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
@@ -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;
}
Original file line number Diff line number Diff line change
@@ -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;
}
Binary file not shown.
Loading