insult fetch

SmithMack68 · Jan 20, 2022 · 26d65b8 · 26d65b8
1 parent c8bd29a
commit 26d65b8
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 26 deletions.
diff --git a/index.html b/index.html
@@ -15,11 +15,26 @@
 <body>
     <nav class="black">
         <div class="nav-wrapper container">
-          <a href="#" class="brand-logo">Shakespearean Translator</a>
+          <a href="#" class="brand-logo">The Shakespearean Translator</a>
           <ul id="nav-mobile" class="right hide-on-med-and-down">
             <!--<li><a href="#">About</a></li>-->
             <li><a href="collapsible.html" class="collapsible">Directions & Info</a></li>
-          </ul></li>
+            <!-- <ul class="collapsible">
+              <li>
+                <div class="collapsible-header">First</div>
+                <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
+              </li>
+              <li>
+                <div class="collapsible-header"><Second</div>
+                <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
+              </li>
+              <li>
+                <div class="collapsible-header">Third</div>
+                <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
+              </li>
+            </ul>
+                   -->
+          </ul>
         </div>
       </nav>
      <div class="container">
@@ -29,7 +44,7 @@
             <!-- Modal Structure -->
           <div id="modal1" class="modal">
             <div class="modal-content">
-              <p>Your mother was a hamster and your father smelled of elderberries!</p>
+              <p>Your mother was a hamster and your father smelled of elderberries</p>
             </div>
             <div class="modal-footer">
               <a href="#!" class="modal-close waves-effect waves-green btn-flat">Dismiss</a>
@@ -41,6 +56,9 @@
           <input type="textarea" id="outputTxt" placeholder="translation">
      </div>
      <script>
+        $(document).ready(function(){
+        $('.collapsible').collapsible();
+        });
         $(document).ready(function(){
         $('.modal').modal();
         });

diff --git a/javascripts/index.js b/javascripts/index.js
@@ -1,6 +1,7 @@
 //** Global Variables **//
 let inputTxt = document.querySelector('#inputTxt');
 let outputTxt = document.querySelector("#outputTxt");
+let returnedInsult = document.querySelector('.modal-content')
 const translateButton = document.querySelector('#translateButton');
 const translateUrl = "https://shakespeare1.p.rapidapi.com/shakespeare/translate?text=%3CREQUIRED%3E";
 const insultUrl = "https://shakespeare1.p.rapidapi.com/shakespeare/generate/insult";
@@ -9,29 +10,26 @@ const insultButton = document.querySelector('#shakesBtn');
 
 document.addEventListener('DOMContentLoaded', () => {
     translateButton.addEventListener('click', handleTranslate)
+    insultButton.addEventListener('click', getInsult)
 })
 
-//When clicked retrieve insult from API
-insultButton.addEventListener('click', (e)=> {
-    console.log("Hi")
-})
 
-//function getInsult(){
-    // fetch("https://shakespeare1.p.rapidapi.com/shakespeare/generate/insult", {
-    // 	"method": "GET",
-    // 	"headers": {
-    // 		"x-rapidapi-host": "shakespeare1.p.rapidapi.com",
-    // 		"x-rapidapi-key": "f82e058679msh72322cf02d18b5fp16c24ajsn798ce02fdf81"
-    // 	}
-    // })
-    // .then(resp => resp.json())
-    // .then(data => {
-       //// outputTxt.innerText = json.????
-    //})
-    // .catch(() => alert("Shakespeare is too busy to insult you, try again later!");
-    // });
-
-    //}
+function getInsult(e){
+    fetch("https://shakespeare1.p.rapidapi.com/shakespeare/generate/insult", {
+    	"method": "GET",
+    	"headers": {
+    		"x-rapidapi-host": "shakespeare1.p.rapidapi.com",
+    		"x-rapidapi-key": "f82e058679msh72322cf02d18b5fp16c24ajsn798ce02fdf81"
+    	}
+    })
+    .then(resp => resp.json())
+    .then(data => {
+        console.log(data)
+        //data.contents.taunts
+    })
+    // .catch(() => alert("Shakespeare is too busy to insult you, try again later!")
+    // );
+   }
 
 function handleTranslate(e){
     let inputValue = inputTxt.value;
@@ -44,10 +42,11 @@ function handleTranslate(e){
 })
 .then(resp => resp.json())
 .then(data => {
-    //console.log(data.contents.translated)
-    //debugger
     const outputValue = data.contents.translated
     outputTxt.value = outputValue
 })
- .catch(() => alert("error message")) 
+ .catch(() => alert("Please make sure to enter your text")) 
 }
+// function eraseText(){
+  //document.getElementById("inputTxt").value = ""
+//}
diff --git a/stylesheets/index.css b/stylesheets/index.css
@@ -4,14 +4,17 @@ body {
     font-family: cursive;
     font-size: 30px;
 }
+
 #nav-mobile {
     font-family: cursive;
 }
+
 .collapsible {
     border:black;
     font-size: 22px;
     height: 50px;
 }
+
 .brand-logo {
     cursor: default;
 }
@@ -22,9 +25,11 @@ body {
     top: 0;
     width: 100%;
 }
+
 .shakes-container {
     top: 100%;
 }
+
 #shakesBtn {
     background-image: url('../shakes2.png');
     border: black;