UW-JavaScript-310B · ductran67 · Feb 7, 2022 · Feb 7, 2022 · Feb 7, 2022 · Feb 7, 2022
diff --git a/battleGame.js b/battleGame.js
@@ -1,15 +1,37 @@
 // 1. Create attack function below.  This will take the following parameters:
 // attackingPlayer, defendingPlayer, baseDamage, variableDamage
 
-
+// const attack = function(attackingPlayer, defendingPlayer, baseDamage, variableDamage) {
+//   // Define variable totalDamage
+//   // totalDamage = baseDamage + a random integer from 0 to the amount of the variableDamage
+//   let totalDamage = baseDamage + Math.floor(Math.random()*(variableDamage + 1));
+//   // Reduce the health property of the defendingPlayer by the amount of the calculated damage
+//   defendingPlayer.health -= totalDamage;
+//   return `${attackingPlayer.name} hits ${defendingPlayer.name} for ${totalDamage} damage`
+// };
 
 // 2. Create player1 and player2 objects below
 // Each should have a name property of your choosing, and health property equal to 10
-
-
+// Define object player1
+const player1 = {
+  name: 'Jupiter',
+  health: 10,
+};
+// Define object player2
+const player2 = {
+  name: 'Venus',
+  health: 10,
+};
 
 // 3. Refactor attack function to an arrow function.  Comment out function above.
-
+const attack = (attackingPlayer, defendingPlayer, baseDamage, variableDamage) => {
+  // Define variable totalDamage
+  // totalDamage = baseDamage + a random integer from 0 to the amount of the variableDamage
+  let totalDamage = baseDamage + Math.floor(Math.random()*(variableDamage + 1));
+  // Reduce the health property of the defendingPlayer by the amount of the calculated damage
+  defendingPlayer.health -= totalDamage;
+  return `${attackingPlayer.name} hits ${defendingPlayer.name} for ${totalDamage} damage`
+};
 
 
 // DO NOT MODIFY THE CODE BELOW THIS LINE

diff --git a/itemizedReceipt.html b/itemizedReceipt.html
@@ -3,10 +3,15 @@
 
 <head>
   <title>Itemized Receipt</title>
+  <link rel="stylesheet" href="w3Style.css">
 </head>
 
 <body>
-  <h1>Open console to view output</h1>
+  <h1>View the output here or open console to view it</h1>
+
+  <div id="itemList"></div>
+
+  <p class="summary" id="totalPrice"></p>
 
   <script src="itemizedReceipt.js"></script>
 </body>

diff --git a/itemizedReceipt.js b/itemizedReceipt.js
@@ -2,8 +2,30 @@
 // with these properties: {descr, price}
 // i.e. {descr: 'Coke', price: 1.99}
 // function should log each item to the console and log a total price
+const logReceipt = (...menuItems) => {
+  // define total price var
+  let totalPrice = 0;
+  // scan through menuItems
+  menuItems.forEach(menuItem => {
+    // Output to console log
+    console.log(`${menuItem.descr} - $${menuItem.price}`);
+    // Calculate the total
+    totalPrice += menuItem.price;
 
+    // Display the output in HTML page
+    // Create a <p> element and insert an HTML content
+    const itemElement = document.createElement('p');
+    itemElement.innerHTML = `${menuItem.descr} - <span class='approval'>$${menuItem.price}</span>`
 
+    const itemList = document.getElementById("itemList");
+    itemList.appendChild(itemElement);
+  });
+  // Display total price in console log
+  console.log(`Total - $${totalPrice}`);
+
+  // Display total price in HTML page
+  document.getElementById('totalPrice').innerHTML = `Total - <span class='title'>$${totalPrice}</span>`;
+};
 
 // Check
 logReceipt(

diff --git a/phoneNumber.html b/phoneNumber.html
@@ -3,10 +3,17 @@
 
 <head>
   <title>Get the Phone Number</title>
+  <link rel="stylesheet" href="w3Style.css">
 </head>
 
 <body>
-  <h1>Open console to view output</h1>
+  <h1>View the output here or open console to view it</h1>
+
+  <p id="phoneChk1"></p>
+  <p id="phoneChk2"></p>
+  <p id="phoneChk3"></p>
+  <p id="phoneChk4"></p>
+  <p class="warning" id="phoneChk5"></p>
 
   <script src="phoneNumber.js"></script>
 </body>

diff --git a/phoneNumber.js b/phoneNumber.js
@@ -4,7 +4,13 @@
 // '206-333-4444'
 // '206 333 4444'
 // Returns true if valid, false if not valid
-
+const testPhoneNumber = (phoneNumber) => {
+  // Define new phone number RegExp
+  const phoneNoRegExp = new RegExp(/^(\d{3}|\(\d{3}\))([-\s])\d{3}([-\s])\d{4}$/);
+  // Check if the "phoneNumber" is a phone number or not. 
+  const isPhoneNo = phoneNoRegExp.test(phoneNumber);
+  return isPhoneNo;
+}; 
 
 
 // Explanation of RegExp
@@ -18,9 +24,24 @@
 // \d{4}  exactly 4 digit characters
 // $      end of line
 
+// Define some phone number vars to check
+const phone1 = '(206) 333-4444';
+const phone2 = '(206) 33-4444';
+// check testPhoneNumber
+const testPhone1 = testPhoneNumber(phone1);
+const testPhone2 = testPhoneNumber(phone2);
+
 // check testPhoneNumber
-console.log(testPhoneNumber('(206) 333-4444')); // should return true
-console.log(testPhoneNumber('(206) 33-4444')); // should return false, missing a digit
+console.log(testPhone1); // should return true
+console.log(testPhone2); // should return false, missing a digit
+
+// Display the results in HTML page
+const phone1Element = document.getElementById("phoneChk1");
+phone1Element.innerHTML = `Is this number <span class='approval'>${phone1}</span> a phone number? <span class='title'>${testPhone1}</span>`;
+
+// phone2Element
+const phone2Element = document.getElementById('phoneChk2');
+phone2Element.innerHTML = `Is this number <span class='warning'>${phone2}</span> a phone number? <span class='warning'>${testPhone2}</span>`;
 
 
 // 1. Create a function parsePhoneNumber that takes in a phoneNumber string 
@@ -29,12 +50,50 @@ console.log(testPhoneNumber('(206) 33-4444')); // should return false, missing a
 // and run the exec method to capture the area code and remaining part of
 // the phone number.
 // Returns an object in the format {areaCode, phoneNumber}
-
-
+const parsePhoneNumber = (phoneNumber) => {
+  // Check if the "phoneNumber" is a phone number
+  if (testPhoneNumber(phoneNumber)) {
+    // Strip all parentheses, hyphens and white space from phone no.
+    const strippedPhoneNo = phoneNumber.replace(/[()\ \s-]+/g, '');
+    // Get areaCode from the stripped phone no.
+    const areaCode = strippedPhoneNo.slice(0, 3);
+    // Get the phone number part from stripped phone no.
+    const phoneNoPart = strippedPhoneNo.replace(areaCode,'');
+    // Define new regexp phone number
+    const phonePartRegExp = new RegExp(`(${areaCode})(${phoneNoPart})`,'g');
+    // Define an array to store all parts of the phone number
+    let arrayPhoneNo = phonePartRegExp.exec(strippedPhoneNo);
+    // Define an object called objPhoneNo
+    const objPhoneNo = {
+      areaCode: arrayPhoneNo[1],
+      phoneNumber: arrayPhoneNo[2],
+    };
+    return objPhoneNo;
+  } else {
+    // console.log(`The string "${phoneNumber}" is not a phone no.`);
+    return `The string "${phoneNumber}" is not a phone number.`;
+  }
+};
+// Define some phone-number vars to check
+const phone3 = '206-333-4444';
+const phone4 = '(222) 422-5353';
+const phone5 = '345 33 2345';
+// check parsePhoneNumber
+const chkParsePhoneNo3 = parsePhoneNumber(phone3);
+const chkParsePhoneNo4 = parsePhoneNumber(phone4);
+const chkParsePhoneNo5 = parsePhoneNumber(phone5);
 
 // Check parsePhoneNumber
-console.log(parsePhoneNumber('206-333-4444'));
+console.log(chkParsePhoneNo3);
 // returns {areaCode: '206', phoneNumber: '3334444'}
 
-console.log(parsePhoneNumber('(222) 422-5353'));
-// returns {areaCode: '222', phoneNumber: '4225353'}
+console.log(chkParsePhoneNo4);
+// returns {areaCode: '222', phoneNumber: '4225353'}
+
+console.log(chkParsePhoneNo5);
+// returns 'The number "345 33 2345" is not a phone number.'
+
+// Display the results in HTML page
+document.getElementById("phoneChk3").innerHTML = `The phone number <span class='approval'>${phone3}</span> with area code is <span class='title'>${chkParsePhoneNo3.areaCode}</span> and number is <span class='approval'>${chkParsePhoneNo3.phoneNumber}</span>.`;
+document.getElementById("phoneChk4").innerHTML = `The phone number <span class='approval'>${phone4}</span> with area code is <span class='title'>${chkParsePhoneNo4.areaCode}</span> and number is <span class='approval'>${chkParsePhoneNo4.phoneNumber}</span>.`;
+document.getElementById("phoneChk5").innerHTML = chkParsePhoneNo5;
diff --git a/soccer.html b/soccer.html
@@ -3,10 +3,12 @@
 
 <head>
   <title>Soccer Results</title>
+  <link rel="stylesheet" href="w3Style.css">
 </head>
 
 <body>
-  <h1>Open console to view output</h1>
+  <h1>View the output here or open console to view it</h1>
+  <p id="totalPoint"></p>
 
   <script src="soccer.js"></script>
 </body>

diff --git a/soccer.js b/soccer.js
@@ -1,42 +1,76 @@
+(function() {
 
-const RESULT_VALUES = {
-  w: 3,
-  d: 1,
-  l: 0
-}
+  const RESULT_VALUES = {
+    w: 3,
+    d: 1,
+    l: 0
+  }
 
-/**
- * Takes a single result string and (one of 'w', 'l', or 'd') 
- * and returns the point value
- * 
- * @param {string} result 
- * @returns {number} point value
- */
-const getPointsFromResult = function getPointsFromResult(result) {
-  return RESULT_VALUES[result];
-}
+  /**
+   * Takes a single result string and (one of 'w', 'l', or 'd') 
+   * and returns the point value
+   * 
+   * @param {string} result 
+   * @returns {number} point value
+   */
+  const getPointsFromResult = function getPointsFromResult(result) {
+    return RESULT_VALUES[result];
+  }
 
-// Create getTotalPoints function which accepts a string of results
-// including wins, draws, and losses i.e. 'wwdlw'
-// Returns total number of points won
+  // Create getTotalPoints function which accepts a string of results
+  // including wins, draws, and losses i.e. 'wwdlw'
+  // Returns total number of points won
+  const getTotalPoints = (results) => {
+    // Convert "results" string to an array
+    const arrayResult = results.split('');
+    // Define totalPoint var
+    let totalPoint = 0;
 
+    // Scan through arrayResult
+    arrayResult.forEach(result => {
+      // Calculate total point
+      totalPoint += getPointsFromResult(result);
+    });
+    // Return the total number of points won
+    return totalPoint;
+  };
 
+  // Check getTotalPoints
+  const totalPoints = getTotalPoints('wwdl');
+  // Output to console log
+  console.log(totalPoints); // should equal 7
+
+  // Display the total point number in HTML page
+  document.getElementById("totalPoint").innerHTML = `The total points of the result <span class='approval'>wwdl</span> is: <span class='title'>${totalPoints}</span>`
 
-// Check getTotalPoints
-console.log(getTotalPoints('wwdl')); // should equal 7
+  // create orderTeams function that accepts as many team objects as desired, 
+  // each argument is a team object in the format { name, results }
+  // i.e. {name: 'Sounders', results: 'wwlwdd'}
+  // Logs each entry to the console as "Team name: points"
+  const orderTeams = (...teams) => {
+    // Convert teams obj to an array called teamArray
+    const teamArray = Array.from(teams);
+    // Scan through team array
+    teamArray.forEach(team => {
+      // Get team info
+      const teamInfo = `${team.name}: ${getTotalPoints(team.results)}`;
+      // Logs team info to the console
+      console.log(teamInfo);
+      // Display the info in HTML page
+      // Create a new element
+      const teamElement = document.createElement('p');
+      teamElement.innerHTML = `${team.name}: <span class='title'>${getTotalPoints(team.results)}</span>`;
+      // Add the new one as a child to element totalPoint
+      document.getElementById("totalPoint").appendChild(teamElement);
+    });
+  };
 
-// create orderTeams function that accepts as many team objects as desired, 
-// each argument is a team object in the format { name, results }
-// i.e. {name: 'Sounders', results: 'wwlwdd'}
-// Logs each entry to the console as "Team name: points"
-
-
-
-// Check orderTeams
-orderTeams(
-  { name: 'Sounders', results: 'wwdl' },
-  { name: 'Galaxy', results: 'wlld' }
-);
-// should log the following to the console:
-// Sounders: 7
-// Galaxy: 4
+  // Check orderTeams
+  orderTeams(
+    { name: 'Sounders', results: 'wwdl' },
+    { name: 'Galaxy', results: 'wlld' }
+  );
+  // should log the following to the console:
+  // Sounders: 7
+  // Galaxy: 4
+})();
diff --git a/spaceShip.js b/spaceShip.js
@@ -2,8 +2,26 @@
 // - should set two properties: name and topSpeed
 // - should have a method accelerate that logs to the console 
 //   `${name} moving to ${topSpeed}`
-
-
+class SpaceShip {
+  constructor(name, topSpeed) {
+    this.name = name;
+    this.topSpeed = topSpeed;
+  }
+  accelerate(){
+    const {name,topSpeed} = this;
+    console.log(`${name} moving to ${topSpeed} km/s`);
+  }
+}
 
 // 2. Call the constructor with a couple ships, 
 // and call accelerate on both of them.
+// Define a ship called "lightSpeed"
+const lightSpeed = new SpaceShip('Light Speed', '300K');
+
+// Define a ship called "blaster"
+const blaster = new SpaceShip('Blaster', '150K');
+
+// Call the constructor and the accelerate method of these ships
+console.log(lightSpeed.topSpeed);
+lightSpeed.accelerate();
+blaster.accelerate();
diff --git a/w3Style.css b/w3Style.css
@@ -0,0 +1,25 @@
+* {
+  box-sizing : border-box;
+}
+
+body {
+  margin: 0;
+  padding: 10px;
+  font-family: Arial, Helvetica, sans-serif;
+}
+.title {
+  color: blue;
+}
+.approval {
+  color: green;
+}
+.warning {
+  color: red;
+}
+span {
+  font-weight: bold;
+}
+.summary {
+  font-weight: bold;
+  font-style: italic;
+}