organized search.js, got date picker working, added moment and JQuery…

index.html

@@ -11,6 +11,8 @@
       href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
       rel="stylesheet"
     />
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
   </head>
 
   <!--Since class names are going to be used for tailwind. I'll label things very specifically with my ID's so you guys know what that element is. 
@@ -31,7 +33,7 @@ <h2>Enter your Birthday here:</h2>
     <div class="relative" id="">
         <div class="">
         </div>
-        <input id="calenderSelector" datepicker datepicker-autohide type="text" class="bg-gray-200 border-b-8 border-lime-500 text--900 sm:text-sm rounded-lg focus:border-blue-500 block w-full pl-10 p-2.5" placeholder="Select date">
+        <input id="calendarSelector" datepicker datepicker-autohide type="text" class="bg-gray-200 border-b-8 border-lime-500 text--900 sm:text-sm rounded-lg focus:border-blue-500 block w-full pl-10 p-2.5" placeholder="Select date">    
       </div>
 
 

search.js

@@ -1,37 +1,55 @@
-let bDate = 1;
-let month = 5;
-var day = 9;
-var byabbeURI = "https://byabbe.se/on-this-day/"
-
-fetch('https://byabbe.se/on-this-day/'+month+'/'+day+'/births.json', {
-// ) {
-//   method: 'GET', //GET is the default.
-//   // appid: 'bdc63249ca9c768d065db41d5ee05a7d', // apikey
-//   // q: 'Minneapolis', // Query to search for
-// 
-})
-  .then(function (response) {
-    return response.json();
-  })
-  .then(function (data) {
-    console.log(data);
-  });
-
-// fetch(byabbeURI+bDate+month) {
-//   method: 'GET', //GET is the default.
-//   // appid: 'bdc63249ca9c768d065db41d5ee05a7d', // apikey
-//   // q: 'Minneapolis', // Query to search for
-// })
-//   .then(function (response) {
-//     return response.json();
-//   })
-//   .then(function (data) {
-//     console.log(data);
-//   });
+//First wrap everything in a Document Ready function to make sure nothing 
+//happens in the JS until the page has fully loaded
+//$(document).ready(function () {
+
+
+// set variable for clicking button
 const button = document.getElementById('btn');
 
+//add event listeners to trigger functions when submit button is clicked
+//first need to prevent default page reload behavior because the console 
+//log was clearing immediately, so couldn't debug page behavior
+button.addEventListener('click', function(event){
+  event.preventDefault()
+});
+
+button.addEventListener('click', getByabbe);
+button.addEventListener('click', getAztro);
+
+
+
+//fetch request for Byabee - wiki births
+function getByabbe() {
+  ///set variables for Byabbe function to use:
+  let bDateText = $("#calendarSelector").val();
+  var bDateMoment = moment(bDateText, 'MM-DD-YYYY');
+  let month = bDateMoment.month()+1; //moment month is 0 base, so add 1
+  var day = bDateMoment.date();
+  var year = bDateMoment.year();
+  var byabbeURI = "https://byabbe.se/on-this-day/";
+  console.log(bDateMoment);
+  console.log(month);
+  console.log(day);
+  console.log(year);
+
+
+  fetch(byabbeURI+month+'/'+day+'/births.json')
+   .then(response => response.json())
+   .then(response => console.log(response))
+   .catch(err => console.error(err));
+}
+
+//function to calculate Zodiac sign from input month and day
+// found on GitHub at https://gist.github.com/nporteschaikin/ea8fb4a291dcc63270ce#file-datetozodiac-js
+
+function dateToZodiac(bDate) {
+
+  x = (bDate.getMonth() * 100) + bDate.getDate();
+  return x >= 221 && x <= 319 ? 'Aries' : x >= 320 && x <= 420 ? 'Taurus' : x >= 421 && x <= 520 ? 'Gemini' : x >= 521 && x <= 622 ? 'Cancer' : x >= 623 && x <= 722 ? 'Leo' : x >= 723 && x <= 922 ? 'Virgo' : x >= 823 && x <= 922 ? 'Libra' : x >= 923 && x <= 1021 ? 'Scorpio' : x >= 1022 && x <= 1121 ? 'Sagittarius' : x >= 1122 && x <= 19 ? 'Capricorn' : x >= 20 && x <= 118 ? 'Aquarius' : x >= 119 && x <= 220 ? 'Pisces' : void 0;
 
+}
 
+//fetch request for Aztro - Horoscope
 function getAztro() {
 
     const aztroCall = {
@@ -49,4 +67,4 @@ function getAztro() {
 
     }
 
-button.addEventListener('click', getAztro)
+//  }) //closing document ready function from start