the dictonary app project is addeded

Yubraj977 · Dec 26, 2023 · 117417c · 117417c
1 parent 7ca9a7d
commit 117417c
Show file tree

Hide file tree

Showing 6 changed files with 388 additions and 3 deletions.
diff --git a/Dictonary/index.html b/Dictonary/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+
+    <link rel="stylesheet" href="style.css">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script src='https://kit.fontawesome.com/a076d05399.js' crossorigin='anonymous'></script>
+</head>
+<body>
+
+<div class="main">
+    <div class="dictonaryarea">
+        <div class="search">
+        <input type="text" id="inpurword"  placeholder="Enter a word">
+        <button id="find">search</button>
+         </div>
+           <p id="word"></p>
+
+         <div class="wa">
+            <p id="phonetic"></p>
+            <i class='fas fa-volume-up' id="play"></i>
+         </div>
+
+
+
+
+
+
+
+        <div class="result" id="result1">
+
+
+        </div>
+
+    </div>
+</div>
+
+
+
+    <script src="main.js"></script>
+</body>
+</html>
diff --git a/Dictonary/main.js b/Dictonary/main.js
@@ -0,0 +1,171 @@
+let btn=document.getElementById('find')
+let result=document.getElementById('result1')
+let word=document.getElementById('word')
+let ph=document.getElementById('phonetic')
+let audiofile;
+let play=document.getElementById('play');
+let speech=document.getElementById('speech')
+let defi=document.getElementById('definations')
+let synonyms=document.getElementById('synonyms')
+let antonyms=document.getElementById('antonyms')
+let examples=document.getElementById('examples')
+play.addEventListener('click',function(){
+    let audio=new Audio(audiofile);
+    audio.play()
+})
+  let empty='';
+
+
+
+
+//Data from the fetch
+
+btn.addEventListener('click',find)
+function find(){
+ let val=document.getElementById('inpurword').value;
+ let url=`https://api.dictionaryapi.dev/api/v2/entries/en/${val}`
+ console.log(val);
+ console.log(url);
+fetch(url).then((data)=>{
+return data.json();
+}).then((data)=>{
+
+
+audiofile=data[0].phonetics[0].audio;
+
+
+word.innerHTML=data[0].word
+
+ph.innerHTML=data[0].phonetic;
+ result.innerHTML=` 
+ <div class="speech"><h1>Part of speech</h1>
+ <p>${data[0].meanings[0].partOfSpeech}</p>
+ </div>
+
+ <div class="definations">
+   <h1>Definations</h1>
+ <p>${data[0].meanings[0].definitions[0].definition},</p>
+ <p>${data[0].meanings[0].definitions[1].definition}</p>
+ </div>
+
+ <div class="synonyms">
+   <h1>Synonyms</h1>
+   <p>${data[0].meanings[0].synonyms[0]==undefined?empty:data[0].meanings[0].synonyms[0]}</p>
+ </div>
+ <div class="antonyms">
+   <h1>Antonyms</h1>
+   <p>${data[0].meanings[0].antonyms[0]==undefined?empty:data[0].meanings[0].antonyms[0]}</p>
+ </div>
+ <div class="examples">
+   <h1>Examples</h1>
+   <p>${data[0].meanings[0].definitions[0].examples==undefined?empty:data[0].meanings[0].definitions[0].examples}</p>
+ </div> `
+
+
+
+// 
+}).catch((err)=>{
+  result.innerHTML="<h1 id='err'>Not Found! </h1>"
+  console.log(err);
+})
+
+
+
+
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+// fetch(url).then((data)=>{
+// return data.json();
+// }).then((data)=>{
+//     // console.log(data);
+// audiofile=data[0].phonetics[0].audio;
+// // console.log(audiofile);
+
+// let bigData;
+// console.log(bigData);
+
+
+
+
+// for(let i=0;i<data.length;i++){
+
+// console.log(data[i].word);
+// word.innerHTML=data[i].word;
+
+
+// for(let j=0;j<data[i].phonetics.length;j++){
+
+//     // console.log(data[i].phonetics[j].text);
+//     ph.innerHTML=data[i].phonetics[0].text
+//     // console.log(data[i].phonetics[j].audio);
+// //for the play btn
+
+
+// }
+
+
+
+// for(let k=0;k<data[i].meanings.length;k++){
+//     console.log(data[i].meanings[k].partOfSpeech);
+//     bigData+=data[i].meanings[k].partOfSpeech
+//     // speech.innerHTML+=data[i].meanings[k].partOfSpeech
+//     for(let l=0;l<data[i].meanings[k].definitions.length;l++){
+
+
+
+// defi.innerHTML+=data[i].meanings[k].definitions[l].definition;
+
+//         // console.log(data[i].meanings[k].definitions[l].definition);
+//         // console.log(data[i].meanings[k].definitions[l].example);
+//         result.innerHTML=`<div class="partofspeech" id="speech"></div>
+//         <div class="definations">hello</div>
+//         <div class="synonyms">Hi</div>
+//         <div class="antonyms">Bye</div>
+//         <div class="examples"></div>`
+//     }
+//     for(let m=0;m<data[i].meanings[k].synonyms.length;m++){
+// // console.log(data[i].meanings[k].synonyms[m]);
+//     }
+//     for(let n=0;n<data[i].meanings[k].antonyms.length;n++){
+//         // console.log(data[i].meanings[k].antonyms[n]);
+
+
+
+//             }
+
+// }
+
+
+
+
+
+// }
+
+// }).then((err)=>{
+// console.log("No item found" + err);
+// })
+// }
diff --git a/Dictonary/style.css b/Dictonary/style.css
@@ -0,0 +1,123 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    /* border: 1px solid red; */
+}
+.main{
+    background: beige;
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+
+}
+
+.dictonaryarea{
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+
+    border: 1px solid black;
+    width: 500px; /* Adjust the width as needed */
+    max-height: 600px;
+    min-height: 500px;
+    padding: 20px;
+    background: linear-gradient(to right, #3498db, #425d77); /* Gradient colors, change as needed */
+    padding: 20px; /* Adjust padding as needed */
+    color: #000000;   
+    border-radius: 15px ;
+}
+.dictonaryarea h1{
+    font-size: 20px;
+}
+.search{
+    position: relative;
+    margin-bottom: 10px;
+}
+
+
+input {
+    font-size: 30px;
+    width: 80%; /* Adjust the width as needed */
+    padding: 10px; /* Add padding if needed */
+    background: none;
+    border: none;
+    outline: none;
+    border-bottom: 4px solid black;
+
+}
+input::placeholder{
+    color: black;
+    opacity: 50%;
+}
+
+
+
+
+.wa{
+    display: flex;
+    justify-content: space-between;
+}
+#speechp{
+    border-right: 2px solid black;
+}
+#find {
+    position: absolute;
+    bottom: 0;
+    right: 10px;
+    background-color: #000913; /* Set the background color */
+    color: #fff; /* Set the text color */
+    border: none; /* Remove the border */
+    padding: 10px 20px; /* Add padding to the button */
+    font-size: 16px; /* Set the font size */
+    cursor: pointer; /* Change the cursor to a pointer on hover */
+    border-radius: 5px; /* Add border-radius for rounded corners */
+    transition: background-color 0.3s ease, color 0.3s ease; /* Add smooth transition */
+}
+
+#find:hover {
+    background-color: #0056b3; /* Change background color on hover */
+    color: #fff; /* Change text color on hover */
+}
+.speech{
+    margin-top: 20px;
+    margin-left: 20px;
+    border-left: 4px dashed #f8f8f8; /* Dashed border with a different color */
+    padding-left: 12px;
+}
+.definations{
+    margin-top: 20px;
+    border-left: 4px dashed #000000; /* Dashed border with a different color */
+    padding-left: 12px;  
+}
+.synonyms{
+    margin-left: 20px;
+    margin-top: 20px;
+    border-left: 4px dashed #ffd000; /* Dashed border with a different color */
+    padding-left: 12px;
+}
+.antonyms{
+    margin-left: 20px;
+    margin-top: 20px;
+    border-left: 4px dashed #02d6fccb; /* Dashed border with a different color */
+    padding-left: 12px;
+}
+#play{
+font-size: 20px;
+}
+#err{
+    font-size: 50px;
+    color: red;
+    text-align: center;
+    top: 50px;
+}
+
+@media only screen and (max-width: 500px) {
+  .dictonaryarea{
+    height: 100%;
+    max-width: 400px;
+
+  }
+  }
diff --git a/Dictonary/test b/Dictonary/test
@@ -0,0 +1,14 @@
+<audio id="audioPlayer" src="https://api.dictionaryapi.dev/media/pronunciations/en/test-us.mp3"></audio>
+
+<script>
+  document.getElementById('audioIcon').addEventListener('click', function() {
+    var audioPlayer = document.getElementById('audioPlayer');
+
+    if (audioPlayer.paused) {
+      audioPlayer.play();
+    } else {
+      audioPlayer.pause();
+      audioPlayer.currentTime = 0; // Reset to the beginning
+    }
+  });
+</script>
diff --git a/Dictonary/test.html b/Dictonary/test.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <h1>test</h1>
+    <button id="play">play</button>
+
+    <script>
+        let play=document.getElementById('play');
+        play.addEventListener('click',function(){
+            let audio=new Audio('https://api.dictionaryapi.dev/media/pronunciations/en/test-us.mp3');
+            audio.play()
+        })
+    </script>
+</body>
+</html>