From b7ee9656940167a0bbac0c9064a2826b21c3a6e5 Mon Sep 17 00:00:00 2001 From: favy-codez <107569845+favy-codez@users.noreply.github.com> Date: Mon, 21 Aug 2023 07:58:37 +0100 Subject: [PATCH] fixed a bug --- index.html | 2 +- script.js | 17 +++++++++++++++++ style.css | 18 ++++++++++++++++++ 3 files changed, 36 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 134df10..5955cce 100644 --- a/index.html +++ b/index.html @@ -13,7 +13,7 @@
-

Englist Dictionary

+

English Dictionary

Type a word and press enter

diff --git a/script.js b/script.js index e69de29..49be0c9 100644 --- a/script.js +++ b/script.js @@ -0,0 +1,17 @@ +const input = document.getElementById("input"); + +async function fetchAPI(word){ + const url = `https://api.dictionaryapi.dev/api/v2/entries/en/${word}` + const result = await fetch(url).then((res)=>res.json()) + console.log(result); +} + +input.addEventListener("keyup", (e)=> { + // console.log anything we enter + // console.log(e.target.value); + // shows the key e.g enter, backspace + // console.log(e.key); + if(e.target.value && e.key === "Enter"){ + fetchAPI(e.target.value) + } +}) \ No newline at end of file diff --git a/style.css b/style.css index 61c08d3..9538643 100644 --- a/style.css +++ b/style.css @@ -24,4 +24,22 @@ body{ max-width: 450px; text-align: center; font-size: 18px; + font-weight: 500; +} + +.heading{ + font-size: 28px; +} +.input{ + height: 53px; + width: 300px; + background-color: rgba(255, 255, 255, .6); + border-color: rgba(255, 255, 255, .4); + font-size: 16px; + padding: 0px 42px; + border-radius: 5px; +} + +.meaning-container{ + display: none; } \ No newline at end of file