# Css-Klassen mit Thymeleaf



## iman (4. Jun 2020)

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.


```
<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.L. (4. Jun 2020)

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


----------



## iman (4. Jun 2020)

M.L. hat gesagt.:


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



Muss nicht, aber ich glaube es ist die beste lösung.


----------



## mrBrown (4. Jun 2020)

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...


----------



## iman (8. Jun 2020)

hier kannst du mein Controller sehen .


```
@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;
    }
}
```



```
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.


----------



## iman (10. Jun 2020)

mrBrown hat gesagt.:


> 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...




Ich habe die Code hier gelassen, es ist sehr nett , wenn du die anguckst.


----------



## mrBrown (10. Jun 2020)

classappend mit Bedingung wirst du brauchen: https://stackoverflow.com/a/26977255


----------



## iman (19. Jun 2020)

mrBrown hat gesagt.:


> classappend mit Bedingung wirst du brauchen: https://stackoverflow.com/a/26977255



Ich habe Bedingungen durch thymeleaf geschrieben und es funktioniert .


```
<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>
```


----------

