[{"element_type":"text","content":"\n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n        \u003cp\u003eFortune Generator on GitHub, to go with this guide on the Learn system:\u003c/p\u003e\n\u003cp\u003e\u003ca href=\"https://learn.adafruit.com/smart-cookie-polymer-clay-nfc-fortune-cookie/\"\u003ehttps://learn.adafruit.com/smart-cookie-polymer-clay-nfc-fortune-cookie/\u003c/a\u003e\u003c/p\u003e\n      \n\n\n\n\n\n\n\n\n\n","metadata":{}},{"element_type":"text","content":"\n  \n  \n  \n  \n  \n  \n  \n  \n        \u003cp\u003eIf 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.\u003c/p\u003e\n\u003ch3\u003eWhy GitHub?\u003c/h3\u003e\n\u003cp\u003eWe 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!\u003c/p\u003e\n\u003ch3\u003e🛠️ Step 1: Create a GitHub Account\u003c/h3\u003e\n\u003cp\u003eIf you do not already have one, head over to\u003cspan\u003e\u0026nbsp;\u003c/span\u003e\u003ca class=\"\" href=\"https://github.com/\" target=\"_new\"\u003egithub.com\u003c/a\u003e\u003cspan\u003e\u0026nbsp;\u003c/span\u003eand create a free account.\u003c/p\u003e\n      \n\n\n\n\n\n\n\n","metadata":{}},{"element_type":"user_image","content":"https://cdn-learn.adafruit.com/user_assets/assets/000/001/917/original/github.jpg?1752099207","metadata":{}},{"element_type":"text","content":"\n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n  \n        \u003ch3\u003e\n\u003cspan\u003e\\\u003c/span\u003e\u003cspan\u003e📁 Step 2: Make a New Repository\u003c/span\u003e\n\u003c/h3\u003e\n\u003col\u003e\n\u003cli\u003e\n\u003cp\u003eGo to\u003cspan\u003e\u0026nbsp;\u003c/span\u003e\u003ca class=\"\" href=\"https://github.com/new\" target=\"_new\"\u003ehttps://github.com/new\u003c/a\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003eName your repository something like\u003cspan\u003e\u0026nbsp;\u003c/span\u003e\u003ccode\u003efortune-cookie\u003c/code\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003eSet it to\u003cspan\u003e\u0026nbsp;\u003c/span\u003e\u003cstrong\u003ePublic\u003c/strong\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003eClick\u003cspan\u003e\u0026nbsp;\u003c/span\u003e\u003cstrong\u003eCreate repository\u003c/strong\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ol\u003e\n      \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n","metadata":{}},{"element_type":"user_image","content":"https://cdn-learn.adafruit.com/user_assets/assets/000/001/918/original/gh_add_file.jpg?1752099234","metadata":{}},{"element_type":"text","content":"\n  \n        \u003ch3\u003e📂 Step 3: Add Your Files\u003c/h3\u003e\n\u003cp\u003eYou’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.\u0026nbsp;\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003cp\u003e\u003cstrong\u003eindex.html\u003c/strong\u003e\u003cspan\u003e\u0026nbsp;\u003c/span\u003e— displays the fortune\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003e\u003cstrong\u003efortunes.json\u003c/strong\u003e\u003cspan\u003e\u0026nbsp;\u003c/span\u003e— contains your list of silly, geeky, or magical fortunes\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n      \n","metadata":{}},{"element_type":"user_image","content":"https://cdn-learn.adafruit.com/user_assets/assets/000/001/920/original/gh_add_file.jpg?1752101200","metadata":{}},{"element_type":"text","content":"\n  \n  \n  \n  \n  \n  \n        \u003ch2\u003eThe Files:\u003c/h2\u003e\n\u003ch2\u003eindex.html\u003c/h2\u003e\n      \n\n\n\n\n\n","metadata":{}},{"element_type":"code","content":"\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n  \u003cmeta charset=\"UTF-8\"\u003e\n  \u003ctitle\u003eSmart Cookie Fortune\u003c/title\u003e\n  \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n  \u003cstyle\u003e\n    body {\n      font-family: 'Comic Sans MS', cursive, sans-serif;\n      background: #fffbe6;\n      text-align: center;\n      padding: 2rem;\n    }\n    .fortune {\n      font-size: 1.5rem;\n      margin-top: 2rem;\n      padding: 1.5rem;\n      border: 2px dashed #ff9900;\n      background: #fffaf0;\n      border-radius: 10px;\n      display: inline-block;\n    }\n  \u003c/style\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003ch1\u003e🥠 Your Smart Cookie Says...\u003c/h1\u003e\n  \u003cdiv class=\"fortune\" id=\"fortune\"\u003eLoading fortune...\u003c/div\u003e\n\n  \u003cscript\u003e\n    fetch('fortunes.json')\n      .then(response =\u003e response.json())\n      .then(data =\u003e {\n        const randomFortune = data[Math.floor(Math.random() * data.length)];\n        document.getElementById('fortune').innerText = randomFortune;\n      })\n      .catch(error =\u003e {\n        document.getElementById('fortune').innerText = \"Oops! Couldn't load a fortune.\";\n        console.error(\"Error fetching fortune:\", error);\n      });\n  \u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e","metadata":{"language":"auto","linenums":false}},{"element_type":"text","content":"\n  \n  \n        \u003ch2\u003efortunes.json\u003c/h2\u003e\n\u003cp\u003eEdit the fortunes as much as you like, and add as many as you want to create your own custom fortune generator.\u003c/p\u003e\n      \n\n","metadata":{}},{"element_type":"code","content":"[\n  \"Your robot friend thinks you're awesome.\",\n  \"You will find a gummy bear in an unexpected place.\",\n  \"A potato will inspire your next big idea.\",\n  \"Someone is building a LEGO castle in your honor.\",\n  \"Today is a great day to make weird sounds.\",\n  \"A wizard approves of your code.\",\n  \"You are 98% stardust and 2% snacktime.\",\n  \"Your pencil is secretly magical.\",\n  \"Beware of invisible llamas. Just kidding. Maybe.\",\n  \"A rainbow has chosen you as its friend.\",\n]","metadata":{"language":"auto","linenums":false}},{"element_type":"text","content":"\n  \n  \n  \n  \n        \u003ch3\u003e🔧 Step 4: Enable GitHub Pages\u003c/h3\u003e\n\u003col\u003e\n\u003cli\u003e\n\u003cp\u003eIn your repository, click on the\u003cspan\u003e\u0026nbsp;\u003c/span\u003e\u003cstrong\u003eSettings\u003c/strong\u003e\u003cspan\u003e\u0026nbsp;\u003c/span\u003etab\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003eScroll down to\u003cspan\u003e\u0026nbsp;\u003c/span\u003e\u003cstrong\u003ePages\u003c/strong\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003eUnder “Source,” choose:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003cp\u003eBranch:\u003cspan\u003e\u0026nbsp;\u003c/span\u003e\u003ccode\u003emain\u003c/code\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003eFolder:\u003cspan\u003e\u0026nbsp;\u003c/span\u003e\u003ccode\u003e/ (root)\u003c/code\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003e\n\u003cp\u003eClick\u003cspan\u003e\u0026nbsp;\u003c/span\u003e\u003cstrong\u003eSave\u003c/strong\u003e\u003c/p\u003e\n\u003c/li\u003e\n\u003c/ol\u003e\n\u003cp\u003eGitHub will display a URL like:\u003cbr\u003e\u003ccode\u003ehttps://yourusername.github.io/fortunecookies/\u003c/code\u003e\u003cbr\u003eSave this—this is what you will write to your NFC tag!\u003c/p\u003e\n\u003cp\u003e\u003cspan class=\"fa fa-link\"\u003e\u003c/span\u003e\u003cspan id=\"step-3202703\" class=\"anchor-link-target\"\u003e\u003c/span\u003e\u003c/p\u003e\n      \n\n\n\n","metadata":{}},{"element_type":"user_image","content":"https://cdn-learn.adafruit.com/user_assets/assets/000/001/919/original/fortunes.jpg?1752100661","metadata":{}},{"element_type":"text","content":"\n        \u003ch3\u003e🧪 Step 5: Test It!\u003c/h3\u003e\n\u003cp\u003eGo to that URL in your browser. You should see a styled fortune and a new one every time you reload the page.\u003c/p\u003e\n\u003cp\u003eIf it says “Oops! Could not load a fortune,” double-check that your\u003cspan\u003e\u0026nbsp;\u003c/span\u003e\u003cstrong\u003efortunes.json\u003c/strong\u003e\u003cspan\u003e\u0026nbsp;\u003c/span\u003efile is correctly formatted and uploaded.\u003c/p\u003e\n      ","metadata":{}}]