Cognizant Handson - Welcome Message

 

Welcome Message

Create a web page which should contain an input box, ‘Ok’ button, and a ‘p’ tag with the id ‘address’.  When the user enters his/her name into the text box, display a welcome message using jQuery. 


Please refer to the sample page for more clarifications.



Note: 

Do not alter the given 'welcome.html' file.  Write your jQuery code in the file 'welcome.js'.

Avoid writing the jQuery 'document ready' method for the proper web page visibility.

Do not use 'ES6' features.

Solution:

welcome.html
<html>
<head>
</head>
<body>

<br>
      Enter your name: <input type="text" id="txt">
<button id="btnId">Ok</button>
<div id="address"></div>

 <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="welcome.js"></script>

</body>
</html>


welcome.js

$(document).ready(function(){
  $("button").click(function(){
    $("#address").text("\"Welcome "+$('#txt').val()+"!\"");
  });
});

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.