Subir versión 1.0.0

Alex22sv · Jun 6, 2022 · d551fe2 · d551fe2
1 parent c7bdbe7
commit d551fe2
Show file tree

Hide file tree

Showing 8 changed files with 1,360 additions and 2 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/README.md b/README.md
@@ -1,2 +1,14 @@
-# DescargaVideosDeYT
-Proyecto para descargar videos y audios de YouTube.
+# Descarga videos de YT
+Este proyecto es principalmente para prácticar mis habilidades con HTML, JS y CSS con front-end y back-end, pero también puede ser de utilidad para personas que quieran descargar videos y audios de YouTube.
+## Funciones actuales
+- Descargar videos de YouTube en formato MP4.
+- Descargar audios de YouTube en formato MP3.
+## Funciones que quiero agregar en un futuro
+- Evitar que se pueda saltar el tiempo de espera recargando la página.
+- Agregar un temporizador.
+- Si el servidor falla, enviar el error de mensaje al usuario.
+- Rediseñar la página web y agregar más colores.
+- Agregar diferentes calidades de audio y video.
+- Asegurarse de que sea un enlace de YouTube válido.
+## Licencia 
+Este proyecto está bajo la licencia MIT, lo que significa que tienes permiso de modificar el proyecto, pero pediría amablemente que me dieras créditos.
diff --git a/client/css/main.css b/client/css/main.css
@@ -0,0 +1,53 @@
+* {
+    text-align: center;
+    font-family: Arial;
+}
+
+.heading {
+    margin-top:40vh;
+}
+.URL-input, .download-button-mp3, .download-button-mp4 {
+    font-size:1.3em;
+    padding:5px 10px;
+}
+.URL-input {
+    border-radius:4px 0px 0px 4px;
+    width:30em;
+    text-align: left;
+    border:2px solid #EEEEEE;
+    background: #EEEEEE;
+    outline:none;
+}
+@media(max-width:670px) {
+    .URL-input {
+        width: 400px;
+    }
+}
+@media(max-width:450px) {
+    .URL-input {
+        width: 200px;
+    }
+}
+.URL-input:focus {
+    border:2px solid #5804ff;
+}
+.download-button-mp4 {
+    border-radius:0px 4px 4px 0px;
+    border:2px solid #5804ff;
+    background: #5804ff;
+    color:white;
+    cursor: pointer;
+}
+.download-button-mp4:disabled {
+    background-color: #1f0552;
+}
+.download-button-mp3 {
+    border-radius:0px 4px 4px 0px;
+    border:2px solid #04ff92;
+    background: #04ff92;
+    color:white;
+    cursor: pointer;
+}
+.download-button-mp3:disabled {
+    background-color: #055206;
+}
diff --git a/client/index.html b/client/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Descarga videos y audios de YT</title>
+    <link rel="stylesheet" href="css/main.css">
+</head>
+<body>
+    <h1 class="heading">Descarga videos y audios de YouTube</h1>
+    <input class="URL-input" placeholder="Enlace del video, ej. https://www.youtube.com/watch?v=MtN1YnoL46Q">
+    <button class="download-button-mp4">MP4</button>
+    <button class="download-button-mp3">MP3</button>
+    <p class="cooldownStarted" style="display: none;">¡Se ha iniciado la descarga! revisa tu carpeta de descargas. Acabas de entrar en una cuenta regresiva de 5 minutos, luego podrás hacer una nueva descarga.</p>
+    <p class="cooldownOver" style="display: none;">¡Tiempo de espera terminado! Ya puedes hacer una nueva descarga.</p>
+    <h2 class="credits">Desarrollado por <a href="https://alex22sv.tk" target="_blank">Alex22 SV</a></h2>
+    <script src="js/script.js"></script>
+</body>
+</html>
diff --git a/client/js/script.js b/client/js/script.js
@@ -0,0 +1,41 @@
+var downloadMp4Btn = document.querySelector('.download-button-mp4');
+var downloadMp3Btn = document.querySelector('.download-button-mp3');
+var cooldownStarted = document.querySelector('.cooldownStarted');
+var cooldownOver = document.querySelector('.cooldownOver');
+var URLinput = document.querySelector('.URL-input');
+var serverURL = 'http://localhost:4000/';
+
+downloadMp4Btn.addEventListener('click', () => {
+    // console.log(`URL del video: ${URLinput.value}`);
+    downloadMp4Btn.setAttribute('disabled', '');
+    cooldownStarted.style.display = 'block';
+    var format = 'mp4';
+    sendURL(URLinput.value, format);
+    setTimeout(function(){
+        downloadMp4Btn.removeAttribute('disabled', '')
+        cooldownStarted.style.display = 'none';
+        cooldownOver.style.display = 'block';
+        setTimeout(function(){ 
+            cooldownOver.style.display = 'none';
+        },18000)
+    },300000);
+});
+downloadMp3Btn.addEventListener('click', () => {
+    // console.log(`URL del audio: ${URLinput.value}`);
+    downloadMp3Btn.setAttribute('disabled', '');
+    cooldownStarted.style.display = 'block';
+    var format = 'mp3';
+    sendURL(URLinput.value, format);
+    setTimeout(function(){
+        downloadMp3Btn.removeAttribute('disabled', '')
+        cooldownStarted.style.display = 'none';
+        cooldownOver.style.display = 'block';
+        setTimeout(function(){ 
+            cooldownOver.style.display = 'none';
+        },18000)
+    },300000);
+
+});
+function sendURL(URL, format) {
+    window.location.href = `${serverURL}download${format}?URL=${URL}`;
+}