Skip to content

Commit ffab903

Browse files
sylvain-farnaultsylvain-farnault
committed
end day wesbos#3 
1 parent 4333711 commit ffab903

3 files changed

Lines changed: 55 additions & 10 deletions

File tree

‎10 - Hold Shift and Check Checkboxes/index-START.html‎

Lines changed: 36 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -58,44 +58,71 @@
5858
-->
5959
<div class="inbox">
6060
<div class="item">
61-
<input type="checkbox">
61+
<input type="checkbox" id="01">
6262
<p>This is an inbox layout.</p>
6363
</div>
6464
<div class="item">
65-
<input type="checkbox">
65+
<input type="checkbox" id="02">
6666
<p>Check one item</p>
6767
</div>
6868
<div class="item">
69-
<input type="checkbox">
69+
<input type="checkbox" id="03">
7070
<p>Hold down your Shift key</p>
7171
</div>
7272
<div class="item">
73-
<input type="checkbox">
73+
<input type="checkbox" id="04">
7474
<p>Check a lower item</p>
7575
</div>
7676
<div class="item">
77-
<input type="checkbox">
77+
<input type="checkbox" id="05">
7878
<p>Everything in between should also be set to checked</p>
7979
</div>
8080
<div class="item">
81-
<input type="checkbox">
81+
<input type="checkbox" id="06">
8282
<p>Try to do it without any libraries</p>
8383
</div>
8484
<div class="item">
85-
<input type="checkbox">
85+
<input type="checkbox" id="07">
8686
<p>Just regular JavaScript</p>
8787
</div>
8888
<div class="item">
89-
<input type="checkbox">
89+
<input type="checkbox" id="08">
9090
<p>Good Luck!</p>
9191
</div>
9292
<div class="item">
93-
<input type="checkbox">
93+
<input type="checkbox" id="09">
9494
<p>Don't forget to tweet your result!</p>
9595
</div>
9696
</div>
9797

9898
<script>
99+
const inputs = document.querySelectorAll("input");
100+
101+
const updateTasks = (event) => {
102+
let clickAction = false;
103+
let nbChecked = 0;
104+
105+
if (event.shiftKey && event.target.checked) {
106+
// check if odd number of checkeed box
107+
inputs.forEach( (input) => {
108+
if (input.checked) {
109+
nbChecked ++;
110+
}
111+
});
112+
if (nbChecked != 2) return;
113+
114+
inputs.forEach( (input) => {
115+
if (input.checked) {
116+
clickAction = !clickAction;
117+
return;
118+
}
119+
if (clickAction) input.click();
120+
});
121+
}
122+
}
123+
124+
inputs.forEach( (input) => input.addEventListener("click", updateTasks));
125+
99126
</script>
100127
</body>
101128
</html>

‎11 - Custom Video Player/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,6 @@
2222
</div>
2323
</div>
2424

25-
<script src="scripts.js"></script>
25+
<script src="scripts-FINISHED.js"></script>
2626
</body>
2727
</html>

‎12 - Key Sequence Detection/index-START.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,24 @@
77
</head>
88
<body>
99
<script>
10+
const konami = [38, 38, 40, 40, 37, 39, 37, 39, 66, 65];
11+
let lastKeyTime = new Date();
12+
let keysSequence = [];
13+
const maxInterval = 1; //max second(s) between 2 keys to valid a complet sequence.
14+
15+
const getCode = (event) => {
16+
console.log(((new Date()) - lastKeyTime) / 1000);
17+
if ((((new Date()) - lastKeyTime) / 1000) < maxInterval) {
18+
keysSequence.push(event.keyCode);
19+
if (keysSequence.join() === konami.join()) alert("You love Konami!");
20+
}
21+
else keysSequence = [event.keyCode];
22+
23+
lastKeyTime = new Date();
24+
console.log(`keysSequence: ${keysSequence}`);
25+
};
26+
27+
window.addEventListener("keydown", getCode);
1028
</script>
1129
</body>
1230
</html>

0 commit comments

Comments
 (0)