-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
80 lines (71 loc) · 3.4 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alias Generator</title>
<link rel="shortcut icon" type="image/png" href="id.png" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="intro">
<h1>Alias Generator</h1>
<div class="howTo">
<p>
Get an online alias at the click of a button! <br> Use a digital alias to help you fill out test templates, forms or registries. You can customize either the gender or country aspects of your alias through the dropdown selections below. If you don't specify, all information will be randomized.
</p>
<button class="generate" id="generateOne">Generate</button>
</div>
</div>
<div class="selectors">
<div class="gender">
<label for="gender" >Gender:</label>
<select name="gender" id="gender">
<option value="null">Random</option>
<option value="female">Female</option>
<option value="male">Male</option>
</select>
</div>
<p>OR</p>
<div class="nationality">
<label for="nationality">Country:</label>
<select name="nationality" id="nationality">
<option value="null">Random</option>
<option value="AU">Australia</option>
<option value="BR">Brazil</option>
<option value="CA">Canada</option>
<option value="CH">Switzerland</option>
<option value="DE">Germany</option>
<option value="DK">Denmark</option>
<option value="ES">Spain</option>
<option value="FI">Finland</option>
<option value="FR">France</option>
<option value="GB">United Kingdom</option>
<option value="IE">Ireland</option>
<option value="IR">Iran</option>
<option value="NO">Norway</option>
<option value="NL">Netherlands</option>
<option value="NZ">New Zealand</option>
<option value="TR">Turkey</option>
<option value="US">United States</option>
</select>
</div>
</div>
<div class="outputOne"></div>
<!-- results from generateOne append here -->
<div class="loadMore">
<p>Alternatively, if you want a list of random aliases, you can change the number you want to see at once and click the "Generate List" button:</p>
<div>
<input type="number" value="6" class="listNumber">
<button class="generate" id="generateMore">Generate List</button>
</div>
</div>
<div class="outputMore"></div>
<!-- results from generateOne will append here -->
</div>
<p class="sources">All aliases are random, and any resemblance to real life individuals are coincidental. All information provided by the <a href="https://randomuser.me/">RandomUser API</a></p>
<script src="aliasGenerator.js"></script>
</body>
</html>