diff --git a/Assests/sunflower.jpg b/Assests/sunflower.jpg new file mode 100644 index 0000000..4ac78fe Binary files /dev/null and b/Assests/sunflower.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..1e4a49b --- /dev/null +++ b/index.html @@ -0,0 +1,88 @@ + + + + + + Dicty + + + + + + + +
+
+ English Dictionary +
+
+ + + close +
+

+ Type any existing word and press enter to get meaning, example, + synonyms, etc. +

+ +
+ + + + diff --git a/main.css b/main.css new file mode 100644 index 0000000..858aab4 --- /dev/null +++ b/main.css @@ -0,0 +1,224 @@ +/* Import Google Font - Poppins */ +@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap"); +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Poppins", sans-serif; +} +body { + display: flex; + align-items: center; + flex-direction: column; + justify-content: center; + min-height: 100vh; + background: url(./Assests/sunflower.jpg); + background-repeat: no-repeat; + background-size: cover; +} +::selection { + color: #fff; + background: #ecc059; +} +nav a:hover { + color: #117108; +} +nav { + position: fixed; + top: 0; + height: 8vh; + background: #f4c24e; + width: 100%; + display: flex; + flex-direction: row; + align-items: center; + border-bottom: 2px solid #646432; +} +nav ul { + margin-left: auto; + display: flex; + flex-direction: row; + list-style: none; + align-items: center; + justify-items: center; +} +nav ul a { + text-decoration: none; + color: #000; + font-size: 18px; + font-weight: 300; + margin: 0 30px; +} +.logo img { + margin-left: 3vh; +} +.wrapper { + width: 520px; + border-radius: 7px; + background: #fff; + padding: 25px 28px 45px; + box-shadow: 7px 7px 20px rgba(0, 0, 0, 0.05); +} +.wrapper header { + font-size: 28px; + font-weight: 500; + text-align: center; +} +.wrapper .search { + position: relative; + margin: 35px 0 18px; +} +.search input { + height: 53px; + width: 100%; + outline: none; + font-size: 16px; + border-radius: 5px; + padding: 0 42px; + border: 1px solid #999; +} +.search input:focus { + padding: 0 41px; + border: 3px solid #f4c24e; +} +.search input::placeholder { + color: #b8b8b8; +} +.search :where(i, span) { + position: absolute; + top: 50%; + color: #999; + transform: translateY(-50%); +} +.search i { + left: 18px; + pointer-events: none; + font-size: 16px; +} +.search input:focus ~ i { + color: #f4c24e; +} +.search span { + right: 15px; + cursor: pointer; + font-size: 18px; + display: none; +} +.search input:valid ~ span { + display: block; +} +.wrapper .info-text { + font-size: 13px; + color: #9a9a9a; + margin: -3px 0 -10px; +} +.wrapper.active .info-text { + display: none; +} +.info-text span { + font-weight: 500; +} +.wrapper ul { + height: 0; + opacity: 0; + padding-right: 1px; + overflow-y: hidden; + transition: all 0.2s ease; +} +.wrapper.active ul { + opacity: 1; + height: 303px; +} +.wrapper ul li { + display: flex; + list-style: none; + margin-bottom: 14px; + align-items: center; + padding-bottom: 17px; + border-bottom: 1px solid #d9d9d9; + justify-content: space-between; +} +ul li:last-child { + margin-bottom: 0; + border-bottom: 0; + padding-bottom: 0; +} +ul .word p { + font-size: 22px; + font-weight: 500; +} +ul .word span { + font-size: 12px; + color: #989898; +} +ul .word i { + color: #999; + font-size: 15px; + cursor: pointer; +} +ul .content { + max-height: 215px; + overflow-y: auto; +} +ul .content::-webkit-scrollbar { + width: 0px; +} +.details { + display: flex; + flex-direction: column; +} +.content li .details { + padding-left: 10px; + border-radius: 4px 0 0 4px; + border-left: 3px solid #646432; +} +.content li p { + font-size: 17px; + font-weight: 500; +} +.content li span { + font-size: 15px; + color: #7e7e7e; +} +.content .synonyms .list { + display: flex; + flex-wrap: wrap; +} +.content .synonyms span { + cursor: pointer; + margin-right: 5px; + text-decoration: underline; +} +@media (max-width: 550px) { + .wrapper { + width: 40vh; + } +} +@media (max-width: 400px) { + .wrapper header { + font-size: 18px; + } + ul .word p { + font-size: 15px; + font-weight: 300; + } + .search input { + height: 40px; + } + nav ul a { + margin: 0 10px; + font-size: 15px; + } + p { + font-size: 15px !important; + } +} +@media (min-width: 900px) and (max-width: 1100px) { + nav ul a { + font-size: 30px; + } + nav img { + width: 100px; + height: 100px; + } +} diff --git a/main.js b/main.js new file mode 100644 index 0000000..2fa349b --- /dev/null +++ b/main.js @@ -0,0 +1,102 @@ +const wrapper = document.querySelector(".wrapper"), +searchInput = wrapper.querySelector("input"), +volume = wrapper.querySelector(".word i"), +infoText = wrapper.querySelector(".info-text"), +synonyms = wrapper.querySelector(".synonyms .list"), +removeIcon = wrapper.querySelector(".search span"); +let audio; + +async function data(result, word){ + if(result.title){ + infoText.innerHTML = `Can't find the meaning of "${word}". Please, try to search for another word.`; + }else{ + wrapper.style.border = "2px #f4c24e solid"; + wrapper.classList.add("active"); + let definitions = result[0].meanings[0].definitions[0]; + + document.querySelector(".wrapper").style.marginTop = "30px"; + phontetics = `${result[0].meanings[0].partOfSpeech} /${result[0].phonetics[0].text}/`; + document.querySelector(".word p").innerText = result[0].word; + document.querySelector(".word span").innerText = phontetics; + + document.querySelector(".meaning span").innerText = "1. "+definitions.definition; + document.querySelector("#m2").innerText = "2. "+result[0].meanings[0].definitions[1].definition; + + document.querySelector(".example span").innerText = await getExample(result); + + let word = document.querySelector(".word p").innerText; + highlightText(document.querySelector(".example span"),word); + + audio = new Audio("https:" + result[0].phonetics[0].audio); + + if(definitions.synonyms[0] == undefined){ + synonyms.parentElement.style.display = "none"; + }else{ + synonyms.parentElement.style.display = "block"; + synonyms.innerHTML = ""; + for (let i = 0; i < 5; i++) { + let tag = `${definitions.synonyms[i]},`; + tag = i == 4 ? tag = `${definitions.synonyms[4]}` : tag; + synonyms.insertAdjacentHTML("beforeend", tag); + } + } + } +} +function highlightText(html, word){ + let example=html.innerText.split(" "); + for(let w in example){ + if(example[w].toLowerCase().includes(word.toLowerCase())){ + html.innerHTML = html.innerHTML.replace(example[w],`${example[w]}`); + } + } + return html; +} +function getExample(result){ + for(let i=0;i"${word}"`; + let url = `https://api.dictionaryapi.dev/api/v2/entries/en/${word}`; + fetch(url).then(response => response.json()).then(result => data(result, word)).catch(() =>{ + infoText.innerHTML = `Can't find the meaning of "${word}". Please, try to search for another word.`; + }); +} + +searchInput.addEventListener("keyup", e =>{ + let word = e.target.value.replace(/\s+/g, ' '); + if(e.key == "Enter" && word){ + fetchApi(word); + } +}); + +volume.addEventListener("click", ()=>{ + volume.style.color = "#4D59FB"; + audio.play(); + setTimeout(() =>{ + volume.style.color = "#999"; + }, 800); +}); + +removeIcon.addEventListener("click", ()=>{ + searchInput.value = ""; + searchInput.focus(); + wrapper.classList.remove("active"); + infoText.style.color = "#9A9A9A"; + wrapper.style.border = "none"; + infoText.innerHTML = "Type any existing word and press enter to get meaning, example, synonyms, etc."; +}); \ No newline at end of file