Style as two white-bordered divs.

data/quiltContent.mjs

@@ -19,7 +19,7 @@ let articles = [
     backgroundColor: '#256',
     textColor: '#db5',
     title: 'Max End 3',
-    question: 'Given an array of ints length 3, figure out which is larger, the first or last element in the array, and set all the other elements to be that value. Return the changed array.',
+    question: 'Given an array of ints figure out which is larger, the first or last element in the array, and set all the other elements to be that value.',
     strategy: 'GetElementById()!',
     form: '<form><h1>Placeholder</h1><button>click</button></form>',
     linkToCodeRepo: 'https://github.com/atom-box/codingBatJS/blob/master/textSimilarity.html',
@@ -60,16 +60,13 @@ let articles = [
     <button type="button" class="btn btn-secondary" onclick="wordChecker.random(huckleberryisms, 10)" > retrieve 10 words </button>
     </div>
     `,
-
-    // <p>${teamPitching()} all day, every day</p>
-
 },
 
 {
     backgroundColor: '#493',
     textColor: '#ddf',
-    title: 'Unused',
-    question: 'Statistics from <a href="https://www.baseball-reference.com/leagues/majors/2021-standard-pitching.shtml">Baseball Reference</a>',
+    title: 'API',
+    question: 'Get info from a live external A.P.I. <a href="https://rapidapi.com/apilayernet/api/rest-countries-v1"> hub</a>',
     strategy: 'null',
     form: '<form><h1>Placeholder</h1><button>click</button></form>',
     linkToCodeRepo: 'https://github.com/atom-box/codingBatJS/blob/master/textSimilarity.html',

helpers/quiltMain.js

@@ -16,12 +16,14 @@ articles.forEach(element => {
     singleDiv = `<article style="background-color:${element.backgroundColor}; color: ${element.textColor};"><div class='gutters';>
     <div class="top-bottom-space"><div>
     <h2 >${element.title}</h2>
-    <p>Challenge:</p><div class="white-box"><p>${element.question}</p></div>
+    <div class="white-box">
+    <p>Challenge:</p>
+    <p>${element.question}</p></div>
     `;
-    singleDiv += `<p>Solution:</p>`;
-    // singleDiv += `<div class="white-box" id="${element.title}">`;
-    // singleDiv += `<div>`;
+    singleDiv += `<div class="white-box" id="${element.title}">`;
+    singleDiv += `<p>Try it out:</p>`;
     singleDiv += element.answerHtml;
+    singleDiv += `<div>`;
     singleDiv += `</div>`;
 
     singleDiv += `

quilt.html

@@ -46,6 +46,7 @@
 
         .white-box {
             padding: 3rem;
+            margin-bottom: 1rem;
         }
         /* CSS  FONT-DIRECTED no COLOR no POSITIONING */
         /* CSS  FONT-DIRECTED no COLOR no POSITIONING */
@@ -175,6 +176,7 @@ <h2 class="text-right gutters">Making things work in Madison, Wisconsin: <span c
     <script src="./helpers/quiltMain.js"></script>
     <script src="./helpers/quilt/immediateOutputFromInput.js"></script>
     <script src="./helpers/quilt/maxEnd3.mjs"></script>
+    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
     <!-- TODO TODO TODO <script src="./helpers/quilt/maxEnd3Div.mjs"></script> -->