first commit

.canvas

@@ -0,0 +1,14 @@
+---
+:lessons:
+- :id: 218922
+  :course_id: 6602
+  :canvas_url: https://learning.flatironschool.com/courses/6602/assignments/218922
+  :type: assignment
+- :id: 223876
+  :course_id: 6638
+  :canvas_url: https://learning.flatironschool.com/courses/6638/assignments/223876
+  :type: assignment
+- :id: 263235
+  :course_id: 7550
+  :canvas_url: https://learning.flatironschool.com/courses/7550/assignments/263235
+  :type: assignment

.github/workflows/canvas-sync-ruby-update.yml

@@ -0,0 +1,31 @@
+name: Sync with Canvas Ruby v2.7
+
+on:
+  push:
+    branches: [master, main]
+    paths:
+      - 'README.md'
+
+jobs:
+  sync:
+    name: Sync with Canvas
+
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Set up Ruby
+        uses: ruby/setup-ruby@v1
+        with:
+          ruby-version: 2.7
+
+      - name: Install github-to-canvas
+        run: gem install github-to-canvas
+
+      # Secret stored in learn-co-curriculum Settings/Secrets
+      - name: Sync from .canvas file
+        run: github-to-canvas -a -lr
+        env:
+          CANVAS_API_KEY: ${{ secrets.CANVAS_API_KEY }}
+          CANVAS_API_PATH: ${{ secrets.CANVAS_API_PATH }}

.gitignore

@@ -0,0 +1,21 @@
+.DS_Store
+logs
+*.log
+npm-debug.log*
+pids
+*.pid
+*.seed
+lib-cov
+build/Release
+node_modules
+jspm_packages
+.npm
+.node_repl_history
+.results.json
+/.bundle
+/db/*.sqlite3
+/db/*.sqlite3-journal
+/log/*
+!/log/.keep
+/tmp
+

.learn

@@ -0,0 +1,5 @@
+tags:
+- lab
+languages:
+- JavaScript
+

CONTRIBUTING.md

@@ -0,0 +1,40 @@
+# Contributing to Learn.co Curriculum
+
+We're really excited that you're about to contribute to the [open
+curriculum](https://learn.co/content-license) on [Learn.co](https://learn.co).
+If this is your first time contributing, please continue reading to learn how
+to make the most meaningful and useful impact possible.
+
+## Raising an Issue to Encourage a Contribution
+
+If you notice a problem with the curriculum that you believe needs improvement
+but you're unable to make the change yourself, you should raise a Github issue
+containing a clear description of the problem. Include relevant snippets of
+the content and/or screenshots if applicable. Curriculum owners regularly review
+issue lists and your issue will be prioritized and addressed as appropriate.
+
+## Submitting a Pull Request to Suggest an Improvement
+
+If you see an opportunity for improvement and can make the change yourself go
+ahead and use a typical git workflow to make it happen:
+
+* Fork this curriculum repository
+* Make the change on your fork, with descriptive commits in the standard format
+* Open a Pull Request against this repo
+
+A curriculum owner will review your change and approve or comment on it in due
+course.
+
+# Why Contribute?
+
+Curriculum on Learn is publicly and freely available under Learn's
+[Educational Content License](https://learn.co/content-license). By
+embracing an open-source contribution model, our goal is for the curriculum
+on Learn to become, in time, the best educational content the world has
+ever seen.
+
+We need help from the community of Learners to maintain and improve the
+educational content. Everything from fixing typos, to correcting
+out-dated information, to improving exposition, to adding better examples,
+to fixing tests—all contributions to making the curriculum more effective are
+welcome.

LICENSE.md

@@ -0,0 +1,23 @@
+# Learn.co Educational Content License
+
+Copyright (c) 2018 Flatiron School, Inc
+
+The Flatiron School, Inc. owns this Educational Content. However, the Flatiron
+School supports the development and availability of educational materials in
+the public domain. Therefore, the Flatiron School grants Users of the Flatiron
+Educational Content set forth in this repository certain rights to reuse, build
+upon and share such Educational Content subject to the terms of the Educational
+Content License set forth [here](http://learn.co/content-license)
+(http://learn.co/content-license). You must read carefully the terms and
+conditions contained in the Educational Content License as such terms govern
+access to and use of the Educational Content.
+
+Flatiron School is willing to allow you access to and use of the Educational
+Content only on the condition that you accept all of the terms and conditions
+contained in the Educational Content License set forth
+[here](http://learn.co/content-license) (http://learn.co/content-license).  By
+accessing and/or using the Educational Content, you are agreeing to all of the
+terms and conditions contained in the Educational Content License.  If you do
+not agree to any or all of the terms of the Educational Content License, you
+are prohibited from accessing, reviewing or using in any way the Educational
+Content.

README.md

@@ -0,0 +1,127 @@
+# Technical Lesson: Handling Events with JavaScript
+
+## Introduction
+
+In this lesson, we’ll walk through the steps of building interactive functionality in a web application by handling events dynamically with JavaScript. This involves attaching event listeners, responding to user actions, and updating the DOM in real-time.
+
+A software company wants to enhance user experience by allowing elements on a webpage to respond dynamically to user interactions. The goal is to build a system where users can move an object (like a customizable avatar) left and right on a webpage using keyboard inputs, simulating a typical problem encountered in developing interactive user interfaces.
+
+## Challenge
+
+1. **Define the Problem:**
+   - Identify the interactivity requirements for moving a rectangle (the "dodger") left and right on a webpage using keyboard inputs.
+
+2. **Access Elements:**
+   - Select the DOM elements that need to be manipulated.
+
+3. **Attach Event Listeners:**
+   - Add event listeners to detect user actions and respond accordingly.
+
+4. **Handle Events:**
+   - Implement functions to move the dodger left and right based on key presses.
+
+5. **Test and Debug:**
+   - Verify the functionality and ensure the dodger remains within the game field boundaries.
+
+6. **Document the Code:**
+   - Maintain proper documentation and version control for the project.
+
+## Bonus Challenge
+
+5. Implement Additional Features and Improvements
+
+## Instructions
+
+1. **Fork and Clone the Repository:**
+   - Go to the provided GitHub repository link.
+   - Fork the repository to your GitHub account.
+   - Clone the forked repository to your local machine.
+   - Open the project in VSCode.
+   - Run `npm install` to install all necessary dependencies.
+
+2. **Define the Problem:**
+   - Identify interactivity requirements. Our goal is to move a rectangle (the "dodger") left and right across a game field when the user presses the arrow keys.
+   - User Action: Pressing the left arrow key moves the dodger left. Pressing the right arrow key moves it right.
+   - Constraints: The dodger must remain within the boundaries of the game field.
+
+3. **Design and Develop the Code:**
+   - **Step 1: Access Elements**
+     - Select the element we want to manipulate in the DOM.
+       ```javascript
+       const dodger = document.getElementById("dodger");
+       ```
+
+   - **Step 2: Attach Event Listeners**
+     - Detect user interactions (keypresses) and respond accordingly.
+       ```javascript
+       document.addEventListener("keydown", function (event) {
+         console.log(event.key); // Logs the key pressed
+       });
+       ```
+
+   - **Step 3: Handle Events - Move Left**
+     - Move the dodger left when the left arrow key is pressed.
+       ```javascript
+       function moveDodgerLeft() {
+         const leftNumbers = dodger.style.left.replace("px", "");
+         const left = parseInt(leftNumbers, 10);
+
+         if (left > 0) { // Prevent moving off-screen
+           dodger.style.left = `${left - 10}px`;
+         }
+       }
+       ```
+
+   - **Step 4: Handle Events - Move Right**
+     - Move the dodger right when the right arrow key is pressed.
+       ```javascript
+       function moveDodgerRight() {
+         const leftNumbers = dodger.style.left.replace("px", "");
+         const left = parseInt(leftNumbers, 10);
+
+         if (left < 360) { // Prevent moving off-screen
+           dodger.style.left = `${left + 10}px`;
+         }
+       }
+       ```
+
+   - **Step 5: Combine Event Handling**
+     - Call the moveDodgerLeft or moveDodgerRight functions based on key presses.
+       ```javascript
+       document.addEventListener("keydown", function (event) {
+         if (event.key === "ArrowLeft") {
+           moveDodgerLeft();
+         } else if (event.key === "ArrowRight") {
+           moveDodgerRight();
+         }
+       });
+       ```
+
+4. **Test and Refine:**
+   - Open `index.html` in the browser.
+   - Use the arrow keys to move the dodger left and right.
+   - Confirm the dodger stops at the edges of the game field.
+   - Debug using `console.log()` to verify event listener functionality.
+
+5. **Document and Maintain:**
+   - Use version control to track changes and updates.
+   - Schedule regular reviews to ensure content remains relevant and accurate.
+   - Maintain a repository with all lab documents and example code.
+
+## Bonus Challenge: Implement Additional Features and Improvements
+
+1. **Handling Edge Cases:**
+   - Ensure the dodger does not move outside the game field boundaries.
+
+2. **Add New Features:**
+   - Allow the dodger to move vertically.
+   - Enable users to toggle the movement speed.
+
+3. **Experiment with Other Event Types:**
+   - Implement mouse clicks or drag-and-drop functionality.
+
+## Resources
+
+- [document.createElement()](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement)
+- [append()](https://developer.mozilla.org/en-US/docs/Web/API/Element/append)
+- [removeChild()](https://developer.mozilla.org/en-US/docs/Web/API/Node/remove

index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Handling Events with JavaScript</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <div id="dodger" class="dodger"></div>
+  <script src="index.js"></script>
+</body>
+</html>

index.js

@@ -0,0 +1,19 @@
+// Select the dodger element for manipulation
+// Hint: Use document.getElementById to select the element with id "dodger"
+
+// Function to move the dodger left
+// Hint: Define a function moveDodgerLeft()
+// Hint: Convert the current left position from a string to an integer
+// Hint: Ensure the dodger doesn't move off-screen
+// Hint: Update the left position of the dodger
+
+// Function to move the dodger right
+// Hint: Define a function moveDodgerRight()
+// Hint: Convert the current left position from a string to an integer
+// Hint: Ensure the dodger doesn't move off-screen
+// Hint: Update the left position of the dodger
+
+// Attach event listener to respond to key presses
+// Hint: Use document.addEventListener to listen for "keydown" events
+// Hint: Inside the event listener, call moveDodgerLeft if the left arrow key is pressed
+// Hint: Call moveDodgerRight if the right arrow key is pressed

package.json

@@ -0,0 +1,18 @@
+{
+  "name": "technical-lesson-handling-events-with-js",
+  "version": "1.0.0",
+  "description": "A technical lesson on handling events with JavaScript",
+  "main": "index.js",
+  "scripts": {
+    "test": "jest"
+  },
+  "author": "Louis Medina",
+  "license": "MIT",
+  "devDependencies": {
+    "@babel/core": "^7.23.0",
+    "@babel/preset-env": "^7.23.0",
+    "jest": "^27.0.0",
+    "jsdom": "^22.1.0",
+    "mocha-multi": "^1.1.3"
+  }
+}

style.css

@@ -0,0 +1,17 @@
+body {
+  background-color: #f0f0f0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  margin: 0;
+}
+
+.dodger {
+  width: 40px;
+  height: 40px;
+  background-color: #007BFF;
+  position: absolute;
+  left: 180px;
+  bottom: 180px;
+}

test/helpers.js

@@ -0,0 +1,14 @@
+// Helpers for setting up the testing environment
+const { JSDOM } = require('jsdom')
+const fs = require('fs')
+
+const html = fs.readFileSync('index.html', 'utf8')
+
+const dom = new JSDOM(html)
+const document = dom.window.document
+
+global.document = document
+
+module.exports = {
+  document,
+}

test/indexTest.js

@@ -0,0 +1,35 @@
+const { document } = require('./helpers')
+const { expect } = require('chai')
+
+// Sample test suite for JavaScript event handling
+describe('Handling Events with JavaScript', () => {
+  let dodger
+
+  before(() => {
+    dodger = document.getElementById('dodger')
+  })
+
+  it('should select the dodger element', () => {
+    expect(dodger).to.not.be.null
+  })
+
+  it('should move the dodger left when the left arrow key is pressed', () => {
+    // Simulate left arrow key press
+    const event = new dom.window.KeyboardEvent('keydown', { key: 'ArrowLeft' })
+    document.dispatchEvent(event)
+
+    // Check if the dodger's left position has been updated
+    const left = parseInt(dodger.style.left.replace('px', ''), 10)
+    expect(left).to.be.lessThan(180)
+  })
+
+  it('should move the dodger right when the right arrow key is pressed', () => {
+    // Simulate right arrow key press
+    const event = new dom.window.KeyboardEvent('keydown', { key: 'ArrowRight' })
+    document.dispatchEvent(event)
+
+    // Check if the dodger's left position has been updated
+    const left = parseInt(dodger.style.left.replace('px', ''), 10)
+    expect(left).to.be.greaterThan(180)
+  })
+})