frontend-mentor/interactive-rating-component/index.html
2023-06-05 16:23:25 -07:00

61 lines
2.1 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<link rel="icon" type="image/png" sizes="32x32" href="./src/assets/favicon-32x32.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Frontend Mentor | Interactive rating component</title>
</head>
<body>
<div id="app">
<!-- Rating state start -->
<div id="rating" class="Rating Card" v-if="!submitted">
<img src="./src/assets/icon-star.svg" alt="Star icon" class="Rating-icon">
<h1 class="Card-title">How did we do?</h1>
<p class="Card-text">
Please let us know how we did with your support request. All feedback is appreciated
to help us improve our offering!
</p>
<div class="Rating-numbers">
<button class="Rating-number" @click="rating = 1">1</button>
<button class="Rating-number" @click="rating = 2">2</button>
<button class="Rating-number" @click="rating = 3">3</button>
<button class="Rating-number" @click="rating = 4">4</button>
<button class="Rating-number" @click="rating = 5">5</button>
</div>
<button class="Card-button" @click="submitted = true">Submit</button>
</div>
<!-- Rating state end -->
<!-- Thank you state start -->
<div id="thankYou" class="ThankYou Card" v-else>
<img src="./src/assets/illustration-thank-you.svg" alt="illustration" class="ThankYou-illustration">
<div class="ThankYou-userInput">You selected {{ rating }} out of 5</div>
<h1 class="Card-title">Thank you!</h1>
<p class="Card-text">
We appreciate you taking the time to give a rating. If you ever need more support,
dont hesitate to get in touch!
</p>
</div>
<!-- Thank you state end -->
<div class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by <a href="#">Your Name Here</a>.
</div>
</div>
<script type="module" src="./src/main.ts"></script>
</body>
</html>