Out of Thyme! was created as a project for the OSU 2019 Summer Hackathon with the theme being "Time".

We wanted to create a web application for cooking that made the actual execution of a recipe easier. To save each user time, the recipe directions would display in an easy-to-manage list, and timers would be set automatically for the user.

Out of Thyme! was built with HTML5, CSS3, Bootstrap4, jQuery, JavaScript, Google Firebase, and Google's Web-Speech API.

Features

One of the key features of Out of Thyme! is the application's ability to automatically set timers for the user. No more fumbling around with that confusing timer built into your oven or microwave. Just check each step off as you prep and cook, and the timer will be set automatically for you. Feel free to pause, reset, and start the timer again as your cooking situation changes!

Thanks to Google, Out of Thyme! features the Web-Speech-API for each direction, as well a database and site hosted on Firebase. The Web-Speech-API allows for the audio transmission of each step as home-cooks complete each step. Utilizing Cloud Firestore, we were able to create a scalable database where we could easily expand the number of recipes in the future.

The styling of Out of Thyme! was designed to be minimalistic, informative, and modern. We wanted you to feel like you were at home, in a clean kitchen, ready-to-cook. The web application features a landing page with animations, fading in and out as the user enters the main site. The navigation bar on top remains fixed with the background as the user scrolls throughout the main page. Users can select the Home link to redirect back to the landing page, or the About link to open a modal with a project description and author bios. All of the features were designed to be simple, functional, and aesthetically clean.

Challenges/Problems Solved

The main challenge that was encountered was how the timer functionality for pausing, starting, and resetting would be implemented. This was a bit complicated at times, as we needed to keep track of the end time for the timer, and update it whenever the timer was paused and restarted. We also needed to stop and clear the timer out properly if the user started a new timer before the old one completed. Pausing, re-starting, and resetting the timer overall posed a challenge because of the many pieces that needed to be kept track of. Creating a Timer object to encapsulate this logic and its related methods helped to keep the code organized and readable.

Another large challenge included how the recipe steps would be displayed for the user in a list. We decided to use an array of objects to store the recipe steps. From there, we decided to display each step with a checkbox input so that the app could easily keep track of which step the user had most recently completed. This allowed us to determine when we needed to prompt the user to start a timer, or have our text-to-speech technology read the next step aloud.

A styling/layout challenge we faced included getting the landing page and the modal to work together nicely. The z-index of each caused some bugs including having the About modal appear behind the landing page if it had not been dismissed. This was solved by setting the z-index of each to be relative to one another.

The landing page itself presented some animation/content-centering/hiding issues that were resolved by creating a CSS class .landing-page. This class included styles to cover the page and setting the z-index higher than all of the elements of the main page.

Utilizing Firestore and structuring the database in a way that fit our needs was a challenge. Firestore only supports shallow queries, so we were unable to include a separate subcollection with directions in each recipe document. We ended up creating a separate 'directions' collection, where each document was a different step with the recipe it was a part of (used in the query), and a step number to sort by.

Contributions

Elizabeth Tackett: "I worked on a lot of the JavaScript code for the project. Specifically, some of what I worked on was the functions that track the user's progression through the recipe steps, prompt the user about whether to start a timer, and the implementation of the pause and reset buttons associated with the timer."

Karen Berba: "I worked on creating the timer (using HTML/CSS/Javascript) for the web application. It was my first time using Javascript, so it was definitely a learning opportunity in terms of getting the timer functionality to work! I also came up with the initial idea for the web app."

Mae LaPresta: "I worked on utilizing firebase for hosting the website, creating the recipe db in firestore, and implementing/utilizing the queried data on the client side. I also worked on adding the Web-Speech-API so that the user would have the next direction read to them."

Jay Lin: "I worked mainly on the Front-End layout (HTML5) and styling (CSS3, Bootstrap) for this project. My main contributions were styling the landing page, main page, navbar, and body. I worked on a fade-out, fade-in animation for the landing page, modal for the About link, and lots of text/background styling!"

Sources

https://getbootstrap.com/ https://jquery.com/ https://firebase.google.com/ https://w3c.github.io/speech-api/ https://fontawesome.com/icons/utensils?style=solid https://fonts.google.com/ https://www.tasteofhome.com/recipes/great-grandma-s-italian-meatballs/

Assets

http://wallpaperswide.com/thyme_herb-wallpapers.html

Tip

To view the latest version hosted on Firebase, please ensure that your browser cache has been cleared. Apologies for the inconvenience!

Share this project:

Updates