2

Estaría necesitando ayuda con los interruptores de este ventilador que programé.

Éste es el código:

const ventilador = {
    powerAspas: document.getElementById("power"),
    aspas: document.getElementById("aspas"),
    powerRejilla: document.getElementById("rejilla"),
    rejilla: document.getElementById("tapa")
}

let i = 0;

let j = 0;

class artefacto{
    constructor(powerAspas, aspas, powerRejilla, rejilla){
        this.powerAspas = powerAspas;
        this.aspas = aspas;
        this.powerRejilla = powerRejilla;
        this.rejilla = rejilla;
    }
    $girarAspas(){
        if (i == 0){
            ventilador.powerAspas.style.transform = "rotate(60deg)"
            ventilador.aspas.style.animationDuration = "2s";
            i = 1;
        }
        else if (i == 1){
            ventilador.powerAspas.style.transform = "rotate(120deg)"
            ventilador.aspas.style.animationDuration = "1s";
            i = 2;
        }
        else if (i == 2){
            ventilador.powerAspas.style.transform = "rotate(180deg)"
            ventilador.aspas.style.animationDuration = ".5s";
            i = 3;
        }
        else if (i == 3){
            ventilador.powerAspas.style.removeProperty("transform");
            ventilador.aspas.style.animationDuration = "0s";
            i = 0;
        }
    }
    $powerRejilla(){
        if (j == 0){
            ventilador.powerRejilla.style.transform = "rotate(90deg)";
            ventilador.rejilla.style.animationDuration = "32s";
            j = 1;
        }
        else if (j == 1){
            ventilador.powerRejilla.style.removeProperty("transform");
            ventilador.rejilla.style.animationDuration = "0s";
            j = 0;
        }
    }
}

const Ventilador = new artefacto(ventilador.powerAspas, ventilador.aspas, ventilador.powerRejilla, ventilador.rejilla)

ventilador.powerAspas.addEventListener("click", function(){Ventilador.$girarAspas()});

ventilador.powerRejilla.addEventListener("click", function(){Ventilador.$powerRejilla()});
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root{
    --background-color: #222;
}

body{
    background-color: var(--background-color);
    overflow: hidden;
}

main{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

#ventilador{
    height: 450px;
    width: 450px;
    background-color: #eee;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding: 20px;
}

#circulo{
    height: 100%;
    width: 100%;
    border-radius: 100%;
    background-color: var(--background-color);
    display: flex;
    justify-content: center;
    align-items: center;
}

.barras-detras{
    transform: rotate(7.5deg);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.barra-detras{
    background-color: #333;
    height: 400px;
    width: 2px;
    position: absolute;
}

.barra-detras-dos{
    transform: rotate(15deg);
}

.barra-detras-tres{
    transform: rotate(30deg);
}

.barra-detras-cuatro{
    transform: rotate(45deg);
}

.barra-detras-cinco{
    transform: rotate(60deg);
}
.barra-detras-seis{
    transform: rotate(75deg);
}

.barra-detras-siete{
    transform: rotate(90deg);
}

.barra-detras-ocho{
    transform: rotate(105deg);
}

.barra-detras-nueve{
    transform: rotate(120deg);
}

.barra-detras-diez{
    transform: rotate(135deg);
}

.barra-detras-once{
    transform: rotate(150deg);
}

.barra-detras-doce{
    transform: rotate(165deg);
}

.aspas{
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.aspa{
    width: 60px;
    height: 350px;
    background-color: #666;
    position: absolute;
    border-top-right-radius: 40px;
    border-bottom-left-radius: 40px;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.aspa-dos{
    transform: rotate(45deg);
}

.aspa-tres{
    transform: rotate(90deg);
}

.aspa-cuatro{
    transform: rotate(135deg);
}

#tapa{
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 100%;
    border: 10px solid #555;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: rejilla 0s infinite linear;
}

.barras{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.barra{
    background-color: #555;
    height: 400px;
    width: 2px;
    position: absolute;
}

.barra-dos{
    transform: rotate(15deg);
}

.barra-tres{
    transform: rotate(30deg);
}

.barra-cuatro{
    transform: rotate(45deg);
}

.barra-cinco{
    transform: rotate(60deg);
}
.barra-seis{
    transform: rotate(75deg);
}

.barra-siete{
    transform: rotate(90deg);
}

.barra-ocho{
    transform: rotate(105deg);
}

.barra-nueve{
    transform: rotate(120deg);
}

.barra-diez{
    transform: rotate(135deg);
}

.barra-once{
    transform: rotate(150deg);
}

.barra-doce{
    transform: rotate(165deg);
}

.tapita{
    background-color: #555;
    width: 100px;
    height: 100px;
    border-radius: 100%;
    position: absolute;
    box-shadow: 0 0 5px rgba(0, 0, 0, .75);
}

.controles{
    position: absolute;
    width: 450px;
    height: 450px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    padding: 20px;
}

#power{
    width: 25px;
    height: 25px;
    background-color: #ddd;
    border-radius: 100%;
    border: 1px solid #aaa;
    cursor: pointer;
    display: flex;
    padding: 2px;
    justify-content: center;
    align-items: flex-start;
}

#rejilla{
    width: 25px;
    height: 25px;
    background-color: #ddd;
    border-radius: 100%;
    border: 1px solid #aaa;
    cursor: pointer;
    display: flex;
    padding: 2px;
    justify-content: center;
    align-items: flex-start;
}

.indicador{
    background-color: #aaa;
    width: 2px;
    height: 50%;
}

.vel{
    animation-name: vel;
    animation-duration: 0s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes vel{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

@keyframes rejilla{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}
<script src="https://kit.fontawesome.com/bd16a1d5bb.js" crossorigin="anonymous"></script>
<main>
  <div id="ventilador">
    <div id="circulo">
      <div class="barras-detras">
        <div class="barra-detras barra-detras-uno"></div>
        <div class="barra-detras barra-detras-dos"></div>
        <div class="barra-detras barra-detras-tres"></div>
        <div class="barra-detras barra-detras-cuatro"></div>
        <div class="barra-detras barra-detras-cinco"></div>
        <div class="barra-detras barra-detras-seis"></div>
        <div class="barra-detras barra-detras-siete"></div>
        <div class="barra-detras barra-detras-ocho"></div>
        <div class="barra-detras barra-detras-nueve"></div>
        <div class="barra-detras barra-detras-diez"></div>
        <div class="barra-detras barra-detras-once"></div>
        <div class="barra-detras barra-detras-doce"></div>
      </div>
      <div class="aspas vel" id="aspas">
        <div class="aspa aspa-uno"></div>
        <div class="aspa aspa-dos"></div>
        <div class="aspa aspa-tres"></div>
        <div class="aspa aspa-cuatro"></div>
      </div>
      <div class="tapa" id="tapa">
        <div class="barras">
          <div class="barra barra-uno"></div>
          <div class="barra barra-dos"></div>
          <div class="barra barra-tres"></div>
          <div class="barra barra-cuatro"></div>
          <div class="barra barra-cinco"></div>
          <div class="barra barra-seis"></div>
          <div class="barra barra-siete"></div>
          <div class="barra barra-ocho"></div>
          <div class="barra barra-nueve"></div>
          <div class="barra barra-diez"></div>
          <div class="barra barra-once"></div>
          <div class="barra barra-doce"></div>
        </div>
        <div class="tapita"></div>
      </div>
    </div>
    <div class="controles">
      <span id="power">
        <div class="indicador"></div>
      </span>
      <span id="rejilla">
        <div class="indicador"></div>
      </span>
    </div>
  </div>
</main>

Actualmente éste programa funciona con dos interruptores: Uno que hace girar las aspas del ventilador ventilador.powerAspas; y otro que hace girar la rejilla del frente ventilador.powerRejilla.

Sin embargo, lo que busco y no puedo resolver es que el interruptor que hace girar la rejilla ventilador.powerRejilla solo funcione cuando el ventilador esté prendido y que se apague automáticamente cuando el ventilador lo haga (independientemente de si el ventilador.powerRejilla estuvo prendido o apagado de antemano). Desde ya, muchas gracias!

1
  • Mira Cómo preguntar para que tu pregunta sea mejor recibida. También, aprovecha y haz el recorrido de bienvenida para entender mejor cómo funcionamos y de paso obtener tu primera medalla! o sea.. te faltan 2 if... uno cuando prendes la rejilla (que se fije si el ventilador esta girando) y otro cuando se apaga el ventilad (que apague la rejilla)... es simplemente eso, no?
    – gbianchi
    Commented el 13 sept. 2022 a las 16:47

1 respuesta 1

3

Es muy sencillo, agrega a tu clase una propiedad o atributo llamada encendido de tipo booleano con valor por defecto en false.

Al momento de llamar a girarAspas() estableces su valor a true, y sólo lo cambias a false cuando la perilla está en el estado de apagado (i = 3).

Cuando presionas en la perilla de girar la rejilla, verificas el estado de la propiedad encendido, si la misma es false retornas (sales) de la función sin hacer nada más, y si la misma es true puedes encender el giro de la rejilla.

Cuando el ventilador se para, se establece el valor de j en 1, se llama al método de girar la rejilla y se establece encendido a false, de esta forma se apaga tanto el ventilador como la rejilla.

Por ejemplo:

const ventilador = {
    powerAspas: document.getElementById("power"),
    aspas: document.getElementById("aspas"),
    powerRejilla: document.getElementById("rejilla"),
    rejilla: document.getElementById("tapa")
}

let i = 0;

let j = 0;

class artefacto{
    encendido = false;
    rejillaEncendida = false;
    constructor(powerAspas, aspas, powerRejilla, rejilla){
        this.powerAspas = powerAspas;
        this.aspas = aspas;
        this.powerRejilla = powerRejilla;
        this.rejilla = rejilla;
    }
    $girarAspas(){
        this.encendido = true;
        if(this.rejillaEncendida) {
            j = 0;
            this.$powerRejilla();
        }
        if (i == 0){
            
            ventilador.powerAspas.style.transform = "rotate(60deg)"
            ventilador.aspas.style.animationDuration = "2s";
            i = 1;
        }
        else if (i == 1){
            ventilador.powerAspas.style.transform = "rotate(120deg)"
            ventilador.aspas.style.animationDuration = "1s";
            i = 2;
        }
        else if (i == 2){
            ventilador.powerAspas.style.transform = "rotate(180deg)"
            ventilador.aspas.style.animationDuration = ".5s";
            i = 3;
        }
        else if (i == 3){
                        ventilador.powerAspas.style.removeProperty("transform");
            ventilador.aspas.style.animationDuration = "0s";
            i = 0;
            j = 1;
            this.$powerRejilla();
            this.encendido = false;
        }
    }
    $powerRejilla(){
        if(!this.encendido) {
          return;
        }
        if (j == 0){
            ventilador.powerRejilla.style.transform = "rotate(90deg)";
            ventilador.rejilla.style.animationDuration = "32s";
            j = 1;
            this.rejillaEncendida = true;
        }
        else if (j == 1){
            if(i !== 0) {
                this.rejillaEncendida = false;
            }
                  ventilador.powerRejilla.style.removeProperty("transform");
            ventilador.rejilla.style.animationDuration = "0s";
            j = 0;
        }
    }
}

const Ventilador = new artefacto(ventilador.powerAspas, ventilador.aspas, ventilador.powerRejilla, ventilador.rejilla)

ventilador.powerAspas.addEventListener("click", function(){Ventilador.$girarAspas()});

ventilador.powerRejilla.addEventListener("click", function(){Ventilador.$powerRejilla()});
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root{
    --background-color: #222;
}

body{
    background-color: var(--background-color);
    overflow: hidden;
}

main{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

#ventilador{
    height: 450px;
    width: 450px;
    background-color: #eee;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding: 20px;
}

#circulo{
    height: 100%;
    width: 100%;
    border-radius: 100%;
    background-color: var(--background-color);
    display: flex;
    justify-content: center;
    align-items: center;
}

.barras-detras{
    transform: rotate(7.5deg);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.barra-detras{
    background-color: #333;
    height: 400px;
    width: 2px;
    position: absolute;
}

.barra-detras-dos{
    transform: rotate(15deg);
}

.barra-detras-tres{
    transform: rotate(30deg);
}

.barra-detras-cuatro{
    transform: rotate(45deg);
}

.barra-detras-cinco{
    transform: rotate(60deg);
}
.barra-detras-seis{
    transform: rotate(75deg);
}

.barra-detras-siete{
    transform: rotate(90deg);
}

.barra-detras-ocho{
    transform: rotate(105deg);
}

.barra-detras-nueve{
    transform: rotate(120deg);
}

.barra-detras-diez{
    transform: rotate(135deg);
}

.barra-detras-once{
    transform: rotate(150deg);
}

.barra-detras-doce{
    transform: rotate(165deg);
}

.aspas{
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.aspa{
    width: 60px;
    height: 350px;
    background-color: #666;
    position: absolute;
    border-top-right-radius: 40px;
    border-bottom-left-radius: 40px;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.aspa-dos{
    transform: rotate(45deg);
}

.aspa-tres{
    transform: rotate(90deg);
}

.aspa-cuatro{
    transform: rotate(135deg);
}

#tapa{
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 100%;
    border: 10px solid #555;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: rejilla 0s infinite linear;
}

.barras{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.barra{
    background-color: #555;
    height: 400px;
    width: 2px;
    position: absolute;
}

.barra-dos{
    transform: rotate(15deg);
}

.barra-tres{
    transform: rotate(30deg);
}

.barra-cuatro{
    transform: rotate(45deg);
}

.barra-cinco{
    transform: rotate(60deg);
}
.barra-seis{
    transform: rotate(75deg);
}

.barra-siete{
    transform: rotate(90deg);
}

.barra-ocho{
    transform: rotate(105deg);
}

.barra-nueve{
    transform: rotate(120deg);
}

.barra-diez{
    transform: rotate(135deg);
}

.barra-once{
    transform: rotate(150deg);
}

.barra-doce{
    transform: rotate(165deg);
}

.tapita{
    background-color: #555;
    width: 100px;
    height: 100px;
    border-radius: 100%;
    position: absolute;
    box-shadow: 0 0 5px rgba(0, 0, 0, .75);
}

.controles{
    position: absolute;
    width: 450px;
    height: 450px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    padding: 20px;
}

#power{
    width: 25px;
    height: 25px;
    background-color: #ddd;
    border-radius: 100%;
    border: 1px solid #aaa;
    cursor: pointer;
    display: flex;
    padding: 2px;
    justify-content: center;
    align-items: flex-start;
}

#rejilla{
    width: 25px;
    height: 25px;
    background-color: #ddd;
    border-radius: 100%;
    border: 1px solid #aaa;
    cursor: pointer;
    display: flex;
    padding: 2px;
    justify-content: center;
    align-items: flex-start;
}

.indicador{
    background-color: #aaa;
    width: 2px;
    height: 50%;
}

.vel{
    animation-name: vel;
    animation-duration: 0s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes vel{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

@keyframes rejilla{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}
<script src="https://kit.fontawesome.com/bd16a1d5bb.js" crossorigin="anonymous"></script>
<main>
  <div id="ventilador">
    <div id="circulo">
      <div class="barras-detras">
        <div class="barra-detras barra-detras-uno"></div>
        <div class="barra-detras barra-detras-dos"></div>
        <div class="barra-detras barra-detras-tres"></div>
        <div class="barra-detras barra-detras-cuatro"></div>
        <div class="barra-detras barra-detras-cinco"></div>
        <div class="barra-detras barra-detras-seis"></div>
        <div class="barra-detras barra-detras-siete"></div>
        <div class="barra-detras barra-detras-ocho"></div>
        <div class="barra-detras barra-detras-nueve"></div>
        <div class="barra-detras barra-detras-diez"></div>
        <div class="barra-detras barra-detras-once"></div>
        <div class="barra-detras barra-detras-doce"></div>
      </div>
      <div class="aspas vel" id="aspas">
        <div class="aspa aspa-uno"></div>
        <div class="aspa aspa-dos"></div>
        <div class="aspa aspa-tres"></div>
        <div class="aspa aspa-cuatro"></div>
      </div>
      <div class="tapa" id="tapa">
        <div class="barras">
          <div class="barra barra-uno"></div>
          <div class="barra barra-dos"></div>
          <div class="barra barra-tres"></div>
          <div class="barra barra-cuatro"></div>
          <div class="barra barra-cinco"></div>
          <div class="barra barra-seis"></div>
          <div class="barra barra-siete"></div>
          <div class="barra barra-ocho"></div>
          <div class="barra barra-nueve"></div>
          <div class="barra barra-diez"></div>
          <div class="barra barra-once"></div>
          <div class="barra barra-doce"></div>
        </div>
        <div class="tapita"></div>
      </div>
    </div>
    <div class="controles">
      <span id="power">
        <div class="indicador"></div>
      </span>
      <span id="rejilla">
        <div class="indicador"></div>
      </span>
    </div>
  </div>
</main>

Edición

Si deseas guardar el estado de la rejilla, basta con agregar otra variable booleana para ello. Por ejemplo, podemos crear una variable llamada rejillaEncendida de tipo booleana también, por defecto en false. Al encender la rejilla, su valor cambia a true y se mantiene así aunque se apague el ventilador. El valor de esta variable cambiará sólo si se apaga la rejilla desde la perilla de la rejilla y no de la perilla del ventilador.

Espero que esto te ayude a resolver el problema.

4
  • Mauricio gracias por la ayuda. El código que pasaste soluciona uno de los problemas pero aun queda el mas complicado desde mi punto de vista, la idea es que el ventilador.powerRejilla recuerde su estado aun cuando el ventilador se apaga o se prende (creo que no me expliqué del todo en mi solicitud). Commented el 13 sept. 2022 a las 18:17
  • Paso a explicarlo con un ejemplo: Si el ventilador está apagado, y prendo el ventilador.powerRejilla, la rejilla no debería girar hasta que el ventilador se prenda (una vez que este se prende, la rejilla empezaria a girar automaticamente). Y viceversa, si el ventilador se apaga y ventilador.powerRejilla estaba prendido, la rejilla debe detenerse, pero volver a girar si el ventilador vuelve a prenderse (siempre y claro ventilador.powerRejilla no se haya cambiado a apagado en el transcurso del tiempo). Commented el 13 sept. 2022 a las 18:19
  • @LucasRetamozo he editado la respuesta para agregar la funcionalidad de mantener el estado de la rejilla. Commented el 13 sept. 2022 a las 19:27
  • Ahí me fijé, muchísimas gracias por la ayuda!!! Commented el 13 sept. 2022 a las 19:44

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.