GitHub Fortune Generator

Last updated July 14, 2025

Save

Why GitHub?
🛠️ Step 1: Create a GitHub Account
\📁 Step 2: Make a New Repository
📂 Step 3: Add Your Files
The Files:
index.html
fortunes.json
🔧 Step 4: Enable GitHub Pages
🧪 Step 5: Test It!

Getting Started

Adafruit Playground is a wonderful and safe place to share your interests with Adafruit's vibrant community of makers and doers. Have a cool project you are working on? Have a bit of code that you think others will find useful? Want to show off your electronics workbench? You have come to the right place.

The goal of Adafruit Playground is to make it as simple as possible to share your work. On the Adafruit Playground users can create Notes. A note is a single-page space where you can document your topic using Adafruit's easy-to-use editor. Notes are like Guides on the Adafruit Learning System but guides are high-fidelity content curated and maintained by Adafuit. Notes are whatever you want them to be. Have fun and be kind.

Click here to learn more about Adafruit Playground and how to get started.

Fortune Generator on GitHub, to go with this guide on the Learn system:

https://learn.adafruit.com/smart-cookie-polymer-clay-nfc-fortune-cookie/

If you're into customization (and you probably wouldn't be here if you aren't), this page will show you how to create your own Fortune Generator on GitHub Pages. It's free and easy to set up, and you can add as many custom fortunes as you'd like.

Why GitHub?

We are using GitHub Pages to host a simple little webpage that displays a random, kid-friendly fortune. This site lives entirely in your browser—no backend code or servers needed. When someone scans your NFC cookie, it will open this webpage and pull a new fortune from a list every time. It's free!

🛠️ Step 1: Create a GitHub Account

If you do not already have one, head over to github.com and create a free account.

\📁 Step 2: Make a New Repository

Go to https://github.com/new
Name your repository something like fortune-cookie
Set it to Public
Click Create repository

📂 Step 3: Add Your Files

You’ll need three files. Download the .zip file below. You can open up any file and customize it, adding your own fortunes or font choices.

index.html — displays the fortune
fortunes.json — contains your list of silly, geeky, or magical fortunes

The Files:

index.html

Download File

Copy Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Smart Cookie Fortune</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      font-family: 'Comic Sans MS', cursive, sans-serif;
      background: #fffbe6;
      text-align: center;
      padding: 2rem;
    }
    .fortune {
      font-size: 1.5rem;
      margin-top: 2rem;
      padding: 1.5rem;
      border: 2px dashed #ff9900;
      background: #fffaf0;
      border-radius: 10px;
      display: inline-block;
    }
  </style>
</head>
<body>
  <h1>🥠 Your Smart Cookie Says...</h1>
  <div class="fortune" id="fortune">Loading fortune...</div>

  <script>
    fetch('fortunes.json')
      .then(response => response.json())
      .then(data => {
        const randomFortune = data[Math.floor(Math.random() * data.length)];
        document.getElementById('fortune').innerText = randomFortune;
      })
      .catch(error => {
        document.getElementById('fortune').innerText = "Oops! Couldn't load a fortune.";
        console.error("Error fetching fortune:", error);
      });
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Smart Cookie Fortune</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      font-family: 'Comic Sans MS', cursive, sans-serif;
      background: #fffbe6;
      text-align: center;
      padding: 2rem;
    }
    .fortune {
      font-size: 1.5rem;
      margin-top: 2rem;
      padding: 1.5rem;
      border: 2px dashed #ff9900;
      background: #fffaf0;
      border-radius: 10px;
      display: inline-block;
    }
  </style>
</head>
<body>
  <h1>🥠 Your Smart Cookie Says...</h1>
  <div class="fortune" id="fortune">Loading fortune...</div>

  <script>
    fetch('fortunes.json')
      .then(response => response.json())
      .then(data => {
        const randomFortune = data[Math.floor(Math.random() * data.length)];
        document.getElementById('fortune').innerText = randomFortune;
      })
      .catch(error => {
        document.getElementById('fortune').innerText = "Oops! Couldn't load a fortune.";
        console.error("Error fetching fortune:", error);
      });
  </script>
</body>
</html>

fortunes.json

Edit the fortunes as much as you like, and add as many as you want to create your own custom fortune generator.

Download File

Copy Code

[
  "Your robot friend thinks you're awesome.",
  "You will find a gummy bear in an unexpected place.",
  "A potato will inspire your next big idea.",
  "Someone is building a LEGO castle in your honor.",
  "Today is a great day to make weird sounds.",
  "A wizard approves of your code.",
  "You are 98% stardust and 2% snacktime.",
  "Your pencil is secretly magical.",
  "Beware of invisible llamas. Just kidding. Maybe.",
  "A rainbow has chosen you as its friend.",
]

[
  "Your robot friend thinks you're awesome.",
  "You will find a gummy bear in an unexpected place.",
  "A potato will inspire your next big idea.",
  "Someone is building a LEGO castle in your honor.",
  "Today is a great day to make weird sounds.",
  "A wizard approves of your code.",
  "You are 98% stardust and 2% snacktime.",
  "Your pencil is secretly magical.",
  "Beware of invisible llamas. Just kidding. Maybe.",
  "A rainbow has chosen you as its friend.",
]

🔧 Step 4: Enable GitHub Pages

In your repository, click on the Settings tab
Scroll down to Pages
Under “Source,” choose:
- Branch: main
- Folder: / (root)
Click Save

GitHub will display a URL like:
https://yourusername.github.io/fortunecookies/
Save this—this is what you will write to your NFC tag!

🧪 Step 5: Test It!

Go to that URL in your browser. You should see a styled fortune and a new one every time you reload the page.

If it says “Oops! Could not load a fortune,” double-check that your fortunes.json file is correctly formatted and uploaded.

This page (GitHub Fortune Generator) was last updated on July 14, 2025.