update: added api interactions

dhanushkumar-dev · Jul 3, 2021 · 4036dd2 · 4036dd2
1 parent 9f2f79e
commit 4036dd2
Show file tree

Hide file tree

Showing 3 changed files with 111 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>API | Banana Language</title>
+</head>
+<body>
+    <header>
+        <div>
+            <h1>Banana Translate</h1>
+        </div>
+    </header>
+    <div class="wrapper">
+        <textarea id="input-text" placeholder="Put some text here and it will be translated to banana language"></textarea>
+
+        <button type="button" id="btn-translate">Translate</button>
+        <div class="spacing"> Translation will come here 👇</div>
+
+        <textarea id="output-text"></textarea>
+    </div>
+    <footer class="footer">
+        <div class="whitespace-footer">
+            <h1>About:</h1>
+            <p class="txtDisplay">Minionese appears to be a polyglot language, which borrows words and - such as they are - grammatical rules from many different languages. Minionese contains some elements of English, with words like "Banana", "Bapple" (apple, basically "Apple" with "B"), and "Potato".</p>
+        </div>
+    </footer>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/script.js 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
@@ -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;
+}