Scribd
Upload
237 views7 pages

Hopeless

Here is the code to animate text moving between text fields: <!DOCTYPE html> <html> <head> <style> #text1, #text2 { border: 1px solid #ccc; padding: 10px; width: 100px; } </style> </head> <body> <p id="text1"></p> <p id="text2"></p> <script> var text = "Answer Soon"; var i = 0; var speed = 100; function moveText() { if(i==0) { document.getElementById("text1").innerHTML = text; document

Uploaded by

azlannisar
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
237 views7 pages

Hopeless

Here is the code to animate text moving between text fields: <!DOCTYPE html> <html> <head> <style> #text1, #text2 { border: 1px solid #ccc; padding: 10px; width: 100px; } </style> </head> <body> <p id="text1"></p> <p id="text2"></p> <script> var text = "Answer Soon"; var i = 0; var speed = 100; function moveText() { if(i==0) { document.getElementById("text1").innerHTML = text; document

Uploaded by

azlannisar
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/ 7

<!

DOCTYPE html>  
<html>  
<head>  
</head>  
<body style = "text-align: center; font-size: 20px;">  
<h1> Welcome to the javaTpoint.com </h1>  
Enter a number: <input id = "num">  
<br><br>  
<button onclick = "fact()"> Factorial </button>  
<p id = "res"></p>  
<script>  
function fact(){  
var i, num, f;  
f = 1;  
num = document.getElementById("num").value;  
for(i = 1; i <= num; i++)    
{  
ff = f * i;  
}  
ii = i - 1;    
document.getElementById("res").innerHTML = "The factorial of the number " + i + " is: " + f ;  
}  
</script>  
</body>  
</html>  

Q.2. (2
marks)
Write code in JavaScript. Text should change when you move cursor(hover) on City names such
as London, Paris and Tokyo.

1
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}
body {font-family: "Lato", sans-serif;}

/* Style the tab */


.tab {
float: left;
border: 1px solid #ccc;
background-color: #f1f1f1;
width: 30%;
height: 300px;
}

/* Style the buttons inside the tab */


.tab button {
display: block;
background-color: inherit;
color: black;
padding: 22px 16px;
width: 100%;
border: none;
outline: none;
text-align: left;
cursor: pointer;
font-size: 17px;

2
}

/* Change background color of buttons on hover */


.tab button:hover {
background-color: #ddd;
}

/* Create an active/current "tab button" class */


.tab button.active {
background-color: #ccc;
}

/* Style the tab content */


.tabcontent {
float: left;
padding: 0px 12px;
border: 1px solid #ccc;
width: 70%;
border-left: none;
height: 300px;
display: none;
}

/* Clear floats after the tab */


.clearfix::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>

<h2>Hover Tabs</h2>
<p>Move the mouse over a button inside the tabbed menu:</p>

<div class="tab">
<button class="tablinks" onmouseover="openCity(event, 'London')">London</button>

3
<button class="tablinks" onmouseover="openCity(event, 'Paris')">Paris</button>
<button class="tablinks" onmouseover="openCity(event, 'Tokyo')">Tokyo</button>
</div>

<div id="London" class="tabcontent">


<h3>London</h3>
<p>London is the capital city of England.</p>
</div>

<div id="Paris" class="tabcontent">


<h3>Paris</h3>
<p>Paris is the capital of France.</p>
</div>

<div id="Tokyo" class="tabcontent">


<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>

<div class="clearfix"></div>

<script>
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>

</body>

4
</html>
Q.3. (2
marks)
Write code in Javascript for creating new images in javascript with scroll backwards or scroll
forward functions. Images will change when you will click on forward or backward arrows

_____________________
________________________________________________________________
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
a{
text-decoration: none;
display: inline-block;
padding: 8px 16px;
}

a:hover {
background-color: #ddd;
color: black;
}

.previous {
background-color: #f1f1f1;
color: black;
}

.next {
background-color: #04AA6D;
color: white;
}

.round {

5
border-radius: 50%;
}
</style>
</head>
<body>

<h2>Previous and Next Buttons</h2>

<a href="#" class="previous">&laquo; Previous</a>


<a href="#" class="next">Next &raquo;</a>

<a href="#" class="previous round">&#8249;</a>


<a href="#" class="next round">&#8250;</a>

</body>
</html>
Q.4. (2
marks)
Validate Name field using Javascript. If Field is empty change background color of text field to
red as shown in Figure given below:

<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == "" || x == null) {
alert("Name must be filled out");
return false;
}
}
</script>
</head>
<body>

<h2>JavaScript validation for empty input field</h2>


<p>Try to submit the form without entering any text.</p>

6
<form name="myForm" action="/action_page.php" onsubmit="return validateForm()"
method="post" required>
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>

</body>
</html>
Q.5. (2
marks)
Animate Text in Text Fields given below : Text “Answer Soon” should move in between text
fields after a certain time.

_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________

You might also like