initial commit to exercises

.vitepress/components/AnswerInput.vue

@@ -0,0 +1,94 @@
+<script setup>
+import { reactive } from 'vue'
+import confetti from 'canvas-confetti'
+
+const emit = defineEmits(['correct'])
+
+const props = defineProps(['answer'])
+
+const state = reactive({
+  guess: null
+})
+
+function handleSubmit() {
+  if (Number(state.guess) === Number(props.answer)) {
+    emit('correct', true)
+    burstConfetti()
+  } else {
+    emit('correct', false)
+    state.guess = null
+  }
+}
+
+function burstConfetti() {
+  confetti({
+    particleCount: 100,
+    spread: 70,
+    origin: { y: 0.6 },
+    colors: ['#26ccff', '#a25afd', '#ff5e7e', '#88ff5a', '#fcff42']
+  })
+}
+</script>
+
+<template>
+  <form action="" @submit.prevent="handleSubmit">
+    <input
+      v-model="state.guess"
+      id="guess"
+      name="guess"
+      type="text"
+      placeholder="Check your answer..."
+    />
+    <button class="composite">Submit</button>
+  </form>
+</template>
+
+<style scoped>
+form {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+}
+
+input {
+  height: 3rem;
+  background-color: var(--vp-custom-block-details-bg);
+  padding: 0 20px;
+  border-bottom-left-radius: 8px;
+  border-top-left-radius: 8px;
+  font-size: 14px;
+  border: 1px solid var(--vp-button-alt-bg);
+}
+
+input:focus {
+  border: 1px solid var(--vp-button-alt-active-bg);
+}
+
+button {
+  height: 3rem;
+  border-color: var(--vp-button-alt-border);
+  color: var(--vp-button-alt-text);
+  background-color: var(--vp-button-alt-bg);
+  border-top-right-radius: 8px;
+  border-bottom-right-radius: 8px;
+  padding: 0 20px;
+  font-size: 14px;
+  display: inline-block;
+  border: 1px solid transparent;
+  border-left: none;
+  text-align: center;
+  font-weight: 600;
+  white-space: nowrap;
+  transition: color 0.25s, border-color 0.25s, background-color 0.25s;
+}
+
+button:hover {
+  background-color: var(--vp-button-alt-hover-bg);
+}
+
+button:active {
+  background-color: var(--vp-button-alt-active-bg);
+}
+</style>

.vitepress/config.mjs

@@ -90,6 +90,10 @@ export default defineConfig({
       {
         text: 'Glossary',
         link: '/glossary'
+      },
+      {
+        text: 'Exercises',
+        link: '/exercises/'
       }
     ],
 
@@ -98,7 +102,8 @@ export default defineConfig({
       '/express/': sidebars.express,
       '/html-css/': sidebars.htmlCss,
       '/js/': sidebars.javascript,
-      '/sql/': sidebars.sql
+      '/sql/': sidebars.sql,
+      '/exercises/': sidebars.exercises
     },
 
     socialLinks: [

.vitepress/sidebars/exercises.js

@@ -0,0 +1,8 @@
+const exerciseNum = i => String(i + 1).padStart(3, '0')
+
+export const exercises = new Array(3)
+  .fill(null)
+  .map((_, i) => ({
+    text: `Exercise ${i + 1}`,
+    link: `/exercises/${exerciseNum(i)}`
+  }))

.vitepress/sidebars/index.js

@@ -3,3 +3,4 @@ export { express } from './express.js'
 export { htmlCss } from './html-css.js'
 export { javascript } from './javascript.js'
 export { sql } from './sql.js'
+export { exercises } from './exercises.js'

.vitepress/theme/index.js

@@ -5,6 +5,7 @@ import './style.css'
 
 import Vimeo from '../components/Vimeo.vue'
 import Exercise from '../components/Exercise.vue'
+import AnswerInput from '../components/AnswerInput.vue'
 import CodeMirror from '../components/CodeMirror.vue'
 
 /** @type {import('vitepress').Theme} */
@@ -19,5 +20,6 @@ export default {
     app.component('Vimeo', Vimeo)
     app.component('Exercise', Exercise)
     app.component('CodeMirror', CodeMirror)
+    app.component('AnswerInput', AnswerInput)
   }
 }

src/exercises/001.md

@@ -0,0 +1,12 @@
+---
+answer: 280408588055
+---
+
+# Exercise 1
+
+If `x = 402095` and `y = 697369`, use your code editor to find the value of `x`
+multiplied by `y`.
+
+Print your answer to the console, then copy and paste it below.
+
+<AnswerInput :answer="$frontmatter.answer" />

src/exercises/002.md

@@ -0,0 +1,12 @@
+---
+answer: 670517
+---
+
+# Exercise 2
+
+If `a = 267560421612` and `b = 399036`, use your code editor to find the value
+of `a` divided by `b`.
+
+Print your answer to the console, then copy and paste it below.
+
+<AnswerInput :answer="$frontmatter.answer" />

src/exercises/003.md

@@ -0,0 +1,12 @@
+---
+answer: 370967703776
+---
+
+# Exercise 3
+
+Use your code editor to find the result when the number `206` is multipled by
+itself `5` times.
+
+Print your answer to the console, then copy and paste it below.
+
+<AnswerInput :answer="$frontmatter.answer" />

src/exercises/index.md

@@ -0,0 +1,3 @@
+# Exercises
+
+Welcome to the exercises!