Challenge 73 - Acrostic (#1671)

* challenge 73

* update source code link

* update acrostic challenge content and image

* update the "Programming from A to Z" links to use the archived version of `shiffman.net`

* Update code link.

* Add code image

* Use same code image for original code example

---------

Co-authored-by: Daniel Shiffman <[email protected]>
Co-authored-by: Kathy <[email protected]>

Author: 3 people

content/videos/challenges/42-markov-chain-name-generator/index.json

@@ -127,7 +127,7 @@
         {
           "icon": "💻",
           "title": "Programming from A to Z - Markov Chains",
-          "url": "https://shiffman.net/a2z/markov/",
+          "url": "https://shiffman-archive.netlify.app/a2z/markov/",
           "description": "Webpage with material from my \"Programming from A to Z\" course."
         }
       ]

content/videos/challenges/73-acrostic/images/img.jpg

@@ -0,0 +1,107 @@
+{
+  "title": "Acrostic",
+  "description": "In this coding challenge, I create an acrostic generator with the Wordnik API and p5.js. This challenge is part of my \"Programming with Text\" series.",
+  "videoNumber": "73",
+  "videoId": "jwoK5WKVXGw",
+  "date": "2017-09-11",
+  "languages": ["p5.js", "JavaScript"],
+  "topics": ["Wordnik API", "acrostic", "text", "DOM elements", "poetry"],
+  "canContribute": true,
+  "relatedChallenges": ["37-diastic-machine", "84-word-definition-chrome-extension"],
+  "timestamps": [
+    { "time": "0:00", "title": "Introduction" },
+    { "time": "0:25", "title": "What is an acrostic?" },
+    { "time": "2:45", "title": "On to the code" },
+    { "time": "3:00", "title": "Creating HTML DOM elements" },
+    { "time": "4:15", "title": "noCanvas()" },
+    { "time": "5:10", "title": "Selecting DOM elements with the p5.js select() function" },
+    { "time": "6:47", "title": "Writing the mousePressed() button handler" },
+    { "time": "7:19", "title": "Getting the word from the input element" },
+    { "time": "8:46", "title": "Creating a div element for each letter" },
+    { "time": "10:16", "title": "Using the Wordnik API to get a list of words" },
+    { "time": "17:18", "title": "Get a list of words for each letter" },
+    { "time": "18:09", "title": "Dealing with async requests and out-of-order responses" },
+    { "time": "20:26", "title": "Picking random words from the lists" },
+    { "time": "22:01", "title": "Put the words in the correct divs" },
+    { "time": "25:24", "title": "Wrapping up and variation ideas" }
+  ],
+  "codeExamples": [
+    {
+      "title": "Updated source code",
+      "description": "An updated version of the challenge using the Datamuse API.",
+      "image": "img.jpg",
+      "urls": {
+        "p5": "https://editor.p5js.org/codingtrain/sketches/48yinqNpT"
+      }
+    },
+    {
+      "title": "Original source code",
+      "description": "Note that the Wordnik 'word search' API endpoint is not currently available.",
+      "image": "img.jpg",
+      "urls": {
+        "p5": "https://github.com/CodingTrain/Coding-Challenges/tree/main/073_Acrostic/P5"
+      }
+    }
+  ],
+  "groupLinks": [
+    {
+      "title": "References",
+      "links": [
+        {
+          "icon": "🔗",
+          "title": "ECMAScript on Wikipedia",
+          "url": "https://en.wikipedia.org/wiki/ECMAScript"
+        },
+        {
+          "icon": "🔗",
+          "title": "Fun Fun Function YouTube Channel",
+          "url": "https://www.youtube.com/@funfunfunction"
+        },
+        {
+          "icon": "🔗",
+          "title": "Wordnik",
+          "url": "https://www.wordnik.com/"
+        },
+        {
+          "icon": "🔗",
+          "title": "Datamuse word search API",
+          "url": "https://www.datamuse.com/api/"
+        },
+        {
+          "icon": "🔗",
+          "title": "Acrostic on Wikipedia",
+          "url": "https://en.wikipedia.org/wiki/Acrostic"
+        },
+        {
+          "icon": "🔗",
+          "title": "Programming from A to Z course",
+          "url": "https://shiffman-archive.netlify.app/a2z/"
+        },
+        {
+          "icon": "🔗",
+          "title": "Visual Studio Code",
+          "url": "https://code.visualstudio.com/download"
+        }
+      ]
+    },
+    {
+      "title": "Videos",
+      "links": [
+        {
+          "icon": "🎥",
+          "title": "FunFunFunction's video on let/var/const",
+          "url": "https://youtu.be/sjyJBL5fkp8"
+        },
+        {
+          "icon": "🎥",
+          "title": "My Video on Closures",
+          "url": "https://youtu.be/-jysK0nlz7A"
+        }
+      ]
+    }
+  ],
+  "credits": [
+    { "title": "Editing", "name": "Mathieu Blanchette" },
+    { "title": "Animations", "name": "Jason Heglund" }
+  ]
+}

content/videos/challenges/73-acrostic/index.json

@@ -41,7 +41,7 @@
         {
           "icon": "🔤",
           "title": "Programming from A to Z",
-          "url": "https://shiffman.net/a2z/",
+          "url": "https://shiffman-archive.netlify.app/a2z/",
           "description": "This course focuses on programming strategies and techniques behind procedural analysis and generation of text-based data."
         },
         {

content/videos/challenges/73-acrostic/index.png

@@ -38,7 +38,7 @@
         {
           "icon": "🔤",
           "title": "Programming from A to Z",
-          "url": "https://shiffman.net/a2z/",
+          "url": "https://shiffman-archive.netlify.app/a2z/",
           "description": "This course focuses on programming strategies and techniques behind procedural analysis and generation of text-based data."
         },
         {

content/videos/challenges/82-image-chrome-extension/index.json

@@ -57,7 +57,7 @@
         {
           "icon": "🔤",
           "title": "Programming from A to Z",
-          "url": "https://shiffman.net/a2z/",
+          "url": "https://shiffman-archive.netlify.app/a2z/",
           "description": "This course focuses on programming strategies and techniques behind procedural analysis and generation of text-based data."
         },
         {