JSFiddle - React, Tailwind, and code Playground

by Daw-Chih Liou

HTML

<div class="header">
  <h1 class="zodiactitle">
    Learn your Life's Mysteries w/ the </br>ZODIAC
  </h1>
</div>
 <form>
   <input id="zodiac" placeholder="   ENTER YOUR ZODIAC">
   <span class="click">
     <button class="button">
       Click to find out more
     </button>
   </span>
</form>

<div class="details">
<h3 id="birthdate"></h3>
<h3 id="zodiacsign"></h3>
</div>

JavaScript

var zodiacSigns = [
	{sign: 'a', birthdate: 'Jan 1', zodiac: 'a'},
  {sign: 'b', birthdate: 'Mar 1', zodiac: 'b'},
  {sign: 'c', birthdate: 'Jun 1', zodiac: 'c'},  
 	{sign: 'd', birthdate: 'Aug 1', zodiac: 'd'},
  {sign: 'e', birthdate: 'Dec 1', zodiac: 'e'},
];

function getZodiac(e){
  // prevent default behaviors & stop the event from bubbling up
	e.preventDefault();
  e.stopPropagation();
  
  var sign = document.getElementById('zodiac').value;
  
  for(var i = 0; i < zodiacSigns.length; i++){
    //if statement to match correct input to correct zodiac
    if(sign == zodiacSigns[i].sign){
      document.getElementById("birthdate").innerHTML = zodiacSigns[i].birthdate;
      document.getElementById("zodiacsign").innerHTML = zodiacSigns[i].zodiac;
     }
  }
}

var button = document.querySelector('.button');
button.addEventListener('click', getZodiac);