<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Responsive layout - makes the margin calculator look good on any device */
* {
box-sizing: border-box;
}
/* Style the input fields */
input[type=text] {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
/* Style the calculate button */
.calculate-btn {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
margin-top: 10px;
}
/* Add a red border to the input fields if they are invalid */
.invalid {
border: 2px solid red;
}
/* Add a green border to the input fields if they are valid */
.valid {
border: 2px solid green;
}
</style>
</head>
<body>
<h2>Margin Calculator</h2>
<form>
<label for="cost-price">Cost Price:</label>
<input type="text" id="cost-price" name="cost-price" placeholder="Enter the cost price">
<label for="selling-price">Selling Price:</label>
<input type="text" id="selling-price" name="selling-price" placeholder="Enter the selling price">
<button type="button" class="calculate-btn" onclick="calculateMargin()">Calculate Margin</button>
</form>
<p id="result"></p>
<script>
function calculateMargin() {
var costPrice = document.getElementById("cost-price");
var sellingPrice = document.getElementById("selling-price");
var result = document.getElementById("result");
// Check if the input fields are empty
if (costPrice.value === "" || sellingPrice.value === "") {
costPrice.classList.add("invalid");
sellingPrice.classList.add("invalid");
result.innerHTML = "Please fill in all fields.";
result.style.color = "red";
} else {
costPrice.classList.remove("invalid");
sellingPrice.classList.remove("invalid");
// Check if the input values are valid numbers
if (isNaN(costPrice.value) || isNaN(sellingPrice.value)) {
costPrice.classList.add("invalid");
sellingPrice.classList.add("invalid");
result.innerHTML = "Please enter valid numbers.";
result.style.color = "red";
} else {
costPrice.classList.add("valid");
sellingPrice.classList.add("valid");
// Calculate the margin
var margin = ((sellingPrice.value - costPrice.value) / costPrice.value) * 100;
result.innerHTML = "Margin: " + margin.toFixed(2) + "%";
result.style.color = "green";
}
}
}
</script>
</body>
</html>
Comments
Post a Comment
sunil191280@gmail.com