Edamam Recipe Search API and Javascript: Part 1
4 min readNov 1, 2023
Hi! We have seen a simple API fetch using JavaScript in my previous post. Now let’s take a little bigger one and create a simple website based on that. We have taken the Edamam Recipe Search API and retrieved the data using Javascript to display on the webpage.
You can find the complete code of this project here on GitHub.
Sign up for Edamam Recipe Search API
The first step would be to sign up on the edamam website to access the recipe search API. It can be accessed here. After signing up, get your ‘Application ID’ and ‘Application Keys’. These can be viewed from the Applications tab in your dashboard. Now let’s dive into the coding part.
Start Coding
Let’s start with the boiler HTML code. Since I am lazy and a fan of Bootstrap, I will use it here for styling.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<script…