"rbisir1dict1"
Bootstrap 4.1.1 Snippet by rbisir1

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <body> <div class="container"> <h1>RBISIR DICTIONARY</h1> <input type="text" placeholder="+[RBISIR]" class="input"> <p class="info-text">TYPE WORD AND ENTER</p> <div class="meaning-conteiner"> <p>[RBISIR]TITLE: <span class="word-title">___</span></p> <p>[RBISIR]MEANS: <span class="word-meaning">___</span></p> <audio src="" controls></audio> </div> </div> <script src="script.js"></script> </body> <style> @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap'); *,*:before,*:after{ margin: 0; padding: 0; box-sizing: border-box; } body{ font-family: 'Poppins', sans-serif; min-height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #e9f2ff; } .container{ width: 90%; max-width: 600px; padding: 2.5rem 2rem 3rem; background-color: #0F2C59; color: #fff; border-radius: 18px; display: flex; flex-direction: column; align-items: center; box-shadow: 0 0 20px #5691e9; margin: 2rem 0; } h1{ text-align: center; font-size: 25px; } input{ padding: 1rem; outline: none; border: none; border-radius: 8px; margin: 1rem 0; font-size: 16px; width: 70%; } .meaning-conteiner{ margin-top: 1rem; display: none; width: 100%; } audio{ margin-top: 1rem; width: 100%; } .meaning-conteiner > p{ color: #4e83ff; font-size: 18px; } span{ color: #f1f1f1; font-size: 17px; margin-left: 5px; } </style> <script> const input = document.querySelector(".input"); const infoText = document.querySelector(".info-text"); const wordTitle = document.querySelector(".word-title"); const wordMeaning = document.querySelector(".word-meaning"); const meaningContainer = document.querySelector(".meaning-conteiner") const audio = document.querySelector("audio"); async function fetchApi(word){ try{ infoText.style.display = "block"; meaningContainer.style.display ="none"; audio.src = ""; infoText.innerText = `[RBISIR] SEARCHING "${word}"...`; const url = `https://api.dictionaryapi.dev/api/v2/entries/en/${word}`; const result = await fetch(url); const resultInJson = await result.json(); if(resultInJson.title){ meaningContainer.style.display ="block"; wordTitle.innerText = "[RBISIR]DATA IS NOT FOUND"; wordMeaning.innerText = "N/A"; audio.style.display = "none"; }else{ audio.style.display = "block"; infoText.style.display = "none"; meaningContainer.style.display ="block"; wordTitle.innerText = resultInJson[0].word; wordMeaning.innerText = resultInJson[0].meanings[0].definitions[0].definition; audio.src = resultInJson[0].phonetics[0].audio || resultInJson[0].phonetics[1].audio; } } catch(e){ infoText.innerText = `[RBISIR]ERROR`; } } input.addEventListener("keyup", (e)=>{ if(e.target.value && e.key === "Enter"){ fetchApi(e.target.value); } }) </script>

Questions / Comments: