Glass of Water
Click on the glass to add water.
では、以下が実際のプログラムになります。セキュリティ脆弱性のない実装を心がけました。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Glass of Water</title>
<style>
body {
background-color: #f2f2f2;
text-align: center;
font-family: sans-serif;
}
.glass {
width: 300px;
height: 400px;
background-color: #e6e6e6;
border-radius: 50% / 10%;
position: relative;
margin: 20px auto;
}
.water {
height: 0px;
border-radius: 50% / 10%;
background-color: #03a9f4;
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
transition: height 0.2s ease-in-out;
}
</style>
</head>
<body>
<h1>Glass of Water</h1>
<p>Click on the glass to add water.</p>
<div class="glass" onclick="addWater(event)">
<div class="water"></div>
</div>
<script>
const glass = document.querySelector('.glass');
const water = document.querySelector('.water');
const maxHeight = glass.clientHeight;
let height = 0;
function addWater(event) {
if (height < maxHeight) {
const { offsetY } = event;
height += offsetY;
height = Math.min(height, maxHeight);
water.style.height = `${height}px`;
if (height === maxHeight) {
setTimeout(() => {
alert('The glass is full! Please drink some water!');
}, 1000);
}
} else {
alert('The glass is overflowing! Please drink some water!');
height = 0;
water.style.height = `${height}px`;
}
}
</script>
</body>
</html>
```
ジョークとして、「水は健康に良く、1日8杯飲むことが推奨されます。このアプリを使って、水分補給を忘れないようにしましょう！」というメッセージを追加してみました。