Design a Vector Scaling Calculator in Tailwind CSS
Last Updated :
30 Apr, 2024
The Vector Scaling Calculator is a web application that allows users to input a vector and a scaling factor and then calculate the scaled vector by multiplying each component of vector by the scaling factor.
Approach / Functionalities:
- Input fields for the vector and scaling factor
- Error message display if any input field is empty
- Calculation of the scaled vector when the “Calculate” button is clicked
- Display of the result in the result input field
Steps to Create & Configure the Project
- Set up a new HTML file.
- Link Tailwind CSS for the styling.
- Create input fields for the vector and scale factor.
- Write JavaScript logic to the calculate the scaled vector.
- Display the result on the page.
- Implement validation to the ensure both inputs are provided before calculation.
Example : To demonsrtate creating an vector scaling calculator in Tailwind CSS using JavaScript.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>The Vector Scaling Calculator</title>
<link href=
"https://cdn.jsdelivr.net/npm/tailwindcss@2.0.3/dist/tailwind.min.css"
rel="stylesheet">
</head>
<body class="bg-gray-100 p-8">
<div
class="max-w-md mx-auto bg-white p-8
rounded shadow border-green-500 border-4">
<h2 class="text-xl font-bold mb-4">
Vector Scaling Calculator
</h2>
<div class="mb-4">
<label for="vector"
class="block text-sm font-medium text-gray-700">
Enter Vector:
</label>
<input type="text" id="vector" name="vector"
placeholder="e.g., [1, 2, 3]"
class="w-full px-3 py-2 border
rounded-md focus:outline-none
focus:ring focus:border-blue-300">
</div>
<div class="mb-4">
<label for="scale"
class="block text-sm font-medium text-gray-700">
Enter Scale Factor:
</label>
<input type="text" id="scale" name="scale"
placeholder="e.g., 2.5"
class="w-full px-3 py-2 border rounded-md
focus:outline-none focus:ring
focus:border-blue-300">
</div>
<div class="mb-4">
<label for="result"
class="block text-sm font-medium text-gray-700">Result:</label>
<input type="text" id="result" name="result" readonly
class="w-full px-3 py-2 border rounded-md
focus:outline-none focus:ring focus:border-blue-300
bg-gray-100">
<p id="error-message" class="text-red-500 text-sm mt-2 hidden">
Please enter values for both vector and
scale.
</p>
</div>
<button onclick="calculate()"
class="w-full bg-blue-500 hover:bg-blue-600
text-white font-bold py-2 px-4 rounded
focus:outline-none focus:shadow-outline">
Calculate
</button>
</div>
<script>
function calculate() {
const vectorInput = document
.getElementById('vector').value;
const scaleInput = document
.getElementById('scale').value;
const errorMessage = document
.getElementById('error-message');
if (vectorInput
.trim() === '' || scaleInput
.trim() === '') {
errorMessage
.classList
.remove('hidden');
document
.getElementById('result').value = '';
} else {
errorMessage
.classList.add('hidden');
const vectorArray = JSON.parse(vectorInput);
const scaledVector = vectorArray
.map(component => component * parseFloat(scaleInput));
document
.getElementById('result')
.value = "[" + scaledVector.join(', ') + "]";
}
}
</script>
</body>
</html>
Output:
Share your thoughts in the comments
Please Login to comment...