forked from MichaelTDo/24-Hackathon
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmain.html
96 lines (84 loc) · 2.62 KB
/
main.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
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="neon.css">
</head>
<body>
<div class="container">
<!-- Title -->
<h1 class="neonText">
Neon-ify Your Text!
</h1>
<hr>
<h2 class="neonTextYellow">Select your color:</h2>
<select id="colors" onchange="colorChange()">
<option>Select here: </option>
<option>Purple</option>
<option>DeepPink</option>
<option>Yellow</option>
<option>Aqua</option>
<option>Green</option>
</select>
<h2 class="neonTextYellow">Enter your text:</h2>
<form>
<label for="fname"></label>
<!-- User Enters Text -->
<div class="textBox">
<textarea id="text" rows="15" cols="65" placeholder="e.g. FullyHacks is very cool."></textarea>
</div>
<!-- Neon-ify Button-->
<div class="submit">
<button onClick="handleInput()">Neon-ify</button>
</div>
</form>
<hr>
<!-- Outputting the text in Neon -->
<h2 class="neonTextYellow">Your Text in Neon:</h2>
<hr>
<div id="output">Your output will show here!</div>
<hr>
</div>
<script>
function colorChange() {
var colorSelect = document.getElementById("colors");
var selected = colorSelect.value;
colorSelect.style.textShadow = `
0 0 5px white,
0 0 21px white,
0 0 42px ${selected},
0 0 82px ${selected},
0 0 92px ${selected},
0 0 102px ${selected},
0 0 151px ${selected}`;
}
function handleInput() {
event.preventDefault();
let input = document.getElementById("text").value;
let output = document.getElementById("output");
output.innerHTML = neonifyText(input);
}
function neonifyText(output) {
var colorSelect = document.getElementById("colors");
var selected = colorSelect.value;
if(selected == 'Yellow'){
return `<span style="color: white; text-shadow:
0 0 7px white,
0 0 10px white,
0 0 42px ${selected},
0 0 82px ${selected},
0 0 92px ${selected};">${output}</span>`;
} else {
return `<span style="color: white; text-shadow:
0 0 7px white,
0 0 21px white,
0 0 42px ${selected},
0 0 82px ${selected},
0 0 92px ${selected},
0 0 102px ${selected},
0 0 151px ${selected},
0 0 180px ${selected};">${output}</span>`;
}
}
</script>
</body>
</html>