Hey everyone. Welcome to today’s tutorial. In this tutorial, we will learn how to create a cocktail app. To build this app we need HTML, CSS and Javascript.
To get the information required for the app we use ‘The Cocktail DB’ API. So I would suggest this project for people who have basic knowledge of fetch().
If you are looking for more javascript projects with API you can check out this playlist here. This playlist consists of a bunch of javascript apps created with the help of APIs.
Let us take a look at how this app works. The app contains a search box. The user enters the cocktail name of his choice in this input box and clicks on the search button.
When the user clicks on the search button the app displays a bunch of information related to the search cocktail. This information includes the cocktail name, image of the cocktail, ingredients required to prepare it and the instructions to make it.
If the user enters a name that is not present in the API database or is misspelt, the app shows an error saying – ‘Please enter a valid input’.
Also if the user clicks on the search button with an empty input box, the app again displays another error that says – ‘Input cannot be empty’.
Video Tutorial:
If you are interested to learn by watching a video tutorial rather than reading this blog post, you can check out the video below. Also, subscribe to my youtube channel where I post new tutorials every alternate day.
Project Folder Structure:
Before we start coding let us take look at the project folder structure. We create a project folder called – ‘Cocktail App’. Inside this folder, we have three files. These files are index.html, style.css and script.js.
HTML:
We start with the HTML code. First, copy the code below and paste it into your HTML document.
<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Cocktail App</title> <!-- Google Font --> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet" /> <!-- Stylesheet --> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="container"> <div class="search-container"> <input type="text" placeholder="Type a cocktail name..." id="user-inp" value="margarita" /> <button id="search-btn">Search</button> </div> <div id="result"></div> </div> <!-- Script --> <script src="script.js"></script> </body> </html>
CSS:
Next, we style this app using CSS. For this copy, the code provided to you below and paste it into your stylesheet.
* { padding: 0; margin: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; } body { height: 100vh; background: linear-gradient(#5372f0 50%, #000000 50%); } .container { position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; width: 90vw; max-width: 37.5em; background-color: #ffffff; padding: 1.8em; border-radius: 0.6em; box-shadow: 0 1em 3em rgba(2, 9, 38, 0.25); } .search-container { display: grid; grid-template-columns: 9fr 3fr; gap: 1em; margin-bottom: 1.2em; } .search-container input { font-size: 1em; padding: 0.6em 0.3em; border: none; outline: none; color: #1f194c; border-bottom: 1.5px solid #1f194c; } .search-container input:focus { border-color: #5372f0; } .search-container button { font-size: 1em; border-radius: 2em; background-color: #5372f0; border: none; outline: none; color: #ffffff; cursor: pointer; } #result { color: #575a7b; line-height: 2em; } #result img { display: block; max-width: 12.5em; margin: auto; } #result h2 { font-size: 1.25em; margin: 0.8em 0 1.6em 0; text-align: center; text-transform: uppercase; font-weight: 600; letter-spacing: 0.05em; color: #1f194c; position: relative; } #result h2:before { content: ""; position: absolute; width: 15%; height: 3px; background-color: #5372f0; left: 42.5%; bottom: -0.3em; } #result h3 { font-size: 1.1em; font-weight: 600; margin-bottom: 0.2em; color: #1f194c; } #result ul { margin-bottom: 1em; margin-left: 1.8em; display: grid; grid-template-columns: auto auto; } #result li { margin-bottom: 0.3em; } #result p { text-align: justify; font-weight: 400; font-size: 0.95em; } .msg { text-align: center; } @media screen and (max-width: 600px) { .container { font-size: 14px; } }
Javascript:
Lastly, we implement the functionality using Javascript. Now copy the code below and paste it into your script file.
let result = document.getElementById("result"); let searchBtn = document.getElementById("search-btn"); let url = "https://thecocktaildb.com/api/json/v1/1/search.php?s="; let getInfo = () => { let userInp = document.getElementById("user-inp").value; if (userInp.length == 0) { result.innerHTML = `<h3 class="msg">The input field cannot be empty</h3>`; } else { fetch(url + userInp) .then((response) => response.json()) .then((data) => { document.getElementById("user-inp").value = ""; console.log(data); console.log(data.drinks[0]); let myDrink = data.drinks[0]; console.log(myDrink.strDrink); console.log(myDrink.strDrinkThumb); console.log(myDrink.strInstructions); let count = 1; let ingredients = []; for (let i in myDrink) { let ingredient = ""; let measure = ""; if (i.startsWith("strIngredient") && myDrink[i]) { ingredient = myDrink[i]; if (myDrink[`strMeasure` + count]) { measure = myDrink[`strMeasure` + count]; } else { measure = ""; } count += 1; ingredients.push(`${measure} ${ingredient}`); } } console.log(ingredients); result.innerHTML = ` <img src=${myDrink.strDrinkThumb}> <h2>${myDrink.strDrink}</h2> <h3>Ingredients:</h3> <ul class="ingredients"></ul> <h3>Instructions:</h3> <p>${myDrink.strInstructions}</p> `; let ingredientsCon = document.querySelector(".ingredients"); ingredients.forEach((item) => { let listItem = document.createElement("li"); listItem.innerText = item; ingredientsCon.appendChild(listItem); }); }) .catch(() => { result.innerHTML = `<h3 class="msg">Please enter a valid input</h3>`; }); } }; window.addEventListener("load", getInfo); searchBtn.addEventListener("click", getInfo);
That’s it for this tutorial. If you face any issues while creating this code you can download the source code by clicking on the ‘Download Code’ button. Also, I would love to hear from you guys, so if you have any queries, suggestions or feedback you can comment below.