FarmData2 · braughtg · Jun 29, 2026 · Jun 29, 2026 · Jun 29, 2026 · Jun 29, 2026
diff --git a/.cspell.json b/.cspell.json
@@ -23,6 +23,7 @@
     "eslint",
     "flashword",
     "husky",
+    "lightpink",
     "keyup",
     "linkcheck",
     "lintstaged",

diff --git a/web-projects/first-website/images/fd2-logo-orange.png b/web-projects/first-website/images/fd2-logo-orange.png
diff --git a/web-projects/first-website/images/fd2-logo.png b/web-projects/first-website/images/fd2-logo.png
diff --git a/web-projects/first-website/index.html b/web-projects/first-website/index.html
@@ -0,0 +1,46 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <link href="styles/style.css" rel="stylesheet" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"
+      rel="stylesheet"
+    />
+    <script async src="scripts/main.js"></script>
+    <title>The FarmData2 Project</title>
+  </head>
+  <body>
+    <h1>The FarmData2 Project</h1>
+
+    <img
+      src="images/fd2-logo.png"
+      alt="The FarmData2 Logo showing a carrot on a mobile phone screen."
+    />
+
+    <p>
+      <a href="https://github.com/FarmData2/FarmData2">FarmData2</a> aims to
+      extend farmOS by adding data input forms, reporting, and analytics that
+      support the day-to-day operation of diversified vegetable farms, while
+      also facilitating the keeping of records necessary for organic
+      certification and for the study of sustainable farming practices.
+    </p>
+
+    <p>
+      FarmData2 contains features for recording the following activities that
+      are likely to occur on a small diversified vegetable farm.
+    </p>
+    <ul>
+      <li>Tray seeding</li>
+      <li>Direct seeding</li>
+      <li>Cover crop seeding</li>
+      <li>Transplanting</li>
+      <li>Soil disturbance</li>
+    </ul>
+
+    <button>Change user</button>
+  </body>
+</html>
diff --git a/web-projects/first-website/scripts/main.js b/web-projects/first-website/scripts/main.js
@@ -0,0 +1,34 @@
+const myImage = document.querySelector('img')
+
+myImage.addEventListener('click', () => {
+  const mySrc = myImage.getAttribute('src')
+  if (mySrc === 'images/fd2-logo.png') {
+    myImage.setAttribute('src', 'images/fd2-logo-orange.png')
+  } else {
+    myImage.setAttribute('src', 'images/fd2-logo.png')
+  }
+})
+
+let myButton = document.querySelector('button')
+let myHeading = document.querySelector('h1')
+
+function setUserName() {
+  const myName = prompt('Please enter your name.')
+  if (!myName) {
+    setUserName()
+  } else {
+    localStorage.setItem('name', myName)
+    myHeading.textContent = `Mozilla is cool, ${myName}`
+  }
+}
+
+if (!localStorage.getItem('name')) {
+  setUserName()
+} else {
+  const storedName = localStorage.getItem('name')
+  myHeading.textContent = `FarmData2 is cool, ${storedName}`
+}
+
+myButton.addEventListener('click', () => {
+  setUserName()
+})
diff --git a/web-projects/first-website/styles/style.css b/web-projects/first-website/styles/style.css
@@ -0,0 +1,37 @@
+html {
+  /* px means "pixels". The base font size is now 10 pixels high */
+  font-size: 10px;
+  /* Replace PLACEHOLDER with the font-family property value you got from Google Fonts */
+  font-family: 'Roboto', sans-serif;
+  background-color: #b8fdb1;
+}
+
+h1 {
+  font-size: 60px;
+  text-align: center;
+  margin: 0;
+  padding: 20px 0;
+  color: #12601b;
+  text-shadow: 3px 3px 1px #b8fdb1;
+}
+
+p,
+li {
+  font-size: 16px;
+  line-height: 2;
+  letter-spacing: 1px;
+}
+
+body {
+  width: 600px;
+  margin: 0 auto;
+  background-color: #ff9500;
+  padding: 0 20px 20px 20px;
+  border: 5px solid black;
+}
+
+img {
+  display: block;
+  margin: 0 auto;
+  max-width: 100%;
+}
diff --git a/web-projects/flashword/app.js b/web-projects/flashword/app.js
@@ -0,0 +1,77 @@
+const Flashword = {
+  data() {
+    return {
+      wordA: 'hola',
+      wordB: 'hello',
+      answer: '',
+      correct: null,
+      showFeedback: false,
+      hasError: false,
+      correctAnswers: 0,
+      totalAnswers: 0,
+
+      // Array of objects example
+      words: [
+        { wordA: 'hola', wordB: 'hello' },
+        { wordA: 'adios', wordB: 'goodbye' },
+        { wordA: 'uno', wordB: 'one' },
+        { wordA: 'dos', wordB: 'two' },
+      ],
+    };
+  },
+  watch: {
+    answer(newAnswer) {
+      if (newAnswer !== '') {
+        this.hasError = false;
+      }
+    },
+  },
+  computed: {
+    inputCSSClass() {
+      return this.hasError ? 'error' : 'no-error';
+    },
+    correctPercentage() {
+      if (this.totalAnswers === 0) {
+        return 0;
+      }
+
+      return (this.correctAnswers / this.totalAnswers) * 100;
+    },
+    earnedBadge() {
+      return this.correctPercentage >= 80;
+    },
+  },
+  methods: {
+    checkAnswer() {
+      if (this.answer == '') {
+        this.hasError = true;
+        return;
+      }
+
+      this.hasError = false;
+      this.correct = this.wordB == this.answer;
+
+      this.totalAnswers++;
+
+      if (this.correct) {
+        this.correctAnswers++;
+      }
+
+      this.showFeedback = true;
+    },
+    reset() {
+      this.answer = '';
+      this.showFeedback = false;
+      this.correct = null;
+      this.hasError = false;
+
+      // Reset to a new random word
+      const randomIndex = Math.floor(Math.random() * this.words.length);
+      this.wordA = this.words[randomIndex].wordA;
+      this.wordB = this.words[randomIndex].wordB;
+    },
+  },
+};
+
+// eslint-disable-next-line no-unused-vars, no-undef
+const app = Vue.createApp(Flashword).mount('#app');
diff --git a/web-projects/flashword/images/badge.png b/web-projects/flashword/images/badge.png
diff --git a/web-projects/flashword/index.html b/web-projects/flashword/index.html
@@ -0,0 +1,83 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <title>FlashWord</title>
+    <meta charset="utf-8" />
+
+    <script src="https://unpkg.com/vue@3/dist/vue.global.js" defer></script>
+    <script src="app.js" defer></script>
+
+    <style>
+      label {
+        display: block;
+      }
+
+      input,
+      button {
+        display: block;
+        margin: 10px 0px;
+      }
+
+      .correct {
+        color: green;
+      }
+
+      .incorrect {
+        color: red;
+      }
+
+      .error {
+        background-color: lightpink;
+      }
+
+      .no-error {
+        background-color: white;
+      }
+
+      [v-cloak] {
+        display: none;
+      }
+    </style>
+  </head>
+
+  <body>
+    <h1>FlashWord</h1>
+
+    <p>
+      This is a simple flashcard app that will show you a word in Spanish and
+      ask you to enter the translation in English.
+    </p>
+
+    <div id="app" v-cloak>
+      What is the English translation of the word <strong>{{ wordA }}</strong>?
+
+      <label for="translation-input">Translation:</label>
+      <input
+        type="text"
+        id="translation-input"
+        v-model="answer"
+        placeholder="Enter translation"
+        v-bind:class="inputCSSClass"
+      />
+
+      <p v-show="answer != ''">You answered: {{ answer }}</p>
+
+      <button v-on:click="checkAnswer()">Check answer</button>
+
+      <p v-show="showFeedback && correct" class="correct">You got it!</p>
+      <p v-show="showFeedback && !correct" class="incorrect">
+        Sorry, please try again.
+      </p>
+
+      <button v-on:click="reset()" v-bind:disabled="answer == ''">Reset</button>
+
+      <div v-show="earnedBadge">
+        <p>Badge earned!</p>
+        <img
+          src="images/badge.png"
+          alt="Badge earned for answering at least 80 percent correctly"
+        />
+      </div>
+    </div>
+  </body>
+</html>