Python 3 Flask CocktailDB API Project to Find Random Cocktails or Soft Drinks Web App Full Project For Beginners

 

 

The Cocktail App

A web app where you can lookup random cocktails

Description

Requirements

Just run pip install -r requirements.txt and you’re good to go

How to use

 

 

main.py

 

 

from website import create_app

app = create_app()

if __name__ == "__main__":
	app.run(debug=True)

 

 

views.py

 

 

from flask import Blueprint, render_template
import requests

views = Blueprint('views', __name__)

@views.route('/')
def home():
	data = requests.get('https://www.thecocktaildb.com/api/json/v1/1/random.php').json()
	name = data['drinks'][0]['strDrink']
	image = data['drinks'][0]['strDrinkThumb']
	ingredients = []
	measures = []
	instructions = data['drinks'][0]['strInstructions']
	for i in range(1, 16):
		ingredients.append(data['drinks'][0][f'strIngredient{i}'])
		measures.append(data['drinks'][0][f'strMeasure{i}'])
	return render_template("home.html", name=name, image=image, ingredients=ingredients, measures=measures, instructions=instructions)

 

 

__init__.py

 

 

from flask import Flask

def create_app():
	app = Flask(__name__)
	app.config['SECRET_KEY'] = 'jskdgcjlkhcasjlhdcnls'

	from .views import views

	app.register_blueprint(views, url_prefix = '/')

	return app

 

 

home.html

 

 

{% extends "base.html" %}
{% block title %}Home{% endblock %}

{% block content %}
<h1 align="center">{{ name }}</h1>
<div align="center">
	<img src="{{ image }}">
</div>
<br />
<div>
	<ul class="list-group list-group-flush">
		{% for i in range(15) %}
		{% if ingredients[i] != None and ingredients[i] != '' %}
		<li class="list-group-item">
			{{ ingredients[i] }} :: {{ measures[i] }}
		</li>
		{% endif %}
		{% endfor %}
	</ul>
</div>
<hr />
<div>
	{{ instructions }}
</div>
<br />
{% endblock %}

 

See also  Python 3 Script to Launch Web Browser Using webbrowser Module Full Project For Beginners

 

base.html

 

 

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
      integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
      crossorigin="anonymous"
    />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
      crossorigin="anonymous"
    />
	<title>{% block title %}Home{% endblock %}</title>
</head>
<body>
	<div class="container">
		{% block content %}{% endblock %}
	</div>

	<script
      src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
      integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
      integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
      integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
      crossorigin="anonymous"
    ></script>
</body>
</html>

 

DOWNLOAD FULL SOURCE CODE

 

Leave a Reply