Test

body {
font-family: Arial, sans-serif;
}

form {
display: flex;
flex-direction: column;
max-width: 400px;
margin: 0 auto;
}

label {
margin-top: 10px;
}

input[type="number"] {
padding: 5px;
border-radius: 5px;
border: none;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}

button {
padding: 10px;
margin-top: 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
cursor: pointer;
}

button:hover {
background-color: #3e8e41;
}

#results {
max-width: 400px;
margin: 20px auto;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}

<!DOCTYPE html>
<html>
<head>
<title>Soap Making Calculator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Soap Making Calculator</h1>
<form>
<label for="oil_weight">Weight of oils (in grams):</label>
<input type="number" id="oil_weight" name="oil_weight" required><br>

<label for="lye_concentration">Lye concentration (%):</label>
<input type="number" id="lye_concentration" name="lye_concentration" required><br>

<label for="super_fat">Super fat percentage (%):</label>
<input type="number" id="super_fat" name="super_fat" required><br>

<label for="water_ratio">Water ratio (%):</label>
<input type="number" id="water_ratio" name="water_ratio" required><br>

<button type="button" onclick="calculate()">Calculate</button>
</form>

<div id="results"></div>

<script src="script.js"></script>
</body>
</html>

function calculate() {
// Get input values
const oilWeight = parseFloat(document.getElementById("oil_weight").value);
const lyeConcentration = parseFloat(document.getElementById("lye_concentration").value);
const superFat = parseFloat(document.getElementById("super_fat").value);
const waterRatio = parseFloat(document.getElementById("water_ratio").value);

// Calculate lye amount
const lyeWeight = oilWeight * lyeConcentration / 100;

// Calculate water amount
const waterWeight = oilWeight * waterRatio / 100;

// Calculate oil amounts
const oils = {"coconut oil": 0.2, "olive oil": 0.6, "p

Currency