In this Halloween challenge, youâll become a master of the mystical artsâby calling a Cloud API. No crystal ball neededâ just Postman or a bit of code magic.
Call upon the Tarot Card API to draw a card from the deck of fate. Will it predict success, love, or perhaps⊠something more mysterious?
Once you retrieve your card, share the name, its upright meaning, and its reversed meaning. Who knows what fortune (or misfortune) awaits? đź
There are two options for completing this challenge: using Postman, or JavaScript. If you are new to programming, you might find Postman an easier route, but this can be completed either way!
Are you ready to uncover your Halloween fortune? Letâs find out⊠if youâre brave enough!
Option A: Call the Tarot Card API with Postman
Open Postman
Create a new request.
Select âNewâ in the top left hand corner, and then HTTP request.
Select GET as your method.
Paste in your URL: <a href="https://tarotapi.dev/api/v1/cards/random?n=1" target="_blank" rel="noopener nofollow noreferrer">https://tarotapi.dev/api/v1/cards/random?n=1</a>
Send the request by clicking the "Send" button.
Find your fortune in the response!
Example Response:
{
"nhits": 1,
"cards": [
{
"name": "Two of Cups",
"name_short": "cu02",
"value": "two",
"value_int": 2,
"suit": "cups",
"type": "minor",
"meaning_up": "Love, passion, friendship, affinity, union, concord, sympathy, the interrelation of the sexes, and--as a suggestion apart from all offices of divination--that desire which is not in Nature, but by which Nature is sanctified.",
"meaning_rev": "Lust, cupidity, jealousy, wish, desire, but the card may also give, says W., \"that desire which is not in nature, but by which nature is sanctified.\"",
"desc": "A youth and maiden are pledging one another, and above their cups rises the Caduceus of Hermes, between the great wings of which there appears a lion's head. It is a variant of a sign which is found in a few old examples of this card. Some curious emblematical meanings are attached to it, but they do not concern us in this place."
}
]
}</code></span></div></li></ol><p data-renderer-start-pos="2995"><strong data-renderer-mark="true">Bonus</strong>: your API was automatically formatted with “Pretty” JSON code. Try clicking “Visualize” in Postman and watch it magically format your API call into a table!</p><h3 id="Option-B:-Call-the-Tarot-Card-API-with-JavaScript" data-renderer-start-pos="3159">Option B: Call the Tarot Card API with JavaScript <button class="cc-1r0b9w7" type="button" aria-label="Copy link to heading"></button></h3><ol class="ak-ol" start="1" data-indent-level="1"><li><p data-renderer-start-pos="3213"><strong data-renderer-mark="true">Set up your local environment</strong></p><ul class="ak-ul" data-indent-level="2"><li><p data-renderer-start-pos="3247">First, create a folder for this project. You can name it whatever you want, but I named mine <code class="code cc-1tbex3z" data-renderer-mark="true">Fortune Teller.Open your favorite IDE. I like Visual Studio Code.
Create anindex.html file in your IDE.
Write the code to call the API
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tarot Card API Fortune</title>
</head>
<body>
<!-- Text and styling the page -->
<h1>Reveal Your Halloween Tarot Card!</h1>
<button id="drawCardButton">Draw a Card</button>
<p id="cardName"></p>
<p id="meaningUp"></p>
<p id="meaningRev"></p>
<script>
// Function to call the Tarot Card API
function drawTarotCard() {
fetch('https://tarotapi.dev/api/v1/cards/random?n=1')
.then(response => response.json())
.then(data => {
const card = data.cards[0]; // Get the first card
document.getElementById('cardName').textContent = `Card Name: ${card.name}`;
document.getElementById('meaningUp').textContent = `Upright Meaning: ${card.meaning_up}`;
document.getElementById('meaningRev').textContent = `Reversed Meaning: ${card.meaning_rev}`;
})
.catch(error => console.error('Error:', error));
}
// Add event listener to the button
document.getElementById('drawCardButton').addEventListener('click', drawTarotCard);
</script>
</body>
</html>
Run the HTML file
Save the index.html file.
Open the folder where your index.html file is located.
Open the file in your web browser (you may need to double click)!
Draw your Tarot Card
On the webpage, youâll see a button labeled "Draw a Card." Click the button, and it will fetch a random tarot card from the API.
Below the button, youâll see the card name, its upright meaning, and its reversed meaning displayed.
Now youâve conjured your Halloween fortune! Share your fortune below to get your Halloween badge. Keep honing your API skills because weâre brewing up some exciting API improvements. The future is bright, and your Alteryx API wizardry will soon be stronger than ever!