Css-Klassen mit Thymeleaf

Diskutiere Css-Klassen mit Thymeleaf im Web Tier Bereich.
I

iman

Hallo Leute , ich entwickelt einen Lotto Spiel mit springBoot ,Java ,HTML, Thymeleaf,Bootstrap und java-script .

ich benutze die Badget . Ich möchte, wenn die Userzahl korrekt ist, die Badget farbe von richtige Userzahl sich ändern . Wie kann ich es entwickelt ?

Ich lasse mein HTML Seite hier. Es wäre toll, wenn es bei Java-script entwickeln werden.

HTML:
<body>
    <div class="jumbotron text-center" style="marign-bottom: 0">
        <h1>LottoMat</h1>
    </div>

    <div>
        <h2 class="text-center font-italic text-primary ">Drawn numbers
            below:</h2> <br>
        <p class="text-center">
            <span class="badge badge-pill badge-warning" th:text="${lotto.first}"></span>
            <span class="badge badge-pill badge-warning"
                th:text="${lotto.second}"></span> <span
                class="badge badge-pill badge-warning" th:text="${lotto.third}"></span>
            <span class="badge badge-pill badge-warning"
                th:text="${lotto.fourth}"></span> <span
                class="badge badge-pill badge-warning" th:text="${lotto.fiveth}"></span>
            <span class="badge badge-pill badge-warning" th:text="${lotto.sixth}"></span>
        </p>
        <h2 class="text-center text-success font-weight-bolder ">
            Your result is <span class="badge badge-pill badge-danger"
                th:text="${lotto4}"></span>
        </h2>
    </div>
    <br>
    <div align="center">
       
           
           
            <span class="badge badge-pill badge-primary"                th:text="${lotto3.first}"></span>
            <span class="badge badge-pill badge-primary"                th:text="${lotto3.second}"></span>
            <span class="badge badge-pill badge-primary"                th:text="${lotto3.third}"></span>
            <span class="badge badge-pill badge-primary"                th:text="${lotto3.fourth}"></span>
            <span class="badge badge-pill badge-primary"                th:text="${lotto3.fiveth}"></span>
            <span class="badge badge-pill badge-primary"                th:text="${lotto3.sixth}"></span>
       
       
    </div>
    <br><br><br>
    <div align="center">
        <div class="btn-group btn-md">
            <p>

                <span><a th:href="@{/lotto}" class="btn btn-info"> Play
                        Again </a> </span> <a th:href="@{/}"> <span
                    class="btn btn-danger glyphicon-home"> Go to homepage </span></a>
            </p>
        </div>
    </div>

</body>
 
M

M.L.

Muss es mit Javascript sein ? Bootstrap, CSS und Thymeleaf scheinen immerhin "Conditional Expressions" zu kennen.
 
mrBrown

mrBrown

Das direkt mit Thymeleaf zu lösen ist in dem Fall vermutlich sinnvoller.

Was ist in dem Code denn was? lotto, lotto3 & lotto4 sind jetzt nicht grad sinnvolle Variablen...
 
I

iman

hier kannst du mein Controller sehen .

Code:
@Controller
@RequestMapping("lotto")
public class LottoController {


    @PostMapping("")
    public String see (Model model,@ModelAttribute Lotto lottoUser) {


        Lotto lottoComp = new Lotto();
        LottoRandom computer = new LottoRandom();
        
        if((computer.amountUniqueUserChoice(lottoUser).size() != 6) ||
        (computer.amountUniqueUserChoice(lottoUser).contains(null))){
            return "lottoForm";
        }

        //Drawing numbers by computer
        List<Integer> listComp= new ArrayList<>();
        listComp = computer.computerRandom();
        Collections.sort(listComp);
        
        //User list (user choice)
        
        List<Integer> listUser = computer.amountUniqueUserChoice(lottoUser);
      
        //Set values from list to Lotto Object
        computer.setComputerChoice(lottoComp, listComp);
        computer.setComputerChoice(lottoUser, listUser);

        
        //Creating result
        Integer result = computer.correctNumbers(listUser, listComp);

        model.addAttribute("lotto",lottoComp);
        model.addAttribute("lotto2",lottoNumberList());
        model.addAttribute("lotto3",lottoUser);
        model.addAttribute("lotto4",result);

        return "index";
    }

    @GetMapping("")
    public String choice (Model model) {

        model.addAttribute("lotto", new Lotto());

        return "lottoForm";
    }

    @ModelAttribute("lotto2")
    List<Integer> lottoNumberList() {

        List<Integer> list = new ArrayList<>();
        for (Integer i=1; i < 50; i++) {
            list.add(i);
        }
        return list;
    }
}

Code:
public class LottoRandom {

    public List<Integer> computerRandom () {

        Random number = new Random();

        Set<Integer> list = new HashSet<>();
        List<Integer> list1 = new ArrayList<>();

        while (list.size() < 6) {
            Integer number1 = number.nextInt(49)+1;
            list.add(number1);
        }
        list1.addAll(list);
      
        return list1;
    }

    //Set values from List to object
    public void setComputerChoice(Lotto lotto, List<Integer> list) {

            lotto.setFirst(list.get(0));
            lotto.setSecond(list.get(1));
            lotto.setThird(list.get(2));
            lotto.setFourth(list.get(3));
            lotto.setFiveth(list.get(4));
            lotto.setSixth(list.get(5));
            
            
    }

    //Creation list chosen numbers
    public List<Integer> amountUniqueUserChoice(Lotto lotto){

        List<Integer> convertedList = new ArrayList<>();

        Set<Integer> uniqueList= new HashSet<>();
        uniqueList.add(lotto.getFirst());
        uniqueList.add(lotto.getSecond());
        uniqueList.add(lotto.getThird());
        uniqueList.add(lotto.getFourth());
        uniqueList.add(lotto.getFiveth());
        uniqueList.add(lotto.getSixth());
        
        
      
        convertedList.addAll(uniqueList);
        Collections.sort(convertedList);
        
 
        return convertedList;
        
    }
    
    
    //checking how many numbers have been predicted by user
    public Integer correctNumbers (List<Integer> amountUniqueUserChoice, List<Integer> computerRandom) {
        
        
        Integer correctNumbers = 0;
        for (int i=0; i < computerRandom.size(); i++) {
            for (int j=0; j < amountUniqueUserChoice.size(); j++) {
                if(computerRandom.get(i) == amountUniqueUserChoice.get(j)) {
                    
                    correctNumbers+=1;
                }
            }
        }
        return correctNumbers;
    }

}
ja, thymleaf kann auch gute Idee sein.
 
I

iman

classappend mit Bedingung wirst du brauchen: https://stackoverflow.com/a/26977255
Ich habe Bedingungen durch thymeleaf geschrieben und es funktioniert .

HTML:
<span
            th:if="${lotto3.first == lotto.first || lotto3.first == lotto.second || lotto3.first == lotto.third ||  lotto3.first == lotto.fourth || lotto3.first == lotto.fiveth || lotto3.first == lotto.sixth} "
            class="badge badge-pill badge-success" th:text="${lotto3.first}"></span>
        <span
            th:if="${lotto3.first != lotto.first && lotto3.first != lotto.second && lotto3.first != lotto.third &&  lotto3.first != lotto.fourth && lotto3.first != lotto.fiveth && lotto3.first != lotto.sixth} "
            class="badge badge-pill badge-primary" th:text="${lotto3.first}"></span>

        <span
            th:if="${lotto3.second == lotto.first || lotto3.second == lotto.second || lotto3.second == lotto.third ||  lotto3.second == lotto.fourth || lotto3.second == lotto.fiveth || lotto3.second == lotto.sixth} "
            class="badge badge-pill badge-success" th:text="${lotto3.second}"></span>
        <span
            th:if="${lotto3.second != lotto.first && lotto3.second != lotto.second && lotto3.second != lotto.third &&  lotto3.second != lotto.fourth && lotto3.second != lotto.fiveth && lotto3.second != lotto.sixth} "
            class="badge badge-pill badge-primary" th:text="${lotto3.second}"></span>

        <span
            th:if="${lotto3.third == lotto.first || lotto3.third == lotto.second || lotto3.third == lotto.third ||  lotto3.third == lotto.fourth || lotto3.third == lotto.fiveth || lotto3.third == lotto.sixth} "
            class="badge badge-pill badge-success" th:text="${lotto3.third}"></span>
        <span
            th:if="${lotto3.third != lotto.first && lotto3.third != lotto.second && lotto3.third != lotto.third &&  lotto3.third != lotto.fourth && lotto3.third != lotto.fiveth && lotto3.third != lotto.sixth} "
            class="badge badge-pill badge-primary" th:text="${lotto3.third}"></span>

        <span
            th:if="${lotto3.fourth == lotto.first || lotto3.fourth == lotto.second || lotto3.fourth == lotto.third ||  lotto3.fourth == lotto.fourth || lotto3.fourth == lotto.fiveth || lotto3.fourth == lotto.sixth} "
            class="badge badge-pill badge-success" th:text="${lotto3.fourth}"></span>
        <span
            th:if="${lotto3.fourth != lotto.first && lotto3.fourth != lotto.second && lotto3.fourth != lotto.third &&  lotto3.fourth != lotto.fourth && lotto3.fourth != lotto.fiveth && lotto3.fourth != lotto.sixth} "
            class="badge badge-pill badge-primary" th:text="${lotto3.fourth}"></span>

        <span
            th:if="${lotto3.fiveth == lotto.first || lotto3.fiveth == lotto.second || lotto3.fiveth == lotto.third ||  lotto3.fiveth == lotto.fourth || lotto3.fiveth == lotto.fiveth || lotto3.fiveth == lotto.sixth} "
            class="badge badge-pill badge-success" th:text="${lotto3.fiveth}"></span>
        <span
            th:if="${lotto3.fiveth != lotto.first && lotto3.fiveth != lotto.second && lotto3.fiveth != lotto.third &&  lotto3.fiveth != lotto.fourth && lotto3.fiveth != lotto.fiveth && lotto3.fiveth != lotto.sixth} "
            class="badge badge-pill badge-primary" th:text="${lotto3.fiveth}"></span>

        <span
            th:if="${lotto3.sixth == lotto.first || lotto3.sixth == lotto.second || lotto3.sixth == lotto.third ||  lotto3.sixth == lotto.fourth || lotto3.sixth == lotto.fiveth || lotto3.sixth == lotto.sixth} "
            class="badge badge-pill badge-success" th:text="${lotto3.sixth}"></span>
        <span
            th:if="${lotto3.sixth != lotto.first && lotto3.sixth != lotto.second && lotto3.sixth != lotto.third &&  lotto3.sixth != lotto.fourth && lotto3.sixth != lotto.fiveth && lotto3.sixth != lotto.sixth} "
            class="badge badge-pill badge-primary" th:text="${lotto3.sixth}"></span>
 
Thema: 

Css-Klassen mit Thymeleaf

Passende Stellenanzeigen aus deiner Region:
Anzeige

Neue Themen

Anzeige

Anzeige
Oben