[Johnny Palaguachi]

Hola Grupo comparto mis respuestas a Retos 4-segunda parte, para finalizar esta semana.

• Esta respuesta fue modificada 2 años, 1 mes por  Johnny Palaguachi.

Reto2objetoE.html 4 KB HTML - Click to view

• Copy Download Link

<title>Registro de Temperaturas Cancun</title> <h1>RETO 2 OBJETOS ESTANDAR JAVASCRIPT</h1> <section id="contenedor"> <section id="contenedorInterno"> <div id="opcionAgregar"> Ingrese Temperatura en Grados centigramos: °C <button type="button">Agregar Temperatura </button> </div> <table id="tabla1"> <caption> Datos obtenidos de las Temperaturas registradas. </caption> <tr> <td>Variables</td> <th>T. máxima</th> <th>T. minima</th> <th>varianza</th> <th>Desviación Estandar</th> <th>Promedio</th> </tr> <tr> <td>Valores</td> <th id="R1"></th> <th id="R2"></th> <th id="R3"></th> <th id="R4"></th> <th id="R5"></th> </tr> </table> </section> <aside> <table id="tabla2"> <caption> Registro de Temperaturas. </caption> <tr> <td>Hora</td> <th>Temperatura</th> </tr> <tr> <td id="N1"></td> <th id="C1"></th> </tr> <tr> <td id="N2"></td> <th id="C2"></th> </tr> <tr> <td id="N3"></td> <th id="C3"></th> </tr> <tr> <td id="N4"></td> <th id="C4"></th> </tr> <tr> <td id="N5"></td> <th id="C5"></th> </tr> <tr> <td id="N6"></td> <th id="C6"></th> </tr> <tr> <td id="N7"></td> <th id="C7"></th> </tr> <tr> <td id="N8"></td> <th id="C8"></th> </tr> <tr> <td id="N9"></td> <th id="C9"></th> </tr> <tr> <td id="N10"></td> <th id="C10"></th> </tr> <tr> <td id="N11"></td> <th id="C11"></th> </tr> <tr> <td id="N12"></td> <th id="C12"></th> </tr> <tr> <td id="N13"></td> <th id="C13"></th> </tr> <tr> <td id="N14"></td> <th id="C14"></th> </tr> <tr> <td id="N15"></td> <th id="C15"></th> </tr> <tr> <td id="N16"></td> <th id="C16"></th> </tr> <tr> <td id="N17"></td> <th id="C17"></th> </tr> <tr> <td id="N18"></td> <th id="C18"></th> </tr> <tr> <td id="N19"></td> <th id="C19"></th> </tr> <tr> <td id="N20"></td> <th id="C20"></th> </tr> <tr> <td id="N21"></td> <th id="C21"></th> </tr> <tr> <td id="N22"></td> <th id="C22"></th> </tr> <tr> <td id="N23"></td> <th id="C23"></th> </tr> <tr> <td id="N24"></td> <th id="C24"></th> </tr> </table> </aside> </section>

Expand

Reto2objetosE.js 6 KB JavaScript - Click to view

• Copy Download Link

/* En la ciudad de Cancún se llevó a cabo un registro de la temperatura alcanzada en verano cada hora durante un día. Las temperaturas fueron ingresadas de manera ordenada, siendo la primera correspondiente a las 12:00hrs y la última a las 23:00hrs Encuentra la temperatura promedio registrada, así como la temperatura máxima y la temperatura mínima con el horario en el cual se registraron. Adicional a estos datos, se requiere obtener la varianza y la desviación estándar de las temperaturas. Datos: Temperatura Donde: Temperatura: Variable de entrada que representa la temperatura registrada en una hora determinada Consideraciones: Se debe visualizar en una tabla el registro de todas las temperaturas ingresadas. El contenido de la tabla debe actualizarse con cada temperatura registrada Los valores de promedio, temperatura máxima, temperatura mínima, varianza y desviación estándar deben irse actualizando constantemente con cada nueva temperatura ingresada y deben ser visualizadas a partir de la segunda temperatura registrada. */ const Temp=[]; /*Aqui se guardan las Temperaturas ingresadas por el usuario */ const horas=["00:00", "01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00", "12:00", "13:00", "14:00","15:00","16:00","17:00","18:00","19:00","20:00","21:00","22:00","23:00"];/*array de horas para facilitar el ingreso ordenado */ /*array que contienen el rango para facilitar el codigo */ /*Contructor recibe a=array de temperaturas , l=longuitud del array Temperatura,*/ let temperatura = (a, l) => { return{ promedio: function() { /*Suma elementos de array a y devuelve promedio*/ let suma=0; for(var k=0; k<=l-1; k++){ suma=suma+a[k]; } prom=suma/(l); return prom; }, Tmin: function() { /*Funcion que encuentra el valor minimo de un array a de longuitud l*/ let=min=100; for(var i=0; i<=l-1; i++){ if (a[i]<min){ min=a[i]; hmin=i; } } return hmin; }, Tmax: function() { /*Funcion que encuentra el valor maximo de un array a de longuitud l*/ let=max=0; for(var j=0; jmax){ max=a[j]; maxvar=j; } } return maxvar; }, varianza: function() { /*Funcion que encuentra la varianza de un array a de longuitud l*/ let suma1=0; for(var v=0; v<=l-1; v++){ suma1=suma1+a[v]; } media=suma1/(l) /*calculamos la media */ let suma2=0 for(var item=0; item<=l-1; item++){/*Realizamos la suma de las diferencia de cuadrados */ aux=a[item]-media suma2=suma2+Math.pow(aux,2); } varianza=suma2/l; /*Dividimos para el numero de datos */ return varianza }, } } function ejecutar () { /* crea objetos, Actualiza temperatura, temperturas minimas, maximos, promedio*/ l=Temp.length; /*calcula la longuitud del array Temp (numero de temperaturas registradas) */ const objtemperatura = temperatura(Temp, l);/*construye un objeto */ for(var y=1; y<=l; y++){ /*ciclo que actualiza las horas de registro de temperatura*/ document.getElementById('N'+y).innerHTML=horas[y-1]; } for(var x=1; x=24){ /*Si el arreglo contiene mads de 24registros mostrara alerta que no se guardara mas*/ alert('La cantidad maxima de registros es 24! \n No puede ingresar mas'); } else{ /*Agrega los datos del registro a los arrays respectivos y llama actualizar los datos por medio de ejecutar*/ newTemp = new Number(newTemp); Temp.push(newTemp); ejecutar(); } }

Expand

style-1.css 993 B CSS - Click to view

• Copy Download Link

*{ font-family: arial; font-size: 16px; box-sizing:border-box ; } h1 { font-size: 20px; text-align: center; } #contenedor{ max-width: 100%; margin-top: 25px; margin-bottom: 25px; display: flex; } #contenedorInterno{ flex-grow: 1; padding: 10px; margin-left: 50px; } #opcionAgregar{ margin-top: 10px; margin-bottom: 25px; } #newnom{ width: 170px; } #tabla1 { border: 1px solid #000; justify-content: center; } #contenedor aside{ margin-right: 100px; width: 300px; padding: 10px; } #tabla2 { border: 1px solid #000; justify-content: center; } tr, th { width: 15%; text-align: center; vertical-align: center; border: 1px solid #000; border-collapse: collapse; padding: 0.25em; } caption { padding: 0.3em; color: #fff; background: #000; } td { width: 25%; background: #eee; } button { margin-top: 15px; } input { width: 50px; }

Expand