diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5c3f83d..086bcb3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,5 +1,9 @@
lockfileVersion: '6.0'
+settings:
+ autoInstallPeers: true
+ excludeLinksFromLockfile: false
+
dependencies:
'@fontsource/montserrat':
specifier: ^4.5.14
diff --git a/src/VerseSampler.jsx b/src/VerseSampler.jsx
index 2449216..0dba62c 100644
--- a/src/VerseSampler.jsx
+++ b/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
))
return list
@@ -215,8 +216,7 @@ function App() {
- last updated: November 10, 2023
-
+ Built on: {VITE_BUILD_DATE}
);
}
diff --git a/src/VerseValidator.css b/src/VerseValidator.css
index edbed21..1636b05 100644
--- a/src/VerseValidator.css
+++ b/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 */
+}
+
diff --git a/src/VerseValidator.jsx b/src/VerseValidator.jsx
index 72f7581..6c28307 100644
--- a/src/VerseValidator.jsx
+++ b/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 (
{pack} - {reference}
{chapterTitle && (
- <>
-
-
- >
+
+
+
+
)}
+ {/* input box for title */}
+ {/* input box for verse */}
-
-
-
+
+ {/* button to toggle show answer*/}
+ {/* This shows the answers*/}
{hintBool && (
<>
{chapterTitle}
diff --git a/vite.config.js b/vite.config.js
index 5a33944..8fae963 100644
--- a/vite.config.js
+++ b/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()),
+ },
})