mirror of
https://github.com/CristianCruz0309/proyectos-curso-javascript.git
synced 2026-08-15 02:50:10 +00:00
Proyectos (DIA 1 - 13)
Realizados gracias al curso "JAVASCRIPT TOTAL"
This commit is contained in:
Cris
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
@@ -0,0 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Página 2</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Bienvenido</h1>
|
||||
<img src="Familia.jpg">
|
||||
<a href="index.html">Volver</a>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,45 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Mi biografía</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<h1>Cristian Cruz</h1>
|
||||
<h2>Mi biografía</h2>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section>
|
||||
<h3>Presentación</h3>
|
||||
|
||||
<img src="Camilo.jpeg" alt="Foto de perfil" width="35%">
|
||||
|
||||
<p>
|
||||
Cristian Cruz nació el 9 de marzo de 2005 en Cali, Colombia. Desde pequeño mostró
|
||||
interés por la tecnología y el aprendizaje constante, lo que lo llevó a desarrollar
|
||||
habilidades en distintas áreas académicas y creativas. A lo largo de su formación
|
||||
se destacó por su responsabilidad, curiosidad y capacidad para trabajar en equipo.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Actualmente se dedica a fortalecer sus conocimientos y a explorar nuevas oportunidades
|
||||
de crecimiento personal y profesional. En su tiempo libre disfruta escuchar música,
|
||||
aprender cosas nuevas y compartir tiempo con sus amigos y familia. Cris se caracteriza
|
||||
por ser una persona perseverante, con metas claras y una actitud positiva frente a
|
||||
los desafíos.
|
||||
</p>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
|
||||
<p>
|
||||
Ingresa a este <a href="familia.html" target="_blank">enlace</a> para aprender más
|
||||
</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
@@ -0,0 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Veterinaria</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<script src="script.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Veterinaria Animalito´s</h1>
|
||||
<div class="textoCentrado">
|
||||
<button onclick="mostrarAnimales()">Mostrar Animales</button>
|
||||
</div>
|
||||
<ul id="listaAnimales"></ul>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,62 @@
|
||||
class Animal {
|
||||
constructor(nombre, peso, edad) {
|
||||
this.nombre = nombre;
|
||||
this.peso = peso;
|
||||
this.edad = edad;
|
||||
}
|
||||
|
||||
informacion() {
|
||||
return `${this.nombre} - ${this.peso} kg. - ${this.edad} años.`
|
||||
}
|
||||
}
|
||||
|
||||
class Perro extends Animal {
|
||||
constructor(nombre, peso, edad, raza) {
|
||||
super(nombre, edad, peso);
|
||||
this.raza = raza;
|
||||
}
|
||||
|
||||
informacion() {
|
||||
return `${this.nombre} - ${this.peso} kg. - ${this.edad} años. - ${this.raza}`
|
||||
}
|
||||
}
|
||||
|
||||
class Gato extends Animal {
|
||||
constructor(nombre, peso, edad, sexo) {
|
||||
super(nombre, edad, peso);
|
||||
this.sexo = sexo;
|
||||
}
|
||||
|
||||
informacion() {
|
||||
return `${this.nombre} - ${this.peso} kg. - ${this.edad} años. - ${this.sexo}`
|
||||
}
|
||||
}
|
||||
|
||||
class Conejo extends Animal {
|
||||
constructor(nombre, peso, edad, color) {
|
||||
super(nombre, edad, peso);
|
||||
this.color = color;
|
||||
}
|
||||
|
||||
informacion() {
|
||||
return `${this.nombre} - ${this.peso} kg. - ${this.edad} años. - ${this.color}`
|
||||
}
|
||||
}
|
||||
|
||||
let perro1 = new Perro('Simba', 11, 4, 'Shih Tzu');
|
||||
let gato1 = new Gato('Ringo', 4, 6, 'Macho');
|
||||
let conejo1 = new Conejo('Dumbo', 2, 3,'Blanco');
|
||||
let animales = [perro1, gato1, conejo1];
|
||||
|
||||
function mostrarAnimales() {
|
||||
let lista = document.getElementById('listaAnimales');
|
||||
|
||||
|
||||
lista.innerHTML = '';
|
||||
|
||||
for(let animal of animales) {
|
||||
let item = document.createElement('li');
|
||||
item.innerText = animal.informacion();
|
||||
lista.appendChild(item);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
h1 {
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
color: brown;
|
||||
text-shadow: 2px 2px 4px #ff1c1c;
|
||||
font-size: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: #7b3015;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 15px 32px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
margin: 4px 2px;
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
background-color: #f1f1f1;
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.textoCentrado {
|
||||
text-align: center;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
@@ -0,0 +1,57 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Resumen Cuenta Bancaria</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<script src="script.js"></script>
|
||||
</head>
|
||||
<body onload="cargarResumen()">
|
||||
<div class="page">
|
||||
<div class="contenedor">
|
||||
<div class="logo">
|
||||
<img src="imagenes/BANCOLOMBIA.png">
|
||||
</div>
|
||||
<div>
|
||||
<h1 id="banco"></h1>
|
||||
<h2 id="sucursal"></h2>
|
||||
</div>
|
||||
<hr>
|
||||
<div>
|
||||
<h3 id="titular"></h3>
|
||||
<p>
|
||||
<b>Número cuenta:</b>
|
||||
<label id="cuenta"></label>
|
||||
</p>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="saldo">
|
||||
<div>
|
||||
<img class="fila" src="imagenes/eeuu.png">
|
||||
<p class="fila" id="usd"></p>
|
||||
</div>
|
||||
<div>
|
||||
<img class="fila" src="imagenes/euro.png">
|
||||
<p class="fila" id="euro"></p>
|
||||
</div>
|
||||
<div>
|
||||
<img class="fila" src="imagenes/col.png">
|
||||
<p class="fila" id="cop"></p>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div>
|
||||
<p>
|
||||
<b>CBU:</b>
|
||||
<label id="cbu"></label>
|
||||
</p>
|
||||
<p>
|
||||
<b>Abierta:</b>
|
||||
<label id="abierto"></label>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"banco": "BANCOLOMBIA S.A.",
|
||||
"sucursal": "Cali , CL1",
|
||||
"titular": "Cristian Cruz",
|
||||
"nro_cuenta": "1752461/08",
|
||||
"saldo": [ { "moneda": "USD", "monto": 725.09 }, { "moneda": "EUR", "monto": 195.67}, { "moneda": "COP", "monto": 320000 } ],
|
||||
"cbu": "1562244781396451",
|
||||
"abierto": "15/01/2026"
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
function cargarResumen() {
|
||||
fetch('resumen.json')
|
||||
.then(respuesta => respuesta.json())
|
||||
.then(function(salida) {
|
||||
document.getElementById("banco").textContent = salida.banco;
|
||||
document.getElementById("sucursal").textContent = salida.sucursal;
|
||||
document.getElementById("titular").textContent = salida.titular;
|
||||
document.getElementById("cuenta").textContent = salida.nro_cuenta;
|
||||
document.getElementById("usd").textContent = salida.saldo[0].monto + " " + salida.saldo[0].moneda;
|
||||
document.getElementById("euro").textContent = salida.saldo[1].monto + " " + salida.saldo[1].moneda;
|
||||
document.getElementById("cop").textContent = salida.saldo[2].monto + " " + salida.saldo[2].moneda;
|
||||
document.getElementById("cbu").textContent = salida.cbu;
|
||||
document.getElementById("abierto").textContent = salida.abierto;
|
||||
})
|
||||
.catch(function(error) {
|
||||
console.log(error);
|
||||
})
|
||||
}
|
||||
@@ -0,0 +1,128 @@
|
||||
body {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
background: linear-gradient(135deg, #7a0000, #9b0000);
|
||||
font-family: 'Lucida Sans', Geneva, Verdana, sans-serif;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.contenedor {
|
||||
width: 420px;
|
||||
max-width: 90%;
|
||||
padding: 24px;
|
||||
background-color: rgba(255, 255, 255, 0.06);
|
||||
border-radius: 16px;
|
||||
text-align: center;
|
||||
box-shadow: 0 18px 40px rgba(0,0,0,0.45);
|
||||
animation: fadeIn 1s ease-in-out;
|
||||
}
|
||||
|
||||
/* Logo */
|
||||
|
||||
.logo {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.logo img {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
filter:
|
||||
drop-shadow(2px 0 0 white)
|
||||
drop-shadow(-2px 0 0 white)
|
||||
drop-shadow(0 2px 0 white)
|
||||
drop-shadow(0 -2px 0 white);
|
||||
}
|
||||
|
||||
|
||||
/* Encabezados */
|
||||
h1 {
|
||||
font-size: 1.8rem;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-weight: normal;
|
||||
opacity: 0.9;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
/* Texto general */
|
||||
p {
|
||||
margin: 6px 0;
|
||||
}
|
||||
|
||||
/* Separadores */
|
||||
hr {
|
||||
border: none;
|
||||
height: 1px;
|
||||
background-color: rgba(255, 255, 255, 0.35);
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
/* ===== SALDOS ===== */
|
||||
.saldo {
|
||||
font-size: 1.15rem;
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
/* Cada moneda como bloque */
|
||||
.saldo div {
|
||||
margin: 14px 0;
|
||||
}
|
||||
|
||||
/* Imagen + texto */
|
||||
.fila {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
/* Iconos */
|
||||
.saldo img {
|
||||
height: 36px;
|
||||
border: 2px solid white;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/* Datos finales */
|
||||
label {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: none;
|
||||
height: 1px;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
transparent,
|
||||
rgba(255,255,255,0.5),
|
||||
transparent
|
||||
);
|
||||
margin: 22px 0;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.contenedor {
|
||||
width: 90%;
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 162 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 102 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 310 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 126 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 226 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 174 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 252 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 184 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 454 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 205 KiB |
@@ -0,0 +1,31 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Buscador de Peliculas y Series</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="contenedor">
|
||||
<h1>Buscador</h1>
|
||||
<hr>
|
||||
<div class="bloque">
|
||||
Seleccione una opción:
|
||||
<select id="miSelector">
|
||||
<option value="peliculas.json">Peliculas</option>
|
||||
<option value="series.json">Series</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="bloque bloque-busqueda">
|
||||
<input type="text" id="miInput" placeholder="Ingrese para buscar...">
|
||||
<button id="miBoton">Buscar</button>
|
||||
</div>
|
||||
<div class="bloque">
|
||||
<ul id="miListado">
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script src="script.js"></script>
|
||||
</html>
|
||||
@@ -0,0 +1,21 @@
|
||||
{
|
||||
"data":
|
||||
[
|
||||
{ "nombre": "BACK TO THE FUTURE",
|
||||
"sinopsis": "El adolescente Marty McFly es amigo de Doc, un científico al que todos toman por loco. Cuando Doc crea una máquina para viajar en el tiempo, un error fortuito hace que Marty llegue a 1955, año en el que sus futuros padres aún no se habían conocido.",
|
||||
"imagen": "Portadas/Back_to_the_Future.jpg"
|
||||
},
|
||||
{ "nombre": "SHREK",
|
||||
"sinopsis": "Shrek es un ogro antisocial y huraño que ama la soledad y tranquilidad de su pantano, donde disfruta ahuyentando a turbas e intrusos. Un día, su vida normal se interrumpe cuando salva sin querer a un burro parlante, Donkey («Burro» en Hispanoamérica; «Asno» en España), de unos soldados, provocando que este comience a seguirlo y a quedarse con él a la fuerza.",
|
||||
"imagen": "Portadas/Shrek.webp"},
|
||||
{ "nombre": "AVATAR",
|
||||
"sinopsis": "La película se sitúa en el año 2154, donde conocemos a un joven llamado Jake Sully, un marine veterano de guerra y herido en combate que ha quedado parapléjico, es seleccionado para participar en el programa Avatar ocupando el puesto de científico que ocupaba su hermano gemelo recién fallecido e incinerado delante sus propios ojos.",
|
||||
"imagen": "Portadas/Avatar.webp"},
|
||||
{ "nombre": "GODZILLA",
|
||||
"sinopsis": "Ford Brody es un experto de los marines que tiene que ir a Japón para rescatar a su padre. Pronto, los dos hombres se encuentran atrapados en el caos cuando Godzilla, el Rey de los Monstruos, aparece después de pasar décadas debajo del agua.",
|
||||
"imagen": "Portadas/Godzilla.jpg"},
|
||||
{ "nombre": "WEATHERING WITH YOU",
|
||||
"sinopsis": "En junio de 2021, el estudiante de primer año de secundaria Hodaka Morishima escapa de Kōzushima para escapar de su problemática vida familiar a Tokio. Cuando su ferry a la ciudad es golpeado por una tormenta, Keisuke Suga lo salva y le da a Hodaka su tarjeta de presentación.",
|
||||
"imagen": "Portadas/Weathering_With_You.jpg"}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,79 @@
|
||||
// VARIABLES
|
||||
let selector = document.getElementById("miSelector");
|
||||
let input = document.getElementById("miInput");
|
||||
let boton = document.getElementById("miBoton");
|
||||
let lista = document.getElementById("miListado");
|
||||
|
||||
let archivo = 'peliculas.json';
|
||||
|
||||
// ESCUCHADORES DE EVENTOS
|
||||
selector.addEventListener("change", cambiarArchivo);
|
||||
selector.addEventListener("cambioModo", mensajeModo);
|
||||
input.addEventListener("input", verificarInput);
|
||||
boton.addEventListener("click", buscar);
|
||||
|
||||
// FUNCIONES
|
||||
function cambiarArchivo() {
|
||||
archivo = selector.value;
|
||||
|
||||
lista.innerHTML = "<li style='color:gray;font-style:italic'>Escribe algo para buscar</li>";
|
||||
|
||||
input.value = "";
|
||||
|
||||
let evento = new CustomEvent("cambioModo");
|
||||
selector.dispatchEvent(evento);
|
||||
}
|
||||
|
||||
function mensajeModo() {
|
||||
alert("El archivo de busqueda ahora es " + selector.value);
|
||||
}
|
||||
|
||||
function verificarInput() {
|
||||
input.value = input.value.replace(/[^a-zA-Z ]/g, "");
|
||||
}
|
||||
|
||||
function buscar() {
|
||||
lista.innerHTML = "";
|
||||
|
||||
if (input.value.trim() === "") {
|
||||
lista.innerHTML = "<li style='color:gray;font-style:italic'>Escribe algo para buscar</li>";
|
||||
return;
|
||||
}
|
||||
|
||||
fetch(archivo)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
|
||||
let encontrados = 0;
|
||||
|
||||
for (let item of data.data) {
|
||||
console.log(item);
|
||||
|
||||
if (item.nombre.includes(input.value.toUpperCase())) {
|
||||
|
||||
encontrados++;
|
||||
|
||||
let li = document.createElement("li");
|
||||
li.textContent = item.nombre;
|
||||
|
||||
let p = document.createElement("p");
|
||||
p.textContent = item.sinopsis;
|
||||
|
||||
let img = document.createElement("img");
|
||||
img.src = item.imagen;
|
||||
img.alt = item.nombre;
|
||||
img.style.width = "200px";
|
||||
img.style.marginTop = "10px";
|
||||
img.style.borderRadius = "8px";
|
||||
|
||||
li.appendChild(p);
|
||||
li.appendChild(img);
|
||||
lista.appendChild(li);
|
||||
}
|
||||
}
|
||||
|
||||
if (encontrados === 0) {
|
||||
lista.innerHTML = "<li style='color:gray;font-style:italic'>No se encontraron resultados</li>";
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
{
|
||||
"data":
|
||||
[
|
||||
{ "nombre": "FALLOUT", "sinopsis": "Narra la historia de la Easy Company, un batallón estadounidense del regimiento 506 de paracaidistas, que luchó en Europa durante la II Guerra Mundial.",
|
||||
"imagen": "Portadas/FALLOUT.jpg"},
|
||||
{ "nombre": "HALO", "sinopsis": "Halo narra un conflicto épico del siglo XXVI entre la humanidad y una amenaza alienígena conocida como el Covenant. Halo entrelazará historias personales profundas con acción, aventura y una visión del futuro ricamente imaginada.",
|
||||
"imagen": "Portadas/HALO.jpg"},
|
||||
{ "nombre": "THE WALKING DEAD", "sinopsis": "Basado en la historieta escrita por Robert Kirkman, este drama crudo describe las vidas de un grupo de sobrevivientes que está siempre en movimiento en busca de un hogar seguro durante las semanas y meses de un apocalipsis zombi.",
|
||||
"imagen": "Portadas/Walking_Dead.jpg"},
|
||||
{ "nombre": "STRANGER THINGS", "sinopsis": "Cuando un niño desaparece, sus amigos, la familia y la policía se ven envueltos en una serie de eventos misteriosos al tratar de encontrarlo. Mientras tanto, una niña con habilidades especiales aparece en la ciudad.",
|
||||
"imagen": "Portadas/Stranger_Things.jpg"},
|
||||
{ "nombre": "THE SIMPSONS", "sinopsis": "La comedia de dibujos animados se centra en una familia que vive en la ciudad de Springfield. La cabeza de la familia Simpson es Homero, quien no es un hombre de familia típico, obrero de una planta nuclear, él hace lo mejor para poder liderar a su familia, pero frecuentemente se da cuenta que son ellos los que lo mandan.",
|
||||
"imagen": "Portadas/SIMPSON.jpg"}
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,154 @@
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
background: radial-gradient(
|
||||
circle at top,
|
||||
#1f2933 0%,
|
||||
#0f172a 40%,
|
||||
#020617 100%
|
||||
);
|
||||
color: #ff3a3a;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
|
||||
.contenedor {
|
||||
max-width: 900px;
|
||||
margin: 60px auto;
|
||||
padding: 40px;
|
||||
border-radius: 20px;
|
||||
background: rgba(15, 23, 42, 0.75);
|
||||
backdrop-filter: blur(12px);
|
||||
box-shadow:
|
||||
0 20px 50px rgba(0,0,0,0.6),
|
||||
inset 0 1px 0 rgba(255,255,255,0.05);
|
||||
}
|
||||
|
||||
|
||||
h1 {
|
||||
font-weight: 800;
|
||||
font-size: 3rem;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
color: #ff4b4b; /* un rojo vibrante */
|
||||
text-shadow:
|
||||
2px 2px 8px rgba(0, 0, 0, 0.6),
|
||||
0 0 10px rgba(255, 75, 75, 0.5); /* efecto de brillo suave */
|
||||
animation: fadeUp 1s ease forwards;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
input, select {
|
||||
width: 65%;
|
||||
height: 38px;
|
||||
padding: 6px 12px;
|
||||
font-size: 15px;
|
||||
background: #020617;
|
||||
color: #e5e7eb;
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
input::placeholder {
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
|
||||
button {
|
||||
background: linear-gradient(135deg, #c52222, #a31616);
|
||||
border: none;
|
||||
padding: 12px 22px;
|
||||
border-radius: 10px;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 30px rgba(197, 34, 34, 0.4);
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
background: #ffffff;
|
||||
border-radius: 18px;
|
||||
margin: 30px auto;
|
||||
padding: 25px;
|
||||
max-width: 420px;
|
||||
transition: transform 0.35s ease, box-shadow 0.35s ease;
|
||||
}
|
||||
|
||||
li img {
|
||||
display: block;
|
||||
margin: 15px auto 0;
|
||||
max-width: 220px;
|
||||
border-radius: 14px;
|
||||
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.635);
|
||||
transition: transform 0.4s ease;
|
||||
}
|
||||
|
||||
li p {
|
||||
opacity: 0;
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
font-style: italic;
|
||||
color: #6a2121;
|
||||
margin-top: 10px;
|
||||
line-height: 1.4;
|
||||
text-align: justify;
|
||||
transform: translateY(-6px);
|
||||
transition:
|
||||
opacity 0.4s ease,
|
||||
max-height 0.4s ease,
|
||||
transform 0.4s ease;
|
||||
}
|
||||
|
||||
li:hover img {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
li:hover p, li:hover img {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
li:hover p {
|
||||
opacity: 1;
|
||||
max-height: 200px;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
li:hover {
|
||||
transform: translateY(-6px) scale(1.02);
|
||||
box-shadow: 0 5px 30px rgba(255, 0, 0, 0.695);
|
||||
}
|
||||
|
||||
.bloque {
|
||||
margin: 20px auto;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.bloque-busqueda {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
@keyframes fadeUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Cotizaciones Online</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<script src="script.js"></script>
|
||||
</head>
|
||||
<body onload="cargarContenido()">
|
||||
<div class="logo">
|
||||
<img id="imgLogo">
|
||||
<h1 id="titulo"></h1>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="cuadro">
|
||||
<div id="UsdEur"></div>
|
||||
<div id="UsdCop"></div>
|
||||
<div id="btc"></div>
|
||||
</div>
|
||||
<div class="espera">
|
||||
<img id="imgEspera">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 162 KiB |
@@ -0,0 +1,71 @@
|
||||
function cargarContenido() {
|
||||
// Función que cargue las cotizaciones
|
||||
cargarCotizaciones(mostrarCotizacion);
|
||||
|
||||
// Funcion que cargue los elementos
|
||||
cargarElementos();
|
||||
|
||||
// Función que cargue los textos
|
||||
cargarTextos();
|
||||
}
|
||||
|
||||
async function cargarCotizaciones(callback) {
|
||||
|
||||
await delay(2500);
|
||||
|
||||
let promesa1 = await fetch('https://blockchain.info/ticker')
|
||||
callback(await promesa1.json());
|
||||
|
||||
let promesa2 = await fetch('https://open.er-api.com/v6/latest/USD');
|
||||
let datos2 = await promesa2.json();
|
||||
document.getElementById('UsdEur').textContent =
|
||||
"EUR a USD: " + datos2.rates.EUR;
|
||||
|
||||
let datos3 = await crearPedido('https://open.er-api.com/v6/latest/COP');
|
||||
document.getElementById('UsdCop').textContent =
|
||||
"COL a USD: " + datos3.rates.USD;
|
||||
document.getElementById('imgEspera').style.visibility = 'hidden';
|
||||
}
|
||||
|
||||
function mostrarCotizacion(datos) {
|
||||
document.getElementById('btc').textContent =
|
||||
"Bitcoin a USD: " + datos.USD.last.toLocaleString();
|
||||
}
|
||||
|
||||
async function crearPedido(url) {
|
||||
return new Promise(function (resolve, reject) {
|
||||
let xhr = new XMLHttpRequest();
|
||||
xhr.open('GET', url);
|
||||
xhr.onload = function () {
|
||||
if(xhr.status === 200) {
|
||||
resolve(JSON.parse(xhr.responseText));
|
||||
} else {
|
||||
reject(xhr.statusText);
|
||||
}
|
||||
}
|
||||
xhr.send();
|
||||
})
|
||||
}
|
||||
|
||||
function cargarElementos() {
|
||||
document.getElementById('imgLogo').setAttribute('src', 'logo.png');
|
||||
document.getElementById('titulo').textContent = "Cotizaciones Online";
|
||||
document.getElementById('imgEspera').setAttribute('src', 'loading.gif');
|
||||
document.getElementById('imgEspera').style.visibility = 'visible';
|
||||
}
|
||||
|
||||
function cargarTextos() {
|
||||
document.getElementById('UsdEur').textContent = "EUR a USD: ";
|
||||
document.getElementById('UsdCop').textContent = "COL a USD: ";
|
||||
document.getElementById('btc').textContent = "Bitcoin a USD: ";
|
||||
}
|
||||
|
||||
function delay(ms) {
|
||||
return new Promise(function(res) {
|
||||
setTimeout(res, ms);
|
||||
})
|
||||
}
|
||||
|
||||
setInterval(() => {
|
||||
cargarCotizaciones(mostrarCotizacion);
|
||||
}, 30000);
|
||||
@@ -0,0 +1,142 @@
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: 'Inter', 'Segoe UI', Tahoma, sans-serif;
|
||||
max-width: 420px;
|
||||
margin: 0 auto;
|
||||
padding: 40px 20px;
|
||||
background: linear-gradient(180deg, #0f172a, #020617);
|
||||
color: #e5e7eb;
|
||||
animation: fadeIn 0.8s ease-out;
|
||||
}
|
||||
|
||||
/* Título */
|
||||
h1 {
|
||||
color: #38bdf8;
|
||||
font-weight: 500;
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: 25px;
|
||||
animation: slideDown 0.8s ease-out;
|
||||
}
|
||||
|
||||
/* Logo */
|
||||
.logo img {
|
||||
height: 160px;
|
||||
width: 160px;
|
||||
border-radius: 50%;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 10px 25px rgba(0,0,0,0.5);
|
||||
animation: popIn 0.7s ease-out;
|
||||
}
|
||||
|
||||
/* Loader */
|
||||
.espera img {
|
||||
height: 28px;
|
||||
width: 28px;
|
||||
visibility: hidden;
|
||||
margin-top: 20px;
|
||||
animation: spin 1.2s linear infinite;
|
||||
}
|
||||
|
||||
|
||||
/* Tarjeta de cotizaciones */
|
||||
.cuadro {
|
||||
background: rgba(15, 23, 42, 0.85);
|
||||
border-radius: 14px;
|
||||
padding: 20px 10px;
|
||||
margin: 20px 0;
|
||||
box-shadow:
|
||||
0 15px 30px rgba(0,0,0,0.6),
|
||||
inset 0 1px 0 rgba(255,255,255,0.04);
|
||||
animation: riseUp 0.9s ease-out;
|
||||
transition:
|
||||
transform 0.25s ease,
|
||||
box-shadow 0.25s ease;
|
||||
}
|
||||
|
||||
.cuadro:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow:
|
||||
0 20px 40px rgba(0,0,0,0.7),
|
||||
inset 0 1px 0 rgba(255,255,255,0.06);
|
||||
}
|
||||
|
||||
/* Cada fila */
|
||||
.cuadro div {
|
||||
margin: 16px 0;
|
||||
font-size: 1rem;
|
||||
letter-spacing: 0.3px;
|
||||
transition: color 0.25s ease, transform 0.25s ease;
|
||||
}
|
||||
|
||||
.cuadro div:hover {
|
||||
color: #e0f2fe;
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
/* BTC destacado */
|
||||
#btc {
|
||||
color: #facc15;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* USD / EUR */
|
||||
#UsdEur,
|
||||
#UsdCop {
|
||||
color: #a5f3fc;
|
||||
}
|
||||
|
||||
/* Separador elegante */
|
||||
.cuadro div:not(:last-child) {
|
||||
border-bottom: 1px solid rgba(255,255,255,0.08);
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-15px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes popIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.85);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes riseUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
<!DOCTYPE html>
|
||||
<head>
|
||||
<title>Mi Biografia</title>
|
||||
<link rel="stylesheet" href="misEstilos.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="centrar-texto">
|
||||
<h1>Cristian Cruz</h1>
|
||||
<h2>Mi biografía</h2>
|
||||
<br>
|
||||
<h3 id="subtitulo">Adultez</h3>
|
||||
</div>
|
||||
<img class="foto"
|
||||
src="fotos/familia.jpg"
|
||||
alt="Fede Garay ahora"
|
||||
align="left">
|
||||
<p>Estaba decidido, iba a ser psicólogo. Sin dudarlo estudié y me recibí. Al mismo tiempo estudiaba Artes Plásticas, porque como dije, me gustaba mucho dibujar, pero eso se fue perdiendo.
|
||||
<br><br>
|
||||
El mismo año en que me recibí de psicólogo me casé con mi actual esposa Natacha y tuvimos a nuestra primera hermosa hija, Milena. A los 3 años llegó la divina Juana, y la familia ya estaba completa.
|
||||
<br><br>
|
||||
Al mismo tiempo aparecieron las computadoras en mi vida, las que me volvieron loco. Cada nuevo adelanto me asombraba como a un niño, y aún me sigo sintiendo así. A lo largo de toda mi carrera profesional nunca dejé de fascinarme: programación, ofimática, videojuegos, diseño gráfico… todo me atrapaba con pasión.
|
||||
<br><br>
|
||||
Trabajé durante 20 años como psicólogo clínico, pero algo me decía que eso no era todo. Necesitaba ayudar de un modo distinto, llegar a más personas, tocar más vidas. Así fue que apareció Udemy, trayendo la oportunidad de monetizar mis hobbies, enseñando al mundo las habilidades que aprendí jugando. Hoy soy instructor full time, y me considero libre, porque trabajo donde quiero y cuando quiero, y recibo el amor de más de 150.000 estudiantes de todos los puntos del mundo, que cada tanto me dicen cosas como <span class="texto-negrita texto-cursiva">"Fede, gracias a tu curso conseguí un trabajo mejor"</span>, y te juro que nada me puede hacer más feliz.
|
||||
<br><br>
|
||||
</p>
|
||||
|
||||
<div class="menu">
|
||||
<a href="index.html">Inicio</a>
|
||||
|
||||
<a href="infancia.html">Infancia</a>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 225 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
@@ -0,0 +1,32 @@
|
||||
<!DOCTYPE html>
|
||||
<head>
|
||||
<title>Mi Biografia</title>
|
||||
<link rel="stylesheet" href="misEstilos.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="centrar-texto">
|
||||
<h1>Cristian Cruz</h1>
|
||||
<h2>Mi biografía</h2>
|
||||
<br>
|
||||
<h3 id="subtitulo">Presentación</h3>
|
||||
</div>
|
||||
<img class="foto"
|
||||
src="fotos/Camilo.jpeg"
|
||||
alt="Foto de perfil de Cris"
|
||||
align="left">
|
||||
<p>Si vas a leer mi historia, prefiero que me digas Cris. No creo que haya nada especial en mi como para escribir una biografía, pero creo que siempre vale la pena repasar el camino que hemos hecho, celebrar a las personas que nos han acompañado, y valorar lo bueno y lo malo que nos ha sucedido.
|
||||
<br><br>
|
||||
Por lo pronto, estos son mis datos duros:
|
||||
<br>
|
||||
|
||||
<span class="texto-negrita">Nombre:</span> Cristian Camilo Cruz<br>
|
||||
<span class="texto-negrita">Fecha de Nacimiento:</span> 09/03/2005<br>
|
||||
<span class="texto-negrita">Hermanos:</span> Emily, Juan y Ariana<br>
|
||||
<span class="texto-negrita">Perro:</span> Rufus
|
||||
|
||||
<div class="menu">
|
||||
<a href="infancia.html">Infancia</a>
|
||||
<a href="adultez.html">Adultez</a>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,30 @@
|
||||
<!DOCTYPE html>
|
||||
<head>
|
||||
<title>Mi Biografia</title>
|
||||
<link rel="stylesheet" href="misEstilos.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="centrar-texto">
|
||||
<h1>Federico Garay</h1>
|
||||
<h2>Mi biografía</h2>
|
||||
<br>
|
||||
<h3 id="subtitulo">Infancia</h3>
|
||||
</div>
|
||||
<img class="foto"
|
||||
src="fotos/prehistoria.jpg"
|
||||
alt="Fede Garay siendo niño"
|
||||
align="left">
|
||||
<p>
|
||||
Me recuerdo a mi mismo como un morochito tan flaco que me decían que no alcanzaba ni a proyectar sombra. Era bastante tímido pero los que me conocían de cerca decían que era muy gracioso. Creo que desde entonces siento mucho placer cada vez que hago reír a alguien.
|
||||
<br><br>
|
||||
Yo era el mayor de los hijos, y me la pasaba jugando/peleando con mis hermanas hasta que muchos años después llegó mi hermano menor, quien se convirtió de inmediato en mi juguete favorito.
|
||||
<br><br>
|
||||
Si de algo estoy seguro es de que nunca supe jugar bien al futbol. Era tan desastroso que cuando se armaban los equipos en el barrio, todos peleaban por no tenerme con ellos. Por suerte en lo que siempre fui muy bueno fue en reírme de mi mismo, y supongo que ese fue un gran aspecto que me ayudó a desarrollar una personalidad fuerte.
|
||||
</p>
|
||||
|
||||
<div class="menu">
|
||||
<a href="index.html">Inicio</a>
|
||||
<a href="adultez.html">Adultez</a>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,113 @@
|
||||
body {
|
||||
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
min-height: 100vh;
|
||||
color: white;
|
||||
}
|
||||
|
||||
body::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url(fotos/fondo.jpg);
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
filter: blur(4px);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 15px;
|
||||
background-color: beige;
|
||||
color: black;
|
||||
padding: 15px 20px;
|
||||
text-align: justify;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.centrar-texto {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.foto {
|
||||
border: 3px;
|
||||
border-style: solid;
|
||||
border-color: beige;
|
||||
border-radius: 10px;
|
||||
margin-right: 20px;
|
||||
padding: 5px;
|
||||
margin-bottom: 10px;
|
||||
width: 194px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.texto-negrita {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.texto-cursiva {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.menu {
|
||||
text-align: center;
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
.menu a {
|
||||
display: inline-block;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
padding: 10px 18px;
|
||||
margin: 0 15px;
|
||||
border-radius: 8px;
|
||||
font-size: 18px;
|
||||
padding: 12px 22px;
|
||||
font-weight: bold;
|
||||
text-shadow: 1px 1px 3px black;
|
||||
}
|
||||
|
||||
.menu a[href]{
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.menu a:hover {
|
||||
color: black;
|
||||
background-color: beige;
|
||||
}
|
||||
|
||||
h1 {
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
h1, h2, h3, #subtitulo {
|
||||
color: white;
|
||||
text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
#subtitulo {
|
||||
font-style: italic;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#subtitulo::first-letter {
|
||||
font-size: x-large;
|
||||
font-style: italic;
|
||||
font-weight: bold;
|
||||
}
|
||||
Binary file not shown.
@@ -0,0 +1,143 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Responde Rápido!</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
|
||||
<body onload="comenzarCuentaRegresiva()">
|
||||
|
||||
<div class="contenedor">
|
||||
<h2>
|
||||
Responde a las preguntas lo más rápido que puedas!
|
||||
<span id="cuentaRegresiva">30</span>
|
||||
</h2>
|
||||
|
||||
<p>1. ¿Cuál es la capital de Francia?</p>
|
||||
<input type="text" id="respuesta1">
|
||||
|
||||
<p>2. (7 × 5) + 15</p>
|
||||
<input type="text" id="respuesta2">
|
||||
|
||||
<p>3. Símbolo químico del agua?</p>
|
||||
<input type="text" id="respuesta3">
|
||||
|
||||
<p>4. Año del descubrimiento de América?</p>
|
||||
<input type="text" id="respuesta4">
|
||||
|
||||
<p>5. En qué año se creó el fútbol?</p>
|
||||
<input type="text" id="respuesta5">
|
||||
|
||||
<br><br>
|
||||
|
||||
<button onclick="finalizado()">Terminé</button>
|
||||
<br><br>
|
||||
<button onclick="volverIntentar()">Volver a intentar</button>
|
||||
|
||||
<div id="resultado"></div>
|
||||
</div>
|
||||
|
||||
<audio id="audioFinal">
|
||||
<source src="gameover.mp3" type="audio/mpeg">
|
||||
</audio>
|
||||
|
||||
<script>
|
||||
let tiempo = 30;
|
||||
let intervalo;
|
||||
let tiempoLimite;
|
||||
|
||||
function comenzarCuentaRegresiva() {
|
||||
intervalo = setInterval(ticTac, 1000);
|
||||
tiempoLimite = setTimeout(tiempoCumplido, 30000);
|
||||
}
|
||||
|
||||
function ticTac() {
|
||||
if (tiempo > 0) {
|
||||
tiempo--;
|
||||
document.getElementById("cuentaRegresiva").textContent = tiempo;
|
||||
}
|
||||
|
||||
if (tiempo <= 10) {
|
||||
document.getElementById("cuentaRegresiva").style.color = "darkred";
|
||||
}
|
||||
|
||||
if (tiempo === 0) {
|
||||
clearInterval(intervalo);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function tiempoCumplido() {
|
||||
clearInterval(intervalo);
|
||||
document.getElementById("cuentaRegresiva").textContent = 0
|
||||
document.getElementById("audioFinal").play();
|
||||
|
||||
bloquearInputs();
|
||||
alert("⏰ GAME OVER\nSe acabó el tiempo");
|
||||
}
|
||||
|
||||
function finalizado() {
|
||||
clearTimeout(tiempoLimite);
|
||||
clearInterval(intervalo);
|
||||
|
||||
let puntaje = 0;
|
||||
let resultado = "";
|
||||
|
||||
const r1 = document.getElementById("respuesta1").value.toLowerCase();
|
||||
const r2 = document.getElementById("respuesta2").value;
|
||||
const r3 = document.getElementById("respuesta3").value.toLowerCase();
|
||||
const r4 = document.getElementById("respuesta4").value;
|
||||
const r5 = document.getElementById("respuesta5").value;
|
||||
|
||||
if (r1 === "parís" || r1 === "paris") {
|
||||
puntaje++; resultado += "1 ✅\n";
|
||||
} else resultado += "1 ❌ (París)\n";
|
||||
|
||||
if (r2 === "50") {
|
||||
puntaje++; resultado += "2 ✅\n";
|
||||
} else resultado += "2 ❌ (50)\n";
|
||||
|
||||
if (r3 === "h2o" || r3 === "H2O") {
|
||||
puntaje++; resultado += "3 ✅\n";
|
||||
} else resultado += "3 ❌ (H2O)\n";
|
||||
|
||||
if (r4 === "1492") {
|
||||
puntaje++; resultado += "4 ✅\n";
|
||||
} else resultado += "4 ❌ (1492)\n";
|
||||
|
||||
if (r5 === "1863") {
|
||||
puntaje++; resultado += "5 ✅\n";
|
||||
} else resultado += "5 ❌ (1863)\n";
|
||||
|
||||
alert(
|
||||
"📊 RESULTADOS\n\n" +
|
||||
resultado +
|
||||
"\n🎯 Puntaje final: " + puntaje + " / 5"
|
||||
);
|
||||
|
||||
document.querySelectorAll("input").forEach(input => {
|
||||
input.disabled = true;
|
||||
});
|
||||
|
||||
document.querySelector("button").disabled = true;
|
||||
|
||||
}
|
||||
|
||||
function volverIntentar() {
|
||||
location.reload();
|
||||
}
|
||||
|
||||
document.getElementById("resultado").textContent = `Puntaje final: ${puntaje} / 5`;
|
||||
|
||||
function bloquearInputs() {
|
||||
document.querySelectorAll("input").forEach(input => {
|
||||
input.disabled = true;
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,67 @@
|
||||
html {
|
||||
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
text-align: center;
|
||||
background-color: #f4f1e6;
|
||||
}
|
||||
|
||||
.contenedor {
|
||||
background-color: white;
|
||||
width: 420px;
|
||||
margin: 40px auto;
|
||||
padding: 20px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: darkkhaki;
|
||||
}
|
||||
|
||||
p {
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 180px;
|
||||
height: 30px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #888;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 180px;
|
||||
height: 50px;
|
||||
background-color: darkkhaki;
|
||||
border-radius: 6px;
|
||||
border: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: olive;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input:disabled {
|
||||
background-color: #eee;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
#cuentaRegresiva {
|
||||
border: 2px solid red;
|
||||
color: red;
|
||||
padding: 4px 10px;
|
||||
font-size: 22px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
#resultado {
|
||||
margin-top: 20px;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Calculadora</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<script src="script.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="calculadora">
|
||||
<h1>Calculadora</h1>
|
||||
|
||||
<input type="text" id="campo1">
|
||||
<input type="text" id="campo2">
|
||||
|
||||
<div class="operaciones">
|
||||
<button onclick="suma()">+</button>
|
||||
<button onclick="resta()">-</button>
|
||||
<button onclick="multiplicacion()">*</button>
|
||||
<button onclick="division()">/</button>
|
||||
</div>
|
||||
|
||||
<div class="doble">
|
||||
<button onclick="raiz()">Raíz</button>
|
||||
<button onclick="potencia()">Potencia</button>
|
||||
<button onclick="absoluto()">Absoluto</button>
|
||||
<button onclick="aleatorio()">Random</button>
|
||||
</div>
|
||||
|
||||
<h3>Resultado:</h3>
|
||||
<input type="text" id="resultado">
|
||||
|
||||
<div class="triple">
|
||||
<button onclick="redondeo()">Round</button>
|
||||
<button onclick="piso()">Floor</button>
|
||||
<button onclick="techo()">Ceil</button>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,68 @@
|
||||
function mostrarResultado(resultado) {
|
||||
document.getElementById("resultado").value = resultado;
|
||||
}
|
||||
|
||||
function suma() {
|
||||
let numero1 = +document.getElementById("campo1").value;
|
||||
let numero2 = +document.getElementById("campo2").value;
|
||||
mostrarResultado(numero1 + numero2);
|
||||
}
|
||||
|
||||
function resta() {
|
||||
let numero1 = +document.getElementById("campo1").value;
|
||||
let numero2 = +document.getElementById("campo2").value;
|
||||
mostrarResultado(numero1 - numero2);
|
||||
}
|
||||
|
||||
function multiplicacion() {
|
||||
let numero1 = +document.getElementById("campo1").value;
|
||||
let numero2 = +document.getElementById("campo2").value;
|
||||
mostrarResultado(numero1 * numero2);
|
||||
}
|
||||
|
||||
function division() {
|
||||
let numero1 = +document.getElementById("campo1").value;
|
||||
let numero2 = +document.getElementById("campo2").value;
|
||||
mostrarResultado(numero1 / numero2);
|
||||
}
|
||||
|
||||
function raiz() {
|
||||
let numero = +document.getElementById("campo2").value;
|
||||
mostrarResultado(Math.sqrt(numero));
|
||||
}
|
||||
|
||||
function potencia() {
|
||||
let numero1 = +document.getElementById("campo1").value;
|
||||
let numero2 = +document.getElementById("campo2").value;
|
||||
mostrarResultado(Math.pow(numero1, numero2));
|
||||
}
|
||||
|
||||
function absoluto() {
|
||||
let numero = +document.getElementById("campo2").value;
|
||||
mostrarResultado(Math.abs(numero));
|
||||
}
|
||||
|
||||
function aleatorio() {
|
||||
let minimo = +document.getElementById("campo1").value;
|
||||
let maximo = +document.getElementById("campo2").value;
|
||||
maximo = maximo + 1;
|
||||
mostrarResultado(Math.floor(Math.random() * (maximo - minimo) + minimo));
|
||||
}
|
||||
|
||||
function redondeo() {
|
||||
let resultado = +document.getElementById("resultado").value;
|
||||
mostrarResultado(Math.round(resultado));
|
||||
}
|
||||
|
||||
function techo() {
|
||||
let resultado = +document.getElementById("resultado").value;
|
||||
mostrarResultado(Math.ceil(resultado));
|
||||
}
|
||||
|
||||
function piso() {
|
||||
let resultado = +document.getElementById("resultado").value;
|
||||
mostrarResultado(Math.floor(resultado));
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,75 @@
|
||||
body {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
background-color: #f2f2f2;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.calculadora {
|
||||
background-color: white;
|
||||
padding: 20px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 8px 20px rgba(0,0,0,0.2);
|
||||
text-align: center;
|
||||
width: 260px;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 90%;
|
||||
height: 30px;
|
||||
font-size: 1rem;
|
||||
margin: 5px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.operaciones {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
button {
|
||||
height: 40px;
|
||||
width: 45px;
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
background-color: #4caf50;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.triple {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.doble {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 8px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.doble button {
|
||||
width: 100%;
|
||||
padding: 8px 4px;
|
||||
background-color: #2196f3;
|
||||
font-size: 0.85rem;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.triple button {
|
||||
width: 70px;
|
||||
background-color: #ff9800;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
#resultado {
|
||||
font-weight: bold;
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
<!DOCTYPE html>
|
||||
<head>
|
||||
<title>Menú cine</title>
|
||||
<link rel="stylesheet" href="misEstilos.css">
|
||||
<script src="misScripts.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>¡Bienvenidos al cine!</h1>
|
||||
<h3>--- Menú ---</h3>
|
||||
<p>Queremos hacer de tu visita, una experiencia más placentera. Para eso, ingresa tu edad y selecciona el género que más te guste, y te recomendamos tu pelicula ideal.</p>
|
||||
<p>Edad: <input type="text" id="edad"></p>
|
||||
<button onclick="recomendar('drama')">Drama</button>
|
||||
<button onclick="recomendar('comedia')">Comedia</button>
|
||||
<button onclick="recomendar('musical')">Musical</button>
|
||||
<button onclick="recomendar('crimen')">Crimen</button>
|
||||
<h3>Nuestra recomendación:</h3>
|
||||
<h2 id="recomendacion"></h2>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,18 @@
|
||||
body {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
background-color: antiquewhite;
|
||||
}
|
||||
|
||||
input {
|
||||
height: 20px;
|
||||
width: 80px;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
button {
|
||||
height: 35px;
|
||||
width: 140px;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
function recomendar(genero){
|
||||
let edad = document.getElementById("edad").value;
|
||||
let recomendacion = document.getElementById("recomendacion");
|
||||
|
||||
switch(genero) {
|
||||
case 'drama':
|
||||
if (edad < 13) {
|
||||
recomendacion.textContent = "Casablanca";
|
||||
} else {
|
||||
if (edad < 16) {
|
||||
recomendacion.textContent = "The Shawshank Redemption";
|
||||
} else {
|
||||
recomendacion.textContent = "Taxi Driver";
|
||||
}
|
||||
}
|
||||
break;
|
||||
case 'comedia':
|
||||
if (edad < 13) {
|
||||
recomendacion.textContent = "Back to the Future";
|
||||
} else {
|
||||
if (edad < 16) {
|
||||
recomendacion.textContent = "The Truman Show";
|
||||
} else {
|
||||
recomendacion.textContent = "The Wolf of Wall Street";
|
||||
}
|
||||
}
|
||||
break;
|
||||
case 'musical':
|
||||
if (edad < 13) {
|
||||
recomendacion.textContent = "La La Land";
|
||||
} else {
|
||||
if (edad < 16) {
|
||||
recomendacion.textContent = "Les Miserables";
|
||||
} else {
|
||||
recomendacion.textContent = "The Rocky Horror Picture Show";
|
||||
}
|
||||
}
|
||||
break;
|
||||
case 'crimen':
|
||||
if (edad < 13) {
|
||||
recomendacion.textContent = "No hay opciones para esta edad";
|
||||
} else {
|
||||
if (edad < 16) {
|
||||
recomendacion.textContent = "El Secreto de tus Ojos";
|
||||
} else {
|
||||
recomendacion.textContent = "The Godfather";
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
@@ -0,0 +1,36 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Boletín Estudiantil</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<script src="script.js"></script>
|
||||
</head>
|
||||
<body onload="listarNotas()">
|
||||
<div class="logo">
|
||||
<img src="colegio.webp">
|
||||
<h2>¡Bienvenido estudiante a tu boletín estudiantil!</h2>
|
||||
</div>
|
||||
|
||||
<div class="estudiante">
|
||||
<h3>Alumno: Cristian Cruz</h3>
|
||||
</div>
|
||||
|
||||
<div class="notas">
|
||||
<h4>Notas:</h4>
|
||||
<ul id="listaNotas"></ul>
|
||||
</div>
|
||||
|
||||
<div class="info">
|
||||
<h4>Promedio: <span id="promedio"></span></h4>
|
||||
<button onclick="calcularPromedio()">Calcular promedio:</button>
|
||||
|
||||
<h4>Nota más alta: <span id="nota"></span></h4>
|
||||
<button onclick="notaMasAlta()">Calcular promedio:</button>
|
||||
|
||||
<h4>¿Hubo algún aplazo? <span id="aplazo"></span></h4>
|
||||
<button onclick="hayAplazo()">Calcular promedio:</button>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,56 @@
|
||||
let array = [1.7, 3, 2.5, 4.8, 3.6];
|
||||
|
||||
function listarNotas() {
|
||||
let lista = document.getElementById("listaNotas");
|
||||
lista.innerHTML = ""; // limpia la lista
|
||||
|
||||
for (let nota of array) {
|
||||
let item = document.createElement("li");
|
||||
item.innerText = nota;
|
||||
|
||||
if (nota < 3.0) {
|
||||
item.classList.add("nota-mala");
|
||||
} else {
|
||||
item.classList.add("nota-buena");
|
||||
}
|
||||
|
||||
lista.appendChild(item);
|
||||
}
|
||||
}
|
||||
|
||||
function calcularPromedio() {
|
||||
let suma = 0;
|
||||
|
||||
for (i=0; i < 5; i++) {
|
||||
suma += array[i];
|
||||
}
|
||||
|
||||
let promedio = (suma / 5);
|
||||
document.getElementById("promedio").textContent = promedio
|
||||
}
|
||||
|
||||
function notaMasAlta() {
|
||||
let notaAlta = 0;
|
||||
let i = 0;
|
||||
while (i < 5) {
|
||||
if (array[i] > notaAlta) {
|
||||
notaAlta = array[i]
|
||||
}
|
||||
i++;
|
||||
}
|
||||
document.getElementById("nota").textContent = notaAlta
|
||||
}
|
||||
|
||||
function hayAplazo() {
|
||||
let aplazo = "No";
|
||||
let i = 0;
|
||||
|
||||
do {
|
||||
if (array[i] < 3) {
|
||||
aplazo = "Sí";
|
||||
break;
|
||||
}
|
||||
i++;
|
||||
} while (i < 5);
|
||||
document.getElementById("aplazo").textContent = aplazo;
|
||||
}
|
||||
@@ -0,0 +1,122 @@
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
background: linear-gradient(135deg, #f5f7fa, #e4ecf5);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #1e3a8a;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
h4 {
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
font-weight: 600;
|
||||
color: #2563eb;
|
||||
padding: 6px 0;
|
||||
}
|
||||
|
||||
button {
|
||||
height: 36px;
|
||||
width: 180px;
|
||||
background: linear-gradient(135deg, #2563eb, #1e40af);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 15px;
|
||||
font-weight: 600;
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
cursor: pointer;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.logo {
|
||||
text-align: center;
|
||||
background-color: white;
|
||||
padding: 25px;
|
||||
border-bottom: 4px solid #2563eb;
|
||||
}
|
||||
|
||||
.logo img {
|
||||
height: 200px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.estudiante {
|
||||
background-color: white;
|
||||
max-width: 600px;
|
||||
margin: 30px auto 15px;
|
||||
padding: 15px 25px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.notas {
|
||||
background-color: white;
|
||||
max-width: 600px;
|
||||
margin: 20px auto;
|
||||
padding: 20px 25px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.nota-mala {
|
||||
color: #dc2626; /* rojo */
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.nota-buena {
|
||||
color: #1e40af; /* verde */
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.notas ul {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.notas li {
|
||||
font-size: 1rem;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.notas li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
|
||||
.info {
|
||||
background-color: white;
|
||||
max-width: 600px;
|
||||
margin: 0 auto 40px;
|
||||
padding: 25px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.info h4 {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.info span {
|
||||
font-weight: bold;
|
||||
font-size: 1.1rem;
|
||||
color: #1e40af;
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Venta de Donuts</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<script src="script.js"></script>
|
||||
</head>
|
||||
<body onload="crearTiendas('itemsTienda', 0, 6)">
|
||||
<p>🍩 Venta de MaDona 🍩</p>
|
||||
|
||||
<div id="itemsTienda">
|
||||
</div>
|
||||
|
||||
<p id="parrafoSalida">
|
||||
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button onclick="calcular()">Calcular</button>
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,121 @@
|
||||
function crearTiendas(contenedorID, min, cantidadTiendas) {
|
||||
// Encontrar contenedor por su ID
|
||||
let elementoContenedor = document.getElementById(contenedorID);
|
||||
|
||||
// Loop para crear tantas tiendas como se pidan
|
||||
for(let conteoTiendas=1; conteoTiendas<=cantidadTiendas; conteoTiendas++) {
|
||||
// Crear el texto de label para poder llamar a la función
|
||||
let textoEtiqueta = "Tienda " + conteoTiendas;
|
||||
|
||||
// Crear tiendas con crearParrafoTienda()
|
||||
let parrafoTienda = crearParrafoTienda(textoEtiqueta, min);
|
||||
|
||||
// Agregar el parrafo al contenedor
|
||||
elementoContenedor.appendChild(parrafoTienda);
|
||||
}
|
||||
}
|
||||
|
||||
function crearParrafoTienda(textoLabel, valorMin) {
|
||||
// Crear las etiquetas <p>
|
||||
let elementoParrafo = document.createElement("p");
|
||||
|
||||
// Crear la etiquera <label>
|
||||
let elementoEtiqueta = document.createElement("label");
|
||||
elementoEtiqueta.innerText = textoLabel + ": ";
|
||||
|
||||
// Conectar con <input>
|
||||
elementoEtiqueta.setAttribute("for", textoLabel);
|
||||
|
||||
// Crear el <input>
|
||||
let elementoInput = document.createElement("input");
|
||||
|
||||
// Establecer atributos de input
|
||||
elementoInput.setAttribute("type", "number");
|
||||
elementoInput.setAttribute("id", textoLabel);
|
||||
elementoInput.setAttribute("min", valorMin);
|
||||
elementoInput.setAttribute("value", 0);
|
||||
|
||||
// Agregar label e input al parrafo
|
||||
elementoParrafo.appendChild(elementoEtiqueta);
|
||||
elementoParrafo.appendChild(elementoInput);
|
||||
|
||||
// Devolver el parrafo completo
|
||||
return elementoParrafo;
|
||||
}
|
||||
|
||||
function extraerNumeroDesdeElemento(elemento) {
|
||||
let miTexto = elemento.value;
|
||||
let miNumero = Number(miTexto);
|
||||
|
||||
return miNumero;
|
||||
}
|
||||
|
||||
function calcular() {
|
||||
let ventas = [];
|
||||
let posicionVentas = 0;
|
||||
let elementosVentas = document.getElementById("itemsTienda");
|
||||
|
||||
for(let item of elementosVentas.children) {
|
||||
let valorVenta = extraerNumeroDesdeElemento(item.children[1]);
|
||||
ventas[posicionVentas] = valorVenta;
|
||||
posicionVentas = posicionVentas + 1;
|
||||
}
|
||||
|
||||
let totalVentas = sumarTotal(ventas);
|
||||
let ventaMayor = calcularMayor(ventas);
|
||||
let ventaMenor = calcularMenor(ventas);
|
||||
|
||||
for (let item of elementosVentas.children) {
|
||||
let valorVenta = extraerNumeroDesdeElemento(item.children[1]);
|
||||
|
||||
item.children[1].className = "menuNeutro";
|
||||
|
||||
if(valorVenta==ventaMayor) {
|
||||
item.children[1].className = "menuInputMayor";
|
||||
}
|
||||
|
||||
if(valorVenta==ventaMenor) {
|
||||
item.children[1].className = "menuInputMenor";
|
||||
}
|
||||
}
|
||||
|
||||
let mensajeSalida = "Total Ventas: " + totalVentas;
|
||||
|
||||
let elementoSalida = document.getElementById("parrafoSalida");
|
||||
|
||||
elementoSalida.textContent = mensajeSalida;
|
||||
}
|
||||
|
||||
function sumarTotal(array) {
|
||||
let total = 0;
|
||||
|
||||
for(let venta of array) {
|
||||
total = total + venta;
|
||||
}
|
||||
|
||||
return total;
|
||||
}
|
||||
|
||||
function calcularMayor(array) {
|
||||
let maximo = array[0];
|
||||
|
||||
for (let venta of array) {
|
||||
if (venta > maximo) {
|
||||
maximo = venta;
|
||||
}
|
||||
}
|
||||
|
||||
return maximo;
|
||||
}
|
||||
|
||||
function calcularMenor(array) {
|
||||
let minimo = array[0];
|
||||
|
||||
for (let venta of array) {
|
||||
if (venta < minimo) {
|
||||
minimo = venta;
|
||||
}
|
||||
}
|
||||
|
||||
return minimo;
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
.menuInputMayor {
|
||||
background-color: greenyellow;
|
||||
}
|
||||
|
||||
.menuInputMenor {
|
||||
background-color: lightsalmon;
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Empleados</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<script src="script.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h2>Registro de Empleados</h2>
|
||||
<hr>
|
||||
<p>Legajo</p>
|
||||
<input type="text" id="txtLegajo">
|
||||
<p>Nombre</p>
|
||||
<input type="text" id="txtNombre">
|
||||
<p>Apellido</p>
|
||||
<input type="text" id="txtApellido">
|
||||
<p>Fecha de nacimiento</p>
|
||||
<input type="text" id="txtNacimiento">
|
||||
<p>Cargo</p>
|
||||
<input type="text" id="txtCargo">
|
||||
<br>
|
||||
<br>
|
||||
<button onclick="agregarEmpleado()">Cargar empleado</button>
|
||||
<br>
|
||||
<br>
|
||||
<button onclick="mostrarEmpleados()">Mostrar empleados</button>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,42 @@
|
||||
let empleados = [];
|
||||
|
||||
function Empleado(legajo, nombre, apellido, nacimiento, cargo) {
|
||||
this.legajo = legajo;
|
||||
this.nombre = nombre;
|
||||
this.apellido = apellido;
|
||||
this.nacimiento= nacimiento;
|
||||
this.cargo = cargo;
|
||||
}
|
||||
|
||||
function agregarEmpleado() {
|
||||
let legajo = document.getElementById("txtLegajo").value;
|
||||
let nombre = document.getElementById("txtNombre").value;
|
||||
let apellido = document.getElementById("txtApellido").value;
|
||||
let nacimiento = document.getElementById("txtNacimiento").value;
|
||||
let cargo = document.getElementById("txtCargo").value;
|
||||
|
||||
let empleado = new Empleado(legajo, nombre, apellido, nacimiento, cargo)
|
||||
empleados.push(empleado)
|
||||
|
||||
alert("Empleado ha sido agregado!");
|
||||
limpiarCampos();
|
||||
}
|
||||
|
||||
function mostrarEmpleados() {
|
||||
let listado = '';
|
||||
for(empleado of empleados) {
|
||||
for(let prop in empleado) {
|
||||
listado = listado + prop.toUpperCase() + ": " + empleado[prop] + ", ";
|
||||
}
|
||||
listado = listado + "\n";
|
||||
}
|
||||
alert(listado);
|
||||
}
|
||||
|
||||
function limpiarCampos() {
|
||||
document.getElementById("txtLegajo").value = "";
|
||||
document.getElementById("txtNombre").value = "";
|
||||
document.getElementById("txtApellido").value = "";
|
||||
document.getElementById("txtNacimiento").value = "";
|
||||
document.getElementById("txtCargo").value = "";
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
body {
|
||||
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
|
||||
margin-left: 2rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: brown;
|
||||
}
|
||||
|
||||
button {
|
||||
height: 30px;
|
||||
width: 158px;
|
||||
background-color: darkblue;
|
||||
color: white;
|
||||
}
|
||||
|
||||
input {
|
||||
height: 20px;
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Registro Automotor</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<script src="script.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>Registro Automotor</h1>
|
||||
<button onclick="mostrarAutomoviles()">Mostrar Automóviles</button>
|
||||
<ul id="listaAutomoviles" class="lista"></ul>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,37 @@
|
||||
function Automovil(marca, modelo, color, anio, titular) {
|
||||
this.marca = marca;
|
||||
this.modelo = modelo;
|
||||
this.color = color;
|
||||
this.anio = anio;
|
||||
this.titular = titular;
|
||||
}
|
||||
|
||||
let automovil1 = new Automovil('Ford', 'Focus', 'Rojo', 2020, 'Matías Perez');
|
||||
let automovil2 = new Automovil('Chevrolet', 'Camaro', 'Amarillo', 2022, 'Silvina Marquez');
|
||||
let automovil3 = new Automovil('Toyota', 'Corolla', 'Blanco', 2025, 'Carlos García');
|
||||
let automoviles = [automovil1, automovil2, automovil3];
|
||||
|
||||
Automovil.prototype.venderAutomovil = function(nuevoTitular) {
|
||||
this.titular = nuevoTitular;
|
||||
}
|
||||
|
||||
Automovil.prototype.encender = function() {
|
||||
alert(`El ${this.marca} ${this.modelo} fue encendido`);
|
||||
}
|
||||
|
||||
Automovil.prototype.verAutomovil = function() {
|
||||
return `${this.marca} ${this.modelo} (${this.anio}) - Titular: ${this.titular}`;
|
||||
}
|
||||
|
||||
function mostrarAutomoviles() {
|
||||
let lista = document.getElementById("listaAutomoviles");
|
||||
|
||||
// Limpiar lista antes de volver a mostrar
|
||||
lista.innerHTML = "";
|
||||
|
||||
for (let automovil of automoviles) {
|
||||
let item = document.createElement('li');
|
||||
item.innerText = automovil.verAutomovil();
|
||||
lista.appendChild(item);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
background: linear-gradient(135deg, #e8f0ff, #ffffff);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
background: #ffffff;
|
||||
padding: 30px 40px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.2em;
|
||||
margin-bottom: 20px;
|
||||
color: #2c3e50;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
button {
|
||||
background: linear-gradient(135deg, #4CAF50, #2ecc71);
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 14px 28px;
|
||||
font-size: 16px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.lista {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.lista li {
|
||||
background: #f8f9fb;
|
||||
margin-bottom: 12px;
|
||||
padding: 15px 20px;
|
||||
border-radius: 8px;
|
||||
font-size: 15px;
|
||||
color: #34495e;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
|
||||
animation: fadeIn 0.4s ease forwards;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user