All solutions

I enjoyed this challenge. My solution makes nice use of timings to render elements on the 'Result' page in order, but I stumbled into one main issue:

Updating the score doesn't happen until the 'Play Again' button is hit. This is because I couldn't figure out a way to update state and rerender the scoreboard component (to reflect the new score) without also re-rendering the main component. My solution is such that whenever the main component is rendered, a new random weapon is chosen for the house. I looked into ComponentShouldUpdate() and React.memo but ultimately didn't implement them.

Also had a few minor issues with styling on mobile, but fixed these (for the most part) using the Bootstrap grid 'order' classes. The main styling feature I bypassed was the 'depth' of the circles - I think this can be handled via box-shadow css.

Any feedback welcome.

There are a couple of known bugs which I'd appreciate any comments about:

1. When navigating 'Back' to the root directory from a country-specific page, the app breaks. I'm unsure about my implementation of the different routes - it seems the whole page reloads when a 'border' button is hit. I've seen other solutions which only re-render the flag/text etc, making for a much smoother experience. How would I do this?

2. When searching for a country and only returning one card (eg 'France') the card aligns to the right of the page. I used Semantic UI with the className 'ui centered card' but it aligns to the right. Ideally the card would be left-aligned.

Thanks

Skipped the mobile version because wanted to focus on the functionality of the tabbed features, accordion and email validation rather than media query styling.

Tried to avoid using pre-packaged code and instead used React state to handle the functionality.

This was my first challenge using Bootstrap but actually only used it for a few elements - the sections and the button. I was unsure how to group all three sections together so ended up having to apply the border-radius to three sections when surely it would have been easier to apply it to just one.

Also used media queries for the first time for the mobile version.

Feedback welcome!

This is my very first challenge, having only learnt HTML/CSS this week. I only did the desktop version.

I initially created a div for each of the four boxes so I could style them all at once, but ran into issues when it came to positioning the divs for the individual boxes - not sure if this was a sensible approach? I ended up using four separate divs and replicating the styling for all of them, so my code could probably have been more efficient.