HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Random Quote Machine Project</title>
<link href="styles.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
<div class="grid-container border border-dark border-opacity-10 shadow p-3 mb-5 bg-body-tertiary rounded bg-primary-subtle" id="quote-box">
<div id="grid-item1" class="">
<div id="text" class=""></div>
<div id="author"></div>
</div>
<div id="grid-item2"></div>
<div id="grid-item3">
<button id="new-quote" class="btn btn-dark shadow-sm">New Quote </button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<script src="script.js"></script>
</body>
</html>
CSS:
*{
margin:0;
padding:0;
}
body{
height:100vh;
display:flex;
justify-content:center;
align-items:center;
}
.grid-container{
display:grid;
width:500px;
height:300px;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
#grid-item1{
grid-column:span 2;
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
}
#text{
margin-top:60px;
width:400px;
height:70px;
border:1px solid black;
}
#author{
margin-top:10px;
width:200px;
height:25px;
border:1px solid black;
flex-direction:flex-end;
}
#grid-item3{
display:flex;
justify-content:center;
align-items:center;
}
JAVASCRIPT:
type const url = 'https://spoonacular-recipe-food-nutrition-v1.p.rapidapi.com/recipes/guessNutrition?title=Grilled%20Chicken%20Salad';
const options = {
method: 'GET',
headers: {
'x-rapidapi-key': '2fd4c873efmsh5114e1996d83311p1ae0c3jsn2e2bc8221dca',
'x-rapidapi-host': 'spoonacular-recipe-food-nutrition-v1.p.rapidapi.com'
}
};
try {
const response = await fetch(url, options);
const result = await response.text();
console.log(result);
} catch (error) {
console.error(error);
}or paste code here
Hello, so I’m in the Frontend projects to make a random quote generator. I’m trying to implement a quote API that I obtained from RapidAPI website. In the javascript section, I included the code provided by RapidAPI but it didn’t work for me. I tried to look up help on their website which led to a video but it didn’t help me. I also checked on other resources for help on how to implement the API from rapidapi but I wasn’t successful. I’m still learning about APIs. The one I learned from freecodecamp’s last modules in the javascript course “Learn fetch and promises by building an fcc authors page” showed me a general layout of how a fetch looks like. The code I received from Rapidapi looked quote different, including a try statement.
If anyone can help me implement this API that would be greatly appreciated!