dollar signs and filtering css

src/main/java/com/example/demo/entity/Recipe.java

@@ -1,4 +1,4 @@
-ackage com.example.demo.entity;
+package com.example.demo.entity;
 
 import jakarta.persistence.*;
 import java.util.List;

src/main/resources/static/css/explore.css

@@ -186,7 +186,7 @@ body, html {
 .sidebar-right {
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
+  justify-content: flex-start;
   align-items: center;
   margin: 25px;
   padding: 5px;

src/main/resources/templates/explore.html

@@ -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>
-                	<span th:text="${recipe.cost != null ? #strings.repeat('$', recipe.cost) : ''}"></span>
+                    <p class="card-cost" th:text="${recipe.cost}">Cost</p>
             	</div>
         	</a>
 		</div>	
@@ -235,6 +235,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>

src/main/resources/templates/home.html

@@ -50,7 +50,7 @@
                 	<div th:if="${recipe.images != null and !#lists.isEmpty(recipe.images)}">
                     	<img th:src="${recipe.images[0].imageUrl}" alt="Recipe Image">
                 	</div>
-                	<span th:text="${recipe.cost != null ? #strings.repeat('$', recipe.cost) : ''}"></span>
+                    <p class="card-cost" th:text="${recipe.cost}">Cost</p>
             	</div>
         	</a>	
         </div>
@@ -63,5 +63,15 @@
         </div>
     </div>
 </div>
+
+<script>
+/// For cost display
+	document.querySelectorAll('.card-cost').forEach(el => {
+    	const num = parseInt(el.textContent);
+    	el.textContent = num === 0 ? '' : '$'.repeat(num);
+});
+
+</script>
+
 </body>
 </html>

src/main/resources/templates/my-profile.html

@@ -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" style="max-width: 200px;">
 					</div>
-                	<p th:text="${recipe.cost}">Cost</p>
+                    <p class="card-cost" th:text="${recipe.cost}">Cost</p>
             	</div>
         	</a>
         	<a th:href="@{/recipes/{id}/edit(id=${recipe.id})}" class="edit-link">Edit</a>
@@ -91,5 +91,13 @@
 
 </div>
 
+<script>
+    // For cost display
+	document.querySelectorAll('.card-cost').forEach(el => {
+    	const num = parseInt(el.textContent);
+    	el.textContent = num === 0 ? '' : '$'.repeat(num);
+});
+</script>
+
 </body>
 </html>