Assignment 2 of JS

Design a form and use on ONSUBMIT and ON LOST FOCUS event of each element.Display the information what user will select about “At what time of the day it happened?” and ”What emotions did you experience?” questions.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Assignment 2</title>
    <style>
        form{
            background-color: whitesmoke;
        }
        td {
            text-align: right;
        }
        #radio_btn,#checkbox_btn,#location_list{
            text-align: left;
        }
        #btn{
            text-align: center;
        }
        button{
            background-color: cornflowerblue;
            color: white;
            border: none;
            outline: none;
            padding: 7px;
            border-radius: 4px;
        }
    </style>
</head>
<body>
        <form action="" method="post" name="feedback" onsubmit="return validate()" autocomplete="True">
            <table align="center" cellspacing=15>
                <tr>
                    <td>Name
                    <td><input type="text" name="Name" placeholder="Enter your name" ></td>
                </tr>
                <tr>
                    <td>Email
                    <td><input type="email" name="Email" placeholder="Enter your email address" ></td>
                </tr>
                <tr>
                    <td>On a scale of 1-10,how good was it?
                    <td><input type="number"  name ="Number"  placeholder="Enter the number between 1 and 10" ></td>
                </tr>
                <tr>
                    <td>Where did it happen?
                    <td id="location_list">
                        <select name="locate" type="text">
                            <option>At home</option>
                            <option>At collage</option>
                            <option>At ground</option>
                        </select>

                    </td>
                </tr>
                <tr>
                    <td>At what time of the day did it happen?
                    <td id="radio_btn">
                        <input type="radio" name="time" value="Morning"><label for="time">Morning</label>
                        <br>

                        <input type="radio" name="time" value="Afternoon"><label for="time">Afternoon</label>

                        <br>
                        <input type="radio" name="time" value="Evening"><label for="time">Evening</label>

                    </td>
                </tr>
                <tr>
                    <td>What emotions did you experience?<br> (Select all that apply)
                    <td id="checkbox_btn">
                        <input name="experience" type="checkbox" value="Excited"><label for="experience">Excited</label>
                        <br>

                        
                        <input name="experience" type="checkbox" value="Humbled"><label for="experience">Humbled</label>
                        <br>


                        <input name="experience" type="checkbox" value="Elated"><label for="experience">Elated</label>
                        <br>


                        <input name="experience" type="checkbox" value="Loved"><label for="experience">Loved</label>
                        <br>


                        <input name="experience" type="checkbox" value="Enthusiastic"><label for="experience">Enthusiastic</label>

                    </td>
                </tr>
                <tr>
                    <td>Please describe you positive experience
                    <td>
                        <textarea name="describe_experience" id="" cols="22" placeholder="Enter your experience here..."></textarea>
                        
                    </td>
                </tr>
                <tr>
                    <td id="btn" colspan="2">
                        <button type="submit">Submit</button>
                    </td></tr>
            </table>
        </form>

        

</body>
<script>

    // declaring varibles to access form element
    var name =
        document.forms["feedback"]["Name"];
    var email =
        document.forms["feedback"]["Email"];
    var number =
        document.forms["feedback"]["Number"];
    var locate =
        document.forms["feedback"]["locate"];
    var time =
        document.forms["feedback"]["time"];
    var experience =
        document.forms["feedback"]["experience"];
    var describe_experience =
        document.forms["feedback"]["describe_experience"];


        // declaration of display function
     function display() {
         var emotions =""
         for (let i = 0; i < experience.length; i++) {
             if (experience[i].checked) {
                 emotions +=experience[i].value+", "
                 
                }
            }

            // showing time and emotions
            alert("At '"+time.value+"'' it was happened and I feel very "+emotions)
    }

        
    function validate() {


        // validating inputs
        if (name.value == "") {
            alert("Please enter your name.");
            name.focus();
            return false;
        }

        if (email.value == "") {
            alert("Please enter a valid e-mail address.");
            email.focus();
            return false;
        }

        if (number.value ==null) {
            alert(
            "Enter the number between 1 and 10.");
            number.focus();
            return false;
        }

        if (locate.selectedIndex < 1) {
            alert(
            "Please Select where did it happen.");
            locate.focus();
            return false;
        }

        if (time.value == "") {
            alert("Please Select at what time of the day did it happen");
            time.focus();
            return false;
        }

        if (experience.selectedIndex<1) {
            alert("Please Select what emotions did you experienced.");
            experience.focus();
            return false;
        }

        if (describe_experience.value=="") {
            alert("Please describe you positive experience");
            describe_experience.focus();
            return false;
        }

        display();//calling display function after validation

        return false; //if it is true then form will be submitted and go to new page
    }


</script>


</html>
Editor is loading...