Tue Dec 19 00:11:00 CST 2023 inscode

.inscode

 run = "npm i && npm run dev"
+language = "node"
 
 [deployment]
 build = "npm i && npm run build"
@@ -8,3 +9,6 @@ run = "npm run preview"
 PATH = "/root/${PROJECT_DIR}/.config/npm/node_global/bin:/root/${PROJECT_DIR}/node_modules/.bin:${PATH}"
 XDG_CONFIG_HOME = "/root/.config"
 npm_config_prefix = "/root/${PROJECT_DIR}/.config/npm/node_global"
+
+[debugger]
+program = "main.js"

src/App.vue

@@ -2,6 +2,75 @@
 import HelloWorld from './components/HelloWorld.vue'
 import TheWelcome from './components/TheWelcome.vue'
 </script>
+<template>
+  <div class="app">
+    <h1>Vote for your favorite candidate!</h1>
+    <<div v-for="(candidate, index) in list" :key="index">
+      <img :src="candidate.avatar" :alt="candidate.name">
+      <h2>{{ candidate.name }}</h2>
+      <button @click="vote(index)">Vote</button>
+      <p>{{ candidate.votes }} votes</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      list: [
+        {avatar: require('../assets/jane.png'), name: "Jane", votes: 0},
+        {avatar: require('../assets/kate.png'), name: "Kate", votes: 0},
+        {avatar: require('../assets/mike.png'), name: "Mike", votes: 0},
+        {avatar: require('../assets/tom.png'), name: "Tom", votes: 0}
+      ]
+    }
+  },
+  methods: {
+    vote(index) {
+      this.list[index].votes++;
+    }
+  }
+}
+</script>
+
+<style>
+.app {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+h1 {
+  width: 100%;
+  text-align: center;
+}
+
+div {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 0 20px 20px 20px;
+}
+
+img {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  margin-bottom: 10px;
+}
+
+h2 {
+  margin-bottom: 5px;
+}
+
+button {
+  margin-bottom: 5px;
+}
+
+p {
+  margin: 0;
+}
+</style>
 
 <template>
   <header>