Public
Edited
Jun 15, 2023
html`
<div>
<label for="period">Select Rent Period:</label>
<select id="period">
<option value="oneYear">One-year</option>
<option value="twoYear">Two-year</option>
</select>
<br>
<label for="currentRent">Enter Current Rent:</label>
<input type="number" id="currentRent">
<br>
<p id="newRent"></p>
</div>
`
const container = document.createElement("div");
container.appendChild(view);
const periodSelect = container.querySelector("#period");
const currentRentInput = container.querySelector("#currentRent");
const newRentText = container.querySelector("#newRent");
periodSelect.addEventListener("change", updateRent);
currentRentInput.addEventListener("input", updateRent);
function updateRent() {
const period = periodSelect.value;
const currentRent = +currentRentInput.value;
let newRent = 0;
if (period === "oneYear") {
newRent = currentRent * 5;
} else if (period === "twoYear") {
newRent = currentRent * 10;
}
newRentText.textContent = `Possible New Rent: $${newRent}`;
}
container;
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
