FarmData2 · braughtg · Jun 29, 2026 · Jun 29, 2026 · Jun 29, 2026 · Jun 29, 2026
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 = `FarmData2 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%;
+}