dictionary in progress

Author: thekiranmahajan

Chapter10/dictionaryUsingAPI/divineDefine.js

@@ -12,46 +12,64 @@ wordInput.addEventListener("keydown", (event) => {
 });
 
 searchBtn.addEventListener("click", () => {
- let wordInput = document.getElementById("wordInput").value;
+ const wordInput = document.getElementById("wordInput").value;
  console.log(wordInput);
-
- fetch(`${url}${wordInput}`)
- .then((response) => {
- return response.json();
- })
- .then((data) => {
- result.innerHTML = ` <div id="word">
+ if (!wordInput == "") {
+  fetch(`${url}${wordInput}`)
+  .then((response) => {
+  return response.json();
+  })
+  .then((data) => {
+  result.innerHTML = ` <div id="word">
  <h3>${wordInput}</h3><button onclick="pronounce()"><i class="fa-solid fa-volume-high"></i></button>
  </div>
  <div id="details">
  <p>${data[0].meanings[0].partOfSpeech}</p>
  <p>/${data[0].phonetic}/</p>
  </div>
- <p id="wordMeaning">${
- data[0].meanings[0].definitions[0].definition
- }</p>
+ <div id="wordMeaning-copyBtn">
+ <p id="wordMeaning">${
+ data[0].meanings[0].definitions[0].definition
+ }</p>
+ <button id="copyBtn"><i class="fa-solid fa-copy"></i></button>
+ </div>
  <p id="wordExample">${
  data[0].meanings[0].definitions[0].example ||
  data[0].meanings[1]?.definitions[0]?.example ||
  "null"
  }</p>`;
- sound.setAttribute(
- "src",
- `${
- data[0].phonetics[0]?.audio || //Optional Chaining (?.) Operator chatGPT's suggestion
- data[0].phonetics[1]?.audio ||
- data[0].phonetics[2]?.audio
- }`
- );
- console.log(data);
- console.log(sound);
- })
- .catch((error) => {
- result.innerHTML = `<h3 id="errorMessage">Sorry pal, we couldn't find definitions for the word you were looking for.</h3>`;
- console.log(error);
- console.log(error.message);
- });
+ sound.setAttribute(
+ "src",
+ `${
+ data[0].phonetics[0]?.audio || //Optional Chaining (?.) Operator chatGPT's suggestion
+ data[0].phonetics[1]?.audio ||
+ data[0].phonetics[2]?.audio
+ }`
+ );
+ const copyBtn = document.getElementById("copyBtn");
+ copyBtn.addEventListener("click", () => {
+ copyToClipboard(data[0].meanings[0].definitions[0].definition);
+ });
+ })
+ .catch((error) => {
+ result.innerHTML = `<h3 id="errorMessage">Sorry pal, we couldn't find definitions for the word you were looking for.</h3>`;
+ console.log(error);
+ console.log(error.message);
+ });
+ } else {
+ result.innerHTML = `<h3 id="errorMessage">Atleast provide me a word man!</h3>`;
+ }
 });
 const pronounce = () => {
  sound.play();
 };
+const copyToClipboard = (text) => {
+ navigator.clipboard
+ .writeText(text)
+ .then(() => {
+ console.log(`${text} is copied to clipboard!`);
+ })
+ .catch((error) => {
+ console.error("Copy failed:", error);
+ });
+};

Chapter10/dictionaryUsingAPI/index.html

@@ -27,6 +27,7 @@
  <input type="text" placeholder="Type the word here..." id="wordInput"><button id="searchBtn">Search</button>
  </div>
  <div id="result">
+ 
  </div>
  </div>
 

Chapter10/dictionaryUsingAPI/style.css

@@ -96,6 +96,19 @@ body {
  font-size: 2vmin;
  color: #575a7b;
 }
+#wordMeaning-copyBtn {
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+}
+#copyBtn {
+ padding: 1vmin;
+ background-color: transparent;
+ color: #f4d03f;
+ border: none;
+ outline: none;
+ font-size: 1.7vmax;
+}
 
 @media (max-width: 575.98px) {
  #container {
@@ -142,6 +155,9 @@ body {
  margin-top: 3vmax;
  font-size: 2vmin;
  }
+ #copyBtn {
+ font-size: 3.6vmax;
+ }
 }
 @media (min-width: 576px) and (max-width: 767.98px) {
 }