Dictionary App Added

ST1LLWATER · Oct 5, 2022 · ac6be0b · ac6be0b
1 parent 4b87d2d
commit ac6be0b
Show file tree

Hide file tree

Showing 5 changed files with 205 additions and 0 deletions.
diff --git a/Js-Projects/Dictionary App/Logo.png b/Js-Projects/Dictionary App/Logo.png
diff --git a/Js-Projects/Dictionary App/README.md b/Js-Projects/Dictionary App/README.md
@@ -0,0 +1,6 @@
+## Dictionary App
+This website is used to get the meanings of the words and displays it. It uses API. Also it have a feature of narration which recites the word and the meaning. This feature would be helpful for differently abled people.
+## Tech Stack
+- HTML
+- CSS
+- JavaScript 
diff --git a/Js-Projects/Dictionary App/index.html b/Js-Projects/Dictionary App/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="shortcut icon" href="./Logo.png" type="image/png" />
+    <title>Dictionary App</title>
+    <link rel="stylesheet" href="style.css" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
+    />
+  </head>
+  <body>
+    <audio id="speech"></audio>
+    <div class="wrapper">
+      <div class="search-box">
+        <input type="text" placeholder="Type Word Here.." id="inp-word" />
+        <button id="search-btn">Search</button>
+      </div>
+      <div class="info" id="res">
+        <div class="word">
+          <h3>DICTIONARY APP</h3>
+        </div>
+        <div class="details">
+        </div>
+        <p class="word-mean">
+          This is Application is made using JavaScript. Search any word you want meaning of, in Search Bar.
+        </p>
+        <p class="example">
+          Made by <a target="_blank" href="https://atharv110.co/">Atharv Vani</a>
+        </p>
+      </div>
+    </div>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/Js-Projects/Dictionary App/script.js b/Js-Projects/Dictionary App/script.js
@@ -0,0 +1,37 @@
+const url = "https://api.dictionaryapi.dev/api/v2/entries/en/";
+const result = document.getElementById("res");
+const sound = document.getElementById("speech");
+const btn = document.getElementById("search-btn");
+
+btn.addEventListener("click", () => {
+  let inpWrd = document.getElementById("inp-word").value;
+  fetch(`${url}${inpWrd}`)
+    .then((response) => response.json())
+    .then((data) => {
+      console.log(data);
+      result.innerHTML = `<div class="word">
+        <h3>${inpWrd}</h3>
+        <button onclick="playSpeech()">
+          <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-mean">
+        ${data[0].meanings[0].definitions[0].definition}
+      </p>
+      <p class="example">
+        ${data[0].meanings[0].definitions[0].example || ""}
+      </p>`;
+      sound.setAttribute("src", `${data[0].phonetics[0].audio}`);
+    })
+    .catch(()=>{
+      result.innerHTML = `<h3 class = "error">Couldn't Find The Word</h3>`;
+    });
+});
+
+function playSpeech() {
+  sound.play();
+}
diff --git a/Js-Projects/Dictionary App/style.css b/Js-Projects/Dictionary App/style.css
@@ -0,0 +1,124 @@
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap");
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  font-family: "Montserrat", sans-serif;
+  transition: 0.3s all ease-in;
+}
+:root {
+  --light: #828a95;
+  --black: #181d27;
+  --blue: #97f9f9;
+  --blue1: #a4def9;
+  --white: #f7f5fb;
+  --white1: #f8f4e3;
+}
+body {
+  background: var(--light);
+}
+.wrapper {
+  background: var(--black);
+  width: 90vmin;
+  position: absolute;
+  transform: translate(-50%, -50%);
+  top: 50%;
+  left: 50%;
+  padding: 80px 50px;
+  border-radius: 15px;
+  box-shadow: 0 20px 40px rgba(38, 33, 61, 0.5);
+}
+.search-box {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+}
+.search-box input {
+  padding: 5px;
+  width: 70%;
+  border: none;
+  outline: none;
+  border-bottom: 4px solid var(--blue);
+  background: none;
+  color: var(--white);
+  font-weight: 500;
+  font-size: 15px;
+}
+.search-box button {
+  padding: 5px 0;
+  width: 25%;
+  border: none;
+  outline: none;
+  background: var(--white);
+  opacity: 0.8;
+  color: var(--black);
+  font-size: 18px;
+  border-radius: 5px;
+  font-weight: 700;
+  cursor: pointer;
+}
+.search-box button:hover {
+  background-color: var(--blue);
+  opacity: 1;
+}
+.info {
+  position: relative;
+}
+.info h3 {
+  font-size: 35px;
+  color: var(--blue);
+  font-weight: 800;
+}
+.info .word {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 50px;
+}
+.info button {
+  background-color: transparent;
+  opacity: 0.6;
+  color: var(--blue);
+  border: none;
+  outline: none;
+  font-size: 25px;
+  cursor: pointer;
+  transition: 0.3s ease;
+}
+.info button:hover {
+  opacity: 1;
+}
+.info .details {
+  display: flex;
+  gap: 10px;
+  color: var(--white1);
+  margin: 5px 0 20px 0;
+  font-size: 14px;
+  font-weight: 500;
+  opacity: 0.6;
+}
+.word-mean {
+  color: var(--white1);
+  font-weight: 500;
+  text-align: justify;
+  opacity: 0.9;
+  font-size: 17px;
+}
+.example {
+  color: var(--white1);
+  font-weight: 500;
+  opacity: 0.99;
+  padding-left: 20px;
+  border-left: 4px solid var(--blue);
+  margin-top: 30px;
+}
+.example a {
+  color: var(--white1);
+  transition: 0.8s all ease;
+}
+.example a:hover {
+  color: var(--blue);
+}
+.error{
+  margin-top: 50px;
+  text-align: center;
+}