-
Notifications
You must be signed in to change notification settings - Fork 0
/
madlibs.js
137 lines (124 loc) · 4.59 KB
/
madlibs.js
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
// creating the parsing function.
function parseStory(rawStory) {
//create array from raw story
const storyWords = rawStory.split(" ");
//checking for words with regex pattern
const wordPattern = /\[.]/gi;
// creeate new object of words in array
const parsedStory = storyWords.map((word) => {
//strips off the matched pattern from the word ex: noun[n] => noun
const singleWord = word.replace(wordPattern, "");
// grab the matched word
let match = word.match(wordPattern);
// check if there is a match and create a new object
if (!match) {
return { word: singleWord };
}
const pos = match[0]; // ["[n]"]
if (pos === "[n]") {
return { word: singleWord, pos: "noun" };
} else if (pos === "[v]") {
return { word: singleWord, pos: "verb" };
} else if (pos === "[a]") {
return { word: singleWord, pos: "adjective" };
}
});
return parsedStory;
}
function createPunctuationText(word, previewContainer, editContainer) {
// create element for the punctuation text
const punctuationPreview = document.createElement("span");
const punctuationEdit = document.createElement("span");
punctuationPreview.innerText = `${word.word} `;
punctuationEdit.innerText = `${word.word} `;
// appending punctuation element/span to the divs
previewContainer.appendChild(punctuationPreview);
editContainer.appendChild(punctuationEdit);
}
function createPlainText(word, previewContainer, editContainer) {
// create element for the regular words text
const spanPreview = document.createElement("span");
const spanEdit = document.createElement("span");
spanPreview.innerText = ` ${word.word} `;
spanEdit.innerText = ` ${word.word} `;
// appending regular words element/span to the divs
previewContainer.appendChild(spanPreview);
editContainer.appendChild(spanEdit);
}
function createPos(word, previewContainer, editContainer) {
const preWhiteSpace = document.createElement("span");
const postWhiteSpace = document.createElement("span");
preWhiteSpace.innerText = " ";
postWhiteSpace.innerText = " ";
// create input element and its attributes
const input = document.createElement("input");
input.setAttribute("maxlength", "20");
input.setAttribute("type", "text");
input.setAttribute("placeholder", `[${word.pos}]`);
const output = document.createElement("mark");
output.innerText = `[${word.word}]`;
// append input to the edit container
editContainer.appendChild(preWhiteSpace);
editContainer.appendChild(input);
editContainer.appendChild(postWhiteSpace);
// append output to the edit container
previewContainer.appendChild(preWhiteSpace);
previewContainer.appendChild(output);
// synchronizing the input and the output
input.addEventListener("input", () => {
if (input.value) {
output.innerHTML = input.value;
input.classList.add("filled");
output.classList.add("filled");
let inputLength = input.value.length;
if (inputLength >= 10) {
input.style.width = inputLength + "ch";
}
} else {
input.classList.remove("filled");
output.classList.remove("filled");
output.innerText = `[${word.pos}]`;
input.style.width = 10 + "ch";
}
});
}
function renderStoryToDOM(processedStory) {
const previewContainer = document.querySelector(".madLibsPreview");
const editContainer = document.querySelector(".madLibsEdit");
processedStory.forEach((word) => {
if (word.word === "." || word.word === ",") {
createPunctuationText(word, previewContainer, editContainer);
} else if (word.pos) {
createPos(word, previewContainer, editContainer);
} else {
createPlainText(word, previewContainer, editContainer);
}
});
// crate enter keypress event to change the focus on the input field
const inputFields = document.querySelectorAll("input");
inputFields.forEach((input, i) => {
input.addEventListener("keypress", (e) => {
if (e.key === "Enter") {
const nextIndex = (i + 1) % inputFields.length;
inputFields[nextIndex].focus();
}
});
});
// clear button
const outputs = document.querySelectorAll("mark");
const clearButton = document.querySelector("#clearBtn");
clearButton.addEventListener("click", () => {
for (let i = 0; i < inputFields.length; i++) {
inputFields[i].value = "";
inputFields[i].style.width = 10 + "ch";
outputs[i].innerText = inputFields[i].placeholder;
inputFields[i].classList.remove("filled");
outputs[i].classList.remove("filled");
}
});
}
getRawStory()
.then(parseStory)
.then((processedStory) => {
renderStoryToDOM(processedStory);
});