I found it really hard to make a good HTML structure to access individual text pieces in summary section to add different color to each part of text. It would be really helpfull in the future if someone could give me advice on this topic.
Nice work on that project. You have done it nicely, actually given that its plain HTML CSS. of course as @petritnuredini stated, it would be nice if you add some aria to aid in accessibility tools.
I will comment that, It might have been easy for your development experience if you used something like react, because the repetitive code like the summary section elements can be react components created by mapping over a JSON object. Then to apply varying color on each element, using some CSS framework like Tailwind CSS, could have helped with conditional utility CSS on each component. Also tailwind allows you to define your own extended color palette besides the one it provides. Also its fun programming inline styles as you develop, because you see them being applied on the fly, rather that designing the html structure, then applying CSS separately, while trying to recall what class and id names you gave various elements.
Anyways that's My thought, enjoy you web development journey...
This is my first nextjs program, I know that I have not followed some of the important points of nextjs such as SSR I am waiting for good tips from you to help me progress in this way. Thank you
Hey, I should say I like your solution. I also have some recommendations:
1 Next.js vs. React App (Vite): Since the app is a single-page application and doesn't require backend logic or APIs, using React App (Vite) would be more efficient and performant compared to Next.js. Next.js adds additional complexity and bundle size for server-side rendering, which isn't necessary for this particular app.
2 For the layout, in the main try to make all the content to fit in one screen. For example in the parent most element use h-[100vh], then let all other elements emulate from that measurement.
3 I would recommend you use a simpler method to store the users score, such as local-storage. In the briefing section of the project, they say the users score should be available even when they refresh the page. also, you can use redux. Moreover, browser cookies might do the job, only that you have to decide to keep like a no-expiry time on the cookie, and let your code update the cookie, after a score.
4 Your Component reloads after a user confirms to play again. So I would recommend using a simpler structure such as state management at the parent component like of stepone and steptwo, that decides which component is being displayed, then pass the setDispalyed prop, to the stepone and steptwo, for updating when a user click. Then the use conditional rendering to determine which component to render:
function App () {
const [displayed, setDisplayed] = useState(1);
/* other code */
return (
<main>
{displayed === 1 && <Stepone setDisplayed={setDisplayed} /> }
{displayed === 2 && <Steptwo setDisplayed={setDisplayed} /> }
</main>
)}
Hey great work anyways. I will share my solution when am done. I probably will use local-storage to save my score, since it has faster data process time than redux and cookies, whose data process involves serializing data before save or read. Also local storage will maintain my score even across browser reloads.
// example of local storage:
localStorage.setItem('score', 0);
function updateScore(newScore) {
localStorage.setItem('score', newScore);
// Update the score display on the page
}