Traffic lights on vue.js doesn't work, how to solve? - html

Question

I created a traffic light using vue.js, but it doesn't work. It should display the colours (red, yellow and green) according to the time duration. Is there a problem that I've missed?
CSS
#screen {
width: 450px;
height: 740px;
background: #222;
border-radius: 12px;
margin: auto;
padding: 23px;
}
.light {
width: 230px;
height: 270px;
display: inline-block;
opacity: 0.2;
border-radius: 100%;
transition: opacity 10s;
margin-bottom: 12px;
}
.active {
opacity: 1;
}
.red {
background: red;
}
.yellow {
background: yellow;
}
.green {
background: green;
}
My HTMl
I've created the divs.
<div id="screen">
<div id="light red" :class="{active: now=='red'}"></div>
<div id="light yellow" :class="{active: now=='yellow'}"></div>
<div id="light green" :class="{active: now=='green'}"></div>
</div>
and this is vue.js
It seems like everything on it's place and console doesn't send any error.
But I still can't understand, why it isn't working?
class State {
constructor(name, dur, next){
this.name = name;
this.dur = dur;
this.next = next;
}
}
class Constroller {
trigger(state, callback){
callback(state);
setTimeout(()=>{
this.trigger(state.next, callback);
}, state.dur * 10)
}
}
var app = new Vue({
el: '#screen',
data:{
now: 'red'
},
mounted(){
var constroller = new Constroller();
var red = new State('red', 2);
var yellowRed = new State('yellow', 1);
var yellowGreen = new State('yellow', 1);
var green = new State('green', 3);
red.next = yellowRed;
yellowR.next = green;
green.next = yellowGreen;
yellowG.next = red;
constroller.trigger(red, (state)=>{
this.now = state.name;
});
}
})
Am I missing smth? Should I rewrite my function?

Answer 1

Well there are several things wrong here:
<div id="light red" :class="{active: now=='red'}"></div>
<div id="light yellow" :class="{active: now=='yellow'}"></div>
<div id="light green" :class="{active: now=='green'}"></div>
Should be class instead of id.
var red = new State('red', 2);
var yellowRed = new State('yellow', 1);
var yellowGreen = new State('yellow', 1);
var green = new State('green', 3);
red.next = yellowRed;
yellowR.next = green;
green.next = yellowGreen;
yellowG.next = red;
You named yellowRed and yellowGreen but then used yellowR and YellowG
Anyway, I made a quick fiddle here https://jsfiddle.net/Lo50j4rw/ that you can check out, I also tweak some duration stuff.
Also, at least in my country the light goes green after red :D

Answer 2

Your main problem is that you used id where you should have used class for your HTML light elements. You also had weird choices for timing: each light had a very short duration, but the transition was 10 seconds.
Fixing those, you get this:
class State {
constructor(name, dur, next) {
this.name = name;
this.dur = dur;
this.next = next;
}
}
class Constroller {
trigger(state, callback) {
callback(state);
setTimeout(() => {
this.trigger(state.next, callback);
}, state.dur * 1000)
}
}
new Vue({
el: '#screen',
data: {
now: 'red'
},
mounted() {
var constroller = new Constroller();
var red = new State('red', 2);
var yellowRed = new State('yellow', 1);
var yellowGreen = new State('yellow', 1);
var green = new State('green', 3);
red.next = yellowRed;
yellowRed.next = green;
green.next = yellowGreen;
yellowGreen.next = red;
constroller.trigger(red, (state) => {
this.now = state.name;
});
}
})
#screen {
width: 450px;
height: 740px;
background: #222;
border-radius: 12px;
margin: auto;
padding: 23px;
}
.light {
width: 230px;
height: 270px;
display: inline-block;
opacity: 0.2;
border-radius: 100%;
transition: opacity 0.3s;
margin-bottom: 12px;
background-color: white;
}
.active {
opacity: 1;
}
.red {
background: red;
}
.yellow {
background: yellow;
}
.green {
background: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="screen">
<div class="light red" :class="{active: now=='red'}"></div>
<div class="light yellow" :class="{active: now=='yellow'}"></div>
<div class="light green" :class="{active: now=='green'}"></div>
</div>