msb-public
/
30-Days-Of-JavaScript
mirror of https://github.com/Asabeneh/30-Days-Of-JavaScript
1
0
Code Issues Projects Releases Wiki Activity

feat: ✨ day 04

Browse Source 
Day 04
pull/647/head
Marlon GARCIA 3 years ago
parent 92a4e69ff6
commit 9e969abced
6 changed files with 253 additions and 0 deletions
Show Stats Download Patch File Download Diff File

36
Practices/day_04/fetch.js
Unescape View File

@ -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 = `<p>${id < 10 ? '0' + id : id} - ${title}</p>`;
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 = `<p>${id < 10 ? '0' + id : id} - ${title}</p>`;
ul.append(li);
});
document.body.append(ul);
}
getData();

17
Practices/day_04/index.html
Unescape View File

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="en">
<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>30 days of JS</title>
</head>
<body>
<h1>30 Days of JavaScript</h1>
<div id="root"></div>
<script type="module" src="./tasksLevel3.js"></script>
<!-- <script src="./fetch.js"></script> -->
</body>
</html>

8
Practices/day_04/index.js
Unescape View File

@ -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(
<App />
);

48
Practices/day_04/tasksLevel1.js
Unescape View File

@ -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`);
*/

87
Practices/day_04/tasksLevel2.js
Unescape View File

@ -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;
}

57
Practices/day_04/tasksLevel3.js
Unescape View File

@ -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...')
}
Write Preview
Loading…
Cancel
Save