Skip to content

Commit ca189ba

Browse files
Yash-BarjatyaYash-Barjatya
committed
Added files for Word dictionary project
1 parent 8f1f442 commit ca189ba

File tree

4 files changed

+916
-0
lines changed

4 files changed

+916
-0
lines changed

‎Dictionary/README.md

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
# Wordictionary
2+
3+
[Wordictionary](https://yash-barjatya.github.io/Dictionary/ "Wordictionary: A word dictionary website") : A _Word dictionary_ , where you can search for ***meaning***, ***pronounciation***, ***example*** (use of that word in sentences) of millions of words and also ***bookmark*** the words for future references.
4+
5+
- - - -
6+
7+
It is written in :
8+
9+
* _HTML_
10+
* _CSS_
11+
* _JS_
12+
13+
- - - -
14+
1. **Search word and get not only the meaning of the word but also learn about its phonetic.**
15+
16+
17+
![Screenshot (1318)](https://user-images.githubusercontent.com/82602080/136999293-05da6fd4-8f27-4a9b-83a6-b518341ec599.png)
18+
19+
- - - -
20+
2. **Bookmark diificult words.**
21+
22+
23+
![Screenshot (1319)](https://user-images.githubusercontent.com/82602080/137000102-39d25ff9-fe0b-485c-9c34-4595ef2d1f31.png)
24+
25+
- - - -
26+
3. **Hover over recent searches to get a quick definiton of the word.**
27+
28+
29+
![Screenshot (1320)](https://user-images.githubusercontent.com/82602080/137000446-026f5ae9-0e7a-4822-8c0e-69d2e810c02a.png)
30+
31+
- - - -
32+
## Hope you like it !!
33+
34+
_Note_ : For best experience view in desktop or laptop.

‎Dictionary/index.html

Lines changed: 233 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,233 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Dictionary</title>
9+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
10+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
11+
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
12+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
13+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide|Sofia|Trirong|Questrial|
14+
Ephesis|Architects Daughter&effect=fire">
15+
<link rel=stylesheet href="style.css">
16+
</head>
17+
18+
<body>
19+
<main>
20+
<!--Loading animation-->
21+
<section id="loading_animation">
22+
<div class="book">
23+
<span class="page turn"></span>
24+
<span class="page turn">Please</span>
25+
<span class="page turn">Wait</span>
26+
<span class="page turn">While</span>
27+
<span class="page turn"></span>
28+
<span class="page turn">We Load...</span>
29+
<span class="cover"></span>
30+
<span class="page"></span>
31+
<span class="cover turn"></span>
32+
</div>
33+
</section>
34+
<!--NAV BAR SECTION -->
35+
<section>
36+
<nav class="navbar navbar-expand-lg navbar-light">
37+
<div class="container-fluid">
38+
<a class="navbar-brand" href="#"><i class="bi bi-file-earmark-word-fill"></i>&nbsp WORDICTIONARY</a>
39+
40+
<div class="collapse navbar-collapse" id="navbarNav">
41+
<ul class="navbar-nav">
42+
<li class="nav-item">
43+
<button type="button" class="btn btn-outline-warning" id="bookmark_btn"
44+
data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight"
45+
aria-controls="offcanvasRight">
46+
Bookmarks</button>
47+
48+
49+
</li>
50+
</ul>
51+
</div>
52+
</div>
53+
</nav>
54+
<!--OFFCANVAS style to show bookmarked word list-->
55+
<div class=" mobile-offcanvas offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight"
56+
aria-labelledby="offcanvasRightLabel">
57+
<div class="offcanvas-header">
58+
<br><br>
59+
<h4 id="offcanvasRightLabel">BOOKMARKED WORDS</h4>
60+
<br><br>
61+
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"
62+
aria-label="Close"></button>
63+
</div>
64+
<div class="offcanvas-body">
65+
<ul id="bookmarked_words_element">
66+
</ul>
67+
</div>
68+
</div>
69+
</section>
70+
<br>
71+
<section>
72+
<h1 id="site_name"><i class="bi bi-file-earmark-word-fill"></i>&nbsp WORDICTIONARY</h1>
73+
</section>
74+
<br><br>
75+
<!---QUOTE -->
76+
<section>
77+
78+
<div class=" card quote_box ">
79+
<div class=" card_body">
80+
81+
<blockquote class="blockquote mb-0">
82+
<p id="quote">Loading quote.</p>
83+
<cite id="author" title="Source Title">Server</cite>
84+
</blockquote>
85+
</div>
86+
</div>
87+
88+
</section>
89+
<br><br>
90+
<!---WORD SEARCH-->
91+
<section>
92+
<div class="hstack gap-3">
93+
<input class="form-control me-auto" id="search_word" type="text" placeholder="Search your word here..."
94+
aria-label="Add your item here...">
95+
<button type="button" class="btn btn-outline-success" id="search_btn">Search</button>
96+
97+
<button type="button" class="btn btn-outline-danger" id="reset_btn">Reset</button>
98+
</div> <br><br>
99+
<div id="word_result_div">
100+
<!--if no word searched-->
101+
<div aria-live="polite" aria-atomic="true" class="bg-dark position-relative bd-example-toasts">
102+
<div class="toast-container position-fixed bottom-0 end-0 p-3 " id="toastPlacement">
103+
<div class="toast" id="liveToast">
104+
<div class="toast-header">
105+
<i class="bi bi-file-earmark-word-fill"></i>&nbsp&nbsp
106+
<strong class="me-auto">WORDICTIONARY</strong>
107+
108+
</div>
109+
<div class="toast-body">
110+
<b>ERROR:</b> <i>Please type the word to be searched...</i>
111+
</div>
112+
</div>
113+
</div>
114+
</div>
115+
<!--card to be displayed if a word is given in input-->
116+
<div class="card" id="show_result" style="width: 25rem;">
117+
<div class="card-body">
118+
<button type="button" id="bookmark_icon"><i class="bi bi-bookmark " style=" font-size:
119+
02rem;"></i></button>
120+
<h5 class="card-title" id="card_title">Word searched</h5><br>
121+
122+
123+
<span class="card-text" id="word_pronounciation" title="phonetics:text">Word pronounciation
124+
&nbsp
125+
&nbsp
126+
&nbsp
127+
&nbsp
128+
&nbsp
129+
&nbsp
130+
&nbsp
131+
</span>
132+
<button type="button" id="audio_btn" title="phonetics:audio"><i class="bi bi-volume-down"
133+
style="font-size: 3rem;"></i><audio id="word_audio">
134+
<source src="" id="word_audio_source" type="audio/ogg">
135+
<source src="" id="word_audio_source" type="audio/mpeg">
136+
Your browser does not support the audio element.
137+
</audio></button><br>
138+
139+
<p class="card-text" id="word_meaning">Word meaning<br></p>
140+
<p class="card-text" id="word_example">word_example</p><br>
141+
142+
</div>
143+
</div>
144+
</div>
145+
</section>
146+
<br><br>
147+
<!--section for recent searches-->
148+
<section id="word_history_section">
149+
<h1 id="recent_search_title">RECENT SEARCHES</h1><br><br>
150+
<div id="recently_searched" class="row container-fluid">
151+
</div>
152+
153+
</section>
154+
155+
</main><br><br><br><br><br><br><br>
156+
<footer id="footer">
157+
158+
<div class="footer-top">
159+
<div class="container">
160+
<div class="row">
161+
<div class="col-lg-4 col-md-4 footer-info">
162+
<h2>About Developer</h2>
163+
<br>
164+
<h3>Yash Barjatya</h3><br>
165+
<p>A tireless seeker of knowledge and a budding web developer who loves experimenting with HTML,
166+
CSS, and JavaScript.</p>
167+
</div>
168+
<div class="col-lg-5"></div>
169+
<div class="col-lg-3 col-md-8 footer-contact">
170+
<h2>My Handles</h2><br>
171+
<div class="social-links">
172+
<tr>
173+
174+
<a target="_blank" href="mailto:[email protected]"><i
175+
class="fa fa-envelope fa-2x" aria-hidden="true"></i></i></a>
176+
177+
<a href="https://github.com/Yash-Barjatya" target="_blank"><i class="fa fa-github fa-2x"
178+
aria-hidden="true"></i></i></a>
179+
180+
181+
<a href="https://in.linkedin.com/in/yash-barjatya-075a95205" target="_blank"><i
182+
class="fa fa-linkedin fa-2x" aria-hidden="true"></i></a>
183+
184+
185+
<a href="https://www.instagram.com/__yash__barjatya/?hl=en" target="_blank"><i
186+
class="fa fa-instagram fa-2x " aria-hidden="true"></i></a>
187+
188+
189+
190+
<a href="https://twitter.com/YBarJain" target="_blank"><i class="fa fa-twitter fa-2x"
191+
aria-hidden="true"></i></a>
192+
193+
194+
195+
196+
<a href="https://www.facebook.com/YBarJain" target="_blank"><i
197+
class="fa fa-facebook fa-2x" aria-hidden="true"></i></a>
198+
199+
200+
</tr>
201+
</div>
202+
203+
</div>
204+
</div>
205+
</div>
206+
</div>
207+
208+
<div class="container">
209+
<div class="copyright">
210+
<p>&copy; Copyright <strong>Yash-Barjatya</strong>. All Rights Reserved</p>
211+
</div>
212+
</footer><!-- End Footer -->
213+
214+
<button type="button" class="btn btn-warning btn-floating btn-lg" id="btn-back-to-top">
215+
<i class="fa fa-arrow-up"></i>
216+
</button>
217+
218+
</body>
219+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
220+
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
221+
crossorigin="anonymous"></script>
222+
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
223+
integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
224+
crossorigin="anonymous"></script>
225+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
226+
integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
227+
crossorigin="anonymous"></script>
228+
229+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
230+
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
231+
<script src="script.js"></script>
232+
233+
</html>

0 commit comments

Comments
 (0)