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,85 @@
+const Flashword = {
+  data() {
+    return {
+      wordA: 'hola',
+      wordB: 'hello',
+      answer: '',
+      correct: null,
+      showFeedback: false,
+      image: null,
+      imageAlt: null,
+      hasError: false,
+      inputBackgroundColor: 'white',
+      showHint: false,
+      level: 'easy',
+      sentence: '',
+      lastName: '',
+      firstName: '',
+      firstNameAndLastName: '',
+
+      // Array example
+      spanishWords: ['hola', 'adios', 'uno', 'dos'],
+
+      // Object example
+      word: { a: 'hola', b: 'hello' },
+
+      // Array of objects example
+      words: [
+        { wordA: 'hola', wordB: 'hello' },
+        { wordA: 'adios', wordB: 'goodbye' },
+        { wordA: 'uno', wordB: 'one' },
+        { wordA: 'dos', wordB: 'two' },
+      ],
+    }
+  },
+  computed: {
+    fullName() {
+      return this.firstName + ' ' + this.lastName
+    },
+    shortSpanishWords() {
+      return this.spanishWords.filter((word) => word.length <= 3)
+    },
+  },
+  watch: {
+    firstName() {
+      this.firstNameAndLastName = this.firstName + ' ' + this.lastName
+    },
+    lastName() {
+      this.firstNameAndLastName = this.firstName + ' ' + this.lastName
+    },
+  },
+  methods: {
+    getFullName() {
+      return this.firstName + ' ' + this.lastName
+    },
+    checkAnswer() {
+      if (this.answer == '') {
+        this.hasError = true
+        this.inputBackgroundColor = 'lightpink'
+        return
+      }
+
+      this.hasError = false
+      this.inputBackgroundColor = 'white'
+
+      this.correct = this.wordB == this.answer
+
+      if (this.correct) {
+        this.image = 'correct'
+        this.imageAlt = 'Green check mark.'
+      } else {
+        this.image = 'incorrect'
+        this.imageAlt = 'Red X.'
+      }
+
+      this.showFeedback = true
+    },
+    reset() {
+      this.answer = ''
+      this.showFeedback = false
+    },
+  },
+}
+
+// eslint-disable-next-line no-unused-vars, no-undef
+const app = Vue.createApp(Flashword).mount('#app')
diff --git a/web-projects/flashword/index.html b/web-projects/flashword/index.html
@@ -0,0 +1,119 @@
+<!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;
+      }
+
+      [v-cloak] {
+        display: none;
+      }
+
+      .error {
+        background-color: lightpink;
+      }
+    </style>
+  </head>
+
+  <body>
+    <h1>FlashWord</h1>
+
+    <div id="app" v-cloak>
+      What is the English translation of the word <strong>{{ wordA }}</strong>?
+
+      <input
+        type="text"
+        v-model="answer"
+        v-on:keyup.enter="checkAnswer()"
+        v-bind:style="{'background-color' : inputBackgroundColor}"
+      />
+
+      <input type="checkbox" id="showHint" v-model="showHint" />
+      <label for="showHint">Show hint?</label>
+
+      <div v-if="showHint">A hint would appear here.</div>
+
+      <p v-if="hasError">You must enter an answer.</p>
+
+      <p v-if="answer != ''">You answered: {{ answer }}</p>
+
+      <button v-on:click="checkAnswer()">Check answer</button>
+
+      <template v-if="showFeedback">
+        <img
+          v-bind:alt="imageAlt"
+          v-bind:src='"https://s3.amazonaws.com/codewithsusan/circle-" + image + "@2x.png"'
+        />
+        <p v-if="correct" class="correct">You got it!</p>
+        <p v-else class="incorrect">Sorry, please try again.</p>
+        <button v-on:click="reset()">Reset</button>
+      </template>
+
+      <h2>Difficulty level radios:</h2>
+      <input type="radio" id="easy" value="easy" name="level" v-model="level" />
+      <label for="easy">Easy</label>
+
+      <input
+        type="radio"
+        id="moderate"
+        value="moderate"
+        name="level"
+        v-model="level"
+      />
+      <label for="moderate">Moderate</label>
+
+      <input
+        type="radio"
+        id="difficult"
+        value="difficult"
+        name="level"
+        v-model="level"
+      />
+      <label for="difficult">Difficult</label>
+
+      <h2>Difficulty level select dropdown:</h2>
+      <select v-model="level">
+        <option value="easy">Easy</option>
+        <option value="moderate">Moderate</option>
+        <option value="difficult">Difficult</option>
+      </select>
+
+      <h2>Use the word in a sentence</h2>
+      <textarea v-model="sentence"></textarea>
+
+      <p>{{ sentence }}</p>
+
+      <p>First name: <input type="text" v-model="firstName" /></p>
+      <p>Last name: <input type="text" v-model="lastName" /></p>
+
+      <p>Hello {{ fullName }}</p>
+      <p>Hello {{ getFullName() }}</p>
+      <p>Hello {{ firstNameAndLastName }}</p>
+
+      <ul>
+        <li v-for="word in shortSpanishWords">{{ word }}</li>
+      </ul>
+    </div>
+  </body>
+</html>