100 lines
2.3 KiB
HTML
100 lines
2.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 Low</title>
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
font-family: Arial, sans-serif;
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.container {
|
||
|
|
margin: 20px;
|
||
|
|
width: 90%;
|
||
|
|
max-width: 600px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.boxes {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
gap: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.box {
|
||
|
|
background: #f0f0f0;
|
||
|
|
border: 1px solid #ddd;
|
||
|
|
border-radius: 5px;
|
||
|
|
padding: 15px;
|
||
|
|
cursor: pointer;
|
||
|
|
text-align: center;
|
||
|
|
width: calc(50% - 10px);
|
||
|
|
transition: background 0.3s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.box:hover {
|
||
|
|
background: #f8d7da;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="container">
|
||
|
|
<h2>Selected Price (Low): <span id="selected-price"></span></h2>
|
||
|
|
<h2>Available Offices</h2>
|
||
|
|
<div class="boxes" id="office-boxes"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// Predefined offices
|
||
|
|
const offices = ["PGO", "PHRMO", "TEST", "PPDO"];
|
||
|
|
|
||
|
|
const selectedPrice = localStorage.getItem('selectedPrice');
|
||
|
|
document.getElementById('selected-price').textContent = selectedPrice || "None";
|
||
|
|
|
||
|
|
|
||
|
|
function fetchRemovedOffices() {
|
||
|
|
const removedOffices = localStorage.getItem('removedOffices');
|
||
|
|
return removedOffices ? JSON.parse(removedOffices) : [];
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
function saveRemovedOffice(office) {
|
||
|
|
const removedOffices = fetchRemovedOffices();
|
||
|
|
removedOffices.push(office);
|
||
|
|
localStorage.setItem('removedOffices', JSON.stringify(removedOffices));
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
function createOfficeBoxes() {
|
||
|
|
const removedOffices = fetchRemovedOffices();
|
||
|
|
const filteredOffices = offices.filter(office => !removedOffices.includes(office));
|
||
|
|
|
||
|
|
const container = document.getElementById('office-boxes');
|
||
|
|
container.innerHTML = '';
|
||
|
|
|
||
|
|
filteredOffices.forEach(office => {
|
||
|
|
const box = document.createElement('div');
|
||
|
|
box.className = 'box';
|
||
|
|
box.textContent = office;
|
||
|
|
|
||
|
|
|
||
|
|
box.addEventListener('click', () => {
|
||
|
|
alert(`You selected and removed office: ${office}`);
|
||
|
|
saveRemovedOffice(office);
|
||
|
|
createOfficeBoxes();
|
||
|
|
});
|
||
|
|
|
||
|
|
container.appendChild(box);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
createOfficeBoxes();
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|