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.