Skip to content

Commit c2d2a91

Browse files
AsjasAsjas
committed
create starter and finished files for video 84
1 parent 0dccf5c commit c2d2a91

File tree

6 files changed

+227
-69
lines changed

6 files changed

+227
-69
lines changed

‎exercises/84 - Web Speech Colour Game/colors-FINISHED.js‎

Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
export const colors = {
2+
black: "#000000",
3+
silver: "#C0C0C0",
4+
gray: "#808080",
5+
grey: "#808080",
6+
white: "#FFFFFF",
7+
maroon: "#800000",
8+
red: "#FF0000",
9+
purple: "#800080",
10+
fuchsia: "#FF00FF",
11+
green: "#008000",
12+
lime: "#00FF00",
13+
olive: "#808000",
14+
yellow: "#FFFF00",
15+
navy: "#000080",
16+
blue: "#0000FF",
17+
teal: "#008080",
18+
aqua: "#00FFFF",
19+
darkblue: "#00008B",
20+
mediumblue: "#0000CD",
21+
darkgreen: "#006400",
22+
darkcyan: "#008B8B",
23+
deepskyblue: "#00BFFF",
24+
darkturquoise: "#00CED1",
25+
mediumspringgreen: "#00FA9A",
26+
springgreen: "#00FF7F",
27+
cyan: "#00FFFF",
28+
midnightblue: "#191970",
29+
dodgerblue: "#1E90FF",
30+
lightseagreen: "#20B2AA",
31+
forestgreen: "#228B22",
32+
seagreen: "#2E8B57",
33+
darkslategray: "#2F4F4F",
34+
darkslategrey: "#2F4F4F",
35+
limegreen: "#32CD32",
36+
mediumseagreen: "#3CB371",
37+
turquoise: "#40E0D0",
38+
royalblue: "#4169E1",
39+
steelblue: "#4682B4",
40+
darkslateblue: "#483D8B",
41+
mediumturquoise: "#48D1CC",
42+
indigo: "#4B0082",
43+
darkolivegreen: "#556B2F",
44+
cadetblue: "#5F9EA0",
45+
cornflowerblue: "#6495ED",
46+
rebeccapurple: "#663399",
47+
mediumaquamarine: "#66CDAA",
48+
dimgray: "#696969",
49+
dimgrey: "#696969",
50+
slateblue: "#6A5ACD",
51+
olivedrab: "#6B8E23",
52+
slategray: "#708090",
53+
slategrey: "#708090",
54+
lightslategray: "#778899",
55+
lightslategrey: "#778899",
56+
mediumslateblue: "#7B68EE",
57+
lawngreen: "#7CFC00",
58+
chartreuse: "#7FFF00",
59+
aquamarine: "#7FFFD4",
60+
skyblue: "#87CEEB",
61+
lightskyblue: "#87CEFA",
62+
blueviolet: "#8A2BE2",
63+
darkred: "#8B0000",
64+
darkmagenta: "#8B008B",
65+
saddlebrown: "#8B4513",
66+
darkseagreen: "#8FBC8F",
67+
lightgreen: "#90EE90",
68+
mediumpurple: "#9370DB",
69+
darkviolet: "#9400D3",
70+
palegreen: "#98FB98",
71+
darkorchid: "#9932CC",
72+
yellowgreen: "#9ACD32",
73+
sienna: "#A0522D",
74+
brown: "#A52A2A",
75+
darkgray: "#A9A9A9",
76+
darkgrey: "#A9A9A9",
77+
lightblue: "#ADD8E6",
78+
greenyellow: "#ADFF2F",
79+
paleturquoise: "#AFEEEE",
80+
lightsteelblue: "#B0C4DE",
81+
powderblue: "#B0E0E6",
82+
firebrick: "#B22222",
83+
darkgoldenrod: "#B8860B",
84+
mediumorchid: "#BA55D3",
85+
rosybrown: "#BC8F8F",
86+
darkkhaki: "#BDB76B",
87+
mediumvioletred: "#C71585",
88+
indianred: "#CD5C5C",
89+
peru: "#CD853F",
90+
chocolate: "#D2691E",
91+
tan: "#D2B48C",
92+
lightgray: "#D3D3D3",
93+
lightgrey: "#D3D3D3",
94+
thistle: "#D8BFD8",
95+
orchid: "#DA70D6",
96+
goldenrod: "#DAA520",
97+
palevioletred: "#DB7093",
98+
crimson: "#DC143C",
99+
gainsboro: "#DCDCDC",
100+
plum: "#DDA0DD",
101+
burlywood: "#DEB887",
102+
lightcyan: "#E0FFFF",
103+
lavender: "#E6E6FA",
104+
darksalmon: "#E9967A",
105+
violet: "#EE82EE",
106+
palegoldenrod: "#EEE8AA",
107+
lightcoral: "#F08080",
108+
khaki: "#F0E68C",
109+
aliceblue: "#F0F8FF",
110+
honeydew: "#F0FFF0",
111+
azure: "#F0FFFF",
112+
sandybrown: "#F4A460",
113+
wheat: "#F5DEB3",
114+
beige: "#F5F5DC",
115+
whitesmoke: "#F5F5F5",
116+
mintcream: "#F5FFFA",
117+
ghostwhite: "#F8F8FF",
118+
salmon: "#FA8072",
119+
antiquewhite: "#FAEBD7",
120+
linen: "#FAF0E6",
121+
lightgoldenrodyellow: "#FAFAD2",
122+
oldlace: "#FDF5E6",
123+
magenta: "#FF00FF",
124+
deeppink: "#FF1493",
125+
orangered: "#FF4500",
126+
tomato: "#FF6347",
127+
hotpink: "#FF69B4",
128+
coral: "#FF7F50",
129+
darkorange: "#FF8C00",
130+
lightsalmon: "#FFA07A",
131+
orange: "#FFA500",
132+
lightpink: "#FFB6C1",
133+
pink: "#FFC0CB",
134+
gold: "#FFD700",
135+
peachpuff: "#FFDAB9",
136+
navajowhite: "#FFDEAD",
137+
moccasin: "#FFE4B5",
138+
bisque: "#FFE4C4",
139+
mistyrose: "#FFE4E1",
140+
blanchedalmond: "#FFEBCD",
141+
papayawhip: "#FFEFD5",
142+
lavenderblush: "#FFF0F5",
143+
seashell: "#FFF5EE",
144+
cornsilk: "#FFF8DC",
145+
lemonchiffon: "#FFFACD",
146+
floralwhite: "#FFFAF0",
147+
snow: "#FFFAFA",
148+
lightyellow: "#FFFFE0",
149+
ivory: "#FFFFF0",
150+
};
151+
152+
export function isDark(colorName) {
153+
const hex = colors[colorName].substring(1, 7);
154+
const r = parseInt(hex.substring(0, 2), 16);
155+
const g = parseInt(hex.substring(2, 4), 16);
156+
const b = parseInt(hex.substring(4, 6), 16);
157+
return r * 0.299 + g * 0.587 + b * 0.114 < 120;
158+
}
159+
160+
export const colorsByLength = Object.keys(colors).sort(
161+
(a, b) => a.length - b.length
162+
);
163+
164+
export function isValidColor(word) {
165+
return !!colors[word];
166+
}

‎exercises/84 - Web Speech Colour Game/colors.js‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -156,11 +156,3 @@ export function isDark(colorName) {
156156
const b = parseInt(hex.substring(4, 6), 16);
157157
return r * 0.299 + g * 0.587 + b * 0.114 < 120;
158158
}
159-
160-
export const colorsByLength = Object.keys(colors).sort(
161-
(a, b) => a.length - b.length
162-
);
163-
164-
export function isValidColor(word) {
165-
return !!colors[word];
166-
}

‎exercises/84 - Web Speech Colour Game/handlers-FINISHED.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { isValidColor } from "./colors";
2+
3+
function logWords(results) {
4+
// console.log(results[results.length - 1][0].transcript);
5+
}
6+
7+
export function handleResult({ results }) {
8+
logWords(results);
9+
const words = results[results.length - 1][0].transcript;
10+
// lowercase everything
11+
let color = words.toLowerCase();
12+
// strip any spaces out
13+
color = color.replace(/\s/g, "");
14+
// check if it is a valid colour
15+
if (!isValidColor(color)) return; // thats all folks
16+
// if it is, then show the UI for that
17+
const colorSpan = document.querySelector(`.${color}`);
18+
colorSpan.classList.add("got");
19+
console.log(colorSpan);
20+
console.log("This is a valid color!");
21+
console.log(color);
22+
// change the background color
23+
document.body.style.backgroundColor = color;
24+
}

‎exercises/84 - Web Speech Colour Game/handlers.js‎

Lines changed: 0 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +0,0 @@
1-
import { isValidColor } from './colors';
2-
3-
function logWords(results) {
4-
// console.log(results[results.length - 1][0].transcript);
5-
}
6-
7-
export function handleResult({ results }) {
8-
logWords(results);
9-
const words = results[results.length - 1][0].transcript;
10-
// lowercase everything
11-
let color = words.toLowerCase();
12-
// strip any spaces out
13-
color = color.replace(/\s/g, '');
14-
// check if it is a valid colour
15-
if (!isValidColor(color)) return; // thats all folks
16-
// if it is, then show the UI for that
17-
const colorSpan = document.querySelector(`.${color}`);
18-
colorSpan.classList.add('got');
19-
console.log(colorSpan);
20-
console.log('This is a valid color!');
21-
console.log(color);
22-
// change the background color
23-
document.body.style.backgroundColor = color;
24-
}

‎exercises/84 - Web Speech Colour Game/speech-FINISHED.js‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { handleResult } from "./handlers";
2+
import { colorsByLength, isDark } from "./colors";
3+
4+
const colorsEl = document.querySelector(".colors");
5+
6+
function displayColors(colors) {
7+
return colors
8+
.map(
9+
(color) =>
10+
`<span class="color ${color} ${
11+
isDark(color) ? "dark" : ""
12+
}" style="background: ${color};">${color}</span>`
13+
)
14+
.join("");
15+
}
16+
17+
window.SpeechRecognition =
18+
window.SpeechRecognition || window.webkitSpeechRecognition;
19+
20+
function start() {
21+
// see if their browser supports this
22+
if (!("SpeechRecognition" in window)) {
23+
console.log("Sorry your browser does not support speech reco. ");
24+
return;
25+
}
26+
// it does work
27+
console.log("Starting...");
28+
// make a new speech reco
29+
const recognition = new SpeechRecognition();
30+
recognition.continuous = true;
31+
recognition.interimResults = true;
32+
recognition.onresult = handleResult;
33+
recognition.start();
34+
}
35+
36+
start();
37+
colorsEl.innerHTML = displayColors(colorsByLength);

‎exercises/84 - Web Speech Colour Game/speech.js‎

Lines changed: 0 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +0,0 @@
1-
import { handleResult } from './handlers';
2-
import { colorsByLength, isDark } from './colors';
3-
4-
const colorsEl = document.querySelector('.colors');
5-
6-
function displayColors(colors) {
7-
return colors
8-
.map(
9-
color =>
10-
`<span class="color ${color} ${
11-
isDark(color) ? 'dark' : ''
12-
}" style="background: ${color};">${color}</span>`
13-
)
14-
.join('');
15-
}
16-
17-
window.SpeechRecognition =
18-
window.SpeechRecognition || window.webkitSpeechRecognition;
19-
20-
function start() {
21-
// see if their browser supports this
22-
if (!('SpeechRecognition' in window)) {
23-
console.log('Sorry your browser does not support speech reco. ');
24-
return;
25-
}
26-
// it does work
27-
console.log('Starting...');
28-
// make a new speech reco
29-
const recognition = new SpeechRecognition();
30-
recognition.continuous = true;
31-
recognition.interimResults = true;
32-
recognition.onresult = handleResult;
33-
recognition.start();
34-
}
35-
36-
start();
37-
colorsEl.innerHTML = displayColors(colorsByLength);

0 commit comments

Comments
 (0)