Ask-Sothoth is the culmination of two of my favourite things: Unspeakable Eldritch horrors that lurk on the fringes of human imagination, and the complete removal of culpability. I wanted to create an app that had simple interaction mechanics, could be visually interesting, and included a sense of randomness. I thought about a magic 8-ball and how you can ask it a question and it gives you one of a set of answers. It covered everything - simple interaction in the form of asking and shaking, gives a random answer each time, and it's got the visual aspect to it.
I knew that, at a minimum, the app had to have an input bar for any users to type in their questions, had to have a button to generate an answer for the users' question, and had to generate the answers themselves. Knowing the necessary mechanics of the app gave me insight into the languages that would make sense to use - The input bar and button could be created in HTML, the answers could be generated using vanilla JavaScript, and the designs could be covered with some CSS wizardry.
When it came to the design, I didn't just want to create the typical black sphere with a hole that generated answers. I wanted something eye catching, and while I knew buttons can be more flexible with creativity, I knew that there was no getting around having to include the standard horizontal input bar. So I dipped into my influences and experiences to try and give it a unique artistic twist, while at the same time taking functionality and accessibility into account.
The idea of a godlike being answering mundane questions gave the overall concept some charm and flair, so I chose to use one of H.P.Lovecraft's creations, Yog-Sothoth as a stand in for the ball. The Ask Jeeves idea came from wanting to parody old search engines, it also helped pave the way for the layout, giving me the idea to make something resembling the old logo, with the butler, Jeeves next to the input bar. The naming of the app felt like a no-brainer - Ask-Sothoth: an amalgamation of Yog-Sothoth and Ask Jeeves.
I knew that it would make sense to use CSS Grid for the layout, and despite the simplicity of the layout, I was initially reluctant to use it as I wasn't particularly competent at utilising it. Thankfully, I gave it a go, and after some serious toying with the code, I got to understanding it a lot better. Once I got to grips with it, it was only a matter of finding the smoothest way to transition the layout from horizontal to vertical using media queries to accommodate the main 3 screen types (desktop, iPad, and mobile repectively).
The next major port-of-call was to implement JavaScript to generate the answers. I wrote down all the possible answers, compiled them into an array and had them generate on-screen through an event listener (the button). To add more nuance, I made the event listener into an if/else statement so users would have to ask something, have to end their question with a "?", and questions asked twice would be stored in order to produce the same answer. The font I used for the input bar had no numbers, so I added a RegEx function to disable numerical values, and finally, I created another array filled with sound files that would emulate a voice for Ask-Sothoth on answering a question.
Overall I'm OK with the way the whole thing turned out. Sure, it could look a bit more visually impressive, and as my confidence builds with CSS I'll likely revisit this app and tweak it. One thing I'd like to do is animate Ask-Sothoth by making it a .gif file instead of a static .jpeg image. But in terms of what I was aiming to create - a simple app with easy functionality that's visually interesting and is responsive over different platforms, this was a success.