var room = document.getElementById("bedNumber").getContext("2d");
var stay = document.getElementById("stayNumber").getContext("2d");
room.beginPath();
room.fillStyle = "red";
room.fillRect(20, 0, 30, 10);
stay.beginPath();
stay.fillStyle = "red";
stay.fillRect(20, 0, 30, 10);
var RoomNumber = 0;
var StayNumber = 0;
var Lux = 0;
function chose(context, event) {
var X = event.clientX - 80;
if (context == "room") {
room.beginPath();
room.fillStyle = "red";
room.clearRect(0, 0, 1000, 50);
room.fillRect(X, 0, 30, 10);
RoomNumber = X / 2;
} else {
stay.beginPath();
stay.fillStyle = "red";
stay.clearRect(0, 0, 1000, 50);
stay.fillRect(X, 0, 30, 10);
StayNumber = X;
}
Price();
}
function addLuxury(lux) {
Lux = lux * 50;
Price();
}
function Price() {
var Total = RoomNumber + StayNumber + Lux;
document.getElementById("total").innerHTML = "BUY ROOM(S) FOR " + Total + "$";
}
#slider {
background-color: rgba(0, 0, 0, 0.3);
width: 600px;
height: 400px;
}
h1 {
color: white;
text-align: center;
}
u {
color: white;
}
canvas {
border: 2px solid black;
margin-left: 50px;
background-color: white;
}
button {
background-color: #0099ff;
border-radius: 25px;
margin: 8px;
}
#total {
background-color: #6666ff;
border-radius: 25px;
text-align: center;
}
<body>
<div id="slider">
<u><h1>Hotel Rooms For Good Price</h1></u>
<br/>ROOMS :
<canvas id="bedNumber" width="500" height="10" onclick="chose('room', event)"></canvas>
<br/>
<br/>STAY :
<canvas id="stayNumber" width="500" height="10" onclick="chose('stay', event)"></canvas>
<br/>
<u><h3>Luxury</h3></u>
<button onclick="addLuxury(0)">LUXURARY : BAD
<br/>+0$ per/D</button>
<button onclick="addLuxury(1)">LUXURARY : OK
<br/>+75$ per/D</button>
<button onclick="addLuxury(2)">LUXURARY : WOW
<br/>+150$ per/D</button>
<button onclick="addLuxury(3)">LUXURARY : BEST
<br/>+215$ per/D</button>
<br/>
<br/>
<br/>
<button id="total">BUY ROOM(S) FOR $0</button>
</div>
</body>