DEV Community

Sudhakar V
Sudhakar V

Posted on

Spring Boot Color Picker Web App

Project Overview:

This is a simple Spring Boot web application that allows users to pick a color from the URL and view a background rendered in that color dynamically using Thymeleaf template rendering.

Technologies Used:

  • Spring Boot (Java)
  • Thymeleaf
  • HTML/CSS
  • Maven

Code

ColourPickerApplication.java`

java
package com.example.demo;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class ColourPickerApplication {
public static void main(String[] args) {
SpringApplication.run(ColourPickerApplication.class, args);
}
}

ColourController.java`
java
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 ColourController {

@GetMapping("/")
public String getColorPicker(@RequestParam(defaultValue = "#123456") String color, Model model) {
    model.addAttribute("selectedcolor", color);
    return "color";
}

}


  color.html` (in `src/main/resources/templates/`)


html
<!DOCTYPE html>



Color Picker
<br> body {<br> margin: 0;<br> height: 100vh;<br> display: flex;<br> justify-content: center;<br> align-items: center;<br> flex-direction: column;<br> font-family: Arial, sans-serif;<br> }<br> h2 {<br> color: white;<br> text-shadow: 1px 1px 2px black;<br> }<br>


Selected Color: 






Before:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ebw9tl2n03fj2ynm072e.png)

After :

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ohqnb720h9o6zmxtk3wx.png)

Source :
GitLab Repository: https://gitlab.com/payligam/springboot/-/tree/main/ColourPicker?ref_type=heads

  Credits:

  Developer: Sudhakar
  Mentorship: Mr. Muthuramalingam (Mentor)

Top comments (0)