Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit f2f98f5

Browse files
Update Ajax type ahead project
1 parent 227a770 commit f2f98f5

File tree

3 files changed

+192
-47
lines changed

3 files changed

+192
-47
lines changed

β€Ž06 - Type Ahead/css/style.css

Lines changed: 150 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
:root {
2-
--white-color: #fff;
2+
--white-color: #ffffff;
33
--grey-color: #efefef;
44
--blue-color: #658aaf;
55
--sapphire-blue-color: #395fa0;
@@ -22,35 +22,42 @@
2222
box-sizing: border-box;
2323
}
2424

25+
ul {
26+
list-style: none;
27+
}
28+
2529
html {
2630
font-size: 10px;
2731
scroll-behavior: smooth;
2832
}
2933

3034
body {
31-
background-color: var(--blue-color);
3235
overflow-x: hidden;
33-
}
34-
35-
.custom-shape-divider-bottom {
36-
position: absolute;
37-
bottom: 0;
38-
left: 0;
39-
width: 100%;
40-
overflow: hidden;
41-
line-height: 0;
42-
transform: rotate(180deg);
43-
}
44-
45-
.custom-shape-divider-bottom svg {
46-
position: relative;
47-
display: block;
48-
width: calc(100% + 0.2rem);
49-
height: 29rem;
50-
}
51-
52-
.custom-shape-divider-bottom .shape-fill {
53-
fill: var(--white-color);
36+
background: linear-gradient(
37+
135deg,
38+
var(--blue-color) 2.1rem,
39+
var(--word-bg-color) 2.2rem,
40+
var(--word-bg-color) 2.4rem,
41+
transparent 2.4rem,
42+
transparent 6.7rem,
43+
var(--word-bg-color) 6.7rem,
44+
var(--word-bg-color) 6.9rem,
45+
transparent 6.9rem
46+
),
47+
linear-gradient(
48+
225deg,
49+
var(--blue-color) 2.1rem,
50+
var(--word-bg-color) 2.2rem,
51+
var(--word-bg-color) 2.4rem,
52+
transparent 2.4rem,
53+
transparent 6.7rem,
54+
var(--word-bg-color) 6.7rem,
55+
var(--word-bg-color) 6.9rem,
56+
transparent 6.9rem
57+
)
58+
0 6.4rem,
59+
var(--blue-color);
60+
background-size: 6.4rem 12.8rem;
5461
}
5562

5663
input {
@@ -137,7 +144,7 @@ span.population {
137144
background-color: var(--blue-color);
138145
}
139146

140-
/* scrollbar */
147+
/* scrollbar start */
141148
::-webkit-scrollbar {
142149
width: 1.5rem;
143150
}
@@ -152,8 +159,9 @@ span.population {
152159
border-radius: 1rem;
153160
background-color: var(--sapphire-blue-color);
154161
}
162+
/* scrollbar end */
155163

156-
/* cursor */
164+
/* cursor start */
157165
#cursor {
158166
width: 0.5rem;
159167
height: 0.5rem;
@@ -167,8 +175,123 @@ span.population {
167175
outline: 0.7rem solid var(--sapphire-blue-color);
168176
box-shadow: 0 0 0.2rem var(--shadow-color2);
169177
}
178+
/* cursor end */
179+
180+
/* loader start */
181+
.cssload-container {
182+
top: 0;
183+
z-index: 200;
184+
width: 100vw;
185+
height: 100vh;
186+
display: flex;
187+
align-items: center;
188+
justify-content: center;
189+
position: absolute;
190+
background-color: var(--border-color1);
191+
}
192+
193+
.cssload-flex-container {
194+
display: flex;
195+
flex-direction: row;
196+
flex-wrap: wrap;
197+
justify-content: space-around;
198+
}
199+
200+
.cssload-flex-container li {
201+
height: 13.8rem;
202+
width: 13.8rem;
203+
padding: 1.4rem;
204+
position: relative;
205+
text-align: center;
206+
}
207+
208+
.cssload-loading {
209+
display: inline-block;
210+
height: 11rem;
211+
width: 11rem;
212+
border-radius: 100%;
213+
border: 0.6rem solid var(--blue-color);
214+
animation: cssload-spinShrink 2s ease-in infinite alternate;
215+
}
216+
217+
.cssload-loading:after {
218+
content: "";
219+
right: 1.8rem;
220+
height: 2.8rem;
221+
width: 2.8rem;
222+
display: block;
223+
background-color: var(--blue-color);
224+
position: absolute;
225+
border-radius: 100%;
226+
animation: cssload-dotShrink 2s ease-in infinite alternate;
227+
}
228+
229+
.cssload-loading:before {
230+
content: "";
231+
height: 1.4rem;
232+
width: 1.4rem;
233+
top: 50%;
234+
left: 50%;
235+
opacity: 0;
236+
display: block;
237+
position: absolute;
238+
border-radius: 100%;
239+
background-color: transparent;
240+
border: 0.3rem solid var(--blue-color);
241+
transform: translate(-50%, -50%);
242+
animation: cssload-ring 3s ease infinite;
243+
}
244+
245+
@keyframes cssload-spinShrink {
246+
from {
247+
width: 11rem;
248+
height: 11rem;
249+
transform: rotate(0deg);
250+
}
251+
252+
to {
253+
width: 1.4rem;
254+
height: 1.4rem;
255+
transform: rotate(1080deg);
256+
margin-top: 4.1rem;
257+
}
258+
}
259+
260+
@keyframes cssload-dotShrink {
261+
from {
262+
height: 2.8rem;
263+
width: 2.8rem;
264+
}
265+
266+
to {
267+
height: 0.4rem;
268+
width: 0.4rem;
269+
right: 0;
270+
}
271+
}
272+
273+
@keyframes cssload-ring {
274+
0%,
275+
50%,
276+
100% {
277+
opacity: 0;
278+
width: 1.4rem;
279+
height: 1.4rem;
280+
}
281+
282+
51% {
283+
opacity: 1;
284+
}
285+
286+
70% {
287+
opacity: 0;
288+
width: 13.8rem;
289+
height: 13.8rem;
290+
}
291+
}
292+
/* loader end */
170293

171-
/* media queries */
294+
/* media queries start */
172295
@media screen and (max-width: 900px) {
173296
html {
174297
font-size: 8px;
@@ -192,3 +315,4 @@ span.population {
192315
font-size: 5px;
193316
}
194317
}
318+
/* media queries end */

β€Ž06 - Type Ahead/index.html

Lines changed: 23 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4+
<!-- title -->
45
<title>Type Ahead</title>
56

67
<!-- required meta tags -->
@@ -23,29 +24,37 @@
2324
<link rel="stylesheet" href="css/style.css" />
2425
</head>
2526
<body>
27+
<!-- cursor start -->
2628
<div id="cursor"></div>
27-
<div class="custom-shape-divider-bottom">
28-
<svg
29-
data-name="Layer 1"
30-
xmlns="http://www.w3.org/2000/svg"
31-
viewBox="0 0 1200 120"
32-
preserveAspectRatio="none"
33-
>
34-
<path
35-
d="M1200 120L0 16.48 0 0 1200 0 1200 120z"
36-
class="shape-fill"
37-
></path>
38-
</svg>
29+
<!-- cursor end -->
30+
31+
<!-- loader start -->
32+
<div class="cssload-container">
33+
<ul class="cssload-flex-container">
34+
<li>
35+
<span class="cssload-loading"></span>
36+
</li>
37+
</ul>
3938
</div>
39+
<!-- loader end -->
40+
4041
<form class="search-form">
41-
<input type="search" class="search-input" placeholder="City or State" />
42+
<input
43+
type="search"
44+
class="search-input"
45+
placeholder="City or State"
46+
spellcheck="false"
47+
/>
4248
<ul class="suggestions">
4349
<li>Filter for a city</li>
4450
<li>or a state</li>
4551
</ul>
4652
</form>
4753

48-
<!-- javascript -->
54+
<!-- jquery -->
55+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
56+
57+
<!-- script js -->
4958
<script src="js/app.js"></script>
5059
</body>
5160
</html>

β€Ž06 - Type Ahead/js/app.js

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
"use strict";
22

3+
const cursor = document.getElementById("cursor");
4+
const ul = document.querySelector(".suggestions");
5+
const searchInput = document.querySelector(".search-input");
6+
const cities = [];
7+
38
fetch(
49
"https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json"
510
)
@@ -13,10 +18,6 @@ fetch(
1318
console.error("Error:", error);
1419
});
1520

16-
const cities = [];
17-
const ul = document.querySelector(".suggestions");
18-
const searchInput = document.querySelector(".search-input");
19-
2021
searchInput.addEventListener("keyup", showMatches);
2122

2223
function showMatches() {
@@ -52,9 +53,7 @@ function numWithCommas(n) {
5253
return n.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
5354
}
5455

55-
// cursor
56-
const cursor = document.getElementById("cursor");
57-
56+
// cursor start
5857
document.addEventListener("mousemove", changeCursor);
5958

6059
function changeCursor(e) {
@@ -72,3 +71,16 @@ document.querySelector(".search-input").addEventListener("mousemove", () => {
7271
document.querySelector(".search-input").addEventListener("mouseleave", () => {
7372
document.addEventListener("mousemove", changeCursor);
7473
});
74+
// cursor end
75+
76+
// loader start
77+
$(window).on("load", () => {
78+
setTimeout(removeLoader, 1960);
79+
});
80+
81+
function removeLoader() {
82+
$(".cssload-container").fadeOut(500, () => {
83+
$(".cssload-container").remove();
84+
});
85+
}
86+
// loader end

0 commit comments

Comments
(0)

AltStyle γ«γ‚ˆγ£γ¦ε€‰ζ›γ•γ‚ŒγŸγƒšγƒΌγ‚Έ (->γ‚ͺγƒͺγ‚ΈγƒŠγƒ«) /