INSTITUTO DE EDUCACIÓN SUPERIOR CIBERTEC

DIRECCIÓN ACADÉMICA
CARRERA PROFESIONALES

CURSO : 4684 – Desarrollo de Entornos Web

PROFESOR : Jorge Ricardo, Pérez Vigil
SEMESTRE : 2023 - I
NOTA
CICLO : Segundo
SECCIÓN : T2YT
DURACIÓN : 1 día
FECHA INICIO : sábado, 18 de noviembre desde las 22:45 horas
FECHA FIN : domingo, 19 de noviembre hasta las 22:45 horas

ALUMNO (A) :

CASO DE LABORATORIO N° 1 – CL1

Consideraciones generales:
 Considerar el orden, la limpieza y la claridad de las respuestas.
 Está permitido el uso o consulta de cuadernos, separatas, libros o cualquier material de la
asignatura durante el desarrollo de la evaluación.
 Descargar el proyecto base llamado CL1.zip
 Inicie el proyecto con el nombre T2YT_CL1_XXXX (donde XXXX serán sus apellidos y nombres)
 Subir el proyecto al Blackboard

Consolidado

Puntaje Llenar solo en caso de Recalificación justificada

Pregunta
Máximo Obtenido Sustento Puntaje
1 20

Nota Recalificada

Pregunta 01

Elaborar las funciones javascript para que en el proyecto adjunto (CL1.zip) muestre un
carrusel de imágenes de platos de cocina y muestre la hora del sistema.

Imágenes referenciales:

IES CIBERTEC 1
*{
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;

}
html{
font-family: Arial, sans-serif;
}
img{
width: 100%;
height: 100%;
}
.contenedor{
width: 100%;
position: relative;
height: 780px;

.botones{
font-size: 30px;

IES CIBERTEC 2
 width: 70px;
height: 70px;
line-height: 70px;
border-radius: 50%;
background-color: rgba(0,0,0,.7);
text-align: center;
font-weight: bold;
position: absolute;
color: #fff;
box-shadow: 0 0 10px rgba(255,255,255,.6);
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
}

.botones:hover{
cursor: pointer;
transform: scale(1.2,1.2);
}
.atras{
left: 2%;
top: calc(50% - 70px);
}
.adelante{
right: 2%;
top: calc(50% - 70px);
}

var imagenes = ['img/comida1.jpeg, img/comida2.jpeg, img/comida3.jpeg,

img/comida4.jpeg, img/comida5.jpeg' ],
cont = 0;

function carrousel(contenedor) {
contenedor.addEventListener('click', e =>{
let atras = contenedor.querySelector('.atras'),
adelante = contenedor.querySelector('.adelante'),
img = contenedor.querySelector('img'),
tgt = e.target;

if (tgt == atras) {
if (cont > 0) {
img.src = imagenes[cont - 1];
cont--;

IES CIBERTEC 3
 } else {
img.src = imagenes[imagenes.length - 1];
cont = imagenes.length - 1;
}

} else if(tgt == adelante){

if (cont < imagenes.length - 1) {
img.src = imagenes[cont + 1];
cont++;

} else {
img.src = imagenes[0];
cont = 0;
}
}

});

document.addEventListener("DOMContentLoaded", () => {
let contenedor = document.querySelector('.contenedor');

carrousel(contenedor);
})

function updateTime() {
const timeElement = document.getElementById('current-time');
const currentTime = new Date();
const hours = currentTime.getHours();
const minutes = currentTime.getMinutes();
const seconds = currentTime.getSeconds();
const formattedTime = `${hours}:${minutes}:${seconds}`;
timeElement.textContent = formattedTime;
}

IES CIBERTEC 4
 Rúbrica
Excelente: 20 Bueno: 15 Regular: 10 Deficiente: 5 Deficiente: 0
Puntos
puntos puntos puntos puntos puntos
Implementa el
Implementa el Implementa el
javascript para
Implementa el javascript para javascript del
que se muestre
javascript para que se muestre el carrusel con No
el carrusel y la
que se muestre carrusel y la hora errores implementa
20 hora (el carrusel
el carrusel, y la (el carrusel (ninguno de ninguna
Puntos no funciona
hora (ambos funciona los dos funcionalida
correctamente,
funcionan correctamente, la funciona d solicitada
la hora si
correctamente) hora no funciona correctamente
funciona
correctamente) )
correctamente

IES CIBERTEC 5