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

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.

Author: khannedy

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>

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>

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>

src/score.js

@@ -0,0 +1,4 @@
+import {createApp} from "vue";
+import Score from "./components/Score.vue";
+
+createApp(Score).mount("#app");

src/style.js

@@ -0,0 +1,4 @@
+import {createApp} from "vue";
+import Style from "./components/Style.vue";
+
+createApp(Style).mount("#app");

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>

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",
             }
         }
     }