<!DOCTYPE html>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Flashcards</title>
<link rel="stylesheet" th:href="@{css/style.css}">
</head>
<body>
<div class="game_container">
<!-- TITLE -->
<h1>Flashcards</h1>
<!-- CARDS CONTAINER -->
<div class="cards_container">
<!-- FIRST CARD -->
<div class="cards">
<div class="card">
<div class="front"><p>France</p></div>
<div class="back"><p>Francoise Meyers</p></div>
</div>
</div>
<!-- ...OTHER CARDS -->
</div>
</div>
<!-- SCRIPT FOR CARD ROTATION -->
<script>
// Select all elements with the class "card"
const cards = document.querySelectorAll('.card');
cards.forEach(card => {
// Add event listener for click
card.addEventListener('click', () => {
// Toggle styles on click
if (card.style.transform === 'rotateY(180deg)') {
// If already rotated, revert back to original state
card.style.transform = 'rotateY(0deg)';
} else {
// Otherwise, rotate the card
card.style.transform = 'rotateY(180deg)';
}
});
});
</script>
</body>
</html>
As you see I have some href provided for css in the html file above, which works for the default endpoint - localhost:8080. But if I try to indicate custom endpoint ("api/v1/flashcards"), css is no longer applied, although list of flashcards are still there as plain texts. That's why I commented out @RequestMapping.
@RequiredArgsConstructor
@Controller
//@RequestMapping(path = "api/v1/flashcards")
public class FlashcardController {
private final FlashcardService flashcardService;
public String listFlashcards(Model model) {
List<FlashcardDto> flashcards = flashcardService.getFlashcards();
model.addAttribute("flashcards", flashcards);
return "flashcards-list";
}
}
I tried putting @GetMapping(path = "api/v1/flashcards", produces = "text/html") on top of the
listFlashcards() function but it didn't help. Any ideas?
I used absolute path for css file by adding
/at the beginning of href.Before:
<link rel="stylesheet" href="css/style.css">After:
<link rel="stylesheet" href="/css/style.css">I don't quite understand why it worked though.