diff --git a/Practices/day_04/fetch.js b/Practices/day_04/fetch.js new file mode 100644 index 0000000..261618d --- /dev/null +++ b/Practices/day_04/fetch.js @@ -0,0 +1,36 @@ + +url = 'https://jsonplaceholder.typicode.com/posts' +const ul = document.createElement('ul'); + +// NORMAL +fetch(url) // 1 +.then(response => response.json()) // 2 +.then(data => { + data.forEach(post => { + const {id, title} = post; + console.log(id, title); + const li = document.createElement('li'); + li.style.color = 'red'; + li.style.background = 'yellow'; + li.innerHTML = `

${id < 10 ? '0' + id : id} - ${title}

`; + ul.append(li); + }); + document.body.append(ul); +}); // 3 + + +// async / await +const getData = async () => { + const response = await fetch(url); + const data = await response.json(); + data.forEach(post => { + const {id, title} = post; + const li = document.createElement('li'); + li.style.color = 'red'; + li.style.background = 'yellow'; + li.innerHTML = `

${id < 10 ? '0' + id : id} - ${title}

`; + ul.append(li); + }); + document.body.append(ul); +} +getData(); \ No newline at end of file diff --git a/Practices/day_04/index.html b/Practices/day_04/index.html new file mode 100644 index 0000000..ea6ac07 --- /dev/null +++ b/Practices/day_04/index.html @@ -0,0 +1,17 @@ + + + + + + + 30 days of JS + + +

30 Days of JavaScript

+ +
+ + + + + \ No newline at end of file diff --git a/Practices/day_04/index.js b/Practices/day_04/index.js new file mode 100644 index 0000000..6dde8ab --- /dev/null +++ b/Practices/day_04/index.js @@ -0,0 +1,8 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import App from './App'; + +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render( + +); \ No newline at end of file diff --git a/Practices/day_04/tasksLevel1.js b/Practices/day_04/tasksLevel1.js new file mode 100644 index 0000000..6a9a42a --- /dev/null +++ b/Practices/day_04/tasksLevel1.js @@ -0,0 +1,48 @@ +/* +// 1. Obtenga la entrada del usuario usando el aviso ("Ingrese su edad:"). +// Si el usuario tiene 18 años o más, muestre el mensaje: 'Tiene la edad +// suficiente para conducir', pero si no tiene 18 años, brinde otro mensaje +// que indique que debe esperar la cantidad de años que necesita para cumplir 18. +let ageUser = Number(prompt('Ingrese su edad: ')); +if (ageUser >= 18) { + console.log(`Tienes ${ageUser} años. Tiene edad suficiente para conducir`); +} else { + console.log(`Tienes ${ageUser} años. Te faltan ${18 - ageUser} años para poder conducir`); +} + +// 2. Compara los valores de myAge y yourAge usando if... else. Según la comparación, registre el +// resultado en la consola indicando quién es mayor (tú o yo). Utilice prompt(“Ingrese su edad:”) +// para obtener la edad como entrada. +let myAge = Number(prompt('Mi edad: ')); +let yourAge = Number(prompt('Tú edad: ')); +if (myAge > yourAge) { + console.log(`Soy ${myAge - yourAge} años mayor, por lo tanto, tengo más edad que tú.`); +} else { + console.log(`Tú eres ${yourAge - myAge} años mayor, por lo tanto, tienes más edad que yo.`); +} + + +// 3. Si a es mayor que b, devuelve 'a es mayor que b'; de lo contrario, 'a es menor que b'. Trate de implementarlo de maneras diferentes +let a = 1, +b = 3; +// Usando if else +if (a > b) { + console.log(`${a} es mayor que ${b}`); +} else { + console.log(`${a} es menor que ${b}`); +} +// operador ternario. +(a > b) ? console.log(`${a} es mayor que ${b}`) : console.log(`${a} es menor que ${b}`); + + +// 4. Los números pares son divisibles por 2 y el resto es cero. ¿Cómo verificar si un +// número es par o no usando JavaScript? +let number = Number(prompt('Ingrese un número entero: ')); +if (number % 2 === 0) { + console.log(`${number} es PAR`); +} else { + console.log(`${number} es IMPAR`); +} + +(number % 2 === 0) ? console.log(`${number} es PAR`) : console.log(`${number} es IMPAR`); +*/ diff --git a/Practices/day_04/tasksLevel2.js b/Practices/day_04/tasksLevel2.js new file mode 100644 index 0000000..a0a7c00 --- /dev/null +++ b/Practices/day_04/tasksLevel2.js @@ -0,0 +1,87 @@ +/* + +// 1. Escriba un código que pueda calificar a los estudiantes de acuerdo con sus puntajes: +// 80-100, A +// 70-89, B +// 60-69, C +// 50-59, D +// 0-49, F + +let score = Number(prompt('Ingrese el puntaje del estudiante: ')); + +switch (true) { + case score >= 80: + console.log('El estudiante tiene una calificación con la letra A'); + break; + case score >= 70: + console.log('El estudiante tiene una calificación con la letra B'); + break; + case score >= 60: + console.log('El estudiante tiene una calificación con la letra C'); + break; + case score >= 50: + console.log('El estudiante tiene una calificación con la letra D'); + break; + case score >= 0: + console.log('El estudiante tiene una calificación con la letra F'); + break; + default: + console.log('Puntaje no válido (0 - 100)'); +} + + +// 2. Consulta si la temporada es Otoño, Invierno, Primavera o Verano. Si la entrada del usuario es: + +// Septiembre, Octubre o Noviembre, la temporada es Otoño. +// Diciembre, Enero o Febrero, la temporada es Invierno. +// Marzo, Abril o Mayo, la temporada es Primavera +// Junio, Julio o Agosto, la temporada es Verano + +let month = prompt('Ingrese el mes: '); + +switch (month) { + case 'septiembre': + case 'octubre': + case 'noviembre': + console.log('Está en temporada de OTOÑO'); + break; + case 'diciembre': + case 'enero': + case 'febrero': + console.log('Está en temporada de INVIERNO'); + break; + case 'marzo': + case 'abril': + case 'mayo': + console.log('Está en temporada de PRIMAVERA'); + break; + case 'junio': + case 'julio': + case 'agosto': + console.log('Está en temporada de VERANO'); + break; + default: + console.log('Ingrese mes válido...') +} +*/ + + +// 3. Compruebe si un día es un día de fin de semana o un día laborable. Su script tomará el día como entrada. +let day = prompt('Qué día quiere consultar: '); +switch (day) { + case 'lunes': + case 'martes': + case 'miércoles': + case 'jueves': + case 'viernes': + console.log(`El ${day.toUpperCase()} es un día laborable`) + break; + case 'sábado': + case 'domingo': + console.log(`El ${day.toUpperCase()} es un día No laborable. Es fin de semana`) + break; + default: + console.log('Ingrese un día válido...') + break; +} + diff --git a/Practices/day_04/tasksLevel3.js b/Practices/day_04/tasksLevel3.js new file mode 100644 index 0000000..0f74596 --- /dev/null +++ b/Practices/day_04/tasksLevel3.js @@ -0,0 +1,57 @@ +/* +// 1. Escribe un programa que diga el número de días en un mes. + +let month = prompt('Ingrese el mes: '); + +switch (month) { + case 'enero': + case 'marzo': + case 'mayo': + case 'julio': + case 'agosto': + case 'octubre': + case 'diciembre': + console.log(`${month.toUpperCase()} tiene 31 días`); + break; + case 'abril': + case 'junio': + case 'septiembre': + case 'noviembre': + console.log(`${month.toUpperCase()} tiene 31 días`); + break; + case 'febrero': + console.log(`${month.toUpperCase()} tiene 28 días`); + break; + default: + console.log('Ingrese mes válido...') +} + +*/ + + +// 2. Escribe un programa que diga el número de días en un mes. Tomar en cuenta año bisiesto + +let month = prompt('Ingrese el mes: '); + +switch (month) { + case 'enero': + case 'marzo': + case 'mayo': + case 'julio': + case 'agosto': + case 'octubre': + case 'diciembre': + console.log(`${month.toUpperCase()} tiene 31 días`); + break; + case 'abril': + case 'junio': + case 'septiembre': + case 'noviembre': + console.log(`${month.toUpperCase()} tiene 31 días`); + break; + case 'febrero': + console.log(`${month.toUpperCase()} tiene 29 días`); + break; + default: + console.log('Ingrese mes válido...') +} \ No newline at end of file