45 lines
1.3 KiB
HTML
45 lines
1.3 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Offices High</title>
|
||
|
|
<link rel="stylesheet" href="./index-styles.css">
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="container">
|
||
|
|
<h2>Selected Price (High): <span id="selected-price"></span></h2>
|
||
|
|
<h2>Available Offices</h2>
|
||
|
|
<div class="boxes" id="office-boxes"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
const offices = ["PGO", "PHRMO", "TEST", "PPDO"];
|
||
|
|
|
||
|
|
// Display the selected price
|
||
|
|
const selectedPrice = localStorage.getItem('selectedPrice');
|
||
|
|
document.getElementById('selected-price').textContent = selectedPrice;
|
||
|
|
|
||
|
|
// Create office boxes
|
||
|
|
function createOfficeBoxes(data) {
|
||
|
|
const container = document.getElementById('office-boxes');
|
||
|
|
data.forEach(office => {
|
||
|
|
const box = document.createElement('div');
|
||
|
|
box.className = 'box';
|
||
|
|
box.textContent = office;
|
||
|
|
|
||
|
|
// Add click event to store selected office
|
||
|
|
box.addEventListener('click', () => {
|
||
|
|
localStorage.setItem('selectedOffice', office); // Save selected office
|
||
|
|
alert(`You selected office: ${office}`); // Display confirmation
|
||
|
|
});
|
||
|
|
|
||
|
|
container.appendChild(box);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
createOfficeBoxes(offices);
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|