Answer to Question #302694 in HTML/JavaScript Web Application for CHETHAN

Question #302694

The goal of this coding exam is to quickly get you off the ground with Conversions and Conditional Statements.

Use the below reference image.

https://assets.ccbp.in/frontend/content/dynamic-webapps/signin-op.gif

HTML

<!DOCTYPE html>

<html>

<body>

<p>Enter your Name</p>

<p>Enter your Password</p>

<div>

</div>

</body>

</html>

CSS

.button {

color: #ffffff;

background-color: #0967d2;

font-size: 14px;

border-width: 0;

border-radius: 4px;

margin: 10px;

padding: 10px;

}

Expert's answer

<!DOCTYPE html>
<html>
<head></head>
<body>
    <style>
        .button {
            color: #ffffff;
            background-color: #0967d2;
            font-size: 14px;
            border-width: 0;
            border-radius: 4px;
            margin: 10px;
            padding: 10px;
        }
    </style>
    <p>Enter your Name</p>
    <input type="text" id="inputElement" />
    <p>Enter your Password</p>
    <input type="password" id="passwordElement" />
    <div>
        <button class="button" id="signInBtn" onclick="signIn()">Sign In</button>
    </div>
    <p id="messageText"></p>
    <script>
        const name = document.querySelector('#inputElement'),
              password = document.querySelector('#passwordElement'),
              message = document.querySelector('#messageText');
        function signIn() {
            if (name.value) {
                if (password.value) {
                    message.innerHTML = 'Welcome';
                } else {
                    message.innerHTML = 'Please Enter Password'
                }
            } else {
                    message.innerHTML = 'Please Enter UserName'
            }
        }
    </script>
</body>
</html>

Learn more about our help with Assignments: Programming & Computer Science

Comments

No comments. Be the first!

Answer to Question #302694 in HTML/JavaScript Web Application for CHETHAN

Comments

Leave a comment

Related Questions