mentorrolling · mentorrolling · Dec 16, 2021 · Dec 17, 2021 · Dec 17, 2021 · Dec 18, 2021
diff --git a/Tareas/Cronometro/app.js b/Tareas/Cronometro/app.js
@@ -0,0 +1,94 @@
+/*Realizar una web con un cronómetro,
+que tenga las opciones de iniciar,
+reset(volver el cronómetro a 0) y pausar.
+*/
+
+let buttonStart = document.querySelector('#start');
+let buttonClear = document.querySelector('#clear');
+let buttonPause = document.querySelector('#pause');
+let tiempo = document.querySelector('#tiempo')
+let segundero = null
+let inicioStart = false
+
+let hr = 0
+let min = 0
+let seg = 0
+
+
+const dibujar = function () {
+
+    let tiempo = document.querySelector('#tiempo')
+    let horario = ``
+
+    if (hr < 10) {
+        horario = `0${hr}:`    
+
+        //tiempo.innerText=`0${hr}:0${min}:0${seg}`
+    } else {
+        horario=`${hr}:`
+    }
+    if (min < 10) {
+        horario=horario+`0${min}:`    
+        //tiempo.innerText=`0${hr}:0${min}:0${seg}`
+    } else {
+        horario=horario+`${min}:`
+    }
+    if (seg < 10) {
+        horario=horario+`0${seg}`    
+        //tiempo.innerText=`0${hr}:0${min}:0${seg}`
+    } else {
+        horario=horario+`${seg}`
+    }
+
+    tiempo.innerText=horario
+
+}
+
+
+const start = function () {
+
+    if (inicioStart === false) {
+
+
+        segundero = setInterval(function () {
+
+            seg += 1
+
+            if (seg === 60) {
+                seg = 0
+                min += 1
+                if (min === 60) {
+                    min = 0
+                    hr += 1
+                }
+            }
+
+            dibujar()
+        }), 1000;
+        inicioStart = true
+    }
+}
+
+const pause = function () {
+    clearInterval(segundero);
+    inicioStart = false;
+}
+
+const clear = function () {
+
+    seg = 0
+    min = 0
+    hr = 0
+
+    clearInterval(segundero);
+    inicioStart = false;
+    dibujar()
+
+}
+
+
+
+
+buttonClear.addEventListener('click', clear)
+buttonStart.addEventListener('click',start)
+buttonPause.addEventListener('click',pause)
diff --git a/Tareas/Cronometro/index.html b/Tareas/Cronometro/index.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <!-- Bootstrap CSS -->
+
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+    <link rel="stylesheet" href="style.css">
+    <title>Hello, world!</title>
+  </head>
+  <body>
+
+
+      <div class="container-fluid">
+        <div class="row-cols col-sm-5 offset-sm-3">
+
+      <div class="card-body" id="cronometro">
+        <h5 class="card-title d-flex justify-content-center" id="tiempo" >00:00:00</h5>
+        <div class="row-cols">
+        <div class="btn-group col-12 " role="group" aria-label="Basic radio toggle button group">
+
+          <label class="btn btn-outline-primary" id="clear" for="btnradio1">Clear</label>
+
+          <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
+          <label class="btn btn-outline-primary" id="start" for="btnradio2">Start</label>
+
+          <input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
+          <label class="btn btn-outline-primary" id="pause" for="btnradio3">Pause</label>
+        </div>
+      </div>
+    </div>
+    </div>   
+  </div>
+
+    <script src="app.js"></script>
+  </body>
+</html>
diff --git a/Tareas/Cronometro/style.css b/Tareas/Cronometro/style.css
@@ -0,0 +1,17 @@
+body {
+  background-color: bisque;
+}
+.container-fluid{
+  margin-top: 150px;  
+
+}
+
+#cronometro {
+  background-color: white;  
+  margin: 0px;
+
+}
+#tiempo{
+  margin: 50px;
+  font-size:5rem;
+}
diff --git a/Tareas/Numero_Magico/app.js b/Tareas/Numero_Magico/app.js
@@ -0,0 +1,107 @@
+//Crea una web con bootstrap y js, que contenga un botón comenzar el juego,
+//en ese momento se crea un número aleatorio que el usuario deberá adivinar, la
+//interfaz del usuario debe tener además un input para ingresar un número y un botón enviar,
+//al presionar el botón enviar mostrar en un alert si el usuario adivino o no el número mágico,
+//si no lo adivino indicarle con un alert si el numero que ingreso es mayor o menor al número mágico.
+//Cuando el usuario adivine el numero mostrar un mensaje indicando al usuario que adivino el numero.
+
+let jugadorInput = document.querySelector("#jugadorInput")
+let jugadorButton = document.querySelector("#jugadorButton")
+let gameConcepto = document.querySelector("#game")
+let historial = []
+let score = 0
+
+
+
+
+const numeroRandom = function () {
+
+  return Math.round(Math.random() * 20)
+}
+
+let cpu = numeroRandom();
+console.log(cpu)
+
+const game = function () {
+  if (jugadorInput.value == cpu) {
+
+    if (confirm(`Ganaste Puntos: ${score+1} Quieres volver a jugar?`)) {
+
+      location.reload()
+    }
+  }else{
+    rango()
+    }
+}
+
+const rango = function () {
+  if (jugadorInput.value < cpu) {
+
+    alert("El valor ingresado es menor")
+  } else {
+    alert("El valor ingresado es mayor")
+  }
+}
+
+const mostrarHistorial = function () {
+  const scoreMuestra = document.createElement("div");
+  let htmlSocre = `
+  <div class="card row">
+  <div class="card-body col">
+            <h5>Puntos: ${++score}</h5>
+        </div>
+    </div>
+
+  `
+  scoreMuestra.innerHTML=htmlSocre
+  gameConcepto.appendChild(scoreMuestra)
+
+  historial.map(function (historia, i) {
+
+    const cardHistorial = document.createElement("div");
+
+    let historialMuestra = `
+    <div class="card row">
+
+    <div class="card-body col offset-5">
+            <h5>${i+1} - ${historia}</h5>
+        </div>
+    </div>
+
+  `
+    cardHistorial.innerHTML = historialMuestra;
+    gameConcepto.appendChild(cardHistorial)
+
+
+  })
+
+}
+
+const agregarHistorial = function () {
+  if (historial.length === 5) {
+    historial.splice(0, 1)
+    historial.push(jugadorInput.value)
+  }else{
+    historial.push(jugadorInput.value)
+  }
+  gameConcepto.innerHTML=""
+  mostrarHistorial()
+}
+
+
+const enviarInfo = function (e) {
+  if(e.keyCode === 13 && parseInt(jugadorInput.value)
+     || e.button===0 && parseInt(jugadorInput.value)){
+    game();
+    agregarHistorial()
+
+    jugadorInput.value = ""
+  }
+}
+
+
+jugadorInput.addEventListener("keypress", enviarInfo)
+jugadorButton.addEventListener("click", enviarInfo)
+
+
+
diff --git a/Tareas/Numero_Magico/img/numeroMagico.png b/Tareas/Numero_Magico/img/numeroMagico.png
diff --git a/Tareas/Numero_Magico/index.html b/Tareas/Numero_Magico/index.html
@@ -0,0 +1,58 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <!-- Bootstrap CSS -->
+
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+    <link rel="stylesheet" href="style.css">
+    <title>Hello, world!</title>
+  </head>
+  <body>
+
+    <div class="container">
+      <div class="row">
+      <div class="card col-6 offset-3 ">
+        <div class="row">
+        <img src="./img/numeroMagico.png" class="card-img-top col numeroMagico" alt="numeroMagico">
+        <div class="card-body">
+          <h5 class="card-title col offset-1">Ingrese un numero del 1 al 20 a ver si adivina =D</h5>
+
+            <div class="input-group mb-3 row justify-content-center mt-4">
+              <input type="text" id="jugadorInput" class="col-6" placeholder="Ingresar numero" aria-describedby="button-addon2">
+              <button class="btn btn-outline-secondary col-2" id="jugadorButton" type="button" id="button-addon2">Button</button>
+            </div>
+            <div id="game">
+
+
+            </div>
+
+
+
+          <!-- <input type="text" class="col-6" >
+          <input type="button" value="">
+          <!-- <p class="card-text col-6">.</p> -->
+          <!-- <a href="#" class="btn btn-primary col-3 offset-2">Enviar</a> --> 
+
+        </div>
+      </div>
+      </div>
+      </div>
+      <!-- <div class="row">
+        <div class="col-6">
+
+          <h1>Hello, world!</h1>
+        </div>
+        <div class="col-6">
+          <h1>Hello, world!</h1>
+        </div> -->
+      </div>
+    </div>
+
+
+    <script src="app.js"></script>
+  </body>
+</html>
diff --git a/Tareas/Numero_Magico/style.css b/Tareas/Numero_Magico/style.css
@@ -0,0 +1,14 @@
+body {
+  background-color: bisque;
+}
+.card-tareas {
+  margin-top: 50px;
+  align-items: center;
+}
+.container {
+  background-color:bisque;
+  margin-top: 150pt;
+}
+.numeroMagico {
+    width: 400px;
+}
diff --git a/fotogram/.vscode/settings.json b/fotogram/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5501
+}
diff --git a/fotogram/css/style.css b/fotogram/css/style.css
@@ -0,0 +1,27 @@
+.contenedor_login {
+  height: 100vh;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.login_img {
+  width: 100%;
+  height: 150px;
+  object-fit: cover;
+}
+
+.login_link {
+  text-decoration: none;
+}
+
+.card-fixed {
+  position: fixed;
+  margin-right: 20px;
+}
+
+.avatar {
+  width: 80px;
+  border-radius: 100%;
+}
diff --git a/fotogram/img/portada.jpg b/fotogram/img/portada.jpg