Update README.md

.github/workflows/main.yml

@@ -0,0 +1,15 @@
+name: Unit Tests # name of the test
+
+on: [push] # the Github Action will activate "on" the event that you "push" to the repo
+
+jobs: # the things being executed
+  tests: # the name of your status check, will become important when you do branch protection
+    runs-on: ubuntu-latest # which device on Github's server that you are running the Actions on
+    steps:
+      - uses: actions/checkout@v4 # using version 4 of Actions
+      - name: Install Dependencies
+        run: npm install
+      - name: Unit Test
+        run: npm test ./__tests__/sum.test.js # the actual testing line
+        run: npm test ./__tests__/unit.test.js
+

.gitignore

@@ -1 +1,2 @@
-.DS_Store
+.DS_Store
+node_modules/

README.md

@@ -1 +1,15 @@
 # Lab 5 - Starter
+
+
+### Name: Evan Kauh
+### Partners: None
+
+### Expose.html link: 
+https://evanykauh.github.io/Lab5_Starter/expose.html
+
+### Explore.html link: 
+https://evanykauh.github.io/Lab5_Starter/explore.html
+
+### Check Your Understanding: 
+1. Yes, since unit tests help ensure that individual components of the software perform as expected in isolation.
+2. Yes, since a unit test can precisely measure whether this limit is enforced correctly under various conditions.

__tests__/sum.test.js

@@ -1,5 +1,7 @@
 // sum.test.js
+import { sum } from '../code-to-unit-test/sum';
+
 
 test('adds 1 + 2 to equal 3', () => {
-  // TODO
+  expect(sum(1,2)).toBe(3);
 });

__tests__/unit.test.js

@@ -9,3 +9,91 @@ import {
 } from '../code-to-unit-test/unit-test-me';
 
 // TODO - Part 2
+
+// isPhoneNumber() unit tests
+test('checks if 646-467-3046 is a phone number', () => {
+  expect(isPhoneNumber('646-467-3046')).toBe(true);
+});
+
+test('checks if 000-000-0000 is a phone number', () => {
+  expect(isPhoneNumber('000-000-0000')).toBe(true);
+});
+
+test('checks if aaa-aaa-aaaa is a phone number', () => {
+  expect(isPhoneNumber('aaa-aaa-aaaa')).toBe(false);
+});
+
+test('checks if 123-123 is a phone number', () => {
+  expect(isPhoneNumber('123-123')).toBe(false);
+});
+
+
+// isEmail() unit tests
+test('checks if evankauh@gmail.com is an email', () => {
+  expect(isEmail('evankauh@gmail.com')).toBe(true);
+});
+
+test('checks if hello@yahoo.net is an email', () => {
+  expect(isEmail('123@yahoo.net')).toBe(true);
+});
+
+test('checks if evan.kauh.gmail.com is an email', () => {
+  expect(isEmail('evan.kauh.gmail.com')).toBe(false);
+});
+
+test('checks if word is an email', () => {
+  expect(isEmail('word@gmailcom')).toBe(false);
+});
+
+
+// isStrongPassword unit tests
+test('checks if a1234 is strong password', () => {
+  expect(isStrongPassword('a1234')).toBe(true);
+});
+
+test('checks if Evan_123_Kauh is strong password', () => {
+  expect(isStrongPassword('Evan_123_Kauh')).toBe(true);
+});
+
+test('checks if 1234a is strong password', () => {
+  expect(isStrongPassword('1234a')).toBe(false);
+});
+
+test('checks if isstrongpassword will return false for passwords over 15 characters', () => {
+  expect(isStrongPassword('ThisPasswordIsWayWayWayTooLong')).toBe(false);
+});
+
+
+// isDate unit tests
+test('checks if 12/03/2002 is a date', () => {
+  expect(isDate('12/03/2002')).toBe(true);
+});
+
+test('checks if 1/2/9999 is a date', () => {
+  expect(isDate('1/2/9999')).toBe(true);
+});
+
+test('checks if 12032002 is a date', () => {
+  expect(isDate('12032002')).toBe(false);
+});
+
+test('checks if 12/03/123 is a date', () => {
+  expect(isDate('12/03/123')).toBe(false);
+});
+
+// isHexColor unit tests
+test('checks if FFF is a Hex Color', () => {
+  expect(isHexColor('FFF')).toBe(true);
+});
+
+test('checks if 123a44 is a Hex Color', () => {
+  expect(isHexColor('123a44')).toBe(true);
+});
+
+test('checks if 1 is a Hex Color', () => {
+  expect(isHexColor('1')).toBe(false);
+});
+
+test('checks if 3333333 is a Hex Color', () => {
+  expect(isHexColor('3333333')).toBe(false);
+});

assets/scripts/explore.js

@@ -2,6 +2,59 @@
 
 window.addEventListener('DOMContentLoaded', init);
 
+
+const synth = window.speechSynthesis;
+var text;
+var voices = [];
+var voiceSelect = document.getElementById('voice-select');
+
 function init() {
-  // TODO
-}
+  const button = document.querySelector('button');
+  const smileImage = document.querySelector('#explore img');
+  const textarea = document.getElementById('text-to-speak');
+
+
+  if (speechSynthesis.onvoiceschanged !== undefined) {
+    speechSynthesis.onvoiceschanged = populateVoiceList;
+  }
+
+  populateVoiceList();
+  console.log("This Runs");
+
+  button.addEventListener('click', function(){
+    text = textarea.value;
+    speak(text, smileImage, voiceSelect.value);
+  });
+}
+
+
+function populateVoiceList(){
+  voices = speechSynthesis.getVoices();
+
+  for (var i = 0; i < voices.length; i++){
+    var option = document.createElement('option');
+    option.value = i; 
+    option.innerHTML= voices[i].name + '(' + voices[i].lang + ')';
+    voiceSelect.appendChild(option);
+  }
+}
+
+function speak(text, smileImage, selectedVoiceName){
+  const utterThis = new SpeechSynthesisUtterance(text);
+
+  utterThis.voice = voices[selectedVoiceName];
+
+  synth.speak(utterThis);
+
+  utterThis.onstart = function(){
+    smileImage.src = 'assets/images/smiling-open.png';
+  }
+
+  utterThis.onend = function(){
+    smileImage.src = 'assets/images/smiling.png';
+  }
+
+  utterThis.onerror = function(event) {
+    smileImage.src = 'assets/images/smiling.png';
+  }
+}

assets/scripts/expose.js

@@ -1,7 +1,71 @@
 // expose.js
-
+var currHorn;
 window.addEventListener('DOMContentLoaded', init);
 
 function init() {
-  // TODO
+  const hornSelect = document.getElementById('horn-select');
+  const exposeImage = document.querySelector('#expose img');
+  const volume = document.getElementById('volume');
+  const volumeImage = document.querySelector('#volume-controls img');
+  const soundButton = document.querySelector('button');
+  const audio = document.querySelector('audio');
+  const jsConfetti = new JSConfetti();
+
+
+  hornSelect.addEventListener('change', function() {
+    updateHorn(this.value, exposeImage, audio);
+  });
+
+  volume.addEventListener('input', function(){
+    audio.volume = this.value / 100;
+    updateVolumeImage(this.value, volumeImage);
+  });
+
+  soundButton.addEventListener('click', function(){
+    audio.play();
+    if (currHorn == 'party-horn'){
+      jsConfetti.addConfetti();
+    }
+  });
+}
+
+function updateHorn(hornType, exposeImage, audio) {
+  currHorn = hornType;
+  switch (hornType) {
+    case 'air-horn':
+      exposeImage.src = 'assets/images/air-horn.svg';
+      exposeImage.alt = 'Air Horn';
+      audio.src = 'assets/audio/air-horn.mp3';
+      break;
+    case 'car-horn':
+      exposeImage.src = 'assets/images/car-horn.svg'; 
+      exposeImage.alt = 'Car Horn';
+      audio.src = 'assets/audio/car-horn.mp3';
+      break;
+    case 'party-horn':
+      exposeImage.src = 'assets/images/party-horn.svg';
+      exposeImage.alt = 'Party Horn';
+      audio.src = 'assets/audio/party-horn.mp3';
+      break;
+    default:
+      exposeImage.src = 'assets/images/no-image.png';
+      exposeImage.alt = 'No image selected';
+      break;
+  }
+}
+
+function updateVolumeImage(volLevel, volumeImage) {
+  if (volLevel == 0){
+    volumeImage.src = 'assets/icons/volume-level-0.svg';
+    volumeImage.alt = 'Volume level 0';
+  } else if (volLevel < 33) {
+    volumeImage.src = 'assets/icons/volume-level-1.svg';
+    volumeImage.alt = 'Volume level 1';
+  } else if (volLevel < 67) {
+    volumeImage.src = 'assets/icons/volume-level-2.svg';
+    volumeImage.alt = 'Volume level 2';
+  } else {
+    volumeImage.src = 'assets/icons/volume-level-3.svg';
+    volumeImage.alt = 'Volume level 3';
+  }
 }

expose.html

@@ -32,7 +32,7 @@ <h2>Expose - Party Horn</h2>
         <option value="select" disabled selected>Select Horn:</option>
         <option value="air-horn">Air Horn</option>
         <option value="car-horn">Car Horn</option>
-        <option value="party-horn">Party Horn</option>
+        <option value="party-horn">Party Horn</option>hor
       </select>
       <div id="volume-controls">
         <input type="range" name="volume" id="volume" value="50" min="0" max="100" step="1" />