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!