rebecca-shoptaw / ask-oscar-wilde

Magic 8 ball style site where Oscar Wilde quotes appear in response to user predicaments. 🐦‍⬛🥂

Ask Oscar Wilde 🐦‍⬛🥂

A Magic 8 ball style site where Oscar Wilde quotes appear in response to user predicaments.

Live Site

Background & Mission

The idea behind Ask Oscar Wilde was twofold: first, to bring back some of the fun, simple, carefree energy of the minigames of the early internet -- something I'm trying to do in a number of my projects -- and second, to bring the delightful work of Oscar Wilde to new audiences in a fun and surprising manner.

Built With

UI Walkthrough

The current version of the UI is very straightforward -- the user sees an empty autofocused input box where they are encouraged to enter a predicament, and when they click "Submit", a random Oscar Wilde quote is generated as a response.

If the user hits submit again, they will see a fresh quote, but if they try to hit submit without entering a predicament, Oscar will ask "Why won't you tell me what's troubling you??"

If they select "New Predicament", the input will clear, and Oscar will ask what else he can help with.

Implementation

The implementation is quite straightforward as well -- just about everything happens within the AskOscar component, and relies on two simple functions -- newQuote and clearInput -- and two state values, one to store the user input and one to store the current Oscar Wilde quote.

The newQuote function, which fires when the user hits "Submit," checks to determine that there is a user input, then selects a random quote from the oscarQuotes array, stored separately:

const newQuote = () =>
    input == ""
      ? setQuote("Why won't you tell me what ails you??")
      : setQuote(oscarQuotes[Math.floor(Math.random() * oscarQuotes.length)]);

The clearInput function, which fires when the user hits "New Predicament," resets the user input and Oscar quote, and refocuses on the input using a useRef hook:

 const clearInput = () => {
    setInput("");
    setQuote("With what else may I assist you?");
    inputRef.current?.focus();
  };

Next Steps

• Redo styling using SASS
• Replace remaining Bootstrap classes with SASS code
• Use meta and Schema.org tags to improve SEO
• Reorganize app using custom hooks and sub-components
• Use GSAP to create a fun quote loading and reveal animation
• Add a test suite via Jest

License

Distributed under the MIT License. See LICENSE.txt for more information.

Contact

Rebecca Shoptaw - email | linkedin