diff --git a/Vanilla-JS-Projects/Basic/Dictonary-App/README.md b/Vanilla-JS-Projects/Basic/Dictonary-App/README.md new file mode 100644 index 00000000..59f5cc7d --- /dev/null +++ b/Vanilla-JS-Projects/Basic/Dictonary-App/README.md @@ -0,0 +1,64 @@ +

đŸ’Ĩ Dictonary Application Using Javascript đŸ’Ĩ

+ + + +

Tech Stack Used 🎮

+ + +
+ + ![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white) + ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white) + ![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E) + +
+ + +![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847) + + + +## :zap: Description 📃 + +
+

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.

+
+ + + +## :zap: How to run it? 🕹ī¸ + +
+

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. + +

+
+ + + + +## :zap: Screenshots 📸 + + + +![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847) + + + +

Developed By Damini Chachane

+

+ + + + + + +

+ +

Happy Coding 🧑‍đŸ’ģ

+ +

Show some  â¤ī¸  by  đŸŒŸ  this repository!

\ No newline at end of file diff --git a/Vanilla-JS-Projects/Basic/Dictonary-App/bg.jpg b/Vanilla-JS-Projects/Basic/Dictonary-App/bg.jpg new file mode 100644 index 00000000..0ff0aa83 Binary files /dev/null and b/Vanilla-JS-Projects/Basic/Dictonary-App/bg.jpg differ diff --git a/Vanilla-JS-Projects/Basic/Dictonary-App/index.html b/Vanilla-JS-Projects/Basic/Dictonary-App/index.html new file mode 100644 index 00000000..d460aee2 --- /dev/null +++ b/Vanilla-JS-Projects/Basic/Dictonary-App/index.html @@ -0,0 +1,35 @@ + + + + + + + + + + + Dictionary + + + +
+
+ + +
+
+
+ + + + \ No newline at end of file diff --git a/Vanilla-JS-Projects/Basic/Dictonary-App/screenshot.webp b/Vanilla-JS-Projects/Basic/Dictonary-App/screenshot.webp new file mode 100644 index 00000000..235e3fd0 Binary files /dev/null and b/Vanilla-JS-Projects/Basic/Dictonary-App/screenshot.webp differ diff --git a/Vanilla-JS-Projects/Basic/Dictonary-App/script.js b/Vanilla-JS-Projects/Basic/Dictonary-App/script.js new file mode 100644 index 00000000..03db4025 --- /dev/null +++ b/Vanilla-JS-Projects/Basic/Dictonary-App/script.js @@ -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 = ` +
+

${inpWord}

+ +
+
+

${data[0].meanings[0].partOfSpeech}

+

/${data[0].phonetic}/

+
+

+ ${data[0].meanings[0].definitions[0].definition} +

+

+ ${data[0].meanings[0].definitions[0].example || ""} +

`; + sound.setAttribute("src", `https:${data[0].phonetics[0].audio}`); + }) + .catch(() => { + result.innerHTML = `

The word hasn't been found!!

`; + }); +}); +function playSound() { + sound.play(); +} \ No newline at end of file diff --git a/Vanilla-JS-Projects/Basic/Dictonary-App/style.css b/Vanilla-JS-Projects/Basic/Dictonary-App/style.css new file mode 100644 index 00000000..df7ab24d --- /dev/null +++ b/Vanilla-JS-Projects/Basic/Dictonary-App/style.css @@ -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; +} \ No newline at end of file diff --git a/Vanilla-JS-Projects/README.md b/Vanilla-JS-Projects/README.md index ce441139..a5df0813 100644 --- a/Vanilla-JS-Projects/README.md +++ b/Vanilla-JS-Projects/README.md @@ -51,7 +51,7 @@ | 24 | [Language Translator](./Intermediate/Language-Translator/) | ![Intermediate](https://img.shields.io/badge/Intermediate-FFD700?style=for-the-badge) | | 25 | [Ceaser-Cipher](./Intermediate/Ceaser-Cipher/) | ![Intermediate](https://img.shields.io/badge/Intermediate-FFD700?style=for-the-badge) | | 26 | [Email-Subscription-form-with-google-sheet](./Intermediate/Email-Subscription-form-with-google-sheet/) | ![Intermediate](https://img.shields.io/badge/Intermediate-FFD700?style=for-the-badge) | - +| 27 | [Dictonary-App](./Basic/Dictonary-App/) | ![Basic](https://img.shields.io/badge/Basic-00FF00?style=for-the-badge) |