Skip to content

Instantly share code, notes, and snippets.

@ShaunSHamilton
Created August 28, 2025 13:46
Show Gist options
  • Save ShaunSHamilton/ac19e893911ca708779d8d9b6c856711 to your computer and use it in GitHub Desktop.
Save ShaunSHamilton/ac19e893911ca708779d8d9b6c856711 to your computer and use it in GitHub Desktop.
failed-updates
[
{
"endpoint": "/modern-challenge-completed",
"payload": {
"id": "6555c1d3e11a1574434cf8b5",
"files": [
{
"contents": "<!DOCTYPE html>\r\n<html lang=\"en\">\r\n <head>\r\n <meta charset=\"UTF-8\" />\r\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\r\n <link\r\n rel=\"icon\"\r\n type=\"image/png\"\r\n href=\"https://cdn.freecodecamp.org/universal/favicons/favicon.ico\"\r\n />\r\n <title>Creature Search App</title>\r\n <link rel=\"stylesheet\" href=\"styles.css\" />\r\n </head>\r\n\r\n <body>\r\n <main>\r\n <img\r\n class=\"freecodecamp-logo\"\r\n src=\"https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg\"\r\n alt=\"freeCodeCamp Logo\"\r\n />\r\n <h1>Creature Search App</h1>\r\n <div class=\"container\">\r\n <form role=\"search\" id=\"search-form\">\r\n <label for=\"search-input\">Search for Creature Name or ID:</label>\r\n <input type=\"text\" name=\"creature\" id=\"search-input\" required />\r\n <button id=\"search-button\">Search</button>\r\n </form>\r\n <div class=\"output\">\r\n <div class=\"top-container\">\r\n <div class=\"name-and-id\">\r\n <span id=\"creature-name\"></span>\r\n <span id=\"creature-id\"></span>\r\n <div class=\"size\">\r\n <span id=\"weight\"></span>\r\n <span id=\"height\"></span>\r\n </div>\r\n </div>\r\n <div id=\"types\"></div>\r\n <div>\r\n <div id=\"special-name\"></div>\r\n <div id=\"special-description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"bottom-container\">\r\n <table>\r\n <tr>\r\n <th>Base</th>\r\n <th>Stats</th>\r\n </tr>\r\n <tr>\r\n <td>HP:</td>\r\n <td id=\"hp\"></td>\r\n </tr>\r\n <tr>\r\n <td>Attack:</td>\r\n <td id=\"attack\"></td>\r\n </tr>\r\n <tr>\r\n <td>Defense:</td>\r\n <td id=\"defense\"></td>\r\n </tr>\r\n <tr>\r\n <td>Sp. Attack:</td>\r\n <td id=\"special-attack\"></td>\r\n </tr>\r\n <tr>\r\n <td>Sp. Defense:</td>\r\n <td id=\"special-defense\"></td>\r\n </tr>\r\n <tr>\r\n <td>Speed:</td>\r\n <td id=\"speed\" class=\"speed\"></td>\r\n </tr>\r\n </table>\r\n </div>\r\n </div>\r\n </div>\r\n <script src=\"./script.js\"></script>\r\n </main>\r\n </body>\r\n</html>",
"ext": "html",
"history": [
"index.html"
],
"key": "indexhtml",
"name": "index"
},
{
"contents": "\r\n*,\r\n*::before,\r\n*::after {\r\n box-sizing: border-box;\r\n}\r\n\r\n* {\r\n margin: 0;\r\n}\r\n\r\nbody {\r\n line-height: 1.5;\r\n}\r\n\r\nimg {\r\n display: block;\r\n}\r\n\r\n/* Project styling */\r\n\r\nbody {\r\n height: 100vh;\r\n font-family: sans-serif;\r\n background-color: #1b1b32;\r\n color: #0a0a23;\r\n font-family: Verdana, Geneva, Tahoma, sans-serif;\r\n}\r\n\r\nmain {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.freecodecamp-logo {\r\n height: 30px;\r\n margin: 25px 0;\r\n}\r\n\r\nh1 {\r\n color: #f5f6f7;\r\n font-size: 1.7em;\r\n text-align: center;\r\n}\r\n\r\n.container {\r\n width: 325px;\r\n margin: 25px 0;\r\n background-color: #f5f6f7;\r\n border: 1px solid #f5f6f7;\r\n border-radius: 15px;\r\n box-shadow: 10px 10px 0px 0px rgba(223, 220, 220, 0.75);\r\n}\r\n\r\n.output,\r\n#search-form {\r\n display: flex;\r\n justify-content: center;\r\n}\r\n\r\n#search-form {\r\n flex-wrap: wrap;\r\n margin: 10px 0;\r\n padding: 5px;\r\n border-radius: 8px 8px 0 0;\r\n gap: 10px;\r\n}\r\n\r\nlabel {\r\n align-self: center;\r\n}\r\n\r\n#search-input:focus-visible,\r\n#search-button:focus-visible {\r\n outline: 3px solid #198eee;\r\n}\r\n\r\n#search-input {\r\n height: 40px;\r\n padding-left: 10px;\r\n width: 200px;\r\n}\r\n\r\n#search-button {\r\n padding: 14px 0;\r\n width: 80px;\r\n border-radius: 20px;\r\n text-align: center;\r\n background-color: #7f21ab;\r\n color: #f5f6f7;\r\n border: none;\r\n}\r\n\r\n.output {\r\n margin: 10px 0;\r\n padding: 5px;\r\n flex-direction: column;\r\n align-items: center;\r\n}\r\n\r\n.top-container,\r\n.bottom-container {\r\n display: flex;\r\n flex-direction: column;\r\n width: 100%;\r\n}\r\n\r\n.top-container {\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: space-evenly;\r\n margin-bottom: 10px;\r\n padding: 10px;\r\n background-color: #f0f1f7;\r\n min-height: 200px;\r\n}\r\n\r\n.bottom-container {\r\n min-height: 325px;\r\n}\r\n\r\n.name-and-id {\r\n height: 28px;\r\n font-size: 1.1em;\r\n text-transform: capitalize;\r\n margin-bottom: 5px;\r\n}\r\n\r\n#creature-name,\r\n#special-name {\r\n font-weight: bold;\r\n}\r\n\r\n.size,\r\n#special-description {\r\n font-size: 0.85rem;\r\n}\r\n\r\n#types {\r\n min-height: 30px;\r\n display: flex;\r\n flex-wrap: wrap;\r\n justify-content: flex-start;\r\n gap: 5px;\r\n}\r\n\r\n.type {\r\n width: 66px;\r\n padding: 5px;\r\n font-size: 0.7rem;\r\n text-align: center;\r\n border-radius: 5px;\r\n background-color: red;\r\n text-transform: uppercase;\r\n}\r\n\r\ntable {\r\n border-collapse: collapse;\r\n border-spacing: 0;\r\n width: 100%;\r\n font-size: 1 rem;\r\n color: #f5f6f7;\r\n background-color: #7f21ab;\r\n}\r\n\r\nth:nth-child(even),\r\ntd:nth-child(even) {\r\n border-left: 5px solid #f5f6f7;\r\n}\r\n\r\ntr {\r\n border-bottom: 5px solid #f5f6f7;\r\n}\r\n\r\ntd,\r\nth {\r\n text-align: center;\r\n padding: 8px;\r\n}\r\n\r\n/* Special styling for Creature types */\r\n\r\n.normal {\r\n background-color: #b7b7aa;\r\n}\r\n\r\n.fire {\r\n background-color: #ff6f52;\r\n}\r\n\r\n.water {\r\n background-color: #42a1ff;\r\n}\r\n\r\n.electric {\r\n background-color: #fecc33;\r\n}\r\n\r\n.grass {\r\n background-color: #78cc55;\r\n}\r\n\r\n.ice {\r\n background-color: #66ccfe;\r\n}\r\n\r\n.fighting {\r\n background-color: #d3887e;\r\n}\r\n\r\n.poison {\r\n background-color: #c68bb7;\r\n}\r\n\r\n.ground {\r\n background-color: #dfba52;\r\n}\r\n\r\n.flying {\r\n background-color: #8899ff;\r\n}\r\n\r\n.psychic {\r\n background-color: #ff66a3;\r\n}\r\n\r\n.bug {\r\n background-color: #aabb23;\r\n}\r\n\r\n.rock {\r\n background-color: #baaa66;\r\n}\r\n\r\n.ghost {\r\n background-color: #9995d0;\r\n}\r\n\r\n.dragon {\r\n background-color: #9e93f1;\r\n}\r\n\r\n.dark {\r\n background-color: #b59682;\r\n}\r\n\r\n.steel {\r\n background-color: #abaabb;\r\n}\r\n\r\n.fairy {\r\n background-color: #ed99ed;\r\n}\r\n\r\n@media screen and (min-width: 550px) {\r\n h1 {\r\n font-size: 2em;\r\n }\r\n\r\n .container {\r\n width: 450px;\r\n }\r\n\r\n #search-form,\r\n .top-container,\r\n .bottom-container {\r\n width: 95%;\r\n }\r\n\r\n .type {\r\n width: 75px;\r\n }\r\n}",
"ext": "css",
"history": [
"styles.css"
],
"key": "stylescss",
"name": "styles"
},
{
"contents": "const creatureID = document.getElementById('creature-id');\r\nconst creatureName = document.getElementById('creature-name');\r\nconst specialName = document.getElementById('special-name');\r\nconst specialDescription = document.getElementById('special-description');\r\nconst types = document.getElementById('types');\r\nconst height = document.getElementById('height');\r\nconst weight = document.getElementById('weight');\r\nconst hp = document.getElementById('hp');\r\nconst attack = document.getElementById('attack');\r\nconst defense = document.getElementById('defense');\r\nconst specialAttack = document.getElementById('special-attack');\r\nconst specialDefense = document.getElementById('special-defense');\r\nconst speed = document.getElementById('speed');\r\nconst searchForm = document.getElementById('search-form');\r\nconst searchInput = document.getElementById('search-input');\r\n\r\nconst getCreature = async () => {\r\n try {\r\n const creatureNameOrId = searchInput.value.toLowerCase();\r\n const response = await fetch(\r\n `https://rpg-creature-api.freecodecamp.rocks/api/creature/${creatureNameOrId}`\r\n );\r\n const data = await response.json();\r\n\r\n // Set Creature info\r\n creatureName.textContent = `${data.name.toUpperCase()}`;\r\n creatureID.textContent = `#${data.id}`;\r\n weight.textContent = `Weight: ${data.weight}`;\r\n height.textContent = `Height: ${data.height}`;\r\n specialName.textContent = data.special.name;\r\n specialDescription.textContent = data.special.description;\r\n\r\n // Set stats\r\n hp.textContent = data.stats[0].base_stat;\r\n attack.textContent = data.stats[1].base_stat;\r\n defense.textContent = data.stats[2].base_stat;\r\n specialAttack.textContent = data.stats[3].base_stat;\r\n specialDefense.textContent = data.stats[4].base_stat;\r\n speed.textContent = data.stats[5].base_stat;\r\n\r\n // Set types\r\n types.innerHTML = data.types\r\n .map(obj => `<span class=\"type ${obj.name}\">${obj.name}</span>`)\r\n .join('');\r\n } catch (err) {\r\n resetDisplay();\r\n alert('Creature not found');\r\n console.log(`Creature not found: ${err}`);\r\n }\r\n};\r\n\r\nconst resetDisplay = () => {\r\n // reset stats\r\n creatureName.textContent = '';\r\n creatureID.textContent = '';\r\n height.textContent = '';\r\n weight.textContent = '';\r\n types.innerHTML = '';\r\n specialName.innerHTML = '';\r\n specialDescription.innerHTML = '';\r\n hp.textContent = '';\r\n attack.textContent = '';\r\n defense.textContent = '';\r\n specialAttack.textContent = '';\r\n specialDefense.textContent = '';\r\n speed.textContent = '';\r\n};\r\n\r\nsearchForm.addEventListener('submit', e => {\r\n e.preventDefault();\r\n getCreature();\r\n});",
"ext": "js",
"history": [
"script.js"
],
"key": "scriptjs",
"name": "script"
}
],
"challengeType": 14
},
"id": "38221a52-b784-4b3b-9ace-9876bb698156"
},
{
"endpoint": "/modern-challenge-completed",
"payload": {
"id": "6555c1d3e11a1574434cf8b5",
"files": [
{
"contents": "<!DOCTYPE html>\r\n<html lang=\"en\">\r\n <head>\r\n <meta charset=\"UTF-8\" />\r\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\r\n <link\r\n rel=\"icon\"\r\n type=\"image/png\"\r\n href=\"https://cdn.freecodecamp.org/universal/favicons/favicon.ico\"\r\n />\r\n <title>Creature Search App</title>\r\n <link rel=\"stylesheet\" href=\"styles.css\" />\r\n </head>\r\n\r\n <body>\r\n <main>\r\n <img\r\n class=\"freecodecamp-logo\"\r\n src=\"https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg\"\r\n alt=\"freeCodeCamp Logo\"\r\n />\r\n <h1>Creature Search App</h1>\r\n <div class=\"container\">\r\n <form role=\"search\" id=\"search-form\">\r\n <label for=\"search-input\">Search for Creature Name or ID:</label>\r\n <input type=\"text\" name=\"creature\" id=\"search-input\" required />\r\n <button id=\"search-button\">Search</button>\r\n </form>\r\n <div class=\"output\">\r\n <div class=\"top-container\">\r\n <div class=\"name-and-id\">\r\n <span id=\"creature-name\"></span>\r\n <span id=\"creature-id\"></span>\r\n <div class=\"size\">\r\n <span id=\"weight\"></span>\r\n <span id=\"height\"></span>\r\n </div>\r\n </div>\r\n <div id=\"types\"></div>\r\n <div>\r\n <div id=\"special-name\"></div>\r\n <div id=\"special-description\"></div>\r\n </div>\r\n </div>\r\n <div class=\"bottom-container\">\r\n <table>\r\n <tr>\r\n <th>Base</th>\r\n <th>Stats</th>\r\n </tr>\r\n <tr>\r\n <td>HP:</td>\r\n <td id=\"hp\"></td>\r\n </tr>\r\n <tr>\r\n <td>Attack:</td>\r\n <td id=\"attack\"></td>\r\n </tr>\r\n <tr>\r\n <td>Defense:</td>\r\n <td id=\"defense\"></td>\r\n </tr>\r\n <tr>\r\n <td>Sp. Attack:</td>\r\n <td id=\"special-attack\"></td>\r\n </tr>\r\n <tr>\r\n <td>Sp. Defense:</td>\r\n <td id=\"special-defense\"></td>\r\n </tr>\r\n <tr>\r\n <td>Speed:</td>\r\n <td id=\"speed\" class=\"speed\"></td>\r\n </tr>\r\n </table>\r\n </div>\r\n </div>\r\n </div>\r\n <script src=\"./script.js\"></script>\r\n </main>\r\n </body>\r\n</html>",
"ext": "html",
"history": [
"index.html"
],
"key": "indexhtml",
"name": "index"
},
{
"contents": "\r\n*,\r\n*::before,\r\n*::after {\r\n box-sizing: border-box;\r\n}\r\n\r\n* {\r\n margin: 0;\r\n}\r\n\r\nbody {\r\n line-height: 1.5;\r\n}\r\n\r\nimg {\r\n display: block;\r\n}\r\n\r\n/* Project styling */\r\n\r\nbody {\r\n height: 100vh;\r\n font-family: sans-serif;\r\n background-color: #1b1b32;\r\n color: #0a0a23;\r\n font-family: Verdana, Geneva, Tahoma, sans-serif;\r\n}\r\n\r\nmain {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.freecodecamp-logo {\r\n height: 30px;\r\n margin: 25px 0;\r\n}\r\n\r\nh1 {\r\n color: #f5f6f7;\r\n font-size: 1.7em;\r\n text-align: center;\r\n}\r\n\r\n.container {\r\n width: 325px;\r\n margin: 25px 0;\r\n background-color: #f5f6f7;\r\n border: 1px solid #f5f6f7;\r\n border-radius: 15px;\r\n box-shadow: 10px 10px 0px 0px rgba(223, 220, 220, 0.75);\r\n}\r\n\r\n.output,\r\n#search-form {\r\n display: flex;\r\n justify-content: center;\r\n}\r\n\r\n#search-form {\r\n flex-wrap: wrap;\r\n margin: 10px 0;\r\n padding: 5px;\r\n border-radius: 8px 8px 0 0;\r\n gap: 10px;\r\n}\r\n\r\nlabel {\r\n align-self: center;\r\n}\r\n\r\n#search-input:focus-visible,\r\n#search-button:focus-visible {\r\n outline: 3px solid #198eee;\r\n}\r\n\r\n#search-input {\r\n height: 40px;\r\n padding-left: 10px;\r\n width: 200px;\r\n}\r\n\r\n#search-button {\r\n padding: 14px 0;\r\n width: 80px;\r\n border-radius: 20px;\r\n text-align: center;\r\n background-color: #7f21ab;\r\n color: #f5f6f7;\r\n border: none;\r\n}\r\n\r\n.output {\r\n margin: 10px 0;\r\n padding: 5px;\r\n flex-direction: column;\r\n align-items: center;\r\n}\r\n\r\n.top-container,\r\n.bottom-container {\r\n display: flex;\r\n flex-direction: column;\r\n width: 100%;\r\n}\r\n\r\n.top-container {\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: space-evenly;\r\n margin-bottom: 10px;\r\n padding: 10px;\r\n background-color: #f0f1f7;\r\n min-height: 200px;\r\n}\r\n\r\n.bottom-container {\r\n min-height: 325px;\r\n}\r\n\r\n.name-and-id {\r\n height: 28px;\r\n font-size: 1.1em;\r\n text-transform: capitalize;\r\n margin-bottom: 5px;\r\n}\r\n\r\n#creature-name,\r\n#special-name {\r\n font-weight: bold;\r\n}\r\n\r\n.size,\r\n#special-description {\r\n font-size: 0.85rem;\r\n}\r\n\r\n#types {\r\n min-height: 30px;\r\n display: flex;\r\n flex-wrap: wrap;\r\n justify-content: flex-start;\r\n gap: 5px;\r\n}\r\n\r\n.type {\r\n width: 66px;\r\n padding: 5px;\r\n font-size: 0.7rem;\r\n text-align: center;\r\n border-radius: 5px;\r\n background-color: red;\r\n text-transform: uppercase;\r\n}\r\n\r\ntable {\r\n border-collapse: collapse;\r\n border-spacing: 0;\r\n width: 100%;\r\n font-size: 1 rem;\r\n color: #f5f6f7;\r\n background-color: #7f21ab;\r\n}\r\n\r\nth:nth-child(even),\r\ntd:nth-child(even) {\r\n border-left: 5px solid #f5f6f7;\r\n}\r\n\r\ntr {\r\n border-bottom: 5px solid #f5f6f7;\r\n}\r\n\r\ntd,\r\nth {\r\n text-align: center;\r\n padding: 8px;\r\n}\r\n\r\n/* Special styling for Creature types */\r\n\r\n.normal {\r\n background-color: #b7b7aa;\r\n}\r\n\r\n.fire {\r\n background-color: #ff6f52;\r\n}\r\n\r\n.water {\r\n background-color: #42a1ff;\r\n}\r\n\r\n.electric {\r\n background-color: #fecc33;\r\n}\r\n\r\n.grass {\r\n background-color: #78cc55;\r\n}\r\n\r\n.ice {\r\n background-color: #66ccfe;\r\n}\r\n\r\n.fighting {\r\n background-color: #d3887e;\r\n}\r\n\r\n.poison {\r\n background-color: #c68bb7;\r\n}\r\n\r\n.ground {\r\n background-color: #dfba52;\r\n}\r\n\r\n.flying {\r\n background-color: #8899ff;\r\n}\r\n\r\n.psychic {\r\n background-color: #ff66a3;\r\n}\r\n\r\n.bug {\r\n background-color: #aabb23;\r\n}\r\n\r\n.rock {\r\n background-color: #baaa66;\r\n}\r\n\r\n.ghost {\r\n background-color: #9995d0;\r\n}\r\n\r\n.dragon {\r\n background-color: #9e93f1;\r\n}\r\n\r\n.dark {\r\n background-color: #b59682;\r\n}\r\n\r\n.steel {\r\n background-color: #abaabb;\r\n}\r\n\r\n.fairy {\r\n background-color: #ed99ed;\r\n}\r\n\r\n@media screen and (min-width: 550px) {\r\n h1 {\r\n font-size: 2em;\r\n }\r\n\r\n .container {\r\n width: 450px;\r\n }\r\n\r\n #search-form,\r\n .top-container,\r\n .bottom-container {\r\n width: 95%;\r\n }\r\n\r\n .type {\r\n width: 75px;\r\n }\r\n}",
"ext": "css",
"history": [
"styles.css"
],
"key": "stylescss",
"name": "styles"
},
{
"contents": "const creatureID = document.getElementById('creature-id');\r\nconst creatureName = document.getElementById('creature-name');\r\nconst specialName = document.getElementById('special-name');\r\nconst specialDescription = document.getElementById('special-description');\r\nconst types = document.getElementById('types');\r\nconst height = document.getElementById('height');\r\nconst weight = document.getElementById('weight');\r\nconst hp = document.getElementById('hp');\r\nconst attack = document.getElementById('attack');\r\nconst defense = document.getElementById('defense');\r\nconst specialAttack = document.getElementById('special-attack');\r\nconst specialDefense = document.getElementById('special-defense');\r\nconst speed = document.getElementById('speed');\r\nconst searchForm = document.getElementById('search-form');\r\nconst searchInput = document.getElementById('search-input');\r\n\r\nconst getCreature = async () => {\r\n try {\r\n const creatureNameOrId = searchInput.value.toLowerCase();\r\n const response = await fetch(\r\n `https://rpg-creature-api.freecodecamp.rocks/api/creature/${creatureNameOrId}`\r\n );\r\n const data = await response.json();\r\n\r\n // Set Creature info\r\n creatureName.textContent = `${data.name.toUpperCase()}`;\r\n creatureID.textContent = `#${data.id}`;\r\n weight.textContent = `Weight: ${data.weight}`;\r\n height.textContent = `Height: ${data.height}`;\r\n specialName.textContent = data.special.name;\r\n specialDescription.textContent = data.special.description;\r\n\r\n // Set stats\r\n hp.textContent = data.stats[0].base_stat;\r\n attack.textContent = data.stats[1].base_stat;\r\n defense.textContent = data.stats[2].base_stat;\r\n specialAttack.textContent = data.stats[3].base_stat;\r\n specialDefense.textContent = data.stats[4].base_stat;\r\n speed.textContent = data.stats[5].base_stat;\r\n\r\n // Set types\r\n types.innerHTML = data.types\r\n .map(obj => `<span class=\"type ${obj.name}\">${obj.name}</span>`)\r\n .join('');\r\n } catch (err) {\r\n resetDisplay();\r\n alert('Creature not found');\r\n console.log(`Creature not found: ${err}`);\r\n }\r\n};\r\n\r\nconst resetDisplay = () => {\r\n // reset stats\r\n creatureName.textContent = '';\r\n creatureID.textContent = '';\r\n height.textContent = '';\r\n weight.textContent = '';\r\n types.innerHTML = '';\r\n specialName.innerHTML = '';\r\n specialDescription.innerHTML = '';\r\n hp.textContent = '';\r\n attack.textContent = '';\r\n defense.textContent = '';\r\n specialAttack.textContent = '';\r\n specialDefense.textContent = '';\r\n speed.textContent = '';\r\n};\r\n\r\nsearchForm.addEventListener('submit', e => {\r\n e.preventDefault();\r\n getCreature();\r\n});",
"ext": "js",
"history": [
"script.js"
],
"key": "scriptjs",
"name": "script"
}
],
"challengeType": 14
},
"id": "581ba0a6-f13d-48a7-95b7-d6ede9fd70c3"
}
]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment