TomatoTeam Project

AlcoholFinder

Overview:

We have created a quiz to help pair users with alcohol that suits their tastes. We begin by asking the user if they're 21 or older. If the user is under 21, they are provided an array of non-alcoholic choices. For users over 21, they are given options of liquor, wine and beer. For liquor, the user is given the options of several types of liquor to choose from, and from there is given a large assortment of drinks made from that. For beer and wine, the user is given the option of what type of food they want to pair with their drink. Based off that choice, we give the user drinks that would pair well with their food.

The Team:

Daniel Dolan

Primary team role: Javascript and Quiz functionality.

Alex Plaetzer

Primary team role: HTML and CSS styling.

Diego Rivera

Primary team role: API calls, HTML and CSS styling.

Tools used in the project:

Languages:

HTML
CSS
JavaScript

Other:

Ajax
JSON

APIs

The CocktailDB API for Cocktails - https://www.thecocktaildb.com/
Spoonacular API for Wine Pairing -https://spoonacular.com/food-api
The PunkAPI for Beer - https://punkapi.com/

Base Objectives:

Ask the user which type of alcholic drink they would like: beer, wine, or cocktail. Then, they will answer one other question based on the alcoholic drink chosen to narrow down the results.
Have the corresponding API be called based on the choice.
Return the results to the page in the form of cards.
An about us page that links to our contact info.
Make the quiz responsive on smaller/mobile devices.

Flex Goals Completed:

Random choices: We added a feature that allows for a random choice in each alcohol type as well as a suprise me that will pick a random alcohol type as well.
Change the background with the corresponding alcohol type chosen.

Stretch Goals Future

Drink/Food Delivery with Postmates API Under Construction - we hope to revisit this feature after we learn how to use Node. We ran into a problem while making this in making a request which required a back-end. A fetch request or using Postman would not allow us to dynamically send requests based on the users drink results.

Challenges & Solutions:

Some of the biggest challenges we faced with this project build included:

Challenge: Making the quiz change dynamically while also keeping track of the user's choices.
Solution: We used a class object to keep track of the user's choices and ran a loop based on an array of questions to fill the quiz questions.

Challenge: Finding the right questions that would fit in with what the API provided.
Solution: We first looked at the documentation of each API before creating our quiz, and we found that type of liquor (vodka, gin, etc.) was best for the CocktailDB and food pairing worked best with the other APIs.

Challenge: The Spoonacular API did not have a random wine request option.
Solution: We created an array of common wine types and ran a random number generation each time to select a random wine from the array. Then, Spoonacular would provide a wine recommendation based on the type of wine.

Code Snippets:

This snippet showcases how we dynamically create fetch parameters using the user's choices.

finCheck() {
      // Method that runs to check if a quiz tree is finished.
      if (parseInt(this.innerTree) > 0) {
        let fetchParam = 0;
        if (questions[this.drinkTree]["qs"][this.innerTree] == "Random") {
          // Checks if the choice on an inner drink tree is random.
          let randomSel = randomNum(
            1,
            questions[this.drinkTree]["qs"]["length"] - 1
          );
          // Generates a random choice in the chosen drink tree
          fetchParam = questions[this.drinkTree]["qs"][randomSel];
        } else {
          // The fetch becomes the choice of the user.
          fetchParam = questions[this.drinkTree]["qs"][this.innerTree];
        }
        // The results div is shown, so the results can fill it.
        $("#results").show();
        $(".navbar").css("margin-bottom", "20px");

This snippet shows how we changed from the choice in alcohol to the chosen drink tree.

$("#heading").text(Qans["qs"]["heading"]);
      // Changes the question for the next part of the quiz tree based on choice.
      let quiz = $("#quiz");
      // The quiz display is selected and emptied.
      quiz.empty();
      if (Qans["name"] != "Aged") {
        //Checks if the quiz questions being called are not the initial drink tree questions and appends the drink trees corresponding picture.
        quiz.append(`<img width="300px" src=${Qans["image"]}></img>`);
      }
      for (let i = 1; i <= Qans["qs"]["length"]; i++) {
        //Appends the questions that are in the chosen drink tree based on how many questions there are.
        quiz.append(`<label
        id="q${i}"
        class="element-animation1 btn btn-lg btn-primary btn-block"
        ><span class="btn-label"
          ><i class="glyphicon glyphicon-chevron-right"></i
        ></span>
        <input type="radio" name="q_answer" value="${i}" />${Qans["qs"][i]}</label
      >`);
      }

This snippet shows how we track the newly placed quiz questions and directs the next questions based on the user's choice.

if (qBase.drinkTree < 1) {
        //Checks if there has been a drink tree chosen yet.
        $("label.btn").on("click", function() {
          var choice = $(this)
            .find("input:radio")
            .val();
          $("#loadbar").show();
          $("#quiz").fadeOut();
          // Animation with a loading bar and hides the quiz while this occurs.
          setTimeout(function() {
            $("#answer").html($(this).checking(choice));
            $("#quiz").show();
            $("#loadbar").fadeOut();
          }, 1500);
          qBase.drinkTree = choice;
          // Changes the drinkTree to what the quiz taker has chosen.
          $("#bg").attr("src", questions[qBase.drinkTree]["backgroundimage"]);
          // Changes the background of the quiz based on the drinkTree chosen. I.e. beer, wine, or liquor.
          $("#credits").html(questions[qBase.drinkTree]["credits"]);
          //Photo credits.
          nextQ(questions[qBase.drinkTree]);
          //Calls the next questions based on the drinkTree chosen.
        });

daniel1dolan/AlchoholMatcher