-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathaddcolor.html
124 lines (106 loc) · 2.83 KB
/
addcolor.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Add a color...</title>
</head>
<body>
<h1>Add a color to the database</h1>
<p>Use the form below to add a color of your choice to the database.</p>
<form>
<div>
<label for="color-name">Set your color's name (This was hacked again!):</label>
<input type="text" name="colorname" id="color-name" />
</div>
<div>
<label for="color-val">Set your color:</label>
<input type="color" name="colorval" id="color-val" />
</div>
<div>
<label for="color-alpha">Set your color's alpha value:</label>
<input
type="number"
name="coloralpha"
id="color-alpha"
min="0"
max="1"
step="0.01"
value="1"
/>
</div>
<div>
<input type="submit" value="Submit..." />
</div>
</form>
<span id="textbox"></span>
<script type="module">
const form = document.querySelector("form");
const textbox = document.querySelector("#textbox");
const notValidChars = /[^\d\w\s]/i;
const elimInvChars = (str) => {
let toReturn = str;
while (true) {
if (toReturn.replace(notValidChars, "") === toReturn) {
break;
} else {
toReturn = toReturn.replace(notValidChars, "");
}
}
return toReturn;
};
const toCamelCase = (str) => {
str = elimInvChars(str);
str = str.trim();
let words = str.split(/\s/i);
let toReturn = "";
toReturn += words[0].toLowerCase();
for (let i = 1; i < words.length; i++) {
let currentWord = words[i];
let letters = currentWord.split("");
letters[0] = letters[0].toUpperCase();
let newWord = "";
for (let letter of letters) {
newWord += letter;
}
toReturn += newWord;
}
return toReturn;
};
const formToJSON = (name, val, alpha) => {
let toReturn = {};
Object.defineProperty(toReturn, "name", {
value: name,
enumerable: true,
});
Object.defineProperty(toReturn, "id", {
value: toCamelCase(name),
enumerable: true,
});
Object.defineProperty(toReturn, "col", {
value: val,
enumerable: true,
});
Object.defineProperty(toReturn, "alpha", {
value: alpha,
enumerable: true,
});
return toReturn;
};
const sendData = async (event) => {
event.preventDefault();
const nameField = document.querySelector("#color-name").value;
const valField = document.querySelector("#color-val").value;
const alphaField = document.querySelector("#color-alpha").value;
const toSend = formToJSON(nameField, valField, alphaField);
console.log(toSend);
const response = await fetch("/addcolor", {
method: "POST",
body: JSON.stringify(toSend),
});
const body = await response.text();
textbox.innerHTML = body;
};
form.addEventListener("submit", sendData, true);
</script>
</body>
</html>