srizan/archived-youtubeDownloader
1
0
Fork 0
mirror of https://github.com/SrIzan10/youtubeDownloader.git synced 2026-05-01 11:06:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
SrIzan10
2022-05-29 14:53:26 +02:00
committed by GitHub
parent 2f2e7eb385
commit 62ee023d4c
9 changed files with 0 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
Contributors.md
View File

@@ -1 +0,0 @@
Balaji S github URL: https://github.com/balajinikhil

2
Dockerfile
View File

@@ -1,7 +1,5 @@
FROM node:latest
RUN cd Server/
RUN npm i
EXPOSE 4000

43
README.md
View File

@@ -1,43 +0,0 @@
# Youtube Downloader
This is a repository that has sample code for my [Medium Article](https://blog.usejournal.com/how-i-made-my-own-youtube-downloader-using-javascript-and-node-js-160b172f6e10)
## Getting Started
If there is any issues please open a new issue.
1. You need to clone this repository
```
git clone https://github.com/mooradal/youtubeDownloader
```
2. After you clone the repo you will have to navigate to the Server folder
```
cd Server
```
3. Then you will have to install all the packages and dependencies
```
npm install
```
4. Finally you need to run it
```
node index.js
```
5. If you want to use nodemon (nodemon is a package that will auto restart the server when files are changed) you can run **(Optional)**
```
npm run dev
```
or
```
nodemon index.js
```
## Info
If there is any issues please open a new issue. You are welcome to add pull requests at anytime
Thank you so much for supporting me and thank you for almost 2,000 claps. I really appreciate that. I will try to post more articles and I'm thinking of turning this project from a sample code to an actual functional public website for everyone to use!

21
index.html
View File

@@ -1,21 +0,0 @@
<!DOCTYPE html>
<html lang='en'>
<head>
<link rel='stylesheet' href='./style.css' />
<title>Youtube Downloader</title>
</head>
<body>
<h1 class='heading'>Paste YouTube URL</h1>
<input class='URL-input' placeholder='https://www.youtube.com/watch?v=MtN1YnoL46Q' />
<select class='opt'>
<option value='mp3'>mp3</option>
<option value='mp4'>mp4</option>
</select>
<button class='convert-button' id='btn'>Convert</button>
<script src='./script.js'></script>
</body>
</html>

0
Server/index.js → index.js
View File

0
Server/package-lock.json → package-lock.json generated
View File

0
Server/package.json → package.json
View File

40
script.js
View File

@@ -1,40 +0,0 @@
let Btn = document.getElementById('btn');
let URLinput = document.querySelector('.URL-input');
let select = document.querySelector('.opt');
let serverURL = 'http://localhost:4000';
Btn.addEventListener('click', () => {
if (!URLinput.value) {
alert('Enter YouTube URL');
} else {
if (select.value == 'mp3') {
downloadMp3(URLinput.value);
} else if (select.value == 'mp4') {
downloadMp4(URLinput.value);
}
}
});
async function downloadMp3(query) {
const res = await fetch(`${serverURL}/downloadmp3?url=${query}`);
if(res.status == 200) {
var a = document.createElement('a');
a.href = `${serverURL}/downloadmp3?url=${query}`;
a.setAttribute('download', '');
a.click();
} else if(res.status == 400) {
alert("Invalid url");
}
}
async function downloadMp4(query) {
const res = await fetch(`${serverURL}/downloadmp4?url=${query}`);
if(res.status == 200) {
var a = document.createElement('a');
a.href = `${serverURL}/downloadmp4?url=${query}`;
a.setAttribute('download', '');
a.click();
} else if(res.status == 400) {
alert('Invalid url');
}
}

71
style.css
View File

@@ -1,71 +0,0 @@
* {
text-align: center;
}
body {
display: grid;
grid-template-columns: auto;
}
.heading {
font-family: Arial;
margin-top: 40vh;
}
.URL-input,
.convert-button {
font-size: 1.3em;
padding: 5px 10px;
}
.URL-input {
margin: auto;
border-radius: 4px 0px 0px 4px;
width: 30em;
text-align: left;
border: 2px solid #eeeeee;
background: #eeeeee;
outline: none;
}
.URL-input:focus {
border: 2px solid #0485ff;
}
.convert-button {
margin: 2% auto;
border: 2px solid #0485ff;
background: #0485ff;
color: white;
transition: 0.15s;
}
.convert-button:hover {
background: #016acc;
border-color: #016acc;
}
@media only screen and (max-width: 600px) {
body {
display: grid;
grid-template-columns: auto;
justify-content: center;
}
.URL-input {
margin: auto;
width: 100%;
}
.convert-button {
margin: 7% auto;
width: 100%;
}
}
.opt {
width: 30vw;
margin: 2% auto;
padding: 4px;
border-radius: 7%;
}