2023-06-05 15:38:33 -07:00
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html lang="en">
|
2023-06-05 15:59:50 -07:00
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="UTF-8"/>
|
2023-06-05 16:23:25 -07:00
|
|
|
|
<link rel="icon" type="image/png" sizes="32x32" href="./src/assets/favicon-32x32.png">
|
2023-06-05 15:59:50 -07:00
|
|
|
|
<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 -->
|
|
|
|
|
|
|
2023-06-05 16:23:25 -07:00
|
|
|
|
<div id="rating" class="Rating Card" v-if="!submitted">
|
|
|
|
|
|
<img src="./src/assets/icon-star.svg" alt="Star icon" class="Rating-icon">
|
2023-06-05 15:59:50 -07:00
|
|
|
|
|
2023-06-05 16:23:25 -07:00
|
|
|
|
<h1 class="Card-title">How did we do?</h1>
|
2023-06-05 15:59:50 -07:00
|
|
|
|
|
2023-06-05 16:23:25 -07:00
|
|
|
|
<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>
|
2023-06-05 15:59:50 -07:00
|
|
|
|
|
2023-06-05 16:23:25 -07:00
|
|
|
|
<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>
|
2023-06-05 15:59:50 -07:00
|
|
|
|
|
|
|
|
|
|
<!-- Rating state end -->
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Thank you state start -->
|
|
|
|
|
|
|
2023-06-05 16:23:25 -07:00
|
|
|
|
<div id="thankYou" class="ThankYou Card" v-else>
|
|
|
|
|
|
<img src="./src/assets/illustration-thank-you.svg" alt="illustration" class="ThankYou-illustration">
|
2023-06-05 15:59:50 -07:00
|
|
|
|
|
2023-06-05 16:23:25 -07:00
|
|
|
|
<div class="ThankYou-userInput">You selected {{ rating }} out of 5</div>
|
2023-06-05 15:59:50 -07:00
|
|
|
|
|
2023-06-05 16:23:25 -07:00
|
|
|
|
<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,
|
|
|
|
|
|
don’t hesitate to get in touch!
|
|
|
|
|
|
</p>
|
|
|
|
|
|
</div>
|
2023-06-05 15:59:50 -07:00
|
|
|
|
|
|
|
|
|
|
<!-- 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>
|
2023-06-05 15:38:33 -07:00
|
|
|
|
</html>
|
