All solutions

My second take on this challenge. I am still using localStorage, but this time I managed states using reducers and context.

It was hard to implement but it looks much cleaner now.

It was built with React and Next, but I'm not so happy with the results.

The code looks almost spaghetti with all the detours I had to take to use localStorage and make the components interact with each other. Any feedback would be appreciated.

Matching the height of the images with the text was hard until I discovered object-fit.

background-size: cover was very helpful aswell.

As a challenge, I used web components to tackle the creation of each section of the summary. It was hard...

I think Web components are a very powerful tool, but the module feels like a work in progress. It is a bit hard to do simple tasks using it, and it seems very error prone too. Maybe things would be easier if I used web components with templates. Well, I learnt something new.

I did my best on positioning the svg images, but they still were floating here and there, specially in the desktop version. I might retake this later.

Any suggestion would be appreciated.

Update: I took another approach and it felt nicer, but it is still a bit weird.

I did some small tweaks to my solution. I also put the script in a dedicated file.

I think this would be well suited for a component-based approach but I wanted to challenge myself to do it without components.

Script is inline because I did not have the time to refactor.