Description
Lab Assignment 6
ISHAAN OHRI 18BCE0265
Question:
Create a program to change the content of the webpage using AJAX.
i. Create a program to change the content of the Jackpot web page using AJAX. ii. Allow the user to enter any 4 digit number in the textbox.
iii. Whenever the user enters a number ending with 7,show Rs 1000 as prize money.
iv. When the user enters a number ending with 9,show Rs 3000 as the prize money.
v. For all other value Rs.100 as the prize money. vi. Prize Money updation should be done with AJAX.
Code:
index.html
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>18BCE0265 ISHAAN OHRI</title>
<link rel=”stylesheet” href=”./style.css”>
</head>
<body>
<h1 align=”center”>ISHAAN OHRI 18BCE0265</h1>
<h1 align=”center”>JACKPOT</h1>
<div align=”center”>
<p>Enter a 4 digit number:</p>
<input id=”number” type=”number” required>
<br>
<br>
<button id=”submit” onclick=”loadD()”>Submit</button>
</div>
</body>
<script src=”./app.js”></script>
</html>
style.css
div{ background-color: white; padding: 50px; font-size: 40px; margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
}
body{ background-color: tomato;
}
button{ background-color: tomato; padding: 20px; font-size: 30px; color: white;
}
input{ font-size: 40px; text-align: center; }
app.js
function loadD() {
var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function () { if (this.readyState == 4 && this.status == 200) { cal(); } else { cal();
}
};
xhttp.open(“GET”, true); xhttp.send();
}
function cal() {
var i = document.getElementById(“number”).value; if(i.length == 4){
if (i[i.length – 1] == 7) { alert(“You Won Rs 1000”); } else if (i[i.length – 1] == 9) { alert(“You Won Rs 3000”);
} else { lert(“You Won Rs 100”);
}
} else { alert(“Please enter a 4 digit number”);
}
}
Output:
Reviews
There are no reviews yet.