Changes that hook data up in the Pitching Staff article:

1. Load the array of team data
2. Make a button that calls the function when pressed
3. Refactor name of quiltData to quiltContent, since that's what it is
4. Start a TeamPitching article

data/quiltData.mjs → data/quiltContent.mjs

@@ -10,18 +10,23 @@ For example, if the title is maxEnd3, the file is maxEnd3.mjs and the div will b
 ******/
 let articles = [
 {
-    backgroundColor: '#493',
-    textColor: '#ddf',
-    title: 'Hotdogging',
-    question: 'How do you grab a div?',
-    strategy: 'GetElementById()!',
+    backgroundColor: '#930',
+    textColor: '#ffa',
+    title: 'Team Pitching',
+    question: 'Statistics from <a href="https://www.baseball-reference.com/leagues/majors/2021-standard-pitching.shtml">Baseball Reference</a>',
+    strategy: 'null',
     form: '<form><h1>Placeholder</h1><button>click</button></form>',
     linkToCodeRepo: 'https://github.com/atom-box/codingBatJS/blob/master/textSimilarity.html',
     testElement: '<p class="blueBackground">dogfish - dogfish - dogfish - dogfish </p>',
     inputs: [],
     predictedOutputs: [],
     answerHtml:
-    `<button type="button" class="btn btn-primary btn-sm" onclick="dice.show5()" > five</button>`,
+    `
+    <button type="button" class="btn btn-primary btn-sm" onclick="teamPitching()" > five</button>
+    `,
+
+    // <p>${teamPitching()} all day, every day</p>
+
 },
 {
     backgroundColor: '#256',
@@ -47,6 +52,20 @@ let articles = [
 </div>
     `
 },
+{
+    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>',
+    strategy: 'null',
+    form: '<form><h1>Placeholder</h1><button>click</button></form>',
+    linkToCodeRepo: 'https://github.com/atom-box/codingBatJS/blob/master/textSimilarity.html',
+    testElement: '<p class="blueBackground">dogfish - dogfish - dogfish - dogfish </p>',
+    inputs: [],
+    predictedOutputs: [],
+    answerHtml:
+    `<button type="button" class="btn btn-primary btn-sm" onclick="dice.show5()" > five</button>`,
+},
 
 ]
 

helpers/quilt/teamPitching.mjs

@@ -0,0 +1,25 @@
+console.log('loaded TEAMPITCHING FUNCTIONFILE');
+let teamPitching = function(){
+    console.log(staffPitchingSummary[1][1]);
+    return staffPitchingSummary[1][1];
+}
+
+
+/*
+PSEUDOCODE
+Make aTWINNED 2-d array for the third category: age = [[twowordteamname, pitcherage],  ]
+    read a flat file, line by line
+Take the entered team name and return their age
+    regex pattern is...
+    reduce the array to the matching pattern or return 'not found' string
+display that
+*/
+
+/*
+TODO
+add args to the function above
+*/
+
+
+/* Reflection
+*/

helpers/quiltMain.js

@@ -19,8 +19,8 @@ articles.forEach(element => {
     <p>Challenge:</p><div class="white-box"><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 += `<div>`;
     singleDiv += element.answerHtml;
     singleDiv += `</div>`;
 

helpers/staging.html

@@ -13,41 +13,40 @@
         /* CSS POSITIONING INCLUDING FONT*/
         /* CSS POSITIONING INCLUDING FONT*/
 
-        header {
-            text-align: center;
+
+        @media only screen and (min-width: 600px) {
+
+            /* For tablets: */
+            .gutters {
+                padding-left: 9rem;
+                padding-right: 9rem;
+            }
         }
 
-/* todo: these were imported for the form, may need finessing */
-        .square-small {
-            border-radius: 3rem;
-            border: solid var(--dark1) 0.8rem;
-            margin: auto 5rem;
-            height: 15rem;
-            min-width: 12rem;
-            display: flex;
-            /*(1)VERT*/
-            flex-direction: row;
-            /*(1)VERT*/
-            align-items: center;
-            /*(1)VERT*/
-            justify-content: center;
-            /*(2)HORIZ*/
-            text-align: center;
+        @media only screen and (min-width: 1000px) {
+            .gutters {
+                padding-left: 19rem;
+                padding-right: 19rem;
+            }
         }
 
-        .core {
+        header {
             text-align: center;
-            margin: 1rem auto;
-            overflow-wrap: break-word;
+            margin-bottom: 1rem;
         }
 
         .stripe {
-            height: 8rem;
-            width: 15rem;
-            background-color: var(--dark1);
-            overflow: scroll;
+            text-align: center;
+        }
+
+        .top-bottom-space {
+            padding-top: 3.4rem;
+            padding-bottom: 3.4rem;
         }
 
+        .white-box {
+            padding: 3rem;
+        }
 
         /* CSS  FONT-DIRECTED no COLOR no POSITIONING */
         /* CSS  FONT-DIRECTED no COLOR no POSITIONING */
@@ -76,21 +75,17 @@
             --main-color: #F45B69;
         }
 
-        #articlesAnchor {
-            background-color: yellow;
-        }
-
-        article.card.text-center {
-            xxxmargin-bottom: 1rem;
-        }
-
         header {
             width: 100%;
             padding: 8px;
             color: white;
             background-color: #999;
         }
 
+        #articlesAnchor {
+            background-color: yellow;
+        }
+
         .overlay {
             position: absolute;
             bottom: 0;
@@ -123,13 +118,19 @@
             color: white;
         }
 
-        .blueBackground {
-            background-color: blue;
-            color: white;
+        .white-box {
+            border: #ccc solid 0.08rem;
+        }
+
+        S.stripe {
+            color: #ccf;
+            background-color: #000;
+            border: grey solid 0.2rem;
+            border-radius: 0.2rem;
         }
     </style>
 
-    <script src="../data/quiltData.mjs"></script>
+    <script src="../data/quiltContent.mjs"></script>
     <script src="./quiltMain.js"></script>
 
 </head>

index.html

@@ -50,6 +50,7 @@ <h1 class="mt-5">Coding <a href="https://codingbat.com/python"> Bat</a></h1>
         <li> <a target="_blank" href="solveSeven.html">Grab Bag I</a> coding challenges.</li>
         <li><a target="_blank" href="https://atom-box.github.io/codingBatJS/quilt.html">Grab Bag II </a> coding challenges.</li>
         <li>Recursive implementation of SelectionSort.js: <a target="_blank" href="https://github.com/atom-box/codingBatJS/blob/master/selectionSort.js"> code </a> and <a target="_blank" href="https://github.com/atom-box/codingBatJS/blob/master/images/selectionSort.png">  screenshot</a> </li>
+        <li><a target="_blank" href="https://atom-box.github.io/grayArrays/">Gray Arrays</a></li>
         <li><a target="_blank" href="first-and-last.html">First Word, Last Word</a></li>
     <li><a target="_blank" href="clickableMaya.html">Maya Calendar</a> with image mapping</li>
     <li><a target="_blank" href="textSimilarity.html">How Similar Are Two Word Lists?</a> (for ShareRewards.com 10/9/2019)</li>

quilt.html

@@ -167,7 +167,9 @@ <h2 class="text-right gutters">Making things work in Madison, Wisconsin: <span c
 
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
         integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
-    <script src="./data/quiltData.mjs"></script>
+    <script src="./data/quiltContent.mjs"></script>
+    <script src="./data/baseballReferenceArrayPitching.js"></script>
+    <script src="./helpers/quilt/teamPitching.mjs"></script>
     <script src="./helpers/quiltMain.js"></script>
     <script src="./helpers/quilt/immediateOutputFromInput.js"></script>
     <script src="./helpers/quilt/maxEnd3.mjs"></script>