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

38
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">
Please let us know how we did with your support request. All feedback is appreciated <h1 class="Card-title">How did we do?</h1>
to help us improve our offering!
1 2 3 4 5 <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>
Submit <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 --> <!-- 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>
We appreciate you taking the time to give a rating. If you ever need more support, <h1 class="Card-title">Thank you!</h1>
don’t hesitate to get in touch!
<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>
<!-- 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')

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

@ -1,7 +1,12 @@
import { defineConfig } from 'vite' import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue' 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',
},
}
}) })