js for cost

This commit is contained in:
kaipher7
2026-04-20 20:58:23 -06:00
parent 24d193504e
commit 37f8cca781
6 changed files with 44 additions and 6 deletions
+11 -3
View File
@@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Thyme Crunch Home</title>
<title>Home - Thyme Crunch</title>
<link rel="stylesheet" th:href="@{css/home.css}">
<link href="https://fonts.googleapis.com/css2?family=Delius+Swash+Caps&family=Mali:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700" rel="stylesheet">
</head>
@@ -51,7 +51,7 @@
<div th:if="${recipe.images != null and !#lists.isEmpty(recipe.images)}">
<img th:src="${recipe.images[0].imageUrl}" alt="Recipe Image">
</div>
<p th:text="${recipe.cost}">Cost</p>
<p class="card-cost" th:text="${recipe.cost}">Cost</p>
</div>
</a>
</div>
@@ -64,5 +64,13 @@
</div>
</div>
</div>
<script>
document.querySelectorAll('.card-cost').forEach(el => {
const num = parseInt(el.textContent);
el.textContent = num === 0 ? '' : '$'.repeat(num);
});
</script>
</body>
</html>
</html>