Dictonary App using Javascript Solved #163 #168
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>💥 Email Subscription form with Google Sheet 💥</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>`; | ||
|
||
| 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
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
change the title of README.