Scribd
Upload
10 views

CSS SOLVED PR

The document contains multiple HTML and JavaScript examples demonstrating various functionalities such as counting numbers with a delay, generating an email from user input, managing cookies, validating checkbox selections, creating a registration form, handling onchange events, setting a read-only input, and using addEventListener. Each example includes the necessary HTML structure and JavaScript code to achieve its purpose. These examples serve as practical demonstrations for beginners learning JavaScript and web development.

Uploaded by

suyashc81
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
10 views

CSS SOLVED PR

The document contains multiple HTML and JavaScript examples demonstrating various functionalities such as counting numbers with a delay, generating an email from user input, managing cookies, validating checkbox selections, creating a registration form, handling onchange events, setting a read-only input, and using addEventListener. Each example includes the necessary HTML structure and JavaScript code to achieve its purpose. These examples serve as practical demonstrations for beginners learning JavaScript and web development.

Uploaded by

suyashc81
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 8

Writing a number after a delay using setInterval ( ) method.

In this
example, numbers are displayed in a textarea after a 1 second

<html>

<body>

<textarea id="txt" rows="40"></textarea><br>

<button onclick="start_count()">Start Counting</button>

<script>

var interval;

var i=0;

function start_count()

interval=setInterval("show()",1000);

function show()

document.getElementById("txt").value+=i+ "\n";

i++;

</script>

</body>

</html>

Develop a program for as we enter the firstname and lastname ,


email is automatically generated

<html>

<body>
<script>

var firstname=prompt("Enter First Name:");

var lastname=prompt("Enter Last Name:");

function create(firstname,lastname,domain="example.com")

firstname=firstname.trim().toLowerCase().replace(/\s+/g,".");

lastname=lastname.trim().toLowerCase().replace(/\s+/g,".");

return `${firstname}.${lastname}@${domain}`;

var email=create(firstname,lastname);

document.write(`Your generated email id: ${email}`);

</script>

</body>

</html>

Write a program to delete the cookie

<html>

<body>

Enter your name:

<input type="text" id="txt"><br>

<input type="button" id="btn" value="Set Cookie"


onclick="setCookie()">
<input type="button" id="btn" value="Get Cookie"
onclick="getCookie()">

<script>

function setCookie()

document.cookie="Name: " +txt.value+ "; expires= Tue,


15 Oct 2024 00:00:00 GMT";

alert("Cookie set");

function getCookie()

var x=document.cookie;

document.write(x);

</script>

</body>

</html>

Write a JavaScript program for evaluating checkbox selection

<html>

<body>

<input type="checkbox" name="program" id="it" value="IF">

<label for="it">Information Technology</label><br>

<input type="checkbox" name="program" id="co" value="CO"


checked>
<label for="co">Computer Engineering</label><br>

<input type="checkbox" name="program" id="ej" value="EJ">

<label for="ej">Electronics and Telecommunication</label><br>

<button onclick="validate()">Validate</button>

<div id="status">

</div>

<script>

function validate()

var elements=document.getElementsByName("program");

var statusText=" ";

for(var i=0;i<elements.length;i++)

statusText+=elements[i].value+ "= "


+elements[i].checked+"<br>";

document.getElementById("status").innerHTML=statusText;

</script>

</body>

</html>
Write a program to create the registration form for creating gmail
account.

<html>

<body>

<form>

<h2>

Registration form of Gmail

</h2>

<input type="image" src="C:\Users\suyas\Downloads\gmail.png"


width="300" height="180">

<br>

<label for="fname">Enter First Name:</label>

<input type="text" id="fname">

<br>

<label for="lname">Enter Last Name:</label>

<input type="text" id="lname">

<br>

<label for="gender">Select Your Gender:</label>

<select id="gender">

<option value="Choose">Select an option...</option>

<option value="Male">Male</option>

<option value="Female">Female</option>

<option value="No Ans">Prefer Not to Answer</option>

</select>
<br>

<label for="pass">Enter Password:</label>

<input type="password" id="pass">

<br>

<label for="pass1">Confirm Your Password:</label>

<input type="password" id="pass1">

<br>

<br>

<input type="button" value="Submit">

</form>

</body>

</html>

Write a program to demonstrate the use of onchange event

<html>

<script>

function highlight_this(x)

x.style.backgroundColor="pink";

x.style.color="red";

</script>

<body>
Your Name:

<input type="text" id="tx" onchange="highlight_this(this)">

<br>

Your Email Id:

<input type="text" id="fn" onchange="highlight_this(this)">

<br>

<input type="button" id="btn" value="Submit">

</body>

</html>

Write a JavaScript program to change the value of an element that


the user cannot change (a read-only element)

<html>

<body>

Name: <input type="text" id="txt">

<br>

Click the button to set the text field to read only.

<br>

<button onclick="myFunction()">

Click here

</button>

<script>

function myFunction()

{
document.getElementById("txt").readOnly=true;

</script>

</body>

</html>

Write a JavaScript program to demonstrate the addEventListener ().

<html>

<body>

Press a key inside text box to change colour

<input type="text" id="tx">

<script>

document.getElementById("tx").addEventListener("keypress",myFunction);

function myFunction()

document.getElementById("tx").style.backgroundColor="red";

</script>

</body>

</html>

You might also like