Este es miAdjunto el codigo js, html y css.
Java Script:
document.addEventListener("DOMContentLoaded", (event) => {
let min = document.getElementById('min');
let seg = document.getElementById('seg');
let miSeg = document.getElementById('miSeg');
let contMin = 0;
let contSeg = 0;
let contMiSeg = 0;
//Control
let btnIniciar = document.getElementById('btnIniciar');
let btnDetener = document.getElementById('btnDetener');
let btnReset = document.getElementById('btnReset');
let btnGuardar = document.getElementById('btnGuardar');
let btnOcultarVtn = document.getElementById('btnOcultarVtn');
let timing;
btnIniciar.addEventListener( 'click', function(){
clearInterval(timing);
timing = setInterval(() => {
contMiSeg++
miSeg.textContent= contMiSeg.toString().padStart( 2 , '0' );
if(contMiSeg == 99){
contMiSeg = 0,
miSeg.textContent= contMiSeg.toString().padStart( 2 , '0' );
contSeg++;
seg.textContent= contSeg.toString().padStart( 2 , '0' );
}
if(contSeg == 60){
contSeg = 0;
seg.textContent= contSeg.toString().padStart( 2 , '0' );
contMin++;
min.textContent= contMin.toString().padStart( 2 , '0' );
}
}, 10);
});
btnReset.addEventListener( 'click', function(){
contMiSeg = 0;
contSeg = 0;
contMin = 0;
miSeg.textContent = contMiSeg.toString().padStart( 2, '0');
seg.textContent = contSeg.toString().padStart( 2, '0');
min.textContent = contMin.toString().padStart( 2, '0');
});
btnDetener.addEventListener( 'click', function(){
clearInterval(timing);
});
btnGuardar.addEventListener( 'click', function(){
let tiempo = [contMin.toString().padStart( 2, '0'), contSeg.toString().padStart( 2, '0'), contMiSeg.toString().padStart( 2, '0')];
let tiempoFormateado = tiempo.join(' : ');
let contadorTiempos = 0;
let divElement = document.createElement('div');
divElement.className = 'registro';
let nodoTiempo = document.createTextNode(tiempoFormateado);
let fecha = new Date();
let opcionesFecha = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
let opcionesHora = { hour: 'numeric', minute: 'numeric', second: 'numeric' };
let formatoFecha = new Intl.DateTimeFormat('es', opcionesFecha).format(fecha);
let formatoHora = new Intl.DateTimeFormat('es', opcionesHora).format(fecha);
let regFechaCompleta = formatoFecha + ' ' + formatoHora;
let nodoFecha = document.createTextNode(regFechaCompleta);
let parr1 = document.createElement('p');
parr1.className = 'registro--fecha'
let parr2 = document.createElement('p');
parr2.className = 'registro--tiempo'
let registros = document.getElementById('registros');
registros.appendChild(divElement);
divElement.appendChild(parr1);
divElement.appendChild(parr2);
parr1.appendChild(nodoFecha);
parr2.appendChild(nodoTiempo);
function eliminar(){
let confirmacion = confirm('¿Seguro que deseas eliminar este registro?');
if( confirmacion === true ){
this.remove();
}
}
let registro = document.getElementsByClassName('registro');
for( let i = 0; i < registro.length; i++ ){
registro[i].addEventListener( 'click', eliminar );
}
});
btnTiempos.addEventListener( 'click', function(){
let ventanaTiempos = document.getElementById('ventanaTiempos');
ventanaTiempos.style.width = "200px";
})
btnOcultarVtn.addEventListener( 'click', function(){
ventanaTiempos.style.width = '0px';
})
});
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CRONOS</title>
<link rel="stylesheet" href="styles/style.css">
<script src="scripts/script.js"></script>
</head>
<body>
<h1><span class="js">JS</span><span class="cronos">CRONOS</span><span class="version">v0.1.3</span></h1>
<div class="container">
<div class="controles">
<button id="btnIniciar" class="btn--ctrl">Iniciar</button>
<button id="btnDetener" class="btn--ctrl">Detener</button>
<button id="btnReset" class="btn--ctrl">Resetear</button>
<button id="btnGuardar" class="btn--ctrl">Guardar</button>
</div>
<div class="cronometro">
<div class="contChild"><span class="contador" id="min">00</span></div>
<div><span class="separador"> : </span></div>
<div class="contChild"><span class="contador" id="seg">00</span></div>
<div><span class="separador"> . </span></div>
<div class="contChild"><span class="contador" id="miSeg">00</span></div>
</div>
<div class="tiempos">
<button id="btnTiempos" class="btn--ctrl">Tiempos</button>
</div>
</div>
<p class="atribucion">Foto de <a href="https://unsplash.com/@bradencollum?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Braden Collum</a> en <a href="https://unsplash.com/es/fotos/9HI8UJMSdZA?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a></p>
<div class="ventana--tiempos" id="ventanaTiempos">
<h2 class="tiempos--header" id="btnOcultarVtn">Tiempos</h2>
<div id="registros" class="contenedor--registros"></div> <!-- Los registros se generaran dinamicamente con js -->
</div>
</body>
</html>
CSS:
/* RESET BASICO */
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* TAGS */
body{
font-family: sans-serif;
background-image: url(../images/fondo1.jpg);
background-size: cover;
overflow: hidden;
}
.cronos{
padding: 0px 10px;
background-color: black;
color: rgb(255, 238, 0);
font-weight: lighter;
}
/* CLASES */
.js{
font-size: 18px;
padding: 12px 2px 3px 12px;
background-color: rgb(255, 238, 0);
}
.version{
margin-left: 3px;
font-size: 14px;
font-style: italic ;
}
.container{
display: flex;
justify-content: space-between;
margin-top: 100px;
background-color: black;
opacity: .9;
}
.controles{
display: flex;
flex-direction: column;
}
.btn--ctrl{
display: flex;
font-size: 18px;
padding: 20px;
background-color: yellow;
color: black;
}
.no--implementado{
opacity: .3;
}
.cronometro{
display: flex;
justify-content: end;
/* margin-right: 150px; */
}
.contChild{
text-align: end;
min-width: 260px;
border: solid 14px;
border-radius: 20px;
}
.contador{
font-size: 200px;
color: rgb(255, 238, 0);;
}
.separador{
font-size: 200px;
color: gray;
}
.atribucion{
font-size: 14px;
color:rgb(255, 238, 0);
font-style: italic;
position: fixed;
bottom: 0;
right: 0;
background-color: #050505;
padding: 10px;
}
.atribucion a{
background-color: rgb(255, 238, 0);
color: black;
padding: 1px 10px;
}
.ventana--tiempos{
position: absolute;
top: 0px;
right: 0px;
background-color: rgb(255, 238, 0);;
border-left: black solid 5px;
height: 100vh;
width: 0px;
overflow: auto;
z-index: 10;
transition: .5s;
}
.tiempos--header{
text-align: center;
padding: 10px;
background-color: black;
color:rgb(255, 238, 0);
}
.registro{
border-bottom: black solid;
padding: 5px 0;
}
.registro--fecha{
text-align: center;
font-size: 9px;
font-style: italic
}
.registro--tiempo{
text-align: center;
font-size: 25px;
font-weight: bold;
}