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,83 @@
+# Lab: Event Listeners in JavaScript
+
+## Introduction
+
+As a new developer at a tech company, you are tasked with creating a dynamic user interface for a simple web application. You’ll add interactive features using event listeners to respond to user actions like clicking buttons and pressing keys. This is a common task in modern web development, where creating responsive and engaging interfaces is crucial.
+
+## Challenge
+
+1. Handle Button Clicks
+2. Capture Keyboard Input
+3. Process Text Input
+4. Combine Multiple Events
+
+## Bonus Challenge
+
+5. Implement Additional Features
+
+## 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. **Handle Button Clicks**
+   - Create a function `changeBackgroundColor()` that changes the background color of the page when a button is clicked.
+   - Reset the background color to white by building a function `resetBackgroundColor()` and attaching it to a double-click event.
+
+3. **Capture Keyboard Input**
+   - Build a function `displayKeyPress(event)` that updates a paragraph to display the key pressed by the user.
+   - Attach the function to a keydown event listener on the document.
+
+4. **Process Text Input**
+   - Create a function `displayUserInput()` that shows real-time input in a paragraph as the user types into a text field.
+   - Attach the function to the input event of a text field.
+
+5. **Combine Multiple Events**
+   - Develop a function that integrates button clicks, key presses, and text input to create more dynamic interactions on the page.
+   - Apply event listeners to perform different tasks based on user interactions.
+
+6. **BONUS CHALLENGE: Implement Additional Features**
+   - Explore additional event types and integrate more complex interactivity.
+   - Ensure the application responds smoothly to rapid user interactions.
+
+## BONUS: Additional Event Handling
+
+Handling additional user interactions can further enhance the user experience. Here are some ideas:
+
+### `mouseover` and `mouseout`
+
+Use `mouseover` and `mouseout` events to change element styles when hovering over them:
+
+```js
+someElement.addEventListener('mouseover', () => {
+  someElement.style.backgroundColor = 'yellow';
+});
+
+someElement.addEventListener('mouseout', () => {
+  someElement.style.backgroundColor = 'initial';
+});
+```
+
+### `submit` Event
+
+Handle form submissions to process user inputs:
+
+```js
+formElement.addEventListener('submit', (event) => {
+  event.preventDefault();
+  // Process form data
+});
+```
+
+## 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)
+- [addEventListener()](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)
+- [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent)
+- [Input Event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event)
+- [Form Submission Event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event)

index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Lab: Event Listeners With JavaScript</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <h1>Lab: Event Listeners With JavaScript</h1>
+  <button id="changeColorButton">Change Background Color</button>
+  <button id="resetColorButton">Reset Background Color</button>
+  <p id="keyPressDisplay">Press any key...</p>
+  <input type="text" id="textInput" placeholder="Type something...">
+  <p id="textInputDisplay">Your input will be displayed here.</p>
+  <script src="script.js"></script>
+</body>
+</html>

index.js

@@ -0,0 +1,43 @@
+// Handle Button Clicks
+
+// Function to change the background color when a button is clicked
+function changeBackgroundColor() {
+  // Implement the function to change background color
+}
+
+// Function to reset the background color when the body is double-clicked
+function resetBackgroundColor() {
+  // Implement the function to reset background color
+}
+
+// Capture Keyboard Input
+
+// Function to display the key pressed by the user
+function displayKeyPress(event) {
+  // Implement the function to display key pressed
+}
+
+// Process Text Input
+
+// Function to display user input in real-time
+function displayUserInput() {
+  // Implement the function to display user input
+}
+
+// Attach Event Listeners
+
+// Attach event listener to change background color when the button is clicked
+document
+  .getElementById('changeColorButton')
+  .addEventListener('click', changeBackgroundColor)
+
+// Attach event listener to reset background color when the body is double-clicked
+document
+  .getElementById('resetColorButton')
+  .addEventListener('dblclick', resetBackgroundColor)
+
+// Attach event listener to display key pressed when a key is pressed down
+document.addEventListener('keydown', displayKeyPress)
+
+// Attach event listener to display user input in real-time as they type
+document.getElementById('textInput').addEventListener('input', displayUserInput)