1) File --> New --> Spring Starter Project
2) Name --> Calculator
3) Select Maven as Type
4) Click Next
5) Add Dependencies: DevTools, Web, Thymeleaf
6) Click Next, Finish
7) Go to src/main/java --> Create a package called com.example.demo.controller
8) Now, right click the newly created package.

package com.example.demo.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;

@Controller
public class color_controller {
    @GetMapping("/")
    public String change_color(@RequestParam(defaultValue = "blue") String colors, Model model) {
        model.addAttribute("selectedColor", colors);
        return "color";
    }

}
Color Picker 



    
        
        
    








    Enter fullscreen mode
    


    Exit fullscreen mode
    




 Output:1) Output: File --> New --> Spring Starter Project
2) Name --> Calculator
3) Select Maven as Type
4) Click Next
5) Add Dependencies: DevTools, Web, Thymeleaf
6) Click Next, Finish
7) Go to src/main/java --> Create a package called com.example.demo.controller
8) Now, right click the newly created package. Model-pojo class

package com.example.demo.model;
public class Product {

    public Product(String name, String url, String description, int price) {
        super();
        this.name = name;
        this.url = url;
        this.description = description;
        this.price = price;
    }

    private String name; 
    private String url; 
    private String description;
    private int price;

    @Override
    public String toString() {
        return "Product [name=" + name + ", url=" + url + ", description=" + description + ", price=" + price + "]";
    }


    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public String getUrl() {
        return url;
    }
    public void setUrl(String url) {
        this.url = url;
    }
    public String getDescription() {
        return description;
    }
    public void setDescription(String description) {
        this.description = description;
    }
    public int getPrice() {
        return price;
    }
    public void setPrice(int price) {
        this.price = price;
    }

}



    Enter fullscreen mode
    


    Exit fullscreen mode
    




controller

package com.example.demo.controller;

import java.util.ArrayList;
import java.util.List;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import com.example.demo.model.Product;

@Controller
public class Product_Controller {

    @GetMapping("/products")
    public String display_Products(Model model)
    {
        Product p1 = new Product("Dell", "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse4.mm.bing.net%2Fth%3Fid%3DOIP.juKuZePKbn6Ou1gCYbTzywHaFM%26pid%3DApi&f=1&ipt=38fa87998ad11fc26c2fc7c1f04270371fbc446b9a92a6b17779c91667dcf302&ipo=images", "Good Laptop", 22000);
        Product p2 = new Product("Lenovo", "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse4.mm.bing.net%2Fth%3Fid%3DOIP.juKuZePKbn6Ou1gCYbTzywHaFM%26pid%3DApi&f=1&ipt=38fa87998ad11fc26c2fc7c1f04270371fbc446b9a92a6b17779c91667dcf302&ipo=images", "Good Laptop", 22000);
        Product p3 = new Product("HP", "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse4.mm.bing.net%2Fth%3Fid%3DOIP.juKuZePKbn6Ou1gCYbTzywHaFM%26pid%3DApi&f=1&ipt=38fa87998ad11fc26c2fc7c1f04270371fbc446b9a92a6b17779c91667dcf302&ipo=images", "Good Laptop", 22000);
        Product p4 = new Product("Asus", "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse4.mm.bing.net%2Fth%3Fid%3DOIP.juKuZePKbn6Ou1gCYbTzywHaFM%26pid%3DApi&f=1&ipt=38fa87998ad11fc26c2fc7c1f04270371fbc446b9a92a6b17779c91667dcf302&ipo=images", "Good Laptop", 22000);

        List pList =new ArrayList();
        pList.add(p1);
        pList.add(p2);
        pList.add(p3);
        pList.add(p4);
        model.addAttribute("products",pList);
        return "product_page"; 

    }

}




    Enter fullscreen mode
    


    Exit fullscreen mode
    




View



    
         Product Page
        
            div{
                display:inline-block;
            }
        
    
    
        
            
            
            
            
        
    






    Enter fullscreen mode
    


    Exit fullscreen mode
    




 Output: