From 1666f1619b8e8a22ea037d8953895f528d39d4d0 Mon Sep 17 00:00:00 2001 From: viewsdevelop Date: Thu, 26 Dec 2024 14:30:42 -0500 Subject: [PATCH] first commit --- .canvas | 14 ++ .github/workflows/canvas-sync-ruby-update.yml | 31 +++++ .gitignore | 21 +++ .learn | 5 + CONTRIBUTING.md | 40 ++++++ LICENSE.md | 23 ++++ README.md | 127 ++++++++++++++++++ index.html | 12 ++ index.js | 19 +++ package.json | 18 +++ style.css | 17 +++ test/helpers.js | 14 ++ test/indexTest.js | 35 +++++ 13 files changed, 376 insertions(+) create mode 100644 .canvas create mode 100644 .github/workflows/canvas-sync-ruby-update.yml create mode 100644 .gitignore create mode 100644 .learn create mode 100644 CONTRIBUTING.md create mode 100644 LICENSE.md create mode 100644 README.md create mode 100644 index.html create mode 100644 index.js create mode 100644 package.json create mode 100644 style.css create mode 100644 test/helpers.js create mode 100644 test/indexTest.js diff --git a/.canvas b/.canvas new file mode 100644 index 0000000..ada32df --- /dev/null +++ b/.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 diff --git a/.github/workflows/canvas-sync-ruby-update.yml b/.github/workflows/canvas-sync-ruby-update.yml new file mode 100644 index 0000000..f8818dc --- /dev/null +++ b/.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 }} diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..a85e384 --- /dev/null +++ b/.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 + diff --git a/.learn b/.learn new file mode 100644 index 0000000..c004760 --- /dev/null +++ b/.learn @@ -0,0 +1,5 @@ +tags: +- lab +languages: +- JavaScript + diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 0000000..9244c9e --- /dev/null +++ b/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. diff --git a/LICENSE.md b/LICENSE.md new file mode 100644 index 0000000..a297d51 --- /dev/null +++ b/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. diff --git a/README.md b/README.md new file mode 100644 index 0000000..8d51368 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..67c4d4a --- /dev/null +++ b/index.html @@ -0,0 +1,12 @@ + + + + + Handling Events with JavaScript + + + +
+ + + diff --git a/index.js b/index.js new file mode 100644 index 0000000..d934aba --- /dev/null +++ b/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 diff --git a/package.json b/package.json new file mode 100644 index 0000000..c69220f --- /dev/null +++ b/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" + } +} diff --git a/style.css b/style.css new file mode 100644 index 0000000..ca24bb1 --- /dev/null +++ b/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; +} diff --git a/test/helpers.js b/test/helpers.js new file mode 100644 index 0000000..a8fc601 --- /dev/null +++ b/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, +} diff --git a/test/indexTest.js b/test/indexTest.js new file mode 100644 index 0000000..2d9f1ff --- /dev/null +++ b/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) + }) +})