Add "Style" and "Score" pages with Vue components

khannedy · khannedy · commit 14b02562c883 · 2024-12-24T23:55:01.000+07:00
Introduced two new pages, "Style" and "Score," and their corresponding Vue components for managing dynamic styling and score display logic. Updated the Vite configuration to include these new routes, enabling their integration into the application.
diff --git a/score.html b/score.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Vue</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/score.js"></script>
+  </body>
+</html>
diff --git a/src/components/Score.vue b/src/components/Score.vue
@@ -0,0 +1,26 @@
+<script setup>
+import {ref} from "vue";
+
+const score = ref(40);
+</script>
+
+<template>
+  <h1>Score App</h1>
+
+  <div v-show="score > 50">
+    Score is {{score}}
+  </div>
+  <div v-if="score > 90">
+    Yay cool score {{score}}
+  </div>
+  <div v-else-if="score > 70">
+    Good score {{score}}
+  </div>
+  <div v-else>
+    Ups, bad score {{score}}
+  </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/components/Style.vue b/src/components/Style.vue
@@ -0,0 +1,51 @@
+<script setup>
+
+
+import {ref} from "vue";
+
+const array = ["red", "bold"];
+
+const red = ref(false);
+const bold = ref(false);
+
+function toggleRed() {
+  red.value = !red.value;
+}
+
+function toggleBold() {
+  bold.value = !bold.value;
+}
+
+const style1 = {
+  color: "red"
+}
+
+const style2 = {
+  textTransform: "uppercase",
+  fontWeight: "bold"
+}
+
+</script>
+
+<template>
+  <h1 :class="{red:red, bold: bold}">Style</h1>
+  <h1 :class="array">Style</h1>
+
+  <h1 :style="style1">Style</h1>
+  <h1 :style="style2">Style</h1>
+  <h1 :style="[style1, style2]">Style</h1>
+
+  <button v-on:click="toggleRed">Red</button>
+  <button v-on:click="toggleBold">Bold</button>
+</template>
+
+<style scoped>
+.red {
+  color: red;
+}
+
+.bold {
+  text-transform: uppercase;
+  font-weight: bold;
+}
+</style>
diff --git a/src/score.js b/src/score.js
@@ -0,0 +1,4 @@
+import {createApp} from "vue";
+import Score from "./components/Score.vue";
+
+createApp(Score).mount("#app");
diff --git a/src/style.js b/src/style.js
@@ -0,0 +1,4 @@
+import {createApp} from "vue";
+import Style from "./components/Style.vue";
+
+createApp(Style).mount("#app");
diff --git a/style.html b/style.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Vue</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/style.js"></script>
+  </body>
+</html>
diff --git a/vite.config.js b/vite.config.js
@@ -11,6 +11,8 @@ export default defineConfig({
                 hello: "hello.html",
                 counter: "counter.html",
                 say_hello: "say-hello.html",
+                style: "style.html",
+                score: "score.html",
             }
         }
     }

Original file line number	Diff line number	Diff line change
`@@ -11,6 +11,8 @@ export default defineConfig({`
`11`	`11`	`hello: "hello.html",`
`12`	`12`	`counter: "counter.html",`
`13`	`13`	`say_hello: "say-hello.html",`
	`14`	`+ style: "style.html",`
	`15`	`+ score: "score.html",`
`14`	`16`	`}`
`15`	`17`	`}`
`16`	`18`	`}`