Merge pull request #15 from Vets-Who-Code/rob-dev

Issue #3 First Attempt Complete
Vets-Who-Code · May 2, 2023 · ef53a10 · ef53a10
2 parents 3d669d0 + b36aa25
commit ef53a10
Show file tree

Hide file tree

Showing 14 changed files with 693 additions and 0 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/issue-3/.DS_Store b/issue-3/.DS_Store
diff --git a/issue-3/about.html b/issue-3/about.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>About Me</title>
+    <link rel="stylesheet" href="./style.css" />
+    <script>
+      document.documentElement.className = localStorage.getItem('theme');
+    </script>
+  </head>
+  <body>
+    <script src="./lib.js"></script>
+    <div class="app">
+      <header>
+        <nav>
+          <ul> Menu
+            <a href="./index.html"><li>Home</li></a>
+            <a href="./about.html"><li>About</li></a>
+            <a href="#"><li>Contact</li></a>
+          </ul>
+        </nav>
+        <div class="title">About Me</div>
+        <label class="toggle-switch">
+          <input id="theme-toggle" type="checkbox" onclick="toggleTheme()">
+          <span class="toggle-slider"></span>
+          <img id="toggle-img" class="toggle-img" src="" alt="Light Mode">
+          <script>
+            setThemePic(document.documentElement.className);
+            setCheckBox();
+          </script>
+        </label>
+      </header>
+      <footer>Footer here</footer>
+    </div>
+  </body>
+</html>
diff --git a/issue-3/index.html b/issue-3/index.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+  <head>
+    <meta charset="utf-8">
+    <title>Issue #3</title>
+    <link rel="stylesheet" href="./style.css" />
+    <script>
+      document.documentElement.className = localStorage.getItem('theme');
+    </script>
+  </head>
+  <body>
+    <script type="text/javascript" src="./lib.js"></script>
+    <div class="app">
+      <header>
+        <nav>
+          <ul> Menu
+            <li><a href="./index.html">Home</a></li>
+            <li><a href="./about.html">About</a></li>
+            <li><a href="#">Contact</a></li>
+          </ul>
+        </nav>
+        <div class="title">Issue #3</div>
+        <label class="toggle-switch">
+          <input id="theme-toggle" type="checkbox" onclick="toggleTheme()">
+          <span class="toggle-slider"></span>
+          <img id="toggle-img" class="toggle-img" src="" alt="">
+          <script>
+            setThemePic(document.documentElement.className);
+            setCheckBox();
+          </script>
+        </label>
+      </header>
+      <section class="first">
+        <script>setFirstSection()</script>
+        <p>Goal setting is the process of defining targets or objectives that one intends to achieve within a specific time frame. <strong>Setting SMART goals</strong>, which are specific, measurable, achievable, relevant, and time-bound, can increase the chances of success. A good starting point is to identify what you want to achieve and why, and then break down the goal into smaller, more manageable steps. <strong>Visualizing success</strong> and regularly reviewing progress can help to stay motivated and focused. Setting goals can lead to a sense of direction and purpose, and <a href="https://en.wikipedia.org/wiki/Motivation">motivate</a> people to work towards their aspirations. It can also promote personal growth and development, improve performance, and increase satisfaction and happiness.</p>
+        <p>Use the form below to add another goal to the goal list. All fileds will <em>only accept</em> alpha numeric characters with the exception of the description field; it will accept basic punctuation.</p>
+      </section>
+      <hr />
+      <section class="form-section">
+        <form>
+          <label for="goal">New Goal</label>
+          <input type="text" id="goal" name="goal">
+          <label for="description">Description</label>
+          <textarea id="description" name="description" rows="5" cols="15"></textarea>
+          <label for="checklist">Checklist</label>
+          <input type="text" id="li1" name="checklist">
+          <input type="text" id="li2" name="checklist">
+          <input type="text" id="li3" name="checklist">
+          <button onclick="saveGoal()">Submit</button>
+        </form>
+        <table id="goalTable">
+          <caption>Personal Goals</caption>
+          <thead>
+            <tr>
+              <th>Activity</th>
+              <th>Description</th>
+              <th>Checklist</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>Family D&D Game</td>
+              <td>Dungeons and Dragons (D&D) is a tabletop role-playing game involving storytelling, strategy, and imagination. </td>
+              <td>
+                <ul>
+                  <li>Create story outline</li>
+                  <li>Family create <a href="https://www.dndbeyond.com/characters">characters</a></li>
+                  <li>Create <a href="https://www.dndbeyond.com/encounter-builder">encounters</a></li>
+                </ul>
+              </td>
+            </tr>
+            <tr>
+              <td>Bee Keeping</td>
+              <td>The ability to keep bees domestically and harvest honey year over year</td>
+              <td>
+                <ul>
+                  <li>Build <a href="https://horizontalhive.com/how-to-build/layens-swarm-trap-plans.shtml">swarm traps</a> and six <a href="https://horizontalhive.com/how-to-build/layens-hive-frame-plans.shtml">Laynes Frames</a></li>
+                  <li>Set up traps</li>
+                  <li>Build <a href="https://horizontalhive.com/how-to-build/insulated-layens-hive.shtml">Layens Hive</a> and twenty <a href="https://horizontalhive.com/how-to-build/layens-hive-frame-plans.shtml">Laynes Frames</a></li>
+                </ul>
+              </td>
+            </tr>
+            <tr>
+              <td>Build Chicken Coop</td>
+              <td>Domestically raising chickens to provide eggs for family</td>
+              <td>
+                <ul>
+                  <li>Build chicken coop</li>
+                  <li>Build chicken roost</li>
+                  <li>Note: Must have minimum 10sqft available per chicken</li>
+                </ul>
+              </td>
+            </tr>
+          </tbody>
+          <tfoot></tfoot>
+        </table>
+        <script>
+          setTable();
+        </script>
+      </section>
+      <br />
+      <footer>
+        <a href="https://www.linkedin.com/in/robecampbelljr/"><img class="social" src="./pics/LI-In-Bug.png"></a>
+        <a href="https://twitter.com/robecampbelljr"><img class="social" src="./pics/twitter.png"></a>
+      </footer>
+    </div>
+  </body>
+</html>
diff --git a/issue-3/lib.js b/issue-3/lib.js
@@ -0,0 +1,181 @@
+let setFirstSection = () => {
+  const header = document.querySelector('header');
+  const body = document.querySelector('.first');
+  const headerHeight = header.offsetHeight;
+  body.style.marginTop = `${headerHeight}px`;
+}
+
+let setTheme = (themeName) => {
+  localStorage.setItem('theme', themeName);
+  document.documentElement.className = themeName;
+}
+
+let setThemePic = (themeName) => {
+  let toggleImg = document.getElementById('toggle-img');
+
+  if (themeName === 'dark') {
+    toggleImg.src = './pics/sun.png';
+    toggleImg.alt = 'Light Mode';
+  } else if (themeName === 'light') {
+    toggleImg.src = './pics/dark.png';
+    toggleImg.alt = 'Dark Mode';
+  }
+}
+
+let setCheckBox = () => {
+  let currentTheme = document.documentElement.className;
+  let box = document.getElementById('theme-toggle');
+
+  if (currentTheme === 'dark') {
+    box.checked = null;
+  } else {
+    box.checked = true;
+  }
+
+}
+
+let toggleTheme = () => {
+  if (localStorage.getItem('theme') === 'dark') {
+    setTheme('light');
+    setThemePic('light');
+  } else {
+    setTheme('dark');
+    setThemePic('dark');
+  }
+}
+
+let getGoal = () => {
+  const goal = document.getElementById('goal').value;
+  const description = document.getElementById('description').value;
+  const li1 = document.getElementById('li1').value;
+  const li2 = document.getElementById('li2').value;
+  const li3 = document.getElementById('li3').value;
+
+  return {
+    goa: goal,
+    des: description,
+    li1: li1,
+    li2: li2,
+    li3: li3
+  }
+}
+
+let saveGoal = () => {
+  if (validateForm()) {
+    let goals = [];
+
+    let savedGoals = getGoals();
+
+    if (savedGoals !== null) {
+      goals = savedGoals;
+    }
+
+    goals.push(getGoal());
+
+    localStorage.setItem('goal', JSON.stringify(goals));
+  }
+}
+
+let getGoals = () => {
+  let goals = null;
+  let savedGoals = localStorage.getItem('goal');
+  if (savedGoals !== null) {
+    goals = JSON.parse(savedGoals);
+  }
+
+  return goals;
+}
+
+let validateForm = () => {
+  const goalRegex = /^[a-zA-Z0-9\s]{5,100}$/;
+  const descriptionRegex = /^[a-zA-Z0-9\s.,!?]{5,250}$/;
+  const checklistRegex = /^[a-zA-Z0-9\s]{5,100}$/;
+
+  let goal = getGoal();
+
+  console.log((goal))
+
+  if (!goalRegex.test(goal.goa)) {
+        regexAlert('goal', 5, 100)
+        return false;
+  }
+
+  if (!descriptionRegex.test(goal.des)) {
+        regexAlert('description', 5, 250)
+        return false;
+  }
+
+  if (goal.li1 !== "" || goal.li2 !== "" || goal.li3 !== "") {
+    if (goal.li1 !== "") {
+      if (!checklistRegex.test(goal.li1)) {
+        regexAlert('checklist item 1', 5, 100)
+        return false;
+      }
+    }
+
+    if (goal.li2 !== "") {
+      if (!checklistRegex.test(goal.li2)) {
+        regexAlert('checklist item 2', 5, 100)
+        return false;
+      }
+    }
+
+    if (goal.li3 !== "") {
+      if (!checklistRegex.test(goal.li3)) {
+        regexAlert('checklist item 3', 5, 100)
+        return false;
+      }
+    }
+  } else {
+    regexAlert('checklist item', 5, 100)
+    return false;
+  }
+
+
+  return true;
+}
+
+let regexAlert = (item, min, max) => {
+  alert(`Please enter a ${item} between ${min} and ${max} characters (letters and/or numbers only).`);
+}
+
+let setTable = () => {
+
+  let table = document.getElementById('goalTable');
+
+  let savedGoals = getGoals();
+
+  if (savedGoals !== null) {
+    savedGoals.forEach((goal) => {
+      let newRow = table.insertRow();
+      let goaCell = newRow.insertCell();
+      let desCell = newRow.insertCell();
+      let checklistCell = newRow.insertCell();
+
+      goaCell.innerHTML = goal.goa;
+      desCell.innerHTML = goal.des;
+
+      let newChecklist = document.createElement('ul');
+
+      if (goal.li1 !== '') {
+        let li1 = document.createElement('li');
+        li1.innerText = goal.li1;
+        newChecklist.appendChild(li1);
+      }
+
+      if (goal.li2 !== '') {
+        let li2 = document.createElement('li');
+        li2.innerText = goal.li2;
+        newChecklist.appendChild(li2);
+      }
+
+      if (goal.li3 !== '') {
+        let li3 = document.createElement('li');
+        li3.innerText = goal.li3;
+        newChecklist.appendChild(li3);
+      }
+
+      checklistCell.appendChild(newChecklist);
+    })
+  }
+}
diff --git a/issue-3/pics/.DS_Store b/issue-3/pics/.DS_Store
diff --git a/issue-3/pics/LI-In-Bug.png b/issue-3/pics/LI-In-Bug.png
diff --git a/issue-3/pics/dark.png b/issue-3/pics/dark.png
diff --git a/issue-3/pics/sun.png b/issue-3/pics/sun.png
diff --git a/issue-3/pics/twitter.png b/issue-3/pics/twitter.png