Ready to serve

parthpandyappp · Jan 18, 2021 · 5835d35 · 5835d35
1 parent 37feab0
commit 5835d35
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 34 deletions.
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
diff --git a/app.js b/app.js
@@ -1,16 +1,18 @@
+import {info} from './env.js'
+
 const body = document.querySelector('body')
 const button = document.querySelector('.button')
 const word = document.createElement('h1')
 const def = document.createElement('p')
 
 const randomword = () => {
-    fetch('https://random-word-api.herokuapp.com/word?number=1')
+    fetch('http://random-word-api.herokuapp.com/word?number=1')
         .then(response => {
             return response.json();
         })
         .then(response => {
-            word.textContent = response;
-            body.appendChild(word)
+            word.textContent = "/" + response;
+            document.getElementById("demo").appendChild(word)
             randomDefinition(word)
 
         })
@@ -21,18 +23,18 @@ const randomword = () => {
 
 const randomDefinition = (word) => {
     // console.log(word.textContent)
-    fetch('https://dictionaryapi.com/api/v3/references/collegiate/json/'+(word.textContent)+"?key="+(API_KEY))
+    fetch('https://dictionaryapi.com/api/v3/references/collegiate/json/'+(word.textContent)+"?key="+"0434c413-f173-4f94-948d-a4ae26f3447f")
         .then(response => {
             return response.json();
         })
         .then(response => {
             if(response[0].shortdef!=null){
-                def.textContent = "Definition : " + response[0].shortdef[0];
+                def.textContent = response[0].shortdef[0];
             }
             else{
                 def.textContent = "No definition available"
             }
-            body.appendChild(def)
+            document.getElementById("demo").appendChild(def)
             console.log(response[0].shortdef[0])
         })
         .catch(err => {
@@ -42,4 +44,4 @@ const randomDefinition = (word) => {
 
 button.addEventListener('click', function () {
     randomword();
-})
+})
diff --git a/index.html b/index.html
@@ -1,12 +1,42 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
+
+    <link href="https://fonts.googleapis.com/css2?family=Potta+One&family=Yusei+Magic&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="styles.css">
     <title>API Interacts</title>
 </head>
+
 <body>
-    <button class="button">Random Word</button>
+    <h1 class="display-2 text-center" style="font-family: Yusei Magic;">Wordize</h1>
+    <p class="text-center" style="font-family: Potta One;">Build your vocabulary by learning a new word, everyday!</p>
+    <hr>
+    <div class="container text-center">
+        <button class="mt-4 btn btn-primary button" style="font-family: Yusei Magic;">Get one set of word and it's
+            definition now!</button>
+    </div>
+    <div class="container">
+        <hr class="mt-4">
+        <div style="margin-top: 6rem;" id="demo">
+        </div>
+    </div>
+    <footer class="mt-5 text-center">
+        <hr style="color: black;">
+
+        <p className="text-center" style="font-family: Roboto Mono; font-size:10; line-height: 0.5">Copyright ©️
+          <script type="text/javascript">
+            document.write(new Date().getFullYear());
+          </script> Parth Pandya </p>
+
+        <p className="text-center" style="font-family: Roboto Mono; font-size: 10; line-height: 0.5 ">Some rights reserved.
+        </p>
+      </footer>
     <script type="module" src="app.js"></script>
 </body>
+
 </html>
diff --git a/secret.js b/secret.js
diff --git a/styles.css b/styles.css
@@ -0,0 +1,19 @@
+hr{
+    margin-left: 5rem;
+    margin-right: 5rem;
+}
+
+#demo h1{
+    font-size: 5rem;
+}
+
+#demo p{
+    font-size: 1.2rem;
+}
+
+footer {
+    position: fixed;
+    height: 100px;
+    bottom: 0;
+    width: 100%;
+}