feat: add new JS curriculum demo projects (#439)

* feat: add palindrome checker project * fix: treat underscore as a special character * feat: add roman numeral converter project * feat: add telephone number validator project * feat: add cash register project * feat: add random quote machine js project * fix: alphabetize port-map.json * feat: replace js random quote machine with pokemon search app * chore: update readme * fix: remove pikachu placeholder image, adjust styling and names, add alt to sprite img * fix: use the pokeapi proxy for the pokemon search app * chore: bump GH action test sleep time to 30 seconds
freeCodeCamp · Oct 18, 2023 · 61bc9f2 · 61bc9f2
1 parent d6f1184
commit 61bc9f2
Show file tree

Hide file tree

Showing 44 changed files with 4,245 additions and 5 deletions.
diff --git a/.github/workflows/node-ci.yml b/.github/workflows/node-ci.yml
@@ -37,8 +37,8 @@ jobs:
           npm run build -- --no-cache
           npm start
 
-      - name: Sleep For 15 Seconds
-        run: sleep 15
+      - name: Sleep For 30 Seconds
+        run: sleep 30
 
       - name: Run Tests
         run: npm run test
diff --git a/README.md b/README.md
@@ -26,6 +26,33 @@
   - [Project Description](https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage)
   - [Example Project](https://personal-portfolio.freecodecamp.rocks/)
 
+## JavaScript Algorithms and Data Structures
+
+- Palindrome Checker
+
+  - [Project Description](https://www.freecodecamp.org/learn/2022/javascript-algorithms-and-data-structures/palindrome-checker-project/build-a-palindrome-checker)
+  - [Example project](https://palindrome-checker.freecodecamp.rocks/)
+
+- Roman Numeral Converter
+
+  - [Project Description](https://www.freecodecamp.org/learn/2022/javascript-algorithms-and-data-structures/roman-numeral-converter-project/build-a-roman-numeral-converter)
+  - [Example Project](https://roman-numeral-converter.freecodecamp.rocks/)
+
+- Telephone Number Validator
+
+  - [Project Description](https://www.freecodecamp.org/learn/2022/javascript-algorithms-and-data-structures/telephone-number-validator-project/build-a-telephone-number-validator)
+  - [Example Project](https://telephone-number-validator.freecodecamp.rocks/)
+
+- Cash Register
+
+  - [Project Description](https://www.freecodecamp.org/learn/2022/javascript-algorithms-and-data-structures/cash-register-project/build-a-cash-register)
+  - [Example Project](https://cash-register.freecodecamp.rocks/)
+
+- Pokémon Search App
+
+  - [Project Description](https://www.freecodecamp.org/learn/2022/javascript-algorithms-and-data-structures/pokemon-search-app-project/build-a-pokemon-search-app)
+  - [Example Project](https://pokemon-search-app.freecodecamp.rocks/)
+
 ## Data Visualization
 
 - Bar Chart

diff --git a/apps/cash-register/.dockerignore b/apps/cash-register/.dockerignore
@@ -0,0 +1,6 @@
+.env
+.git
+.gitignore
+.dockerignore
+node_modules
+Dockerfile
diff --git a/apps/cash-register/index.html b/apps/cash-register/index.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/png" href="https://cdn.freecodecamp.org/universal/favicons/favicon.ico" />
+    <title>Cash Register</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+
+  <body>
+    <main>
+      <img
+      class="freecodecamp-logo"
+      src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg"
+      alt="freeCodeCamp Logo"
+    />
+    <h1>Cash Register Project</h1>
+    <div id="change-due"></div>
+    <div class="input-div">
+      <input
+        placeholder="Customer Cash"
+        type="number"
+        id="cash"
+        class="user-input"
+        value=""
+      />
+
+      <button class="check-btn-styles" id="purchase-btn">Purchase</button>
+      <button class="check-btn-styles" id="new-btn">New item</button>
+    </div>
+
+    <div class="container">
+      <div class="top-display-screen-container">
+        <p id="message" class="price-screen">Total: $4.23</p>
+        <div class="connector"></div>
+      </div>
+      <div class="top-register">
+        <div class="btns-container">
+          <button class="btn"></button>
+          <button class="btn"></button>
+          <button class="btn"></button>
+          <button class="btn"></button>
+          <button class="btn"></button>
+          <button class="btn"></button>
+          <button class="btn"></button>
+          <button class="btn"></button>
+          <button class="btn"></button>
+        </div>
+        <div id="cid" class="results">
+          <p class="change-title">Change in Drawer</p>
+          <p>Pennies: $1.01</p>
+          <p>Nickels: $2.05</p>
+          <p>Dimes: $3.10</p>
+          <p>Quarters: $4.25</p>
+          <p>Ones: $90</p>
+          <p>Fives: $55</p>
+          <p>Tens: $20</p>
+          <p>Twenties: $60</p>
+          <p>Hundreds: $100</p>
+        </div>
+      </div>
+      <div class="bottom-register">
+        <div class="circle"></div>
+      </div>
+    </div>
+    <main>
+    <script src="./script.js"></script>
+  </body>
+</html>