diff --git a/index.html b/index.html new file mode 100644 index 0000000..5dc08d0 --- /dev/null +++ b/index.html @@ -0,0 +1,32 @@ + + + + + + + + API | Banana Language + + +
+
+

Banana Translate

+
+
+
+ + + +
Translation will come here 👇
+ + +
+ + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..d9d3381 --- /dev/null +++ b/script.js @@ -0,0 +1,29 @@ + +var btnTranslate=document.querySelector('#btn-translate'); +var inputText=document.querySelector('#input-text'); +var outputText=document.querySelector('#output-text'); + +console.log(btnTranslate) + + + + +var serverURL="https://api.funtranslations.com/translate/minion.json" + + function urlGenerator(text){ + return serverURL+"?"+"text="+text +} + + +function clickHandler(){ + var txtInput=inputText.value + fetch(urlGenerator(txtInput)) + .then(response=>response.json()) + .then(json=>{ + var translate=json.contents.translated + outputText.innerText=translate + }) +} + + +btnTranslate.addEventListener("click",clickHandler) diff --git a/style.css b/style.css new file mode 100644 index 0000000..271217b --- /dev/null +++ b/style.css @@ -0,0 +1,50 @@ +:root{ + --primary-color:#FCD34D; + --light-yellow:#FCD34D; +} + +#input-text{ + background-color:var(--light-yellow); + width: 400px; + height: 170px; + display: block; + margin:auto; + + +} +#output-text{ + background-color:var(--light-yellow); + width: 400px; + height: 170px; + display: block; + margin:auto; + +} +body{ + margin: 0px;; +} +#btn-translate{ + border-radius: 1.5rem; + padding:0.7rem; + display: block; + margin: auto; + width:100px; + background-color: aquamarine; + +} +#btn-translate:hover{ + background-color: aqua; + +} +header{ + background-color: var(--primary-color); + margin: 0px; + padding:0.2rem; + border-bottom-left-radius: 1rem; +} +h1{ + text-align: center; +} +.wrapper{ + padding: 2rem; +} \ No newline at end of file