js basics i acc
Sat Oct 05 2024 04:12:30 GMT+0000 (Coordinated Universal Time)
Saved by @signup
1)<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Calculator</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
}
input {
margin: 5px;
}
button {
margin: 5px;
padding: 10px;
}
#result {
margin-top: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<h3>Simple Calculator</h3>
<div>
<label for="value1">Value 1 :</label>
<input type="number" id="value1" />
</div>
<div>
<label for="value2">Value 2 :</label>
<input type="number" id="value2" />
</div>
<div>
<!-- Ensure the buttons are properly named and events are attached -->
<button name="add" onclick="add()">ADDITION</button>
<button name="sub" onclick="sub()">SUBTRACT</button>
<button name="mul" onclick="mul()">MULTIPLY</button>
<button name="div" onclick="div()">DIVISION</button>
</div>
<div id="result"></div>
<script>
// Function to add two numbers
function add() {
var value1 = parseFloat(document.getElementById('value1').value);
var value2 = parseFloat(document.getElementById('value2').value);
var result = value1 + value2;
document.getElementById('result').innerHTML = "Addition of " + value1 + " and " + value2 + " is " + result;
}
// Function to subtract two numbers
function sub() {
var value1 = parseFloat(document.getElementById('value1').value);
var value2 = parseFloat(document.getElementById('value2').value);
var result = value1 - value2;
document.getElementById('result').innerHTML = "Subtraction of " + value1 + " and " + value2 + " is " + result;
}
// Function to multiply two numbers
function mul() {
var value1 = parseFloat(document.getElementById('value1').value);
var value2 = parseFloat(document.getElementById('value2').value);
var result = value1 * value2;
document.getElementById('result').innerHTML = "Multiplication of " + value1 + " and " + value2 + " is " + result;
}
// Function to divide two numbers
function div() {
var value1 = parseFloat(document.getElementById('value1').value);
var value2 = parseFloat(document.getElementById('value2').value);
if (value2 === 0) {
document.getElementById('result').innerHTML = "Division by zero is not allowed!";
} else {
var result = value1 / value2;
document.getElementById('result').innerHTML = "Division of " + value1 + " and " + value2 + " is " + result;
}
}
</script>
</body>
</html>
2)<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Count for a Month</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f9f9f9;
}
.container {
margin-top: 50px;
padding: 20px;
border: 1px solid #ccc;
background-color: #fff;
width: 300px;
margin-left: auto;
margin-right: auto;
box-shadow: 0px 0px 10px #ccc;
}
h2 {
margin-bottom: 20px;
}
table {
margin-left: auto;
margin-right: auto;
}
td {
padding: 5px;
}
input[type="text"] {
width: 50px;
padding: 5px;
}
button {
margin-top: 10px;
padding: 5px 10px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
#result {
margin-top: 20px;
font-weight: bold;
color: #333;
}
</style>
</head>
<body>
<div class="container">
<h2>Event count for a month</h2>
<table>
<tr>
<td>Birthday party event</td>
<td>:</td>
<td><input type="text" id="event1"></td>
</tr>
<tr>
<td>Engagement parties event</td>
<td>:</td>
<td><input type="text" id="event2"></td>
</tr>
<tr>
<td>Corporate event</td>
<td>:</td>
<td><input type="text" id="event3"></td>
</tr>
<tr>
<td>Social Gathering event</td>
<td>:</td>
<td><input type="text" id="event4"></td>
</tr>
</table>
<button id="button" onclick="maxevent()">Submit</button>
<div id="result"></div>
</div>
<script>
function maxevent() {
// Get the values from the input fields
var event1 = parseInt(document.getElementById('event1').value) || 0;
var event2 = parseInt(document.getElementById('event2').value) || 0;
var event3 = parseInt(document.getElementById('event3').value) || 0;
var event4 = parseInt(document.getElementById('event4').value) || 0;
// Find the maximum value
var max = Math.max(event1, event2, event3, event4);
var resultText = '';
// Determine the event with the maximum value
if (max === event1) {
resultText = 'Birthday party event';
} else if (max === event2) {
resultText = 'Engagement parties event';
} else if (max === event3) {
resultText = 'Corporate event';
} else if (max === event4) {
resultText = 'Social Gathering event';
}
// Display the result
document.getElementById('result').innerHTML = "Maximum number of event occurred in this month is " + resultText;
}
</script>
</body>
</html>
Comments