The cluedo challenge is all about getting to now JavaScript by creating and manipulating objects, creating arrays and manipulating the DOM.
For this challenged I started with the styling. Even though it was about JavaScript I needed that to get a clearer view of what I wanted to happen and when. In CSS I used an animation for the flickering letter in the header and the loader. I used flexbox to align the text and buttons in the mystery reveal section.
In JavaScript I used objects and arrays to sort the different elements on the page. For the fake loader I used a timeout method to delay the events in the event handlers. I also managed to implement one function to handle the loading and delay for all three cards. At the end I added a reload button that reloads the page to clear the cards so the user can start over.
With more time I would have aligned the buttons somewhat differently. For some reason I didn't get the flexbox to work just the way I wanted to. I would also have styled the info on the cards a little differently. It would have been interesting to try out and handle the cards as forms instead of an article to get the information such as Age: / Favorite weapon: etc to show in a different way. For now it's hardcoded in the only place I used it with the info.