Greetings - DOM

Greetings – DOM Cognizant Handson Program

Bymadwithcode

Create a simple web page that collects students’ details and greets them.

  1. Add an input component for entering the student name : of type text with id “sname” and make it a mandatory field. 
  2. Add a  dropdown component for course selection :  with id “course” and option values “Python”, “Java” & “Oracle”. Make this selection too mandatory. 
  3. Add a button type component with id “submit” and value “Register”.
  4. Add an empty div tag with id “greet” within the paragraph tag.
  5. When you click on the Register button, javascript function must get invoked & the greeting must get displayed at div (refer to the console output) 
  6. Handle the scenario where the student name field is left empty – by referring to the console output. 

Include a function called display() inside the script.js file and display the result on the web page using .innerHTML. 

index.html

<html>
<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>Document</title>

    <style>
        table, td{
            border: 1px solid black;
        }
    </style>
    <script src="script.js" type="text/javascript"></script>
</head>
<body>
    <h1>Elite Coaching Center</h1>
        <table>
            <tr>
                <td><label for="studentName">Student Name</label></td>
                <td><input type="text" id="sname" required></td>
            </tr>
            <tr>
                <td>
                    <label for="course">Course</label>
                </td>
                <td>
                    <select name="course" id="course" required>
                        <option value="Python">Python</option>
                        <option value="Java">Java</option>
                        <option value="Oracle">Oracle</option>
                    </select>
                </td>
            </tr>
        </table>
        <input type="button" name="submit" id="submit" value="Register" onclick="display()">
        <div id="greet"></div>
</body>
</html>

script.js

function display(){
    var sname = document.getElementById("sname").value;
    var course = document.getElementById("course").value;
    if(sname===""){
        document.getElementById("greet").innerHTML = "Name cannot be empty"
    }
    else{
        document.getElementById("greet").innerHTML = "Hi, " + sname + ". You have successfully registered for the "+ course + " course."
    }  
}

Similar Posts