29 |
30 |
31 |
32 |
33 |
34 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Dictionary-App: Your Vocabulary Booster 📚📖🔍
2 |
3 | https://github.com/Manishak798/Pokemon-card-genrator-/assets/90680330/c8a8f357-769f-4417-a04b-1fd35645075d
4 |
5 |
6 |
7 | **Visit Project🔗**
8 |
9 | https://manishak798.github.io/Dictionary-App/
10 |
11 | **Description** 📄
12 |
13 | Get ready to expand your vocabulary and master word meanings with Dict-tactic, a user-friendly web app built with cutting-edge technologies! It leverages the power of HTML, CSS, JavaScript, and the Dictionary API to bring you comprehensive definitions, synonyms, antonyms, and example sentences, all at your fingertips.
14 |
15 | **Features** ✨⭐
16 |
17 | * Instant Word Lookups: Search for any word and instantly see its definition, part of speech, and other details.
18 | * Clear & Concise Explanations: Understand word meanings easily with well-structured and easily digestible explanations.
19 | * Synonym & Antonym Power: Explore synonyms and antonyms to unlock new ways to express yourself and grasp subtle nuances.
20 | * Real-world Examples: See how words are used in context with practical example sentences.
21 | * Responsive Design: Enjoy a seamless experience on any device, whether desktop, mobile, or tablet.
22 |
23 | **Technologies:** 👩🏻💻
24 |
25 | * HTML: The sturdy foundation for the app's structure and content.
26 | * CSS: Enhances the visuals with elegant styles and formatting.
27 | * JavaScript: Manages interactivity, data fetching, and dynamic elements.
28 | * Dictionary API: The secret sauce, providing definitions, synonyms, antonyms, and examples.
29 |
30 | **Getting Started:** 🌟📍
31 |
32 | 1. Clone the Repository:
33 | ```bash
34 | git clone https://github.com/[your-username]/[project-name].git
35 | ```
36 | 2. Install Dependencies:
37 | Follow the instructions in `package.json` (usually `npm install`).
38 | 3. Launch the App:
39 | Start the development server with the provided script (e.g., `npm start`).
40 | 4. Open in Browser:
41 | Visit the app at the specified URL (e.g., `http://localhost:3000`).
42 |
43 | **Customize & Contribute:** 🤝🏻
44 |
45 | * Make it your own: Adapt the app's name, styles, and features to your liking.
46 | * ➕ Integrate more APIs: Unlock even richer word information with additional language resources.
47 | * Join the community: Submit pull requests, raise issues, and help Dict-tastic grow!
48 |
49 | **Enjoy & Share the Knowledge!⭐**
50 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | //app.js file
2 | const url = "https://api.dictionaryapi.dev/api/v2/entries/en/";
3 | const searchdword = document.getElementById("search-word");
4 | const partofspeech = document.getElementById("pos");
5 | const text = document.getElementById("text");
6 | const worddefine = document.getElementById("word-defination");
7 | const button = document.getElementById("btn");
8 | const sound = document.getElementById("sound");
9 | const result = document.getElementById("result");
10 | button.addEventListener("click", () => {
11 | //to add eventlistner event name and call back
12 | const inptext = document.getElementById("inp-word").value;//when user click on btn it will listen for inp text
13 | // console.log(inptext);
14 | fetch(`${url}${inptext}`)
15 | .then((response) => response.json())//convert data to json format
16 | .then((data) => {
17 | if (`${inptext}` != data[0]) {
18 | result.style.margin = "20px";
19 | result.innerHTML = "