Feat: changed correctness to be at per-element level using color

pnpm-lock.yaml

@@ -1,5 +1,9 @@
 lockfileVersion: '6.0'
 
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
 dependencies:
   '@fontsource/montserrat':
     specifier: ^4.5.14

src/VerseSampler.jsx

@@ -25,6 +25,7 @@ const GenerateTestList = ({ packs, testCount, toShuffle}) => {
 
 const ArrayTester = ({ array }) => {
   const list = array.map((element) => (
+    // key needs to be unique; chose 3 elements that will separate all elements
     <VerseValidator key={element.pack + element.title + element.reference} element={element} />
   ))
   return list
@@ -215,8 +216,7 @@ function App() {
 
     <hr />
 
-    <p><x-small>last updated: November 10, 2023</x-small></p>
-
+    <p><x-small> Built on: {VITE_BUILD_DATE} </x-small></p>
     </div>
   );
 }  

src/VerseValidator.css

@@ -1,24 +1,16 @@
 .App {
     max-width: 400px;
 }
+
+
 .VerseValidator {
   padding-block: 1px 10px;
   border-top: 1px solid black;
   max-width: 400px;
 }
 
-.title-box {
-  /*padding: 5px;*/
-  height: 5vh;
-  display: block;
-  width: 99%;
-  border: 1px solid grey;
-  border-radius: 5px;
-  font-size: 15px;
-}
-
 .chapter-title-box {
-  /*padding: 5px;*/
+  min-width:400px;
   height: 5vh;
   display: block;
   width: 99%;
@@ -27,9 +19,19 @@
   font-size: 15px;
 }
 
+.title-box {
+  max-width: 400px;
+  height: 5vh;
+  display: block;
+  width: 99%;
+  border: 1px solid grey;
+  border-radius: 5px;
+  font-size: 15px;
+}
 
 .verse-box {
   /*padding: 5px;*/
+  min-width:400px;
   height: 10vh;
   display: block;
   width: 99%;
@@ -38,3 +40,19 @@
   font-size: 15px;
 }
 
+.verse-box {
+  /*padding: 5px;*/
+  min-width:400px;
+  height: 10vh;
+  display: block;
+  width: 99%;
+  border: 1px solid grey;
+  border-radius: 5px;
+  font-size: 15px;
+}
+
+
+.correct {
+  background-color: #e6ffe6; /* Change the background color as needed */
+}
+

src/VerseValidator.jsx

@@ -1,7 +1,8 @@
 import { useState } from "react";
 import "./VerseValidator.css"
 
-const VerseValidator = ({ element: { pack, title, chapterTitle, reference, verse } }) => {
+// function to render and handle logic of each of the cells
+const VerseValidator = ({ element: { pack, title, chapterTitle, reference, verse } }) => {  // useful use of destructuring here
   const [inputVerse, setVerse] = useState('')
   const [verseBool, setVerseBool] = useState(false)
   const [inputTitle, setTitle] = useState('')
@@ -10,6 +11,7 @@ const VerseValidator = ({ element: { pack, title, chapterTitle, reference, verse
   const [chapterTitleBool, setChapterTitleBool] = useState(false)
   const[hintBool, setHintBool] = useState(false)
 
+  {/* function to check correctness of verse input */}
   const verseChange = (e) => {
     const value = e.target.value;
     let string1 = value;
@@ -29,6 +31,7 @@ const VerseValidator = ({ element: { pack, title, chapterTitle, reference, verse
     setVerseBool(bool);
   };
 
+  {/* function to check correctness of title input */}
   const titleChange = (e) => {
     const value = e.target.value;
     let string1 = value;
@@ -48,6 +51,8 @@ const VerseValidator = ({ element: { pack, title, chapterTitle, reference, verse
     setTitleBool(bool);
   };
 
+
+  {/* function to check correctness of chapter title input */}
   const chapterTitleChange = (e) => {
     const value = e.target.value;
     let string1 = value;
@@ -68,68 +73,53 @@ const VerseValidator = ({ element: { pack, title, chapterTitle, reference, verse
   };
 
 
-
-
-  let result = "";
-
-  if (chapterTitle) {
-    if (chapterTitleBool && titleBool && verseBool) {
-      result = "Correct"
-    } else {
-      result = ""
-    }
-  } else {
-    if (titleBool && verseBool) {
-      result = "Correct"
-    } else {
-      result = ""
-    }
-  }
   return (
     <div className="VerseValidator">
       <h2>{pack} - {reference}</h2>
 
       {chapterTitle && (
-        <>
+        <div>
         <label className="main-title-box-label" htmlFor="chapterTitleBox">
           Input Chapter Title:
         </label>
         <textarea
-            className="chapter-title-box"
+          className={`chapter-title-box${chapterTitleBool ? ' correct' : ''}`}
           type="text"
           id="chapterTitleBox"
           name="chapterTitleBox"
           onChange={chapterTitleChange}
         />
-        </>
+        </div>
       )}
 
+      {/* input box for title */}
       <label className="title-box-label" htmlFor="titleBox">
         Input Title:
       </label>
       <textarea
-        className="title-box"
+        className={`title-box${titleBool ? ' correct' : ''}`}
         type="text"
         id="titleBox"
         name="titleBox"
         onChange={titleChange}
       />
 
+      {/* input box for verse */}
       <label className="verse-box-label" htmlFor="verseBox">
         Input Verse:
       </label>
       <textarea
-        className="verse-box"
+        className={`verse-box${verseBool ? ' correct' : ''}`}
         type="text"
         id="verseBox"
         name="verseBox"
         onChange={verseChange}
       />
       
-      <ul>{result}</ul>
-
+      {/* button to toggle show answer*/} 
       <button onClick={() => setHintBool(!hintBool)}>Show Answer:</button>
 
+      {/* This shows the answers*/} 
       {hintBool && (
         <>
           <h3>{chapterTitle}</h3>

vite.config.js

@@ -4,4 +4,7 @@ import react from '@vitejs/plugin-react'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  define: {
+    VITE_BUILD_DATE: JSON.stringify(new Date().toLocaleString()),
+  },
 })