<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
}
.shape {
width: 150px;
height: 150px;
background-color: coral;
border-radius: 50%; /* Starts as a circle */
transition: border-radius 0.5s, transform 0.5s;
}
input[type="range"] {
margin-top: 20px;
}
</style>
</head>
<body>
<div class="shape" id="shape"></div>
<input type="range" min="3.14" max="4" step="0.01" value="3.14" id="piSlider">
<p>π approximation: <span id="piValue">3.14</span></p>
<script>
const shape = document.querySelector("#shape");
const piSlider = document.querySelector("#piSlider");
const piValueDisplay = document.querySelector("#piValue");
piSlider.addEventListener("input", () => {
const piValue = parseFloat(piSlider.value);
piValueDisplay.textContent = piValue.toFixed(2);
// Adjust the border-radius based on the pi approximation
if (piValue <= 3.14) {
shape.style.borderRadius = "50%"; // Circle
shape.style.transform = "rotate(0deg)";
} else if (piValue < 3.5) {
shape.style.borderRadius = `${(4 - piValue) * 50}%`;
} else if (piValue < 4) {
shape.style.borderRadius = "0%"; // Square
shape.style.transform = `rotate(${(piValue - 3.5) * 90}deg)`; // Rotate into "X" shape
} else {
shape.style.borderRadius = "0%";
shape.style.transform = "rotate(45deg)"; // Full "X" shape
}
});
</script>
</body>
</html>