CODEWITHSUNDEEP
javascripthtml
agega
agega

Reputation: 159

No alert output after user input

I'm trying to get user's birth info and come up with a name for them according to their day of birth after they click a confirm button .The program also checks if the user has entered a valid date and month , but i'm not getting any output after filling the inputs.

Here is my Html code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="CSS/bootstrap.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="CS S/styles.css" media="screen" />
    <title>Akan names</title>
</head>

<body>
    <div class="container">
        <div class="jumbotron">

            <h1>Akan Name</h1>

            <div class="card">
                <div class="card-body">
                    <label for="usr">Date</label>
                    <input type="text" class="form-control" id="date">
                </div>

                <div class="card">
                    <div class="card-body">

                        <label for="usr">Month</label>
                        <input type="text" class="form-control" id="month">
                    </div>

                    <div class="card">
                        <div class="card-body">
                            <label for="usr">Year</label>
                            <input type="text" class="form-control" id="year">
                        </div>

                        <div class="card">
                            <div class="card-body">
                                <label for="usr">Gender</label>
                                <input type="text" class="form-control" id="gender">
                            </div>

                            <div class="card">
                                <div class="card-body">
                                    <button onclick="calc()" id="btnConfirm" type="button">Check</button>
                                </div>
                            </div>
                            <script src = "JS/script.js"></script>

</body>

</html>

Here is my Js code :

var date;
var month;
var year;
var gender;
var name;

function validate() {
    date = document.getElementById('date').value;
    month = document.getElementById('month').value;
    year = document.getElementById('year').value;
    gender = document.getElementById('gender').value;

    if (date <= 0 || date > 31) {
        alert("Enter a valid date");
    };

    if (month <= 0 || month > 12) {
        alert("Enter a valid month");
    };

}

function calc() {

    validate();
    date = document.getElementById('date').value;
    month = document.getElementById('month').value;
    year = document.getElementById('year').value;
    gender = document.getElementById('gender').value;

    var cc = year.charAt(0) + year.charAt(1);
    var yy = year.charAt(2) + year.charAt(3);

    var day = (((cc / 4) - 2 * cc - 1) + ((5 * yy / 4)) + ((26 * (month + 1) / 10)) + date) % 7;

    if (day == 1 && gender == "male") {
        alert("Sunday : Kwasi");
    } else if (day == 2 && gender == "male") {
        alert("Monday : Kwadwo");
    } else if (day == 3 && gender == "male") {
        alert("Tuesday : Kwabena");
    } else if (day == 4 && gender == "male") {
        alert("Wednesday :  Kwaku");
    } else if (day == 5 && gender == "male") {
        alert("Thursday : Yaw");
    } else if (day == 6 && gender == "male") {
        alert("Friday : Kofi");
    } else if (day == 7 && gender == "male") {
        alert("Saturday : Kwame");
    } else if (day == 1 && gender == "female") {
        alert("Sunday : Akosua");
    } else if (day == 2 && gender == "female") {
        alert("Monday : Adwoa");
    } else if (day == 3 && gender == "female") {
        alert("Tuesday : Abenaa");
    } else if (day == 4 && gender == "female") {
        alert("Wednesday :  Akua");
    } else if (day == 5 && gender == "female") {
        alert("Thursday : Yaa");
    } else if (day == 6 && gender == "female") {
        alert("Friday : Afua");
    } else if (day == 7 && gender == "female") {
        alert("Saturday : Ama");
    };

}

Upvotes: 1

Views: 34

Answers (1)

Greedo
Greedo

Reputation: 3549

It's because the day value is not rounde, so it does not match any of the value you are listing. You could discover it with a simple console.log(day). Use Math.floor() would do the trick:

var date;
var month;
var year;
var gender;
var name;

function validate() {
    date = document.getElementById('date').value;
    month = document.getElementById('month').value;
    year = document.getElementById('year').value;
    gender = document.getElementById('gender').value;

    if (date <= 0 || date > 31) {
        alert("Enter a valid date");
    };

    if (month <= 0 || month > 12) {
        alert("Enter a valid month");
    };

}

function calc() {

    validate();
    date = document.getElementById('date').value;
    month = document.getElementById('month').value;
    year = document.getElementById('year').value;
    gender = document.getElementById('gender').value;

    var cc = year.charAt(0) + year.charAt(1);
    var yy = year.charAt(2) + year.charAt(3);

    var day = Math.floor(((((cc / 4) - 2 * cc - 1) + ((5 * yy / 4)) + ((26 * (month + 1) / 10)) + date)) % 7);
    
    console.log(day);

    if (day == 1 && gender == "male") {
        alert("Sunday : Kwasi");
    } else if (day == 2 && gender == "male") {
        alert("Monday : Kwadwo");
    } else if (day == 3 && gender == "male") {
        alert("Tuesday : Kwabena");
    } else if (day == 4 && gender == "male") {
        alert("Wednesday :  Kwaku");
    } else if (day == 5 && gender == "male") {
        alert("Thursday : Yaw");
    } else if (day == 6 && gender == "male") {
        alert("Friday : Kofi");
    } else if (day == 7 && gender == "male") {
        alert("Saturday : Kwame");
    } else if (day == 1 && gender == "female") {
        alert("Sunday : Akosua");
    } else if (day == 2 && gender == "female") {
        alert("Monday : Adwoa");
    } else if (day == 3 && gender == "female") {
        alert("Tuesday : Abenaa");
    } else if (day == 4 && gender == "female") {
        alert("Wednesday :  Akua");
    } else if (day == 5 && gender == "female") {
        alert("Thursday : Yaa");
    } else if (day == 6 && gender == "female") {
        alert("Friday : Afua");
    } else if (day == 7 && gender == "female") {
        alert("Saturday : Ama");
    };

}
<body>
    <div class="container">
        <div class="jumbotron">

            <h1>Akan Name</h1>

            <div class="card">
                <div class="card-body">
                    <label for="usr">Date</label>
                    <input type="text" class="form-control" id="date">
                </div>

                <div class="card">
                    <div class="card-body">

                        <label for="usr">Month</label>
                        <input type="text" class="form-control" id="month">
                    </div>

                    <div class="card">
                        <div class="card-body">
                            <label for="usr">Year</label>
                            <input type="text" class="form-control" id="year">
                        </div>

                        <div class="card">
                            <div class="card-body">
                                <label for="usr">Gender</label>
                                <input type="text" class="form-control" id="gender">
                            </div>

                            <div class="card">
                                <div class="card-body">
                                    <button onclick="calc()" id="btnConfirm" type="button">Check</button>
                                </div>
                            </div>


</body>

Upvotes: 1

Related Questions