-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
138 lines (137 loc) · 4.68 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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>DEFINIFY English-English Dictionary | By SHAH SAMIN YASAR</title>
<meta
name="description"
content="Definify is an English-English dictionary web app developed with vanilla JavaScript."
/>
<meta name="robots" content="index,follow" />
<meta
property="og:title"
content="DEFINIFY English-English Dictionary | By SHAH SAMIN YASAR"
/>
<meta
property="og:description"
content="Definify is an English-English dictionary web app developed with vanilla JavaScript."
/>
<meta
property="og:image"
itemprop="image"
content="https://shahsaminyasar.github.io/definify/media/og_image.png"
/>
<meta property="og:type" content="website" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="250" />
<meta property="og:image:height" content="138" />
<meta
property="og:url"
content="https://shahsaminyasar.github.io/definify"
/>
<link rel="icon" type="image/x-icon" href="./favicon.png" />
<!-- Stylesheets -->
<link rel="stylesheet" href="style.css" />
<!-- FontAwesome CDN -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
</head>
<body>
<div class="container">
<h1>DEFINIFY</h1>
<!-- Search Bar -->
<div class="search_bar">
<i class="fa-solid fa-magnifying-glass"></i>
<input
type="text"
placeholder="Type a word and hit enter"
id="search_input"
/>
<button class="clearSearchButton hidden">
<i class="fa-solid fa-x"></i>
</button>
</div>
<div class="result_area">
<p class="welcome_text">
Type any existing word and press enter to get definitions, synonyms,
antonyms, examples and more.
</p>
<!-- Loading Area -->
<div class="loading hidden">Fetching data...</div>
<!-- Result Area -->
<div class="result_bar hidden">
<!-- Result Area Top [Word and Phonetics] -->
<div class="result_bar__top">
<!-- Word Display -->
<span id="word"></span>
<!-- Phonetic Buttons Container -->
<div class="phonetics_bar"></div>
</div>
<!-- Meanings Area -->
<div class="meanings_bar">
<!-- Meaning Card -->
<!-- <div class="meaning_card">
<span class="partOfSpeech">Noun</span>
<div class="definitions">
<div class="definition">
<p>A solid or hollow sphere, or roughly spherical mass.</p>
<p>
Example: It was just a trick to say that the house was
underpriced.
</p>
</div>
<div class="definition">
<p>A solid or hollow sphere, or roughly spherical mass.</p>
<p>
Example: It was just a trick to say that the house was
underpriced.
</p>
</div>
<div class="definition">
<p>A solid or hollow sphere, or roughly spherical mass.</p>
<p>
Example: It was just a trick to say that the house was
underpriced.
</p>
</div>
</div>
<p class="synonyms">
Synonyms: <a href="">adroit</a> <a href="">talented</a>
<a href="">cunning</a>
</p>
<p class="antonyms">
Antonyms: <a href="">clumsy</a> <a href="">natural</a>
<a href="">ineffectual</a> <a href="">naive</a>
<a href="">dull</a>
<a href="">stupid</a>
</p>
</div> -->
</div>
</div>
</div>
</div>
<span
style="
font-size: 15px;
font-weight: 300;
display: block;
margin-top: 20px;
"
>Developed with 🤍 by
<a
target="_blank"
href="https://shahsaminyasar.github.io/portfolio/home.html"
style="font-style: normal; text-decoration: none; font-weight: 500"
>SHAH SAMIN YASAR</a
></span
>
<!-- Scripts -->
<script src="script.js"></script>
</body>
</html>