All solutions

At this time, this is one of the most time-consuming research projects for me. I have had to become familiar with methods such as Date(), getFullYear(), getMonth() and getDate(), and their implementation in hooks. Error handling has also taken me quite some time. The code could be better, but I prioritize the logic in it and decide to leave it as it is.

With this challange I learned by myself how to use hooks on rendered objects from a .map() method:

<div className="rating-numbers animate__animated animate__bounceInRight">
                    {[...Array(5)].map((number, index) => {
                        index += 1;
                        return(
                            <button
                                type="button"
                                key={index}
                                className={index === rating ? "number-on" : "number"}
                                onClick={() => setRating(index)}
                            >
                                {index}
                            </button>
                        )
                    })}
</div>

Also, as you can see in the snipet above, I learned how to use the classes in the Animte.css package by reading its documentation.

With this activity I decided to test some basic knowledge of React. In the process I had to learn new methods, research and make my own code to achieve the goal.

One of the first problems was the import of the svg files, from the addresses provided in a json file:

[
  {
    "category": "Reaction",
    "score": 80,
    "icon": "./assets/images/icon-reaction.svg"
  },
  {
    "category": "Memory",
    "score": 92,
    "icon": "./assets/images/icon-memory.svg"
  },
  {
    "category": "Verbal",
    "score": 61,
    "icon": "./assets/images/icon-verbal.svg"
  },
  {
    "category": "Visual",
    "score": 72,
    "icon": "./assets/images/icon-visual.svg"
  }
]

To accomplish this I used the map() method with the Score component and positioned the SVGs in the PUBLIC folder to render them.

  {data.map((data) => {
    return <Score category={data.category} score={data.score} icon={data.icon} />;
    })
  }

In the Score component:

    <img className="score-icon" src={props.icon} alt={`${props.category.toLowerCase()}-icon`}/>

Finally, a reduce() method was used to calculate the total score by reading the data.json file.

function FinalScore(props) {
    return(
        <div className="result-score-container">
            <p className="result-score">
                {Math.floor(props.data.reduce((acc, curr) => acc + curr.score, 0) / props.data.length)}
            </p>
            <p className="of-100">
                of 100
            </p>
        </div>
    );
}

What strategies other than my solution do you use or know to center elements on a web page?