waltr21.github.io/index.html at master · waltr21/waltr21.github.io · GitHub

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
<!DOCTYPE html>
<html>
	<link rel="stylesheet" href="index.css">
	<head>
		<meta charset="UTF-8">
		<title>Start Page</title>
	</head>
	<body>

		<div class="links" id="stuff">

			<div class="link">
				<a href="https://github.com/waltr21"><img src="github.png" alt="" width="150" height="150"></a>
			</div>

			<div class="link">
				<a href="https://reddit.com"><img src="reddit.png" alt="" width="150" height="150"></a>
			</div>

			<div class="link">
				<a href="https://youtube.com"><img src="youtube.png" alt="" width="150" height="150"></a>
			</div>

			<div class="link">
				<a href="https://google.com"><img src="google.png" alt="" width="150" height="150"></a>
			</div>

		</div>
		<div id="searchClass">
		<div class="searchItem" id="search"></div>
		</div>
	</body>


	<script>
		document.addEventListener("keydown", e => {
			//console.log(e.keyCode);
			var code = e.keyCode;
			//console.log(code);

			var val = document.getElementById("search").innerHTML;

			blurFunction(1);

			//Back
			if (code == 8){
				val = val.substring(0, val.length-1);
				document.getElementById("search").innerHTML = val;

				if (val.length <= 0){
					blurFunction(0);
				}
			}
			//Enter
			else if (code == 13){
				window.location.href = "https://google.com/search?q=" + val;
			}
			//Esc
			else if (code == 27){
				document.getElementById("search").innerHTML = "";
				blurFunction(0);
			}
			else if (code == 32){
    			document.getElementById("search").innerHTML += e.key;
			}
			else if (code >= 48 && code <= 90){
    			document.getElementById("search").innerHTML += e.key;
			}
			else if (code >= 96 && code <= 111){
    			document.getElementById("search").innerHTML += e.key;
			}
			else if (code >= 186 && code <= 222){
    			document.getElementById("search").innerHTML += e.key;
			}
		});

		var blurFunction = function(state){
			var element = document.getElementById("searchClass");

			if (state){

				element.setAttribute("class", "searchUp");

			}
			else{

				element.setAttribute("class", null);
			}
		};
	</script>

</html>