-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
58 lines (53 loc) · 2.63 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
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<meta http-equiv='X-UA-Compatible' content='ie=edge'>
<!-- Favicon -->
<link rel='icon' type='image/x-icon' href='favicon.ico'>
<!-- FONTAWESOME -->
<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.8.2/css/all.css'
integrity='sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay' crossorigin='anonymous'>
<!-- GOOGLE FONTS -->
<link href="https://fonts.googleapis.com/css?family=Slackey" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Space+Mono" rel="stylesheet">
<!-- Stylesheet -->
<link rel='stylesheet' type='text/css' href='./Stylesheets/styles.css'>
<title>sPoNgEbOb cAsE</title>
</head>
<body>
<div class='sponge-wrapper'>
<img class='spongebob-picture' src='./images/spongebob.png' alt='spongebob' />
<h1 class='header'>cOnVeRt yOuR tExT tO sPoNgEbOb cAsE!</h1>
<div class='example'>
<h4 class='example-text'>Hello World!</h4>
<div class='arrows'>
<i class='fas fa-angle-right first-arrow fade-in-1 arrows'></i>
<i class='fas fa-angle-right fade-in-2 arrows'></i>
<i class='fas fa-angle-right last-arrow fade-in-3 arrows'></i>
</div>
<h4 class='example-converted-text'>hElLo wOrLd!</h4>
</div>
<div class='border-wrap'>
<input class='user-input' type='text' placeholder=' enter text here' onfocus='this.placeholder = ""'
onblur='this.placeholder = " enter text here"' />
</div>
<button class='clear-input' onclick='clear_user_input()'>clear input</button>
<button class='convert-button' onclick='convertToSpongeBobCase(); show_result_box()'>CONVERT</button>
<!-- pop up box to display results -->
<div class='result-box close'>
<div class='close-button-container'>
<i class='far fa-times-circle close-result-button' onclick='close_result_box()'></i>
</div>
<h2 class='your-result-text'>sPoNgEbOb cAse</h2>
<h4 class='by-kevin-yang-text'>by Kevin Yang</h4>
<textarea class='result' data-category='result' readonly='yes'></textarea>
<button class='copy-result-button' onclick='copy_result()'>COPY</button>
</div>
<!-- dark overlay to focus on result box -->
<div class='overlay close' onclick='close_result_box()'></div>
</div>
</body>
<script src='./Scripts/scripts.js'></script>
</html>