populate module from js2

Author: SallyMcGrath

.gitignore

@@ -0,0 +1,4 @@
+node_modules
+.DS_Store
+.vscode
+**/.DS_Store

.prettierrc

@@ -0,0 +1,19 @@
+{
+  "arrowParens": "always",
+  "bracketSpacing": true,
+  "embeddedLanguageFormatting": "auto",
+  "htmlWhitespaceSensitivity": "css",
+  "insertPragma": false,
+  "jsxBracketSameLine": false,
+  "jsxSingleQuote": false,
+  "printWidth": 80,
+  "proseWrap": "preserve",
+  "quoteProps": "as-needed",
+  "requirePragma": false,
+  "semi": true,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "useTabs": false,
+  "vueIndentScriptAndStyle": false
+}

Example-Image.jpeg

@@ -1,11 +1,7 @@
-<!--
-Do not edit this file.
-Make a change to the template and then pull changes
-Repo: https://github.com/CodeYourFuture/Module-Template
--->
-
 # Everyone reviews code at CYF
 
+https://curriculum.codeyourfuture.io/guides/reviewing/
+
 Mentors and trainees all review code, and collaborate on improving code quality. We are all helping each other to talk, write, and think about code more clearly.
 
 We are not reviewing code as if we were to merge this PR into production; we are opening a technical conversation for the purpose of insight and development.
@@ -35,7 +31,7 @@ Reviewers, please add labels (provided) to the PR once you've reviewed. This hel
 
 ### Where to find solutions?
 
-You can find the solutions for the module on the `solutions` branch.
+You can find the solutions for the module on the `solutions` branch. If there is no solutions branch, it's because no one has written one yet. Could you do this?
 
 ### Solutions branch
 
@@ -53,14 +49,4 @@ Use these resources to inform your code review, get unstuck, and improve your un
 
 ## Guides
 
-Here's a detailed checklist of the sorts of things we should check code for:
-
-https://syllabus.codeyourfuture.io/guides/marking-guide
-
-Here's a detailed style guide to help us all write clear, high quality code:
-
-https://syllabus.codeyourfuture.io/guides/code-style-guide
-
-Here's some help with giving good feedback during code review:
-
-https://teachertraining.codeyourfuture.io/tasks/code-review
+https://curriculum.codeyourfuture.io/guides/reviewing/

HOW_TO_REVIEW.md

@@ -0,0 +1,28 @@
+/*
+  You can also access the value of a property using bracket notation.
+  Bracket notation can be used when the property is stored as the value of a variable.
+  This can be very useful for iterating through an object's properties or when accessing a lookup table.
+*/
+
+let capitalCities = {
+  UnitedKingdom: "London",
+  China: "Beijing",
+  Peru: "Lima",
+};
+
+/*
+  You have an object, capitalCities, that contains key/value pairs of countries and their capital cities.
+  Log the value for the property assigned to the variable myCountry using bracket notation.
+  Do not use dot notation for this exercise!
+*/
+
+let myCountry = "UnitedKingdom";
+let myCapitalCity; // complete the code
+
+console.log(myCapitalCity);
+
+/* EXPECTED RESULT
+
+  London
+
+*/

accessing-values/bracket-notation.js

@@ -0,0 +1,28 @@
+/*
+  This object has 4 properties
+  The properties of the object are all primitive types (string, number or boolean)
+  What is the type of each property?
+*/
+
+let dog = {
+  breed: "Dalmatian",
+  name: "Spot",
+  isHungry: true,
+  happiness: 6,
+};
+
+/*
+  You can access the values of each property using dot notation.
+  Log the name and breed of this dog using dot notation.
+*/
+
+let dogName; // complete the code
+let dogBreed; // complete the code
+
+console.log(`${dogName} is a ${dogBreed}`);
+
+/* EXPECTED RESULT
+
+  Spot is a Dalmatian
+
+*/

accessing-values/dot-notation.js

@@ -0,0 +1,99 @@
+## Accessing Values
+
+<!--```objectives
+- Access values in an object using dot notation
+- Find the type of a value
+```
+-->
+
+### What is the type of each property?
+
+This object has 4 properties. The properties of the object are all primitive types (string, number or boolean).
+
+```js
+let dog = {
+  breed: "Dalmatian",
+  name: "Spot",
+  isHungry: true,
+  happiness: 6,
+};
+```
+
+## Log the name and breed of this dog using dot notation.
+
+You can access the values of each property using dot notation.
+
+```js
+let dogName; // complete the code
+let dogBreed; // complete the code
+
+console.log(`${dogName} is a ${dogBreed}`);
+```
+
+### Expected Output
+
+> `Spot is a Dalmatian`
+
+## Accessing Object Properties
+
+<!--```objectives
+- Access object properties using bracket notation
+- Use a variable as a key to access an object's property
+```-->
+
+### What is bracket notation?
+
+You can also access the value of a property using bracket notation. Bracket notation can be used when the property is stored as the value of a variable. This can be very useful for iterating through an object's properties or when accessing a lookup table.
+
+```js
+let capitalCities = {
+  UnitedKingdom: "London",
+  China: "Beijing",
+  Peru: "Lima",
+};
+```
+
+## Working with Complex Objects
+
+<!--```objectives
+- Access properties of nested objects and arrays within an object
+- Sort an array of strings
+- Use console.log to print multiple lines
+```-->
+
+### Objects with nested properties
+
+An object's properties can have values that are other objects or arrays.
+
+```js
+let basketballTeam = {
+  name: "Chicago Bulls",
+  numberOfPlayers: 15,
+  topPlayers: ["Michael Jordan", "Scottie Pippen", "Dennis Rodman"],
+  homeStadium: {
+    name: "United Center",
+    capacity: 21000,
+    address: "1901 W Madison St",
+  },
+};
+```
+
+## Access and manipulate properties
+
+### Write code that:
+
+- [ ] accesses the basketball team's top players array
+- [ ] sorts the top players in alphabetical order
+- [ ] logs the name of each player on a new line
+
+```js
+// Write your code here
+```
+
+### Expected Output
+
+```
+Dennis Rodman
+Michael Jordan
+Scottie Pippen
+```

accessing-values/readme.md

@@ -0,0 +1,31 @@
+/*
+  An object's properties can have values that are other objects or arrays.
+*/
+
+let basketballTeam = {
+  name: "Chicago Bulls",
+  numberOfPlayers: 15,
+  topPlayers: ["Michael Jordan", "Scottie Pippen", "Dennis Rodman"],
+  homeStadium: {
+    name: "United Center",
+    capacity: 21000,
+    address: "1901 W Madison St",
+  },
+};
+
+/*
+  Write code that
+    - accesses the basketball team's top players array
+    - sorts the top players in alphabetical order
+    - console.logs the name of each player on a new line
+*/
+
+// write code here
+
+/* EXPECTED RESULT
+
+  Dennis Rodman
+  Michael Jordan
+  Scottie Pippen
+
+*/

accessing-values/values-are-objects.js

@@ -0,0 +1,25 @@
+function setAlarm() {}
+
+// DO NOT EDIT BELOW HERE
+
+var audio = new Audio("alarmsound.mp3");
+
+function setup() {
+  document.getElementById("set").addEventListener("click", () => {
+    setAlarm();
+  });
+
+  document.getElementById("stop").addEventListener("click", () => {
+    pauseAlarm();
+  });
+}
+
+function playAlarm() {
+  audio.play();
+}
+
+function pauseAlarm() {
+  audio.pause();
+}
+
+window.onload = setup;

alarmclock/alarmclock.js

@@ -0,0 +1,104 @@
+/* ======= TESTS - READ CAREFULLY ===== 
+There are some Tests in this file that will help you work out if your code is working.
+*/
+
+const path = require("path");
+const { JSDOM } = require("jsdom");
+
+let page = null;
+
+beforeEach(async () => {
+  page = await JSDOM.fromFile(path.join(__dirname, "index.html"), {
+    resources: "usable",
+    runScripts: "dangerously",
+  });
+
+  jest.useFakeTimers();
+
+  // do this so students can use element.innerText which jsdom does not implement
+  Object.defineProperty(page.window.HTMLElement.prototype, "innerText", {
+    get() {
+      return this.textContent;
+    },
+    set(value) {
+      this.textContent = value;
+    },
+  });
+
+  return new Promise((res) => {
+    page.window.document.addEventListener("load", res);
+  });
+});
+
+afterEach(() => {
+  jest.useRealTimers();
+  page = null;
+});
+
+test("should set heading when button is clicked", () => {
+  const heading = page.window.document.querySelector("#timeRemaining");
+  const input = page.window.document.querySelector("#alarmSet");
+  const button = page.window.document.querySelector("#set");
+
+  input.value = "19";
+  button.click();
+
+  expect(heading).toHaveTextContent("Time Remaining: 00:19");
+});
+
+test("should split values over 60 seconds into minutes and seconds", () => {
+  const heading = page.window.document.querySelector("#timeRemaining");
+  const input = page.window.document.querySelector("#alarmSet");
+  const button = page.window.document.querySelector("#set");
+
+  input.value = "119";
+  button.click();
+
+  expect(heading).toHaveTextContent("Time Remaining: 01:59");
+});
+
+test("should update the heading while counting down", () => {
+  const heading = page.window.document.querySelector("#timeRemaining");
+  const input = page.window.document.querySelector("#alarmSet");
+  const button = page.window.document.querySelector("#set");
+
+  input.value = "19";
+  button.click();
+
+  for (let i = 18; i > 0; i--) {
+    jest.runOnlyPendingTimers();
+    const seconds = `${i}`.padStart(2, "0");
+    expect(heading).toHaveTextContent(`Time Remaining: 00:${seconds}`);
+  }
+});
+
+test("should count down every 1000 ms", () => {
+  const input = page.window.document.querySelector("#alarmSet");
+  const button = page.window.document.querySelector("#set");
+
+  const mockTimer = jest.fn();
+  page.window.setTimeout = mockTimer;
+  page.window.setInterval = mockTimer;
+
+  input.value = "19";
+  button.click();
+
+  expect(mockTimer).toHaveBeenCalledTimes(1);
+  expect(mockTimer).toHaveBeenLastCalledWith(expect.any(Function), 1000);
+});
+
+test("should play audio when the timer reaches zero", () => {
+  const input = page.window.document.querySelector("#alarmSet");
+  const button = page.window.document.querySelector("#set");
+  const mockPlayAlarm = jest.fn();
+
+  page.window.playAlarm = mockPlayAlarm;
+  input.value = "10";
+  button.click();
+
+  expect(mockPlayAlarm).toHaveBeenCalledTimes(0);
+
+  jest.runAllTimers();
+
+  expect(mockPlayAlarm).toHaveBeenCalledTimes(1);
+});