punkfairie/frontend-mentor
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

🎉 chore: HTML & interactivity.

Browse source
This commit is contained in:
Marley 2023-06-05 16:23:25 -07:00
parent 76a3739b78
commit 959eb32f2b
6 changed files with 41 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
interactive-rating-component/index.html
View file

@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"/> <meta charset="UTF-8"/>
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png"> <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"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Frontend Mentor | Interactive rating component</title> <title>Frontend Mentor | Interactive rating component</title>
</head> </head>
@ -10,25 +10,43 @@
<div id="app"> <div id="app">
<!-- Rating state start --> <!-- Rating state start -->
How did we do? <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 Please let us know how we did with your support request. All feedback is appreciated
to help us improve our offering! to help us improve our offering!
</p>
1 2 3 4 5 <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>
Submit <button class="Card-button" @click="submitted = true">Submit</button>
</div>
<!-- Rating state end --> <!-- Rating state end -->
<!-- Thank you state start --> <!-- Thank you state start -->
You selected <!-- Add rating here --> out of 5 <div id="thankYou" class="ThankYou Card" v-else>
<img src="./src/assets/illustration-thank-you.svg" alt="illustration" class="ThankYou-illustration">
Thank you! <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, We appreciate you taking the time to give a rating. If you ever need more support,
don’t hesitate to get in touch! don’t hesitate to get in touch!
</p>
</div>
<!-- Thank you state end --> <!-- Thank you state end -->

0
interactive-rating-component/images/favicon-32x32.png → interactive-rating-component/src/assets/favicon-32x32.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1 KiB

After

Width:  |  Height:  |  Size: 1 KiB

0
interactive-rating-component/images/icon-star.svg → interactive-rating-component/src/assets/icon-star.svg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 452 B

After

Width:  |  Height:  |  Size: 452 B

0
interactive-rating-component/images/illustration-thank-you.svg → interactive-rating-component/src/assets/illustration-thank-you.svg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8 KiB

After

Width:  |  Height:  |  Size: 8 KiB

7
interactive-rating-component/src/main.ts
View file

@ -2,5 +2,10 @@ import { createApp } from 'vue'
import './style.css' import './style.css'
createApp({ createApp({
data() {
return {
rating: 0,
submitted: false,
}
}
}).mount('#app') }).mount('#app')

5
interactive-rating-component/vite.config.ts
View file

@ -4,4 +4,9 @@ import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/ // https://vitejs.dev/config/
export default defineConfig({ export default defineConfig({
plugins: [vue()], plugins: [vue()],
resolve: {
alias: {
'vue': 'vue/dist/vue.esm-bundler',
},
}
}) })