-
Notifications
You must be signed in to change notification settings - Fork 186
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
fb302fd
commit 33ecebf
Showing
7 changed files
with
226 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,64 @@ | ||
| <h1 align='center'><b>💥 Dictonary Application Using Javascript 💥</b></h1> | ||
|
|
||
| <!-- -------------------------------------------------------------------------------------------------------------- --> | ||
|
|
||
| <h3 align='center'>Tech Stack Used 🎮</h3> | ||
|
|
||
|
|
||
| <div align='center'> | ||
|
|
||
|  | ||
|  | ||
|  | ||
|
|
||
| </div> | ||
|
|
||
|
|
||
|  | ||
|
|
||
| <!-- -------------------------------------------------------------------------------------------------------------- --> | ||
|
|
||
| ## :zap: Description 📃 | ||
|
|
||
| <div> | ||
| <p>This project is HTML,CSS and Javascript implementation of a Dictonary Application.It aims to Find the word meaning, part of speech,pronunciation,etc using HTML, CSS, and JavaScript involves building a simple front-end form where users can input their word, and then using JavaScript actual meaning of word will shown on screen.This Showcases the power of HTML,CSS and Javascript.</p> | ||
| </div> | ||
|
|
||
| <!-- -------------------------------------------------------------------------------------------------------------- --> | ||
|
|
||
| ## :zap: How to run it? 🕹️ | ||
|
|
||
| <div> | ||
| <p>To run this project locally, follow these steps: | ||
|
|
||
| - Fork this repository. | ||
| - Clone the forked repository. | ||
| - Open index.html in your web browser to start your culinary exploration. | ||
|
|
||
| </p> | ||
| </div> | ||
|
|
||
|
|
||
| <!-- -------------------------------------------------------------------------------------------------------------- --> | ||
|
|
||
| ## :zap: Screenshots 📸 | ||
| <!-- add the screenshot of the project (Mandatory) --> | ||
| <img src='screenshot.webp'> | ||
|
|
||
|  | ||
|
|
||
| <!-- -------------------------------------------------------------------------------------------------------------- --> | ||
|
|
||
| <h4 align='center'>Developed By <b><i>Damini Chachane</i></b></h4> | ||
| <p align='center'> | ||
| <a href='linkedin.com/in/damini-chachane-82a210252'> | ||
| <img src='https://img.shields.io/badge/linkedin-%230077B5.svg?style=for-the-badge&logo=linkedin&logoColor=white' /> | ||
| </a> | ||
| <a href='https://github.com/Damini2004'> | ||
| <img src='https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white' /> | ||
| </a> | ||
| </p> | ||
|
|
||
| <h4 align='center'>Happy Coding 🧑💻</h4> | ||
|
|
||
| <h3 align="center">Show some ❤️ by 🌟 this repository!</h3> |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <!-- Font Awesome --> | ||
| <link | ||
| rel="stylesheet" | ||
| href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" | ||
| /> | ||
| <!-- Google Fonts --> | ||
| <link | ||
| href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" | ||
| rel="stylesheet" | ||
| /> | ||
| <!-- Stylesheet --> | ||
| <link rel="stylesheet" href="style.css" id="theme-style"> | ||
| <title>Dictionary</title> | ||
| </head> | ||
| <body> | ||
| <audio id="sound"></audio> | ||
| <div class="container"> | ||
| <div class="search-box"> | ||
| <input | ||
| type="text" | ||
| placeholder="Type the word here.." | ||
| id="inp-word" | ||
| /> | ||
| <button id="search-btn">Search</button> | ||
| </div> | ||
| <div class="result" id="result"></div> | ||
| </div> | ||
| <!-- Script --> | ||
| <script src="script.js"></script> | ||
| </body> | ||
| </html> |
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| const url = "https://api.dictionaryapi.dev/api/v2/entries/en/"; | ||
| const result = document.getElementById("result"); | ||
| const sound = document.getElementById("sound"); | ||
| const btn = document.getElementById("search-btn"); | ||
|
|
||
| btn.addEventListener("click", () => { | ||
| let inpWord = document.getElementById("inp-word").value; | ||
| fetch(`${url}${inpWord}`) | ||
| .then((response) => response.json()) | ||
| .then((data) => { | ||
| console.log(data); | ||
| result.innerHTML = ` | ||
| <div class="word"> | ||
| <h3>${inpWord}</h3> | ||
| <button onclick="playSound()"> | ||
| <i class="fas fa-volume-up"></i> | ||
| </button> | ||
| </div> | ||
| <div class="details"> | ||
| <p>${data[0].meanings[0].partOfSpeech}</p> | ||
| <p>/${data[0].phonetic}/</p> | ||
| </div> | ||
| <p class="word-meaning"> | ||
| ${data[0].meanings[0].definitions[0].definition} | ||
| </p> | ||
| <p class="word-example"> | ||
| ${data[0].meanings[0].definitions[0].example || ""} | ||
| </p>`; | ||
|
Check warning Code scanning / CodeQL DOM text reinterpreted as HTML Medium DOM text Error loading related location Loading |
||
| sound.setAttribute("src", `https:${data[0].phonetics[0].audio}`); | ||
| }) | ||
| .catch(() => { | ||
| result.innerHTML = `<h3 class="error">The word hasn't been found!!</h3>`; | ||
| }); | ||
| }); | ||
| function playSound() { | ||
| sound.play(); | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,89 @@ | ||
| * { | ||
| padding: 0; | ||
| margin: 0; | ||
| box-sizing: border-box; | ||
| } | ||
| *:not(i) { | ||
| font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; | ||
| } | ||
| body { | ||
| background-color: #F5F5DC; | ||
| background: url(bg.jpg); | ||
| background-repeat: no-repeat; | ||
| background-size:cover; | ||
| opacity: 2; | ||
|
|
||
| } | ||
| .container { | ||
| background-color: #ffffff; | ||
| width: 90vmin; | ||
| position: absolute; | ||
| transform: translate(-50%, -50%); | ||
| top: 50%; | ||
| left: 50%; | ||
| padding: 80px 50px; | ||
| border-radius: 10px; | ||
| box-shadow: 0 20px 40px rgba(38, 33, 61, 0.2); | ||
| } | ||
| .search-box { | ||
| width: 100%; | ||
| display: flex; | ||
| justify-content: space-between; | ||
| } | ||
| .search-box input { | ||
| padding: 5px; | ||
| width: 70%; | ||
| border: none; | ||
| outline: none; | ||
| border-bottom: 3px solid brown; | ||
| font-size: 16px; | ||
| } | ||
| .search-box button { | ||
| padding: 15px 0; | ||
| width: 25%; | ||
| background-color: brown; | ||
| border: none; | ||
| outline: none; | ||
| color: #ffffff; | ||
| border-radius: 5px; | ||
| } | ||
| .result { | ||
| position: relative; | ||
| } | ||
| .result h3 { | ||
| font-size: 30px; | ||
| color: brown; | ||
| } | ||
| .result .word { | ||
| display: flex; | ||
| justify-content: space-between; | ||
| margin-top: 80px; | ||
| } | ||
| .result button { | ||
| background-color: transparent; | ||
| color: brown; | ||
| border: none; | ||
| outline: none; | ||
| font-size: 18px; | ||
| } | ||
| .result .details { | ||
| display: flex; | ||
| gap: 10px; | ||
| color: #120c2d; | ||
| margin: 5px 0 20px 0; | ||
| font-size: 14px; | ||
| } | ||
| .word-meaning { | ||
| color: brown; | ||
| } | ||
| .word-example { | ||
| color: #575a7b; | ||
| font-style: italic; | ||
| border-left: 5px solid #120c2d; | ||
| padding-left: 20px; | ||
| margin-top: 30px; | ||
| } | ||
| .error { | ||
| margin-top: 80px; | ||
| text-align: center; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters