Skip to content

Commit

Permalink
Update App.tsx to allow congrats page to fit whole screen
Browse files Browse the repository at this point in the history
  • Loading branch information
JarodHouston committed Nov 22, 2024
2 parents 63e3794 + 72b49f5 commit 1b27f9b
Show file tree
Hide file tree
Showing 2 changed files with 3 additions and 62 deletions.
2 changes: 1 addition & 1 deletion src/components/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ function App(): JSX.Element {
return (
<div>
<main>
{exerciseCount < 7 ? (
{exerciseCount < 3 ? (
<>
<LessonSide
levelNum={exerciseCount + 1}
Expand Down
63 changes: 2 additions & 61 deletions src/components/shared/Exercises/UnitCircleInput.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useState, useEffect } from 'react';
import { useState } from 'react';
import '../../../styles/Exercises/UnitCircleInput.scss';

interface UnitCircleInputProps {
Expand All @@ -15,9 +15,6 @@ interface CircleQuestion {
id: number; //This sucks lol
}

// Put this inside the function, push on each initial render, only update on render?
// let focusedList: boolean[] = [true, false, false];

function UnitCircleInput({
nextExercise,
answers,
Expand All @@ -28,73 +25,17 @@ function UnitCircleInput({
const handleChange = (event: { target: { value: string } }) => {
setText(event.target.value, id);
};
const [isInputFocused, setIsInputFocused] = useState(false);

useEffect(() => {
const input = document.getElementById(`unitcircle-check-box-${label}`);

// if (id === 0) {
// focusedList.push(true);
// } else {
// focusedList.push(false);
// }

const focusListener = () => {
setIsInputFocused(true);
};

const blurListener = () => {
setIsInputFocused(false);
};

if (input) {
input.addEventListener('focus', focusListener);
input.addEventListener('blur', blurListener);
}

// Clean up event listeners when component unmounts
return () => {
if (input) {
input.removeEventListener('focus', focusListener);
input.removeEventListener('blur', blurListener);
}
};
}, []);

// useEffect(() => {
// for (let i = 0; i < focusedList.length; i++) {
// if (inputText[id]) {
// focusedList[i] = true;
// }
// }
// for (let i = 1; i < focusedList.length; i++) {
// if (focusedList[i] === false && !inputText[id - 1]) {
// setIsInputFocused(true);
// break;
// }
// }
// }, []);

// console.log(focusedList[id]);

/* lines 25-35, try to get component to look like this */
return (
<div id="unitcircle-question-container" key={id}>
<p
id={
isInputFocused
? 'unitcircle-check-question'
: 'unitcircle-check-question-faded'
}
>
<p id="unitcircle-check-question">
{label} = {direction}{' '}
</p>
<input
type="text"
className="unitcircle-check-box"
onChange={handleChange}
value={inputText[id]}
id={`unitcircle-check-box-${label}`}
/>
</div>
);
Expand Down

0 comments on commit 1b27f9b

Please sign in to comment.