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
@@ -425,6 +425,12 @@ a {
color: var(--dusty-red-hover);
}
.card-cost {
font-weight: 800;
color: var(--dusty-red);
}
/* =========================
Card Image
========================= */
+6
View File
@@ -290,6 +290,12 @@ a {
color: var(--dusty-red-hover);
}
.card-cost {
font-weight: 800;
color: var(--dusty-red);
}
/* =========================
Card Image
========================= */
@@ -399,6 +399,11 @@ a {
overflow: hidden;
}
.card-cost {
font-weight: 800;
color: var(--dusty-red);
}
/* =========================
Card Image
========================= */
+8 -2
View File
@@ -4,7 +4,7 @@
<meta charset="UTF-8">
<meta name="_csrf_header" th:content="${_csrf.headerName}"/>
<meta name="_csrf" th:content="${_csrf.token}"/>
<title>Thyme Crunch Home</title>
<title>Explore - Thyme Crunch</title>
<link rel="stylesheet" th:href="@{css/explore.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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
@@ -65,7 +65,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>
@@ -234,6 +234,12 @@
window.location.href = '/explore?' + out.toString();
}
})();
// For cost display
document.querySelectorAll('.card-cost').forEach(el => {
const num = parseInt(el.textContent);
el.textContent = num === 0 ? '' : '$'.repeat(num);
});
</script>
</body>
+10 -2
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>
+8 -1
View File
@@ -56,7 +56,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}"><b>Cost</b></p>
</div>
</a>
<a th:href="@{/recipes/{id}/edit(id=${recipe.id})}" class="edit-link">Edit</a>
@@ -91,5 +91,12 @@
</div>
<script>
document.querySelectorAll('.card-cost').forEach(el => {
const num = parseInt(el.textContent);
el.textContent = num === 0 ? '' : '$'.repeat(num);
});
</script>
</body>
</html>