Tell us what’s happening:
le code est correct mais la même erreur a chaque fois ..il s’agit peu être d’un bug sur le site
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Caisse Enregistreuse</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Caisse Enregistreuse</h1>
<div class="display">
<p id="price-display">Prix: $0.00</p>
<div class="cash-input">
<label for="cash">Montant donné par le client:</label>
<input type="number" id="cash" min="0" step="0.01" placeholder="0.00">
<button id="purchase-btn">Valider</button>
</div>
<div id="change-due" class="change-due"></div>
</div>
<div class="drawer">
<h2>Tiroir-caisse</h2>
<table id="cash-drawer">
<thead>
<tr>
<th>Type</th>
<th>Valeur</th>
<th>Quantité</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<!-- Rempli dynamiquement par JavaScript -->
</tbody>
</table>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
/* file: script.js */
let price = 19.5; // Variable globale pour le prix
let cid = [
["PENNY", 0.5],
["NICKEL", 0],
["DIME", 0],
["QUARTER", 0],
["ONE", 0],
["FIVE", 0],
["TEN", 0],
["TWENTY", 0],
["ONE HUNDRED", 0]
]; // Variable globale pour le tiroir-caisse
document.addEventListener('DOMContentLoaded', function() {
const cashInput = document.getElementById('cash');
const purchaseBtn = document.getElementById('purchase-btn');
const changeDueDisplay = document.getElementById('change-due');
const cashDrawerTable = document.getElementById('cash-drawer').querySelector('tbody');
const priceDisplay = document.getElementById('price-display');
const currencyValues = {
"PENNY": 0.01,
"NICKEL": 0.05,
"DIME": 0.1,
"QUARTER": 0.25,
"ONE": 1,
"FIVE": 5,
"TEN": 10,
"TWENTY": 20,
"ONE HUNDRED": 100
};
updatePriceDisplay();
updateCashDrawerDisplay();
purchaseBtn.addEventListener('click', processPurchase);
function updatePriceDisplay() {
priceDisplay.textContent = `Prix: $${price.toFixed(2)}`;
}
function updateCashDrawerDisplay() {
cashDrawerTable.innerHTML = '';
cid.forEach(currency => {
const [name, amount] = currency;
const value = currencyValues[name];
const count = Math.round(amount / value * 100) / 100;
const row = document.createElement('tr');
row.innerHTML = `
<td>${name}</td>
<td>$${value.toFixed(2)}</td>
<td>${count}</td>
<td>$${amount.toFixed(2)}</td>
`;
cashDrawerTable.appendChild(row);
});
}
function processPurchase() {
const cash = parseFloat(cashInput.value);
if (isNaN(cash) || cash < 0) {
alert("Veuillez entrer un montant valide");
return;
}
if (cash < price) {
alert("Customer does not have enough money to purchase the item");
return;
}
if (cash === price) {
changeDueDisplay.textContent = "No change due - customer paid with exact cash";
changeDueDisplay.className = "change-due";
return;
}
const changeDue = cash - price;
const changeResult = calculateChange(changeDue, cid);
displayChangeResult(changeResult);
updateCashDrawerDisplay();
}
function calculateChange(changeDue, cid) {
let changeToGive = changeDue;
let totalCID = cid.reduce((sum, currency) => sum + currency[1], 0);
totalCID = Math.round(totalCID * 100) / 100;
if (totalCID < changeToGive) {
return { status: "INSUFFICIENT_FUNDS", change: [] };
}
if (totalCID === changeToGive) {
return { status: "CLOSED", change: [...cid] }; // Renvoyer le tiroir-caisse complet
}
const change = [];
const tempCID = JSON.parse(JSON.stringify(cid));
tempCID.sort((a, b) => currencyValues[b[0]] - currencyValues[a[0]]);
for (let i = 0; i < tempCID.length; i++) {
const [name, amount] = tempCID[i];
const value = currencyValues[name];
let available = amount;
let count = 0;
while (changeToGive >= value && available > 0) {
changeToGive = Math.round((changeToGive - value) * 100) / 100;
available = Math.round((available - value) * 100) / 100;
count++;
}
if (count > 0) {
change.push([name, count * value]);
tempCID[i][1] = available;
}
}
if (changeToGive > 0) {
return { status: "INSUFFICIENT_FUNDS", change: [] };
}
cid = tempCID;
return { status: "OPEN", change };
}
function displayChangeResult(result) {
const { status, change } = result;
changeDueDisplay.className = "change-due";
if (status === "INSUFFICIENT_FUNDS") {
changeDueDisplay.textContent = "Status: INSUFFICIENT_FUNDS";
changeDueDisplay.classList.add("status-insufficient");
return;
}
let displayText = `Status: ${status}`;
if (status === "CLOSED") {
// Si status est "CLOSED", afficher les pièces et billets disponibles
change.forEach(currency => {
const [name, amount] = currency;
displayText += ` ${name}: $${amount.toFixed(2)}`;
});
changeDueDisplay.classList.add("status-closed");
} else if (status === "OPEN") {
// Si status est "OPEN", afficher la monnaie rendue
change.forEach(currency => {
const [name, amount] = currency;
displayText += ` ${name}: $${amount.toFixed(2)}`;
});
changeDueDisplay.classList.add("status-open");
}
changeDueDisplay.textContent = displayText;
}
window.setPrice = function(newPrice) {
price = newPrice;
updatePriceDisplay();
};
window.setCID = function(newCID) {
cid = newCID;
updateCashDrawerDisplay();
};
});
/* file: styles.css */
body {
font-family: 'Arial', sans-serif;
line-height: 1.6;
margin: 0;
padding: 20px;
background-color: #f5f5f5;
color: #333;
}
.container {
max-width: 800px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
h1, h2 {
color: #2c3e50;
text-align: center;
}
.display, .drawer {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.cash-input {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin: 15px 0;
}
label {
font-weight: bold;
}
input[type="number"] {
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
width: 150px;
}
button {
background-color: #3498db;
color: white;
border: none;
padding: 8px 15px;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #2980b9;
}
#price-display {
font-size: 1.2em;
font-weight: bold;
margin: 10px 0;
}
.change-due {
padding: 10px;
border-radius: 4px;
background-color: #f9f9f9;
border: 1px solid #ddd;
margin-top: 15px;
min-height: 50px;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 15px;
}
th, td {
padding: 10px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #f2f2f2;
}
tr:hover {
background-color: #f5f5f5;
}
.status-open {
color: #2ecc71;
}
.status-closed {
color: #3498db;
}
.status-insufficient {
color: #e74c3c;
}
@media (max-width: 600px) {
.cash-input {
flex-direction: column;
align-items: flex-start;
}
input[type="number"] {
width: 100%;
}
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36
Challenge Information:
Build a Cash Register Project - Build a Cash Register