Add files via upload

opentech-pe · Jul 8, 2020 · 7ff5858 · 7ff5858
1 parent 266f7f0
commit 7ff5858
Show file tree

Hide file tree

Showing 9 changed files with 175 additions and 0 deletions.
diff --git a/contador.css b/contador.css
@@ -0,0 +1,64 @@
+html, body{
+    background-color: #F6F6F6;
+
+}
+.titulo{
+    margin-top: 150px;
+}
+h1{
+    font-family: 'Press Start 2P';
+    color: #229BEF;
+    text-shadow: 10px 8px black;
+    text-align: center;
+    font-size: 70px;
+}
+.contenedorEstado{
+    display: flex;
+    justify-content: center;
+}
+.btnLink{
+    background-color: #229BEF;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    padding-left: 5px;
+    padding-right: 5px;
+    padding-top: 2px;
+    padding-bottom: 0px;
+    border: 3px dashed #ABADA8;
+}
+.estadoTxt{
+    color: #F6F6F6;
+    font-family: 'Press Start 2P';
+    margin-left: 5px;
+    font-size: smaller;
+}
+.contenedorContador{
+    display: flex;
+    justify-content: center;
+    margin-top: 50px;
+    margin-bottom: 20px;
+
+}
+.contador{
+    font-family: 'Press Start 2P';
+    color: black;
+    text-shadow: 5px 5px #229BEF;
+    font-size: 40px;
+    padding-top: 15px;
+    padding-bottom: 15px;
+    padding-left: 5px;
+    padding-right: 5px;
+    border: 10px ridge;
+}
+.inputs{
+    text-align: center;
+    margin-top: 25px;
+}
+.botonManip{
+    background-color: #229BEF;
+    border: outset;
+}
+.btnLink{
+    cursor: pointer;
+}
diff --git a/contador.html b/contador.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href='https://fonts.googleapis.com/css?family=Press Start 2P' rel='stylesheet'>
+    <link href='https://fonts.googleapis.com/css?family=VT323' rel='stylesheet'>
+    <link rel="stylesheet" href="contador.css">
+    <title>Contador | OT</title>
+</head>
+<body onload="iniciador()"> 
+    <div class="titulo">
+        <h1>Open Tech</h1>
+    </div>
+    <div class="contenedorContador">
+        <div class="contador" id="contador"></div>
+    </div>
+    <div class="contenedorEstado" id="contenedorEstado">
+        <div class="btnLink" id="btnLink" onclick="ocultar()"> 
+            <div><img id="iconEmision"></div>
+            <div class="estadoTxt"  id="estadoTxt"></div>
+        </div>
+    </div>
+    <div class="inputs" id="inputs">
+        <input type="time" id="tiempo">
+        <button class="botonManip" id="play" onclick="iniciarConteo()"><img src="iconos/play.png" alt="play"></button>
+        <button class="botonManip" id="stop" onclick="detenerConteo()"><img src="iconos/stop.png" alt="detener"></button>
+        <p id="msjError"></p>
+    </div>
+    <script src="contador.js"></script>
+</body>
+</html>
diff --git a/contador.js b/contador.js
@@ -0,0 +1,79 @@
+var iconOffAir = "iconos/fueraLinea.png";
+var iconOnAir = "iconos/enLinea.png";
+var onAirText = "On Air";
+var offAirText = "Off Air";
+var tiempo;
+var horasFaltantes;
+var minutosFaltantes;
+var segundosFaltantes;
+var contando;
+var horaCero = "00:00:00";
+var estado = true;
+function iniciador() {
+    document.getElementById("iconEmision").src=iconOnAir;
+    document.getElementById("estadoTxt").innerHTML=onAirText;
+    document.getElementById("stop").disabled=true;
+    document.getElementById("contador").innerHTML=horaCero;
+}
+
+
+function iniciarConteo() {
+    //capturar la hora final
+    var hora = document.getElementById("tiempo").value;
+    //capturar el tiempo presente
+    var date = new Date();
+    //variable operacional
+    var residuo;
+    //crear el tiempo final
+    var postDate = new Date();
+    var horaFinal = hora.substring(0,2);
+    var minutoFinal = hora.substring(3,5);
+    var segundoFinal = 0;
+    postDate.setHours(horaFinal);
+    postDate.setMinutes(minutoFinal);
+    postDate.setSeconds(segundoFinal)
+    tiempo = Math.abs(postDate - date);
+    //document.getElementById("contador").innerHTML=tiempo;
+    horasFaltantes = Math.trunc(tiempo / 3600000);
+    if (horasFaltantes<10) {
+        horasFaltantes = "0"+horasFaltantes;
+    }
+    residuo = tiempo % 3600000;
+    minutosFaltantes = Math.trunc(residuo / 60000);
+    if (minutosFaltantes<10) {
+        minutosFaltantes = "0"+minutosFaltantes;
+    }
+    residuo = residuo % 60000;
+    segundosFaltantes = Math.trunc(residuo / 1000);
+    if (segundosFaltantes<10) {
+        segundosFaltantes = "0"+segundosFaltantes;
+    }
+    document.getElementById("contador").innerHTML=horasFaltantes+":"+minutosFaltantes+":"+segundosFaltantes;
+    //ejecutar esta misma funcion cada segundo
+    contando = setTimeout(iniciarConteo,1000);
+    document.getElementById("play").disabled=true;
+    document.getElementById("stop").disabled=false;
+    if(horasFaltantes==0 && minutosFaltantes==0 && segundosFaltantes==0 ){
+        detenerConteo();
+    }
+}
+function detenerConteo() {
+    clearTimeout(contando);
+    tiempo = 0;
+    document.getElementById("contador").innerHTML=horaCero;
+    document.getElementById("play").disabled=false;
+}
+
+function ocultar(){
+    switch (estado) {
+        case true:
+            document.getElementById("inputs").style.display='none';    
+            estado = false;
+            break;
+        case false:
+            document.getElementById("inputs").style.display='block';
+            estado = true;
+        default:
+            break;
+    }
+}
diff --git a/iconos/enLinea.png b/iconos/enLinea.png
diff --git a/iconos/fueraLinea.png b/iconos/fueraLinea.png
diff --git a/iconos/pause.png b/iconos/pause.png
diff --git a/iconos/play.png b/iconos/play.png
diff --git a/iconos/stop.png b/iconos/stop.png
diff --git a/iconos/subir.png b/iconos/subir.png