explore page working i believe

src/main/java/com/example/demo/controller/RecipeController.java

@@ -59,12 +59,15 @@ public class RecipeController {
 	@GetMapping("/search")
 	public ResponseEntity<List<RecipeDto>> searchRecipes(
 			@RequestParam(required = false) String name,  	  // by not adding a name all recipes will appear basically
-			@RequestParam(required = false) List<String> tags // since users can choose no tags this isnt required
+			@RequestParam(required = false) List<String> tags, // since users can choose no tags this isnt required
+			@RequestParam(required = false) List<Integer> prices,
+			@RequestParam(required = false) List<Integer> cookTime,
+			@RequestParam(required = false) List<Integer> prepTime
 			) {
 		
 		
 		
-	    List<RecipeDto> recipes = recipeService.getRecipes(name, tags);
+	    List<RecipeDto> recipes = recipeService.getRecipes(name, tags, prices, cookTime, prepTime);
 	    return new ResponseEntity<>(recipes, HttpStatus.OK);
 	}
 

src/main/java/com/example/demo/controller/SiteController.java

@@ -62,11 +62,18 @@ public class SiteController {
     public String explore(
             @RequestParam(required = false) String q,
             @RequestParam(required = false) List<String> tags,
+            @RequestParam(required = false) List<Integer> prices,
+            @RequestParam(required = false) List<Integer> cookTime,
+            @RequestParam(required = false) List<Integer> prepTime,
             Model model
     ) {
-        List<RecipeDto> recipes = recipeService.getRecipes(q, tags);
+        List<RecipeDto> recipes = recipeService.getRecipes(q, tags, prices, cookTime, prepTime);
         model.addAttribute("recipes", recipes);
+        String displayQuery = q;
+
+
         model.addAttribute("q", q);
+        model.addAttribute("tags", tags);
         return "explore";
     }
 

src/main/java/com/example/demo/dto/RecipeDto.java

@@ -17,6 +17,7 @@ public class RecipeDto {
 	private List<StepDto> steps;
 	private List<ImageDto> images;
 	private List<TagDto> tags;
+	private Integer cost;
 
 	public RecipeDto() {
 		super();
@@ -24,7 +25,7 @@ public class RecipeDto {
 
 	public RecipeDto(String title, String description, Integer prepTimeMinutes, Integer cookTimeMinutes,
 			Integer servings, UserDto userDto, String status, List<RecipeIngredientDto> ingredients,
-			List<StepDto> steps, List<ImageDto> images, List<TagDto> tags) {
+			List<StepDto> steps, List<ImageDto> images, List<TagDto> tags, Integer cost) {
 		super();
 		this.title = title;
 		this.description = description;
@@ -37,6 +38,7 @@ public class RecipeDto {
 		this.steps = steps;
 		this.images = images;
 		this.tags = tags;
+		this.cost = cost;
 	}
 
 	// getters and setters
@@ -136,4 +138,14 @@ public class RecipeDto {
 	public void setId(Integer id) { 
 		this.id = id; 
 	}
+
+	public Integer getCost() {
+		return cost;
+	}
+
+	public void setCost(Integer cost) {
+		this.cost = cost;
+	}
+
+	
 }

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

@@ -40,6 +40,10 @@ public class Recipe {
 	
 	private String status;
 	
+	@NotNull(message = "Please Provide a cost") 
+	@Positive(message = "This value cannot be negative")
+	private Integer cost;
+	
 	private LocalDateTime createdAt;
 	private LocalDateTime updatedAt;
 	
@@ -76,7 +80,7 @@ public class Recipe {
 	}
 
 	public Recipe(String title, String description, Integer prepTimeMinutes, Integer cookTimeMinutes, Integer servings,
-			User user, String status) {
+			User user, String status, Integer cost) {
 		this.title = title;
 		this.description = description;
 		this.prepTimeMinutes = prepTimeMinutes;
@@ -86,6 +90,7 @@ public class Recipe {
 		this.status = status;
 		this.createdAt = LocalDateTime.now();
 		this.updatedAt = LocalDateTime.now();
+		this.cost = cost;
 	}
 
 	// Getters and setters
@@ -208,4 +213,12 @@ public class Recipe {
 	public void setUsers(Set<User> users) {
 		this.users = users;
 	}
+
+	public Integer getCost() {
+		return cost;
+	}
+
+	public void setCost(Integer cost) {
+		this.cost = cost;
+	}
 }

src/main/java/com/example/demo/service/Impl/RecipeServiceImpl.java

@@ -76,7 +76,7 @@ public class RecipeServiceImpl implements RecipeService {
 
 		RecipeDto dto = new RecipeDto(recipe.getTitle(), recipe.getDescription(), recipe.getPrepTimeMinutes(),
 				recipe.getCookTimeMinutes(), recipe.getServings(), userDto, recipe.getStatus(), ingredientDtos,
-				stepDtos, imageDtos, tagDtos);
+				stepDtos, imageDtos, tagDtos, recipe.getCost());
 
 		dto.setId(recipe.getId());
 
@@ -131,7 +131,7 @@ public class RecipeServiceImpl implements RecipeService {
 
 
 		Recipe recipe = new Recipe(dto.getTitle(), dto.getDescription(), dto.getPrepTimeMinutes(),
-				dto.getCookTimeMinutes(), dto.getServings(), currentUser, dto.getStatus());
+				dto.getCookTimeMinutes(), dto.getServings(), currentUser, dto.getStatus(), dto.getCost());
 
 		if (dto.getIngredients() != null) {
 			for (RecipeIngredientDto riDto : dto.getIngredients()) {
@@ -218,6 +218,7 @@ public class RecipeServiceImpl implements RecipeService {
 		existingRecipe.setCookTimeMinutes(recipeDto.getCookTimeMinutes());
 		existingRecipe.setServings(recipeDto.getServings());
 		existingRecipe.setStatus(recipeDto.getStatus());
+		existingRecipe.setCost(recipeDto.getCost());
 
 		List<RecipeIngredientDto> updatedIngredients = recipeDto.getIngredients();
 		List<RecipeIngredient> ingredientsToRemove = new ArrayList<>();
@@ -371,7 +372,7 @@ public class RecipeServiceImpl implements RecipeService {
 
 	@Override
 	@Transactional
-	public List<RecipeDto> getRecipes(String name, List<String> tags) {
+	public List<RecipeDto> getRecipes(String name, List<String> tags, List<Integer> prices, List<Integer> cookTime, List<Integer> prepTime) {
 
 		List<Recipe> recipes;
 		
@@ -388,6 +389,45 @@ public class RecipeServiceImpl implements RecipeService {
 					.filter(recipe -> recipe.getTags().stream().anyMatch(tag -> tags.contains(tag.getName())))
 					.collect(Collectors.toList());
 		}
+		
+		if (prices != null && !prices.isEmpty() && !recipes.isEmpty()) {
+		    recipes = recipes.stream()
+		            .filter(recipe -> prices.contains(recipe.getCost()))
+		            .collect(Collectors.toList());
+		}
+		
+		if (cookTime != null && !cookTime.isEmpty() && !recipes.isEmpty()) {
+		    recipes = recipes.stream()
+		    		.filter(recipe -> {
+		    		    int minutes = recipe.getCookTimeMinutes();
+		    		    for (Integer ct : cookTime) {
+		    		        if (ct == 15  && minutes <= 15)          return true;
+		    		        if (ct == 30  && minutes > 15 && minutes <= 30)  return true;
+		    		        if (ct == 60  && minutes > 30 && minutes <= 60)  return true;
+		    		        if (ct == 120 && minutes > 60 && minutes <= 120) return true;
+		    		        if (ct == 121 && minutes > 120)          return true;
+		    		    }
+		    		    return false;
+		    		})
+		            .collect(Collectors.toList());
+		}
+		
+		if (prepTime != null && !prepTime.isEmpty() && !recipes.isEmpty()) {
+		    recipes = recipes.stream()
+		    		.filter(recipe -> {
+		    		    int minutes = recipe.getPrepTimeMinutes();
+		    		    for (Integer ct : prepTime) {
+		    		        if (ct == 15  && minutes <= 15)          return true;
+		    		        if (ct == 30  && minutes > 15 && minutes <= 30)  return true;
+		    		        if (ct == 60  && minutes > 30 && minutes <= 60)  return true;
+		    		        if (ct == 240 && minutes > 60 && minutes <= 240) return true;
+		    		        if (ct == 241 && minutes > 240)          return true;
+		    		    }
+		    		    return false;
+		    		})
+		            .collect(Collectors.toList());
+		}
+
 
 		List<RecipeDto> recipeList = new ArrayList<>();
 

src/main/java/com/example/demo/service/RecipeService.java

@@ -17,7 +17,7 @@ public interface RecipeService {
 
 	RecipeDto getRecipeById(Integer recipeId);
 	
-	List<RecipeDto> getRecipes(String name, List<String> tags);
+	List<RecipeDto> getRecipes(String name, List<String> tags, List<Integer> prices, List<Integer> cookTime, List<Integer> prepTime);
 
 	RecipeDto updateRecipe(RecipeDto recipedto, Integer Id, String currentUsername);
 

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

@@ -202,20 +202,11 @@ body, html {
 
 
 
-
-/* safari and old browsers*/
-::-webkit-scrollbar-track {
-  background: var(--pale-yellow);
-}
-::-webkit-scrollbar-thumb {
-  background: var(--dusty-red);
-}
-
 /* =========================
    Search Bar
 ========================= */
 .search-bar, input[type="search"] {
-  width: 90%;
+/*   width: 90%; */
   margin: 10px;
   flex-grow: 1;
   display: flex;
@@ -269,10 +260,76 @@ input[type="search"]::-webkit-search-cancel-button {
 }
 
 
+#tag-input-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 5px;
+  background: var(--dusty-red);
+  border-radius: 10px;
+  padding: 6px 10px;
+  min-height: 50px;
+  flex: 1;
+  cursor: text;
+}
+
+#tag-input-wrapper input[type="text"] {
+  flex: 1;
+  min-width: 140px;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: var(--dark-yellow);
+  font-size: 20px;
+  font-family: 'Mali', cursive;
+  font-weight: 600;
+  height: auto;
+  padding: 0;
+  margin: 0;
+  width: auto;
+}
+
+#chips-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 15px;
+}
+
+.tag-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  background: var(--dark);
+  min-height: 32px;
+  color: var(--dark-yellow);
+  border-radius: 20px;
+  padding: 2px 8px 3px 12px;
+  font-size: 0.75em;
+  font-weight: 700;
+  white-space: nowrap;
+}
+
+.tag-chip button {
+  background: none;
+  border: none;
+  color: var(--dark-yellow);
+  cursor: pointer;
+  padding: 0;
+  font-size: 1.4em;
+  line-height: 1;
+  opacity: 0.8;
+  font-family: 'Mali', cursive;
+  font-weight: 800;
+}
+
+.tag-chip button:hover { opacity: 1; }
+
+
 /* =========================
    Recipe Cards Layout
 ========================= */
 .recipe-card {
+	padding-top: 20px;
   margin-top: 35px;
   width: 99.5%;
   display: flex;
@@ -282,8 +339,12 @@ input[type="search"]::-webkit-search-cancel-button {
   flex-direction: row;
   height: fit-content;
   padding-right: 10px;
+  overflow-y: auto;
+  flex: 1;
+  scrollbar-color: var(--dusty-red) var(--pale-yellow);
 }
 
+
 a {
   text-decoration: none; 
   color: var(--dark);

src/main/resources/templates/create-recipe.html

@@ -249,6 +249,7 @@ function buildRecipeJSON(user) {
     const cookTimeMinutes = Number(document.getElementById('cooking').value);
     const servings = Number(document.getElementById('servings').value);
     const status = "DRAFT";
+    const cost = Number(document.getElementById('cost').value);
 
     // Ingredients
     const recipeIngredients = [...document.querySelectorAll('#ingredients-container .dynamic-row')]
@@ -282,6 +283,7 @@ function buildRecipeJSON(user) {
         cookTimeMinutes,
         servings,
         status,
+        cost,
         user,
         recipeIngredients,
         steps,

src/main/resources/templates/explore.html

@@ -40,14 +40,17 @@
     <!-- Main Content -->
     <main class="main-content">
     	<div class="search-bar">
-    		<form action="/explore" method="get">
+    		<form action="/explore" method="get" id="search-form">
   				<label for="site-search">Search:</label>
   				<div class="search-btn">
-  				<input type="search" id="site-search" name="q" th:value="${q}" placeholder="Search for recipes...">
-  				<button type="submit"><i class="fa fa-search"></i></button>
+  				<div id="tag-input-wrapper">
+<!--     			<div id="chips-container"></div> -->
+    				<input type="text" id="site-search" name="q" th:value="${q}" placeholder="Search for recipes...">
   				</div>
+ 		 		<button type="submit"><i class="fa fa-search"></i></button>
+			</div>
 			</form>
-    	</div>
+    	</div>	
         <div class="recipe-card">
 
             <a th:href="@{/recipes/{id}(id=${recipe.id})}" class="card" th:each="recipe : ${recipes}">
@@ -69,6 +72,46 @@
         <div class="sidebar-right">
             <h1> FILTER </h1>
             <form id="filter-form">
+            <h3>Prep Time</h3>
+
+            <label>
+                <input type="checkbox" name="prepTime" value="15"><15 min
+            </label><br>
+            <label>
+                <input type="checkbox" name="prepTime" value="30">15~30 min
+            </label><br>
+
+            <label>
+                <input type="checkbox" name="prepTime" value="60">30~60 min
+            </label><br>
+
+            <label>
+                <input type="checkbox" name="prepTime" value="240">1~4 hours
+            </label><br>
+
+            <label>
+                <input type="checkbox" name="prepTime" value="241">4+ hours
+            </label>
+            <h3>Cook Time</h3>
+
+            <label>
+                <input type="checkbox" name="cookTime" value="15"><15 min
+            </label><br>
+            <label>
+                <input type="checkbox" name="cookTime" value="30">15~30 min
+            </label><br>
+
+            <label>
+                <input type="checkbox" name="cookTime" value="60">30~60 min
+            </label><br>
+
+            <label>
+                <input type="checkbox" name="cookTime" value="120">1~2 hours
+            </label><br>
+
+            <label>
+                <input type="checkbox" name="cookTime" value="121">2+ hours
+            </label>
             <h3>Price</h3>
 
             <label>
@@ -91,6 +134,102 @@
     </div>
 </div>
 <script>
+(function () {
+	  const input = document.getElementById('site-search');
+	  const tags = [];
+
+	  // Restore price checkboxes from URL
+	  const params = new URLSearchParams(window.location.search);
+	  params.getAll('prices').forEach(p => {
+	    const cb = document.querySelector(`input[name="price"][value="${p}"]`);
+	    if (cb) cb.checked = true;
+	  });
+	  
+	  // Restore cookTime checkboxes from URL
+	  params.getAll('cookTime').forEach(p => {
+		    const cb = document.querySelector(`input[name="cookTime"][value="${p}"]`);
+		    if (cb) cb.checked = true;
+		  });
+	  
+	// Restore prepTime checkboxes from URL
+	  params.getAll('prepTime').forEach(p => {
+		    const cb = document.querySelector(`input[name="prepTime"][value="${p}"]`);
+		    if (cb) cb.checked = true;
+		  });
+
+	  // Restore tag chips from URL
+	  params.getAll('tags').forEach(addChip);
+
+	  input.addEventListener('keydown', (e) => {
+	    if ((e.key === ' ' || e.key === 'Enter') && input.value.includes('#')) {
+	      const val = input.value + ' ';
+	      const match = val.match(/(^|\s)(#\w+)(\s)/); // NASTY regex ):
+	      if (match) {
+	        e.preventDefault();
+	        addChip(match[2].substring(1));
+	        input.value = val.replace(match[0], '');
+	        input.value += ' ';
+	        
+	      }
+	    }
+	  });
+
+	  document.querySelectorAll('input[name="price"]').forEach(cb => {
+	    cb.addEventListener('change', submitSearch);
+	  });
+	  
+	  document.querySelectorAll('input[name="cookTime"]').forEach(cb => {
+		    cb.addEventListener('change', submitSearch);
+		  });
+	  
+	  document.querySelectorAll('input[name="prepTime"]').forEach(cb => {
+		    cb.addEventListener('change', submitSearch);
+		  });
+
+	  document.getElementById('search-form').addEventListener('submit', (e) => {
+	    e.preventDefault();
+	    
+	    submitSearch();
+	  });
+	  
+	  function addChip(tag) {
+		    if (tags.includes(tag)) return;
+		    tags.push(tag);
+		    const chip = document.createElement('span');
+		    chip.className = 'tag-chip';
+		    chip.innerHTML = `#${tag} <button type="button" aria-label="Remove ${tag}">×</button>`;
+		    chip.querySelector('button').addEventListener('click', () => {
+		      chip.remove();
+		      tags.splice(tags.indexOf(tag), 1);
+		    });
+		    const lastChip = input.parentElement.querySelector('.tag-chip:last-of-type');
+		    if (lastChip) {
+		      lastChip.insertAdjacentElement('afterend', chip);
+		    } else {
+		      input.insertAdjacentElement('afterend', chip);
+		    }
+		  }
+
+	  function submitSearch() {
+	    // Only use chips for tags, not strings!
+	    const cleanedQuery = input.value.replace(/#\w+/g, '').trim();
+	    
+
+	    const out = new URLSearchParams();
+	    if (cleanedQuery) out.set('q', cleanedQuery);
+	    tags.forEach(t => out.append('tags', t));
+	    document.querySelectorAll('input[name="price"]:checked')
+	      .forEach(cb => out.append('prices', cb.value));
+	    
+	    document.querySelectorAll('input[name="cookTime"]:checked')
+	      .forEach(cb => out.append('cookTime', cb.value));
+	    
+	    document.querySelectorAll('input[name="prepTime"]:checked')
+	      .forEach(cb => out.append('prepTime', cb.value));
+
+	    window.location.href = '/explore?' + out.toString();
+	  }
+	})();
 </script>
 </body>
 </html>