by Vinay Ranjan
Responsive Voice API - It allows you to transform any text into speech.
Count API - It gives you the ability to create numeric counters and track the number of times a page was visited.
FreeToGame API - It is totally free and gives you access to a database API that curates the best games that are free to play.
JSON Placeholder - Free fake API for testing and prototyping.
Fake Store API - Fake store rest API for your e-commerce or shopping website prototype.
Unsplash API - It is a modern JSON API that surfaces all the info you’ll need to build any user experience.
Example of the Unsplash API
Coingecko - Powered by the world’s largest independent crypto data aggregator.
MovieDB API - It gives you all the data you need to create a full featured movie app.
NASA APIs - It give you the access of different types of data about astronomy, space weather, Moon, Mars, and much more.
They Said So Quotes API - They Said So Quotes API offers a complete feature rich REST API access to its quotes platform.
Quote Garden - Quote Garden is a free and open source quote generator.
Random User Generator - A free, open-source API for generating random user data. Like Lorem Ipsum, but for people.
Frankfurter - It allows you to get currency data and track available exchange rates.
MealDB API - It gives you data about the ingredients of the meal, images, categories, meal videos, and much more.
Example of the MealDB API
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Random Meal - Generator</title>
<link rel="stylesheet" href="./main.css" />
</head>
<body>
<div class="container-meal">
<div class="text-center">
<h3 class="text-center__heading">Feeling Hungry ?</h3>
<h3 class="text-center__subheading">Get a meal by clicking below</h3>
<button class="button-primary" id="get_meal">Get Meal 🍔</button>
</div>
</div>
<div id="meal" class="row meal"></div>
<!--scripts-->
<script src="./jquery-3.6.0.js"></script>
<script src="./main.js"></script>
<!--End of scripts-->
</body>
</html>* {
box-sizing: border-box;
}
body {
background-color: rgb(59, 59, 152);
color: rgb(255, 255, 255);
display: flex;
font-family: "Nunito", sans-serif;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
padding: 10px;
}
.getMeal-wrapper {
&__container {
display: flex;
justify-content: space-between;
margin-top: 40px;
&__container1 {
&--image {
height: 500px;
width: 500px;
}
&--details {
p {
margin-bottom: 10px;
color: white;
letter-spacing: 1px;
margin-top: 10px;
}
}
&--subdetails {
margin: 10px 0;
color: white;
.ingredients-heading {
margin-top: 30px;
}
ul {
li {
margin-bottom: 0;
color: white;
}
}
}
}
&__container2 {
width: 710px;
margin-left: 30px;
&--description {
h4 {
color: white;
font-size: 25px;
}
p {
margin-bottom: 5px;
color: white;
}
}
&--videoWrapper {
margin-top: 100px;
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
color: white;
h5 {
margin: 10px 0;
color: white;
}
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
}
}
}
.seperator {
border: solid 1px #e4e2eb;
width: 445px;
height: 1px;
margin-bottom: 20px;
margin-top: 40px;
margin-left: 380px;
}
.text-center {
text-align: center;
&__heading {
margin: 20px;
color: white;
}
&__subheading {
margin: 10px;
color: white;
margin-top: 10px;
}
}
.button-primary {
width: 150px;
height: 50px;
border-radius: 20px;
font-family: "Nunito", sans-serif;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 2.5px;
font-weight: bold;
margin-top: 10px;
border: none;
outline: none;
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease 0s;
&:hover {
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
transform: translateY(-7px);
cursor: pointer;
}
}const getMealBtn = $("#get_meal");
const mealContainer = $("#meal");
$(document).ready(function () {
getMealBtn.on("click", () => {
$.ajax({
type: "GET",
url: "https://www.themealdb.com/api/json/v1/1/random.php",
dataType: "json",
success: function (res) {
createMeal(res.meals[0]);
},
error: function () {
console.log("Something wrong occurred...");
},
});
});
});
function createMeal(meal) {
const ingredients = [];
for (i = 1; i <= 20; i++) {
if (meal[`strIngredient${i}`]) {
ingredients.push(`${meal[`strIngredient${i}`]} -
${meal[`strMeasure${i}`]}`);
} else {
break;
}
}
function tgs(tgs) {
if (tgs) {
return tgs.split(",").join(", ");
}
}
var dataItems = `<div class="getMeal-wrapper">
<div class="seperator"></div>
<div class="getMeal-wrapper__container">
<div class="getMeal-wrapper__container__container1">
<img class="getMeal-wrapper__container__container1--image"src="${
meal.strMealThumb
}" alt="Meal Image"/>
<span class="getMeal-wrapper__container__container1--details">
<p><strong>Category: ${meal.strCategory}</strong></p>
<p><strong>Area: ${meal.strArea}</strong></p>
<p><strong>Tags: ${tgs(meal.strTags)}</strong></p>
</span>
<span class="getMeal-wrapper__container__container1--subdetails">
<h5 class="ingredients-heading">Ingredients</h5>
<ul>
${ingredients
.map(
(ingredient) => `
<li>${ingredient}</li>
`
)
.join("")}
</ul>
</span>
</div>
<div class="getMeal-wrapper__container__container2">
<div class="getMeal-wrapper__container__container2--description">
<h4>${meal.strMeal}</h4>
<p>${meal.strInstructions}</p>
</div>
<div class="getMeal-wrapper__container__container2--videoWrapper">
<h5>Video Recipe</h5>
<iframe src="https://www.youtube.com/embed/${meal.strYoutube.slice(
-11
)}"/>
</div>
</div>
</div>
</div>
`;
mealContainer.html(dataItems);
}Weatherstack - Get Realtime & Historical World Weather Data.
Faker API - It is a collection of completely free APIs that can be used to generate fake data.
Words API - Get random words.
Email Validation & Verification - Email Validation & Verification JSON API for Developers.
News API - Get top headlines, breaking news, and articles from around the world.
Weather API - Get weather data, forecasts, and more.
Screenshot API - Get Screenshots of any website.
Note : This post is a continuous work in progress.