feat: updates to required JS projects (#520)

* fix: add label and remove input placeholder from palindrome checker * fix: add label to telephone number validator, adjust styling * fix: telephone validator resultDiv --> resultsDiv * fix: add label to cash register, adjust styling for smaller screens * fix: newItemPrice --> price in cash register project * fix: remove newItem button and randomization of price * fix: tweak alert messages for cash register * fix: remove unused message var from cash register * fix: layout shift for pokemon search app top container / screen * fix: remove placeholder from input in favor of label, remove sr-only rule, adjust styling * fix: layout shift after first search * fix: convert resetDisplay function to arrow function, reorder code * fix: update palindrome checker to work with phrases * chore: clean up project code, fix spacing * fix: rename id from btn to check-btn in palindrome checker * fix: U.S. to US for the telephone number validator * chore: remove js comments from cash register * fix: use textContent when more appropriate in pokemon search app, add tags when using innerHTML for cash register * feat: make price and cash in drawer displays dynamic * chore: sync suggestion to simplify boolean check in the palindrome checker project * fix: pokemon search app validation errors * fix: add lang attribute to html tag in roman numeral converter * fix: go back to current handling for special characters in palindrome checker, make original output stand out, update palindrome def * fix: dark mode styling for roman numeral converter, other flex and width tweaks * fix: add logo to pokemon search app, tweak margins, adjust purple color for better accessibility * fix: get pokemon search app colors slightly closer to learn, make purple darker
freeCodeCamp · Dec 15, 2023 · c757acb · c757acb
1 parent fd60be8
commit c757acb
Show file tree

Hide file tree

Showing 14 changed files with 253 additions and 256 deletions.
diff --git a/apps/cash-register/index.html b/apps/cash-register/index.html
@@ -12,7 +12,6 @@
     <title>Cash Register</title>
     <link rel="stylesheet" href="./styles.css" />
   </head>
-
   <body>
     <main>
       <img
@@ -23,21 +22,13 @@
       <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=""
-        />
-
+        <label for="cash">Enter cash from customer:</label>
+        <input 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>
+          <p id="price-screen" class="price-screen"></p>
           <div class="connector"></div>
         </div>
         <div class="top-register">
@@ -52,18 +43,7 @@ <h1>Cash Register Project</h1>
             <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 id="cash-drawer-display" class="cash-drawer-display"></div>
         </div>
         <div class="bottom-register">
           <div class="circle"></div>

diff --git a/apps/cash-register/public/script.js b/apps/cash-register/public/script.js
@@ -1,53 +1,45 @@
-// Do not change code below this line
-const cid = [
-  ['Penny', 1.01],
-  ['Nickel', 2.05],
-  ['Dime', 3.1],
-  ['Quarter', 4.25],
-  ['One', 90],
-  ['Five', 55],
-  ['Ten', 20],
-  ['Twenty', 60],
-  ['One hundred', 100]
+let price = 3.26;
+let cid = [
+  ['PENNY', 1.01],
+  ['NICKEL', 2.05],
+  ['DIME', 3.1],
+  ['QUARTER', 4.25],
+  ['ONE', 90],
+  ['FIVE', 55],
+  ['TEN', 20],
+  ['TWENTY', 60],
+  ['ONE HUNDRED', 100]
 ];
-// Do not change code above this line
 
-const message = document.getElementById('message');
 const displayChangeDue = document.getElementById('change-due');
 const cash = document.getElementById('cash');
 const purchaseBtn = document.getElementById('purchase-btn');
-const newItemBtn = document.getElementById('new-btn');
-let newItemPrice = 4.23;
-
-const getNewPrice = () => {
-  displayChangeDue.innerHTML = '';
-  cash.value = '';
-  newItemPrice = Number((Math.random() * 200 + 1).toFixed(2));
-  message.innerHTML = `Total: $${newItemPrice}`;
-};
+const priceScreen = document.getElementById('price-screen');
+const cashDrawerDisplay = document.getElementById('cash-drawer-display');
 
 const formatResults = (status, change) => {
-  displayChangeDue.innerHTML = `Status: ${status}`;
+  displayChangeDue.innerHTML = `<p>Status: ${status}</p>`;
   change.map(
     money => (displayChangeDue.innerHTML += `<p>${money[0]}: $${money[1]}</p>`)
   );
   return;
 };
 
 const checkCashRegister = () => {
-  if (Number(cash.value) < newItemPrice) {
-    alert('Customer does not have enough money to purchase item');
+  if (Number(cash.value) < price) {
+    alert('Customer does not have enough money to purchase the item');
     cash.value = '';
     return;
   }
 
-  if (Number(cash.value) === newItemPrice) {
-    displayChangeDue.innerHTML = 'No change due. Customer paid with exact cash';
+  if (Number(cash.value) === price) {
+    displayChangeDue.innerHTML =
+      '<p>No change due - customer paid with exact cash</p>';
     cash.value = '';
     return;
   }
 
-  let changeDue = Number(cash.value) - newItemPrice;
+  let changeDue = Number(cash.value) - price;
   let reversedCid = [...cid].reverse();
   let denominations = [100, 20, 10, 5, 1, 0.25, 0.1, 0.05, 0.01];
   let result = { status: 'OPEN', change: [] };
@@ -59,7 +51,7 @@ const checkCashRegister = () => {
   );
 
   if (totalCID < changeDue) {
-    return (displayChangeDue.innerHTML = 'Status: INSUFFICIENT_FUNDS');
+    return (displayChangeDue.innerHTML = '<p>Status: INSUFFICIENT_FUNDS</p>');
   }
 
   if (totalCID === changeDue) {
@@ -79,12 +71,11 @@ const checkCashRegister = () => {
     }
   }
   if (changeDue > 0) {
-    return (displayChangeDue.innerHTML = 'Status: INSUFFICIENT_FUNDS');
+    return (displayChangeDue.innerHTML = '<p>Status: INSUFFICIENT_FUNDS</p>');
   }
 
   formatResults(result.status, result.change);
-  cash.value = '';
-  return;
+  updateUI(result.change);
 };
 
 const checkResults = () => {
@@ -94,11 +85,41 @@ const checkResults = () => {
   checkCashRegister();
 };
 
+const updateUI = change => {
+  const currencyNameMap = {
+    PENNY: 'Pennies',
+    NICKEL: 'Nickels',
+    DIME: 'Dimes',
+    QUARTER: 'Quarters',
+    ONE: 'Ones',
+    FIVE: 'Fives',
+    TEN: 'Tens',
+    TWENTY: 'Twenties',
+    'ONE HUNDRED': 'Hundreds'
+  };
+  // Update cid if change is passed in
+  if (change) {
+    change.forEach(changeArr => {
+      const targetArr = cid.find(cidArr => cidArr[0] === changeArr[0]);
+      targetArr[1] = parseFloat((targetArr[1] - changeArr[1]).toFixed(2));
+    });
+  }
+
+  cash.value = '';
+  priceScreen.textContent = `Total: $${price}`;
+  cashDrawerDisplay.innerHTML = `<p><strong>Change in drawer:</strong></p>
+    ${cid
+      .map(money => `<p>${currencyNameMap[money[0]]}: $${money[1]}</p>`)
+      .join('')}  
+  `;
+};
+
 purchaseBtn.addEventListener('click', checkResults);
+
 cash.addEventListener('keydown', e => {
   if (e.key === 'Enter') {
     checkResults();
   }
 });
 
-newItemBtn.addEventListener('click', getNewPrice);
+updateUI();
diff --git a/apps/cash-register/public/styles.css b/apps/cash-register/public/styles.css
@@ -49,23 +49,24 @@ h1 {
 
 .input-div {
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
   margin: 10px 0 20px;
 }
 
+label {
+  font-size: 18px;
+}
+
 .user-input {
   height: 30px;
   padding: 10px;
   margin: 10px;
   font-size: 15px;
 }
 
-.change-title {
-  font-weight: bold;
-}
-
 .price-screen {
   border: 10px solid #99c9ff;
   background-color: black;
@@ -100,18 +101,18 @@ h1 {
   padding-top: 20px;
   background-color: #99c9ff;
   height: 250px;
-  width: 350px;
+  width: 325px;
 }
 
 .btns-container {
-  width: 30%;
+  width: 25%;
 }
 
 .btn {
   border-radius: 10%;
   border: none;
-  width: 30px;
-  height: 30px;
+  width: 20px;
+  height: 20px;
   background-color: black;
 }
 
@@ -129,10 +130,10 @@ h1 {
   border-width: 3px;
 }
 
-.results {
+.cash-drawer-display {
   font-size: 1.1rem;
   background-color: white;
-  width: 50%;
+  width: 55%;
   height: 95%;
   color: black;
   padding: 10px;
@@ -141,7 +142,7 @@ h1 {
 .bottom-register {
   background-color: #99c9ff;
   height: 50px;
-  width: 400px;
+  width: 325px;
   margin-top: 10px;
 }
 

diff --git a/apps/palindrome-checker/index.html b/apps/palindrome-checker/index.html
@@ -12,7 +12,6 @@
     <title>Palindrome Checker</title>
     <link rel="stylesheet" href="styles.css" />
   </head>
-
   <body>
     <main class="container">
       <img
@@ -22,25 +21,22 @@
       />
       <h1 class="title">Is it a Palindrome?</h1>
       <div class="palindrome-div">
-        <input
-          class="palindrome-input"
-          id="text-input"
-          value=""
-          type="text"
-          placeholder="Type in a word"
-        />
-        <button class="palindrome-btn" id="btn">Check</button>
+        <label for="text-input"
+          >Enter in text to check for a palindrome:
+        </label>
+        <input class="palindrome-input" id="text-input" value="" type="text" />
+        <button class="palindrome-btn" id="check-btn">Check</button>
         <div class="results-div hidden" id="result"></div>
       </div>
       <div class="palindrome-definition-div">
         <p class="palindrome-definition">
           <span role="img" aria-label="light-bulb">&#128161;</span>
-          A <b>palindrome</b> is a word or phrase that can be read the same way
-          forwards and backwards.
+          A <dfn>palindrome</dfn> is a word or sentence that's spelled the same
+          way both forward and backward, ignoring punctuation, case, and
+          spacing.
         </p>
       </div>
     </main>
-
     <script src="script.js"></script>
   </body>
 </html>
diff --git a/apps/palindrome-checker/public/script.js b/apps/palindrome-checker/public/script.js
@@ -1,30 +1,26 @@
 const userInput = document.getElementById('text-input');
-const checkPalindromeBtn = document.getElementById('btn');
+const checkPalindromeBtn = document.getElementById('check-btn');
 const resultDiv = document.getElementById('result');
 
 const checkForPalindrome = input => {
-  const hasSpecialCharactersOrDigits = /[\W\d_]/.test(input);
+  const originalInput = input; // Store for later output
 
   if (input === '') {
     alert('Please input a value');
     return;
   }
 
-  if (hasSpecialCharactersOrDigits === true) {
-    alert('Input should not include numbers and special characters');
-    return;
-  }
-  // Remove the previous result.
+  // Remove the previous result
   resultDiv.replaceChildren();
 
-  const lowerCaseStr = input.replace(/[^A-Z0-9]/gi, '').toLowerCase();
-  let resultMsg = `${input} ${
+  const lowerCaseStr = input.replace(/[^A-Za-z0-9]/gi, '').toLowerCase();
+  let resultMsg = `<strong>${originalInput}</strong> ${
     lowerCaseStr === [...lowerCaseStr].reverse().join('') ? 'is' : 'is not'
   } a palindrome.`;
 
   const pTag = document.createElement('p');
   pTag.className = 'user-input';
-  pTag.appendChild(document.createTextNode(resultMsg));
+  pTag.innerHTML = resultMsg;
   resultDiv.appendChild(pTag);
 
   // Show the result.

diff --git a/apps/palindrome-checker/public/styles.css b/apps/palindrome-checker/public/styles.css
@@ -46,6 +46,11 @@ body {
   box-shadow: 0 6px 6px #002ead;
 }
 
+label {
+  color: #0a0a23;
+  margin-bottom: 20px;
+}
+
 .palindrome-btn {
   width: 90px;
   border: none;