-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
158 lines (139 loc) · 7.44 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap" rel="stylesheet">
<title>Mad Libs</title>
</head>
<body>
<audio id="audio" src="./utils/music.mp3" loop="loop"></audio>
<div class="wrapper">
<header>
<h1>Baile Flamenco</h1>
</header>
<div class="container">
<div class="madLibsEdit"></div>
<div class="madLibsPreview"></div>
</div>
<span id="speaker-icon-div" class="speaker-volume-full">
<svg xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 16 16">
<path d="M11.536 14.01A8.473 8.473 0 0 0 14.026 8a8.473 8.473 0 0 0-2.49-6.01l-.708.707A7.476 7.476 0 0 1 13.025 8c0 2.071-.84 3.946-2.197 5.303l.708.707z"/>
<path d="M10.121 12.596A6.48 6.48 0 0 0 12.025 8a6.48 6.48 0 0 0-1.904-4.596l-.707.707A5.483 5.483 0 0 1 11.025 8a5.483 5.483 0 0 1-1.61 3.89l.706.706z"/>
<path d="M8.707 11.182A4.486 4.486 0 0 0 10.025 8a4.486 4.486 0 0 0-1.318-3.182L8 5.525A3.489 3.489 0 0 1 9.025 8 3.49 3.49 0 0 1 8 10.475l.707.707zM6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06z"/>
</svg>
</span>
</div>
<script>
const rawStory = "Flamenco, form of song[n], dance, and instrumental mostly[a] guitar music commonly associated with the Andalusian Roma of southern[a] Spain. The roots[n] of flamenco, though somewhat mysterious, seem to lie in the Roma migration from Rajasthan to Spain between the 9th and 14th centuries. These migrants brought with them musical instruments, such as tambourines, bells, and wooden castanets[n], and an extensive[a] repertoire of songs and dances. In Spain[m] they encountered the rich cultures of the Sephardic Jews and the Moors. Their centuries-long cultural intermingling produced[v] the unique art form known as flamenco.";
// Music code
window.addEventListener("load", function () {
const audio = document.getElementById("audio");
audio.volume = 0.5;
audio.play();
console.log("Tiempo de Bailar!")
})
const audio = document.getElementById("audio");
const speakerIconDiv = document.getElementById("speaker-icon-div");
speakerIconDiv.addEventListener("click", () => {
if(speakerIconDiv.classList[0] === "speaker-volume-full") {
speakerIconDiv.innerHTML = `
<svg xmlns="http://www.w3.org/2000/svg" fill="white" class="bi bi-volume-mute-fill" viewBox="0 0 16 16">
<path d="M6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06zm7.137 2.096a.5.5 0 0 1 0 .708L12.207 8l1.647 1.646a.5.5 0 0 1-.708.708L11.5 8.707l-1.646 1.647a.5.5 0 0 1-.708-.708L10.793 8 9.146 6.354a.5.5 0 1 1 .708-.708L11.5 7.293l1.646-1.647a.5.5 0 0 1 .708 0z"/>
</svg>
`;
speakerIconDiv.classList.remove("speaker-volume-full");
speakerIconDiv.classList.add("speaker-volume-none");
audio.pause();
}
else if(speakerIconDiv.classList[0] === "speaker-volume-none") {
speakerIconDiv.innerHTML = `
<svg xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 16 16">
<path d="M11.536 14.01A8.473 8.473 0 0 0 14.026 8a8.473 8.473 0 0 0-2.49-6.01l-.708.707A7.476 7.476 0 0 1 13.025 8c0 2.071-.84 3.946-2.197 5.303l.708.707z"/>
<path d="M10.121 12.596A6.48 6.48 0 0 0 12.025 8a6.48 6.48 0 0 0-1.904-4.596l-.707.707A5.483 5.483 0 0 1 11.025 8a5.483 5.483 0 0 1-1.61 3.89l.706.706z"/>
<path d="M8.707 11.182A4.486 4.486 0 0 0 10.025 8a4.486 4.486 0 0 0-1.318-3.182L8 5.525A3.489 3.489 0 0 1 9.025 8 3.49 3.49 0 0 1 8 10.475l.707.707zM6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06z"/>
</svg>
`;
speakerIconDiv.classList.add("speaker-volume-full");
speakerIconDiv.classList.remove("speaker-volume-none");
audio.play();
}
});
let newArr = [];
function parseStory(rawStory) {
const regex = /(?:^|\W)[v|a|m|n|](?:$|\W)/g;
const regex2 = /[.,\/]/;
const array = rawStory.split(" ");
array.forEach((element) => {
if (regex.test(element)) {
const matchRegex = element.match(regex);
if (matchRegex[0] === "[n]") {
element = element.replace(regex, "");
newArr.push({ word: element, pos: "noun" });
}
else if (matchRegex[0] === "[v]") {
element = element.replace(regex, "");
newArr.push({ word: element, pos: "verb" });
}
else if (matchRegex[0] === "[a]") {
element = element.replace(regex, "");
newArr.push({ word: element, pos: "adjective" });
}
else if (matchRegex[0] === "[m]") {
element = element.replace(regex, "");
newArr.push({ word: element, pos: "name" });
}
}
else if (!regex.test(element)) {
newArr.push({ word: element });
}
else if (element.match(regex2)) {
let matchReg = element.match(regex2)[0];
element = element.replace(regex2, "");
newArr.push({ word: matchReg });
}
});
}
function showStory(processedStory) {
let madLibsEdit = document.querySelector(".madLibsEdit");
let madLibsPreview = document.querySelector(".madLibsPreview");
newArr.forEach(function (element) {
if (!element.pos) {
let editSpan = document.createElement("span");
editSpan.innerHTML = element.word + " ";
madLibsEdit.appendChild(editSpan);
let prevSpan = document.createElement("span");
prevSpan.innerHTML = element.word + " ";
madLibsPreview.appendChild(prevSpan);
} else {
let inputPlace = document.createElement("input");
inputPlace.setAttribute("class", element.pos);
inputPlace.setAttribute("type", "text");
inputPlace.setAttribute("maxlength", "20");
inputPlace.setAttribute("placeholder", `${element.pos} `);
let inputValPreview = document.createElement("span");
let x = document.createTextNode(`(${element.pos}) `);
inputValPreview.appendChild(x);
inputValPreview.setAttribute("class", "input-value");
inputValPreview.style.color = "red";
inputPlace.addEventListener("input", function () {
if (inputPlace.value) {
inputValPreview.style.color = "red";
inputValPreview.setAttribute("class", "input-prev");
inputValPreview.innerHTML = `${inputPlace.value}  `;
} else {
inputValPreview.innerText = `(${inputPlace.placeholder})`;
}
});
madLibsEdit.appendChild(inputPlace);
madLibsPreview.appendChild(inputValPreview);
}
});
}
parseStory(rawStory);
showStory();
</script>
</body>
</html>