diff --git a/Frontend-Projects/english dictionary/README.md b/Frontend-Projects/english dictionary/README.md new file mode 100644 index 0000000000..e3df991701 --- /dev/null +++ b/Frontend-Projects/english dictionary/README.md @@ -0,0 +1,5 @@ +# English-Dictionary + +The English Dictionary is a simple and user-friendly web application that allows you to quickly look up the meaning of any English word and listen to its pronunciation. With just a few keystrokes, you can enhance your vocabulary and perfect your pronunciation. + +https://github.com/Vyshnavi21504/English-Dictionary/assets/111994644/872b76f6-293d-49b6-9f58-7ef7aeaf7ad0 diff --git a/Frontend-Projects/english dictionary/index.html b/Frontend-Projects/english dictionary/index.html new file mode 100644 index 0000000000..3083bbca3c --- /dev/null +++ b/Frontend-Projects/english dictionary/index.html @@ -0,0 +1,23 @@ + + + + + + English Dictionary + + + +
+

English Dictionary

+ +

Type a word and press enter +

+
+

Word Title : __

+

Meaning : __

+ +
+
+ + + \ No newline at end of file diff --git a/Frontend-Projects/english dictionary/index.js b/Frontend-Projects/english dictionary/index.js new file mode 100644 index 0000000000..2cf6808d10 --- /dev/null +++ b/Frontend-Projects/english dictionary/index.js @@ -0,0 +1,46 @@ +const inputEL = document.getElementById("input"); +const infotextEL = document.getElementById("info-text"); +const meaningContainerEL =document.getElementById("meaning-container"); +const titleEL = document.getElementById("title"); +const meaningEL = document.getElementById("meaning"); +const audioEL = document.getElementById("audio"); + + async function fetchAPI(word){ + +try { + infotextEL.style.display="block"; + meaningContainerEL.style.display="none"; + infotextEL.innerText = `Searching the meaning of ${word}`; + const URL =`https://api.dictionaryapi.dev/api/v2/entries/en/${word}`; + const result = await fetch(URL).then((res)=>res.json()); + + + if(result.title){ + meaningContainerEL.style.display="block"; + infotextEL.style.display="none"; + titleEL.innerText = word; + meaningEL.innerText="N/A"; + audioEL.style.display="none"; + }else{ + infotextEL.style.display="none"; + meaningContainerEL.style.display="block"; + audioEL.style.display="inline-flex"; + titleEL.innerText = result[0].word; + meaningEL.innerText=result[0].meanings[0].definitions[0].definition; + audioEL.src=result[0].phonetics[0].audio; + } + +} catch (error) { + console.log(error); + infotextEL.innerText="an error occured , try again later" +} + + + +} + +inputEL.addEventListener("keyup",(e)=>{ + if(e.target.value && e.key==="Enter"){ + fetchAPI(e.target.value); + } +}) \ No newline at end of file diff --git a/Frontend-Projects/english dictionary/styles.css b/Frontend-Projects/english dictionary/styles.css new file mode 100644 index 0000000000..dc8c1aee82 --- /dev/null +++ b/Frontend-Projects/english dictionary/styles.css @@ -0,0 +1,35 @@ +body{ + margin: 0; + min-height: 100vh; + background: linear-gradient(to right, #00b09b, #96c93d); + display: flex; + justify-content: center; + text-align: center; + align-items: center; +} + +.container{ + background-color: rgba(225,225,225,.6); + padding: 20px; + width: 90%; + border-radius: 10px; + box-shadow: 0 10px 10px rgba(0 0 0 .3); + font-size: 18px; + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + +} +.heading{ + font-size: 28px; +} +.input{ + height:53px ; + width: 300px; + background-color: rgba(225,225,225,.6); + border-color: rgba(225,225,225,.4); + font-size: 16px; + padding: 0 42px; + border-radius: 5px; +} +.meaning-container{ + display: none; +} \ No newline at end of file