Skip to content

Commit 5ea0a62

Browse files
Syber-20Syber-20
authored
Merge pull request #4 from paren-thesis/exp-one
Optimised index.html script.js and styles.css
2 parents c05e320 + 6b92472 commit 5ea0a62

File tree

3 files changed

+69
-90
lines changed

3 files changed

+69
-90
lines changed

‎index.html‎

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,42 +3,40 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
7-
<meta http-equiv="X-UA-Compatible" content="ie=edge">
86
<title>nersh</title>
97
<link rel="stylesheet" href="styles.css">
108
</head>
119
<body>
1210
<div class="container">
1311
<header class="head">
14-
<nav>
15-
<a href="#home">Home</a>
16-
<a href="#nerdy">Feeling nerdy!</a>
17-
<a href="#newsfeed">Newsfeed</a>
18-
</nav>
19-
</header>
12+
<nav>
13+
<a href="#home">Home</a>
14+
<a href="#nerdy">Feeling nerdy!</a>
15+
<a href="#newsfeed">Newsfeed</a>
16+
</nav>
17+
</header>
18+
2019
<div class="nersh-bruce">
2120
<header>
2221
<h1>nersh</h1>
2322
</header>
2423
<div class="search-container">
2524
<form action="#">
26-
<input type="text" id="search-box" class="search-box" placeholder="search like a nerd... "autocomplete="off" oninput="showSuggestions()">
25+
<input type="text" id="search-box" class="search-box" placeholder="search like a nerd..." autocomplete="off" oninput="showSuggestions()">
2726
<ul id="suggestions-list" class="suggestions-list"></ul>
28-
<div class="buttons">
29-
<button type="submit" class="search-button">nersh-it</button>
30-
<!-- <button type="button" class="feeling-lucky-button">feeling nerdy!</button> -->
31-
</div>
27+
<button type="submit" class="search-button">nersh-it</button>
3228
</form>
3329
</div>
3430
</div>
31+
3532
<footer>
3633
<p><a href="">Privacy</a></p>
3734
<p><a href="">Contact</a></p>
3835
<p><a href="">Docs</a></p>
3936
<p><a href="">Copyright</a></p>
4037
</footer>
41-
</div>
38+
</div>
39+
4240
<script src="script.js"></script>
4341
</body>
4442
</html>

‎script.js‎

Lines changed: 22 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,28 @@
11
function showSuggestions() {
2-
const input = document.getElementById('search-box').value; // No need to convert to lowercase here
2+
const input = document.getElementById('search-box').value;
33
const suggestionsList = document.getElementById('suggestions-list');
4+
const maxSuggestions = 5; // Limit suggestions
45

5-
// Clear existing suggestions
66
suggestionsList.innerHTML = '';
77

88
if (input === '') {
99
suggestionsList.style.display = 'none';
1010
return;
1111
}
1212

13-
// Determine the first letter of the input
14-
const firstLetter = input.charAt(0).toLowerCase(); // Keep it lowercase for directory
15-
16-
// Fetch the relevant JSON file based on the first letter
13+
const firstLetter = input.charAt(0).toLowerCase();
1714
fetch(`./terms/${firstLetter}/terms.json`)
1815
.then(response => response.json())
1916
.then(data => {
20-
// Normalize input for filtering (e.g., remove spaces and underscores)
21-
const normalizedInput = input.replace(/[_\s]/g, ''); // Remove underscores and spaces
17+
const normalizedInput = input.replace(/[_\s]/g, '');
18+
const filteredTerms = data.terms.filter(term =>
19+
term.replace(/[_\s]/g, '').toLowerCase().startsWith(normalizedInput.toLowerCase())
20+
);
21+
22+
const limitedTerms = filteredTerms.slice(0, maxSuggestions); // Limit suggestions
2223

23-
const filteredTerms = data.terms.filter(term => {
24-
// Normalize the term to compare with the input
25-
return term.replace(/[_\s]/g, '').toLowerCase().startsWith(normalizedInput.toLowerCase());
26-
});
27-
28-
if (filteredTerms.length > 0) {
29-
filteredTerms.forEach(term => {
24+
if (limitedTerms.length > 0) {
25+
limitedTerms.forEach(term => {
3026
const listItem = document.createElement('li');
3127
listItem.textContent = term;
3228
listItem.onclick = () => selectTerm(term);
@@ -44,8 +40,16 @@ function showSuggestions() {
4440
}
4541

4642
function selectTerm(term) {
47-
// Redirect to the term.html file in the term folder
48-
const formattedTerm = term.toLowerCase().replace(/ /g, '_'); // Ensure correct formatting
49-
const firstLetter = term.charAt(0).toLowerCase(); // Keep this in lowercase for the path
43+
const formattedTerm = term.toLowerCase().replace(/ /g, '_');
44+
const firstLetter = term.charAt(0).toLowerCase();
5045
window.location.href = `./terms/${firstLetter}/${formattedTerm}.html`;
5146
}
47+
48+
// Make "nersh-it" button functional
49+
document.querySelector('.search-button').onclick = function(event) {
50+
event.preventDefault();
51+
const searchValue = document.getElementById('search-box').value.trim();
52+
if (searchValue) {
53+
selectTerm(searchValue);
54+
}
55+
};

‎styles.css‎

Lines changed: 35 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ body {
1212
background-repeat: no-repeat;
1313
background-size: cover;
1414
}
15+
1516
.container .head {
1617
background-color: rgba(127, 255, 212, 0.199);
1718
padding: 30px;
@@ -21,34 +22,31 @@ body {
2122
width: 100%;
2223
z-index: 1000;
2324
}
25+
2426
.container .head nav {
2527
margin-left: 70%;
2628
font-size: 20px;
2729
}
28-
.container .head a:hover {
29-
text-transform: lowercase;
30-
/* text-transform: lowercase; */
31-
/* text-decoration: none; */
32-
/* color: rgba(255, 255, 255, 0.575); */
33-
}
30+
3431
.container .head nav a {
3532
color: white;
3633
margin: 0px 15px;
37-
/* text-decoration: none; */
3834
font-weight: bold;
35+
transition: transform 0.3s ease;
36+
}
37+
38+
.container .head nav a:hover {
39+
transform: scale(0.9);
3940
}
4041

4142
/* Container */
4243
.container {
4344
text-align: center;
4445
}
46+
4547
.container .nersh-bruce {
4648
background-color: rgba(72, 71, 97, 0.637);
47-
/* opacity: 0.4; */
4849
padding: 100px;
49-
/* border-width: 0.2px; */
50-
/* border-color: ; */
51-
/* border-style: solid; */
5250
border-radius: 10px;
5351
box-shadow: 0px 0px 20px 0px #201f1f;
5452
}
@@ -64,19 +62,34 @@ header h1 {
6462
.search-container {
6563
margin-top: 20px;
6664
position: relative;
65+
display: flex;
6766
}
6867

6968
.search-box {
7069
width: 400px;
7170
height: 40px;
7271
padding: 10px;
7372
font-size: 25px;
74-
border-radius: 20px;
73+
border-radius: 20px 0 0 20px;
7574
border: none;
7675
outline: none;
7776
background-color: rgba(245, 245, 245, 0.589);
7877
}
7978

79+
.search-button {
80+
background-color: #1a73e8;
81+
color: #e8eaed;
82+
border: none;
83+
padding: 10px 20px;
84+
border-radius: 0 20px 20px 0;
85+
cursor: pointer;
86+
transition: background-color 0.3s ease;
87+
}
88+
89+
.search-button:hover {
90+
background-color: #5f6368;
91+
}
92+
8093
/* Suggestions list */
8194
.suggestions-list {
8295
list-style: none;
@@ -86,7 +99,7 @@ header h1 {
8699
width: 400px;
87100
border-radius: 10px;
88101
position: absolute;
89-
top: 60px; /* Positioned above the search bar */
102+
top: 50px;
90103
z-index: 1;
91104
display: none;
92105
}
@@ -100,61 +113,29 @@ header h1 {
100113
background-color: #3c4043;
101114
}
102115

103-
/* Buttons styling */
104-
.buttons {
105-
margin-top: 20px;
106-
}
107-
108-
button {
109-
background-color: #3c4043;
110-
color: #e8eaed;
111-
border: none;
112-
padding: 10px 20px;
113-
margin: 5px;
114-
border-radius: 5px;
115-
cursor: pointer;
116-
}
117-
/* .container .nersh-bruce .search-container input{
118-
transition: all 0.3s ease;
119-
}
120-
.container .nersh-bruce .search-container input:hover{
121-
background-color: #fbbc05;
122-
} */
123-
button:hover {
124-
background-color: #5f6368;
125-
}
126-
127-
.search-button {
128-
background-color: #1a73e8;
129-
}
130-
131-
.feeling-lucky-button {
132-
background-color: #fbbc05;
133-
}
134-
135116
/* Footer styling */
136117
footer {
137118
display: flex;
138119
justify-content: space-evenly;
139120
margin-top: 5rem;
140121
}
141-
footer a{
142-
color: white;
122+
123+
footer a {
124+
color: white;
143125
}
144-
footer a:hover{
145-
text-transform: lowercase;
126+
127+
footer a:hover {
128+
text-transform: lowercase;
146129
}
130+
147131
footer p {
148132
margin-top: 30px;
149133
color: #9aa0a6;
150134
}
151135

152136
/* Responsiveness */
153137
@media (max-width: 768px) {
154-
.search-box {
155-
width: 300px;
156-
}
157-
138+
.search-box,
158139
.suggestions-list {
159140
width: 300px;
160141
}
@@ -165,11 +146,7 @@ footer p {
165146
width: 200px;
166147
}
167148

168-
.suggestions-list {
169-
width: 200px;
170-
}
171-
172149
header h1 {
173150
font-size: 48px;
174151
}
175-
}
152+
}

0 commit comments

Comments
 (0)