Skip to content

Commit

Permalink
update numbers flashacrds, and add additional features
Browse files Browse the repository at this point in the history
  • Loading branch information
@SirArnoldB
SirArnoldB committed Mar 15, 2023
1 parent d319632 commit 4c36e27
Show file tree
Hide file tree
Showing 19 changed files with 206 additions and 216 deletions.
105 changes: 23 additions & 82 deletions elevateyou/src/App.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,65 +1,39 @@
import { useState, useEffect } from "react";
import { useState } from "react";
import "./styles/App.css";
import SelfDiscoveryFlashcards from "./components/SelfDiscoveryFlashcards";
import { db } from "./config/firebase";
import { get, ref } from "firebase/database";
import OptionCard from "./components/OptionCard";
import FlashCards from "./components/FlashCards";

function App() {
const [currentCardIndex, setCurrentCardIndex] = useState(0);
const [cards, setCards] = useState([]);
const [loading, setLoading] = useState(true);
const [selectedOption, setSelectedOption] = useState(null);

useEffect(() => {
const getCards = async () => {
try {
const query = ref(db, "selfDiscoveryCards");
const snapshot = await get(query);
const cardsData = snapshot.val().selfDiscoveryCards;

if (cardsData) {
const newCards = Object.values(cardsData.selfDiscoveryCards).map(
(card) => {
return {
prompt: card.prompt,
actionSteps: card.action_steps,
resources: card.resources,
category: card.category,
};
}
);
setCards(newCards);
}
} catch (error) {
console.log(error);
} finally {
setLoading(false);
}
};

getCards();
}, []);

const updateCard = () => {
const newCardIndex = (currentCardIndex + 1) % cards.length;
setCurrentCardIndex(newCardIndex);
};

const handleStart = (option) => {
setSelectedOption(option);
};

return (
<div className="App">
<div className="header-row">
<h1>Elevate You</h1>
<h1>ElevateYou</h1>
<h3>Empower Yourself, One Card At A Time!</h3>
<h4>
Improve yourself with daily positive affirmations, goal-setting, and
life-changing insights.
</h4>
{selectedOption == "self-discovery" ? (
<>
<h4>Self-Discovery Flashcards</h4>
<h5>
Improve yourself with daily positive affirmations, goal-setting,
and life-changing insights.
</h5>
</>
) : selectedOption == "numbers" ? (
<>
<h4>Numbers Flashcards</h4>
<h5>
Improve your knowledge of math and numbers with our Numbers
Flashcards.
</h5>
</>
) : (
<></>
)}
</div>
<div className="card-row">
{selectedOption ? (
Expand All @@ -69,11 +43,13 @@ function App() {
<OptionCard
title="Self-Discovery Flashcards"
description="Learn more about yourself and your inner thoughts with our Self-Discovery Flashcards."
image_url="/src/assets/self-discovery.png"
onStart={() => handleStart("self-discovery")}
/>
<OptionCard
title="Numbers Flashcards"
description="Improve your knowledge of math and numbers with our Numbers Flashcards."
image_url="/src/assets/guess-number.jpg"
onStart={() => handleStart("numbers")}
/>
</div>
Expand All @@ -83,39 +59,4 @@ function App() {
);
}

/**
* return (
<div className="App">
<div className="header-row">
<h1>Elevate You</h1>
<h3>Empower Yourself, One Card At A Time!</h3>
<h4>
Improve yourself with daily positive affirmations, goal-setting, and
life-changing insights.
</h4>
</div>
<div className="card-row">
{loading ? (
<div style={{ marginTop: "30px", marginBottom: "30px" }}>
Loading...
</div>
) : cards.length > 0 ? (
<SelfDiscoveryFlashcards
key={currentCardIndex}
card={cards[currentCardIndex]}
/>
) : (
<div style={{ marginTop: "30px", marginBottom: "30px" }}>
No cards found.
</div>
)}
</div>
<div className="button-row">
<NextButton nextCard={updateCard} />
</div>
</div>
);
}
*/

export default App;
Binary file added elevateyou/src/assets/guess-number.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added elevateyou/src/assets/self-discovery.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
19 changes: 13 additions & 6 deletions elevateyou/src/components/CardControls.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {
BsArrowRepeat,
} from "react-icons/bs";
import RestartModal from "./RestartModal";
import "../styles/CardControls.css";

const CardControls = ({
showRestartModal,
Expand All @@ -21,25 +22,31 @@ const CardControls = ({
}) => (
<div className="controls">
<button
className="btn btn-icon btn-secondary me-2"
className="btn btn-icon btn-secondary restart-btn"
onClick={handleShowModal}
>
<BsArrowRepeat size={30} />
</button>
<button
className="btn btn-icon btn-secondary me-2 prev-btn"
onClick={handlePrevCard}
disabled={currentCardIndex === 0}
>
<BsArrowLeft size={30} />
</button>
<button
className="btn btn-icon btn-secondary me-2"
className="btn btn-icon btn-secondary me-2 next-btn"
onClick={handleNextCard}
disabled={currentCardIndex === cards.length - 1}
>
<BsArrowRight size={30} />
</button>
<button className="btn btn-icon btn-secondary me-2" onClick={handleShuffle}>
<button
className="btn btn-icon btn-secondary me-2 shuffle-btn"
onClick={handleShuffle}
>
<BsShuffle size={30} />
</button>
<button className="btn btn-icon btn-secondary" onClick={handleShowModal}>
<BsArrowRepeat size={30} />
</button>
{showRestartModal && (
<RestartModal
showRestartModal={showRestartModal}
Expand Down
17 changes: 13 additions & 4 deletions elevateyou/src/components/NumbersCard.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React, { useState, useEffect } from "react";
import { Card, Button, Form } from "react-bootstrap";
import "../styles/NumbersCard.css";

const NumbersCard = ({ cards, currentCard, flipped, setFlipped }) => {
const [answer, setAnswer] = useState("");
Expand Down Expand Up @@ -44,7 +45,7 @@ const NumbersCard = ({ cards, currentCard, flipped, setFlipped }) => {

return (
<>
<div>
<div className="stats">
<p>{`Current Score: ${currentScore}/${cards.length}`}</p>
<p>Best Score: {bestScore}</p>
</div>
Expand All @@ -58,17 +59,25 @@ const NumbersCard = ({ cards, currentCard, flipped, setFlipped }) => {
{" "}
<Card.Body>
<Card.Title>{currentCard.text}</Card.Title>
<Form onSubmit={handleAnswerSubmit} onClick={handleFormClick}>
<Form
onSubmit={handleAnswerSubmit}
onClick={handleFormClick}
className="answer-form"
>
<Form.Group controlId="formAnswer">
<Form.Label>Answer:</Form.Label>
<Form.Control
type="text"
value={answer}
onChange={handleAnswerChange}
placeholder="Enter Your Answer Here"
required
/>
</Form.Group>
<Button variant="primary" type="submit">
<Button
variant="primary"
type="submit"
className="check-answer-btn"
>
Check
</Button>
</Form>
Expand Down
39 changes: 7 additions & 32 deletions elevateyou/src/components/NumbersFlashcards.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,18 +9,8 @@ import CardControls from "./CardControls";
import fetchCards from "../utils/fetchNumbersCards";

const NumbersFlashCards = () => {
// states
const [cards, setCards] = useState([]);
const [currentCardIndex, setCurrentCardIndex] = useState(0);
const [timerOn, setTimerOn] = useState(false);
// const [timerSeconds, setTimerSeconds] = useState(15);
// const [customRange, setCustomRange] = useState(false);
// const [minValue, setMinValue] = useState(0);
// const [maxValue, setMaxValue] = useState(0);
const [loading, setLoading] = useState(false);
// const [progress, setProgress] = useState(0);
// const [bestScore, setBestScore] = useState(0);
// const [currentScore, setCurrentScore] = useState(0);
const [showStartForm, setShowStartForm] = useState(true);
const [flipped, setFlipped] = useState(false);
const [showStartCard, setShowStartCard] = useState(false);
Expand All @@ -29,18 +19,13 @@ const NumbersFlashCards = () => {
const [showRestartModal, setShowRestartModal] = useState(false);

const getCards = async (rangeType, min, max, numQuestions) => {
setLoading(true);

const numbersCards = await fetchCards(rangeType, min, max, numQuestions);

if (numbersCards.length) {
setCards(numbersCards);
} else {
// No cards found
console.log("No Cards Found.");
}

setLoading(false);
};

const handleShuffle = () => {
Expand All @@ -62,19 +47,13 @@ const NumbersFlashCards = () => {

const handlePrevCard = () => {
if (currentCardIndex > 0) {
setFlipped(false);
setPreviousCardIndex(currentCardIndex);
setCurrentCardIndex(currentCardIndex - 1);
}
};

useEffect(() => {
if (currentCardIndex !== previousCardIndex) {
setCurrentCard(cards[currentCardIndex]);
}
}, [currentCardIndex]);

const handleStart = (rangeType, min, max, isTimer, numQuestions) => {
setTimerOn(isTimer);
const handleStart = (rangeType, min, max, numQuestions) => {
setShowStartForm(false);
setShowStartCard(true);
getCards(rangeType, min, max, numQuestions);
Expand All @@ -98,13 +77,11 @@ const NumbersFlashCards = () => {
setShowRestartModal(false);
};

const renderProgressBar = () =>
// TODO: render the progress bar
console.log("renderProgressBar");

const renderScore = () =>
// TODO: render the current score and best score
console.log("renderScore");
useEffect(() => {
if (currentCardIndex !== previousCardIndex) {
setCurrentCard(cards[currentCardIndex]);
}
}, [currentCardIndex]);

return (
<>
Expand All @@ -116,8 +93,6 @@ const NumbersFlashCards = () => {
{showStartCard && <StartCard setShowStartCard={setShowStartCard} />}
{!showStartForm && !showStartCard && (
<>
{renderProgressBar()}
{renderScore()}
<NumbersCard
cards={cards}
currentCard={cards[currentCardIndex]}
Expand Down
29 changes: 12 additions & 17 deletions elevateyou/src/components/NumbersStartForm.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,24 @@ const NumbersStartForm = ({ onStart }) => {
const [min, setMin] = useState("");
const [max, setMax] = useState("");
const [isRandom, setIsRandom] = useState(true);
const [isTimerOn, setIsTimerOn] = useState(false);
const [numQuestions, setNumQuestions] = useState(
import.meta.env.VITE_DEFAULT_QUESTION_COUNT
);

const handleStart = (event) => {
event.preventDefault();
if (isRandom) {
onStart("random", null, null, isTimerOn, numQuestions);
onStart("random", null, null, numQuestions);
} else {
onStart("custom", parseInt(min), parseInt(max), isTimerOn, numQuestions);
const minVal = parseInt(min);
const maxVal = parseInt(max);
if (maxVal - minVal < 5) {
alert(
"Maximum value should be greater than minimum value by at least 5"
);
return;
}
onStart("custom", minVal, maxVal, numQuestions);
}
};

Expand All @@ -43,7 +50,7 @@ const NumbersStartForm = ({ onStart }) => {
<Form.Label>Minimum:</Form.Label>
<Form.Control
type="number"
min="-999999999"
min="0"
max="999999999"
value={min}
onChange={(event) => setMin(event.target.value)}
Expand All @@ -52,7 +59,7 @@ const NumbersStartForm = ({ onStart }) => {
<Form.Label>Maximum:</Form.Label>
<Form.Control
type="number"
min="-999999999"
min="0"
max="999999999"
value={max}
onChange={(event) => setMax(event.target.value)}
Expand All @@ -75,18 +82,6 @@ const NumbersStartForm = ({ onStart }) => {
required
/>
</Form.Group>
<Form.Group className="mb-3" controlId="timerSelector">
<Form.Label>Timer:</Form.Label>
<div>
<Form.Check
type="switch"
id="timer-switch"
label=""
checked={isTimerOn}
onChange={() => setIsTimerOn(!isTimerOn)}
/>
</div>
</Form.Group>
<Button variant="primary" type="submit" className="form-start-btn">
Start
</Button>
Expand Down
Loading

0 comments on commit 4c36e27

Please sign in to comment.