Untitled

<!DOCTYPE html>
<html>
<head>
<title>Astrology</title>
<link rel="stylesheet" href="projectcss.css">
</head>
<body>
<ul>
<li><a href="home.html">Home</a></li>
 <li><a class="active" href="Astrology.html">Astrology</a></li>
  <li><a href="Numerology.html">Numerology</a></li>
  <li><a href="Tarot.html">Tarot</a></li>
  <li><a href="Maigc8ball.html">Magic 8 Ball</a></li>
</ul>
<div class="container">
<form name="menu">
<div class="right">
        <h1>Astrology</h1>
        <div style="width: 30%;">
        <div style=" width: 80; float: left; color: white; font-size:large; ">

                <fieldset>

                    <h3>Choose the month of your birth: </h3>
                    <label class="container">
                    <input type="radio" name="month" id="January" value="January">January<br/>
                    <input type="radio" name="month" id="February" value="February">February<br />
                    <input type="radio" name="month" id="March" value="March">March<br />
                    <input type="radio" name="month" id="April" value="April">April<br /><br />
                    <input type="radio" name="month" id="May" value="May">May<br />
                    <input type="radio" name="month" id="June" value="June">June<br />
                    <input type="radio" name="month" id="July" value="July">July<br />
                    <input type="radio" name="month" id="August" value="August">August<br /><br />
                    <input type="radio" name="month" id="September" value="September">September<br />
                    <input type="radio" name="month" id="October" value="October">October<br />
                    <input type="radio" name="month" id="November" value="November">November<br />
                    <input type="radio" name="month" id="December" value="December">December<br /><br />
                    </label>
                </fieldset>
            </div>
            </div>

        <div style=" color: white; font-size:large; ">
                <fieldset>

                    <h3>Enter the date of your birth:</h3>
                    </label> <input type="text" name="birthdate" id="birthdate" size = "30" value = ""/>
                    <input type="button" id='button1' value = "ok"/>
                    <h3>Enter the year of your birth:</h3>
                    </label><input type="text" name="birthyear" id="birthyear" size="30" value = ""/></label>
                    <input type="button" id='button2' value = "ok"/><br />
                    <h3>Your birth month: <span  id = "birth_month"></span> </h3>
                    <h3>Your birth date: <span  id = "birth_date"></span> </h3>
                    <h3>Your birth year: <span  id = "birth_year"></span> </h3>
                    <br/>
                   <input type="button" id="zodiac" onclick="getZodiac()" value="Click here to discover your zodiac"><br />

            </fieldset>
        </div>
        </div
    </form>
    <div style="width: 600px; margin: auto; margin-top:1%; margin-bottom:1% border: 1px solid black; padding: 5px;>
                <span id="zodiac1">
                 <img class="zodiac" src="magic/zodiac.jpg" class="middle" > </img>
                 </span>
    </div>
    <script>


    function birthMonth()
    {


    return document.querySelector('input[name = "month"]:checked').value;

    }

    document.querySelector('#button1').addEventListener('click',birthDate);
    document.querySelector('#button2').addEventListener('click',birthYear);


    function birthDate()
    {

    return document.getElementById('birthdate').value;

    }


    function birthYear()
    {
    var birthYear =  document.getElementById('birthyear').value;
            document.getElementById('birth_year').innerHTML = birthYear;
    }

    function getZodiac()
    {
    console.log("birthDate =" + birthDate())
    console.log("birthMonth =" + birthMonth())
    var b_month = birthMonth();
    var b_date = birthDate();

    if((b_month == "January" && b_date <= 20) || (b_month == "December" && b_date >=22))
    {
    alert("You are a Capricorn");
    }
    else if ((b_month == "January" && b_date >= 21) || (b_month == "February" && b_date <= 18))
    {
    alert("You are an Aquarius");
    }
    else if((b_month == "February" && b_date >= 19) || (b_month == "March" && b_date <= 20))
    {
     alert("You are a Pisces");
    }
    else if((b_month == "March" && b_date >= 21) || (b_month == "April" && b_date <= 20))
    {
     alert("You are a Aries");
    }
    else if((b_month == "April" && b_date >= 21) || (b_month == "May" && b_date <= 20))
    {
     alert("You are a Taurus");
    }
    else if((b_month == "May" && b_date >= 21) || (b_month == "June" && b_date <= 20))
    {
    alert("You are a Gemini");
    }
     else if((b_month == "June" && b_date >= 22) || (b_month == "July" && b_date <= 22))
    {
    alert("You are a Cancer");
    }
    else if((b_month == "July" && b_date >= 23) || (b_month == "August" && b_date <= 23))
    {
    alert("You are a Leo");
    }
    else if((b_month == "August" && b_date >= 24) || (b_month == "September" && b_date <= 23))
    {
    alert("You are a Virgo");
    }
    else if((b_month == "September" && b_date >= 24) || (b_month == "October" && b_date <= 23))
    {
    alert("You are a Libra");
    }
    else if((b_month == "October" && b_date >= 24) || (b_month == "November" && b_date <= 22))
    {
    alert("You are a Scorpio");
    }
    else if((b_month == "November" && b_date >= 23) || (b_month == "December" && b_date <= 21))
    {
    alert ("You are a Sagitarius");
    }
}


    </script>


<div class="footer">
  <p>For Entertainment Purposes Only</p>
</div>
</body>
</html>