tanques2.0/script.js at main · jose01gr/tanques2.0 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
// se definen las variables a utilizar
const capacidad1 = 5000; // la capacidad de litros del tanque 1
const capacidad2 = 4000; // capacidad de litros del tanque 2
let contenido1 = 5000; // contenido que tiene el tanque 1
let contenido2 = 0; // cantidad de liquido que tiene el tanque 2
let interval1; // intervalo de tiempo para el llenado y vaciado del tanque 1
let interval2; // intervalo de tiempo para el llenado y vaciado del tanque 2
animacion = false; // booleano que nos dice si la animacion se esta realizando
let reloj; // variable para el reloj digital
let ejecucion = false; // valor booleano que nos dice si el sistema esta en ejecucion
let segundosTotales = 0;


// se definen las funciones a utilizar
//funcion para actualizar el reloj cada segundo
    const actualizarTemporizador = () => {
            const horas = Math.floor(segundosTotales / 3600).toString().padStart(2, '0');
            const minutos = Math.floor((segundosTotales % 3600) / 60).toString().padStart(2, '0');
            const segundos = (segundosTotales % 60).toString().padStart(2, '0');
            document.getElementById('tiempo').textContent = `${horas}:${minutos}:${segundos}`;
        };

    //funcion para actualizar el porcentaje del tanque 1
    const actualizarTanque1 = () => {
      const porcentaje1 = (contenido1 / capacidad1) * 100;
      const litros1 = contenido1;
      document.getElementById('tanque1').textContent = `${porcentaje1.toFixed(2)}% (${litros1.toFixed(2)} litros)`;

      const alturaAgua1 = (contenido1 / capacidad1) * 100;
      document.getElementById('agua1').style.height = alturaAgua1 + "%";
};

    //funcion para actualizar el porcentaje del tanque 2
    const actualizarTanque2 = () => {
      const porcentaje2 = (contenido2 / capacidad2) * 100;
      const litros2 = contenido2;
      document.getElementById('tanque2').textContent = `${porcentaje2.toFixed(2)}% (${litros2.toFixed(2)} litros)`;

      const alturaAgua2 = (contenido2 / capacidad2) * 100;
      document.getElementById('agua2').style.height = alturaAgua2 + "%";
};

    //funcion para el llenado de los tanques
    const llenarTanque1 = () => {
      const llave1 = parseInt(document.getElementById('llave1').value);
      if(isNaN(llave1)){ //si no se ingresa ningun valor, entonces se toma como 0
        llave1 = 0;
      }
      const velocidadLlenado1 = Math.floor(Math.random() * llave1);
      contenido1 += velocidadLlenado1;


      if (contenido1 >= capacidad1 * 0.75) { //verifica que el agua no sobrepase el 75% de capacidad
        contenido1 = capacidad1 * 0.75;
        clearInterval(interval1);
        interval2 = setInterval(llenarTanque2, 1000);
        document.getElementById('llave1llenado').style.opacity = 0;
        document.getElementById('llave1vaciado').style.opacity = 1;
        document.getElementById('llave2llenado').style.opacity = 1;
        document.getElementById('llave2vaciado').style.opacity = 0;
        document.getElementById('llave3llenado').style.opacity = 0;
        document.getElementById('llave3vaciado').style.opacity = 1;
      }
      if (contenido1 >= capacidad1) {
        contenido1 = capacidad1;


      }

      actualizarTanque1();

    };

    const llenarTanque2 = () => {
      const llave2 = parseInt(document.getElementById('llave2').value);
      if(isNaN(llave2)){
        llave2 = 0;
      }
      const velocidadLlenado2 = Math.floor(Math.random() * llave2);
      contenido2 += velocidadLlenado2;
      contenido1 -= velocidadLlenado2;


      if (contenido2 >= capacidad2 * 0.75) {
        contenido2 = capacidad2 * 0.75;
        clearInterval(interval2);
        interval2 = setInterval(vaciarTanque2, 1000);
        document.getElementById('llave1llenado').style.opacity = 0;
        document.getElementById('llave1vaciado').style.opacity = 1;
        document.getElementById('llave2llenado').style.opacity = 0;
        document.getElementById('llave2vaciado').style.opacity = 1;
        document.getElementById('llave3llenado').style.opacity = 1;
        document.getElementById('llave3vaciado').style.opacity = 0;
      }
      if (contenido1 <= capacidad1 * 0.5) {
        contenido1 = capacidad1 * 0.5;
        clearInterval(interval2);
        interval1 = setInterval(llenarTanque1, 1000);
        document.getElementById('llave1llenado').style.opacity = 1;
        document.getElementById('llave1vaciado').style.opacity = 0;
        document.getElementById('llave2llenado').style.opacity = 0;
        document.getElementById('llave2vaciado').style.opacity = 1;
        document.getElementById('llave3llenado').style.opacity = 0;
        document.getElementById('llave3vaciado').style.opacity = 1;
      }
      if (contenido2 >= capacidad2) {
        contenido2 = capacidad2;

      }

      actualizarTanque2();
      actualizarTanque1();


    };

    const vaciarTanque2 = () => {
      const llave3 = parseInt(document.getElementById('llave3').value);
      if(isNaN(llave3)){
        llave3 = 0;
      }
      const velocidadVaciado2 = Math.floor(Math.random() * llave3);
      contenido2 -= velocidadVaciado2;

      if (contenido2 <= capacidad2 * 0.5) {
        contenido2 = capacidad2 * 0.5;
        clearInterval(interval2);
        interval1 = setInterval(llenarTanque1, 1000);
        document.getElementById('llave2llenado').style.opacity = 0;
        document.getElementById('llave2vaciado').style.opacity = 1;
        document.getElementById('llave1llenado').style.opacity = 1;
        document.getElementById('llave1vaciado').style.opacity = 0;
        document.getElementById('llave3llenado').style.opacity = 0;
        document.getElementById('llave3vaciado').style.opacity = 1;
      }

      actualizarTanque2();

    };

    //Boton para iniciar el sistema
    document.getElementById('iniciar').addEventListener('click', () => {

      const llave1 = parseInt(document.getElementById('llave1').value);
      const llave2 = parseInt(document.getElementById('llave2').value);
      const llave3 = parseInt(document.getElementById('llave3').value);


      if (llave1 >= 1 && llave1 <= 400 && llave2 >= 1 && llave2 <= 500 && llave3 >= 1 && llave3 <= 600) {

        interval1 = setInterval(llenarTanque1, 1000);
        animacion = true;
        if (!ejecucion) {
          ejecucion = true;
          reloj = setInterval(() => {
            segundosTotales++;
            actualizarTemporizador();
          }, 1000);
        }
      } else {

        alert('Por favor, ingrese valores validos para los campos de entrada.');
      }
    });


    //funcion para reiniciar el sistema
    document.getElementById('detener').addEventListener('click', () => {
      clearInterval(interval1);
      clearInterval(interval2);
      contenido1 = 5000;
      contenido2 = 0;
      actualizarTanque1();
      actualizarTanque2();
      document.getElementById('llave2llenado').style.opacity = 0;
      document.getElementById('llave2vaciado').style.opacity = 1;
      document.getElementById('llave1llenado').style.opacity = 0;
      document.getElementById('llave1vaciado').style.opacity = 1;
      document.getElementById('llave3llenado').style.opacity = 0;
      document.getElementById('llave3vaciado').style.opacity = 1;
      animacion = false;
      if (ejecucion) {
                    ejecucion = false;
                    clearInterval(reloj);
                    segundosTotales = 0;
                    actualizarTemporizador();
                }


    });