Sanjay
4 years ago
parent
e673998d7e
commit
cc833ce34f
@ -0,0 +1,18 @@
|
|||||||
|
*Complete this quiz along with your submission by checking one answer per question.*
|
||||||
|
|
||||||
|
1. What language would you most likely use to create a website?
|
||||||
|
|
||||||
|
- [ ] Machine Code
|
||||||
|
- [ ] JavaScript
|
||||||
|
- [ ] Bash
|
||||||
|
|
||||||
|
2. Development environments are unique to each developer
|
||||||
|
|
||||||
|
- [ ] True
|
||||||
|
- [ ] False
|
||||||
|
|
||||||
|
3. What will a developer do to fix buggy code?
|
||||||
|
|
||||||
|
- [ ] Syntax highlighting
|
||||||
|
- [ ] Debugging
|
||||||
|
- [ ] Code formatting
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
*Complete this quiz in class*
|
||||||
|
|
||||||
|
1. A program can be created without the creator writing any code
|
||||||
|
|
||||||
|
- [ ] True
|
||||||
|
- [ ] False
|
||||||
|
|
||||||
|
2. Low level languages are a popular choice for:
|
||||||
|
|
||||||
|
- [ ] Websites
|
||||||
|
- [ ] Hardware
|
||||||
|
- [ ] Video game software
|
||||||
|
|
||||||
|
3. Which one of these tools would most likely be in a web developer's environment?
|
||||||
|
|
||||||
|
- [ ] Hardware, like a Raspberry Pi
|
||||||
|
- [ ] Browser DevTools
|
||||||
|
- [ ] Operating system documentation
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
*Complete this quiz by checking one answer per question.*
|
||||||
|
|
||||||
|
1. A place to compare and discuss the differences introduced on a branch with reviews, comments, integrated tests, and more is:
|
||||||
|
|
||||||
|
- [ ] GitHub
|
||||||
|
- [ ] A Pull Request
|
||||||
|
- [ ] A feature branch
|
||||||
|
|
||||||
|
2. How would you get all the commits from a remote branch?
|
||||||
|
|
||||||
|
- [ ] `git fetch`
|
||||||
|
- [ ] `git pull`
|
||||||
|
- [ ] `git commits -r`
|
||||||
|
|
||||||
|
3. How do you switch to a branch?
|
||||||
|
|
||||||
|
- [ ] `git switch [branch-name]`
|
||||||
|
- [ ] `git checkout [branch-name]`
|
||||||
|
- [ ] `git load [branch-name]`
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
*Complete this quiz in class*
|
||||||
|
|
||||||
|
1. How do you create a Git repo?
|
||||||
|
|
||||||
|
- [ ] git create
|
||||||
|
- [ ] git start
|
||||||
|
- [ ] git init
|
||||||
|
|
||||||
|
2. What does `git add` do?
|
||||||
|
|
||||||
|
- [ ] Commits your code
|
||||||
|
- [ ] Adds your files to a staging area for tracking
|
||||||
|
- [ ] Adds your files to GitHub
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
*Complete this quiz by checking one answer per question.*
|
||||||
|
|
||||||
|
1. Lighthouse only checks for accessibility problems
|
||||||
|
|
||||||
|
- [ ] true
|
||||||
|
- [ ] false
|
||||||
|
|
||||||
|
2. Color-safe palettes help people with
|
||||||
|
|
||||||
|
- [ ] color-blindness
|
||||||
|
- [ ] visual impairments
|
||||||
|
- [ ] both the above
|
||||||
|
|
||||||
|
3. Descriptive links are vital for accessible web sites
|
||||||
|
|
||||||
|
- [ ] true
|
||||||
|
- [ ] false
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
*Complete this quiz in class*
|
||||||
|
|
||||||
|
1. An accessible web site can be checked in which browser tool
|
||||||
|
|
||||||
|
- [ ] Lighthouse
|
||||||
|
- [ ] Deckhouse
|
||||||
|
- [ ] Cleanhouse
|
||||||
|
|
||||||
|
2. You need a screen reader to test accessibility for visually-impaired users
|
||||||
|
|
||||||
|
- [ ] true
|
||||||
|
- [ ] false
|
||||||
|
|
||||||
|
3. Accessibility is only important on government web sites
|
||||||
|
|
||||||
|
- [ ] true
|
||||||
|
- [ ] false
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
# Analyze a non-accessible web site
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
|
||||||
|
Identify a web site that you believe is NOT accessible, and create an action plan to improve its accessibility. Your first task would be to identify this site, detail the ways that you think it is inaccessible without using analytic tools, and then put it through a Lighthouse analysis. Take the results of this analysis and outline a detailed plan with a minimum of ten points showing how the site could be improved.
|
||||||
|
|
||||||
|
## Rubric
|
||||||
|
|
||||||
|
| Criteria | Exemplary | Adequate | Needs Improvement |
|
||||||
|
| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- | --------------------------- |
|
||||||
|
| student report | includes paragraphs on how the site is inadequate, the Lighthouse report captured as a pdf, a list of ten points to improve, with details on how to improve it | missing 20% of the required | missing 50% of the required |
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
*Complete this quiz after the lesson by checking one answer per question.*
|
||||||
|
|
||||||
|
1. Constants are the same as `let` and `var` to declare variables except
|
||||||
|
|
||||||
|
- [ ] Constants must be initialized
|
||||||
|
- [ ] Constants can be altered
|
||||||
|
- [ ] Constants can be reassigned
|
||||||
|
|
||||||
|
2. Numbers and ____ are JavaScript primitives that handle numeric data
|
||||||
|
|
||||||
|
- [ ] bigint
|
||||||
|
- [ ] boolean
|
||||||
|
- [ ] star
|
||||||
|
|
||||||
|
3. Strings can reside between both single and double quotes
|
||||||
|
|
||||||
|
- [ ] true
|
||||||
|
- [ ] false
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
*Complete this quiz in class*
|
||||||
|
|
||||||
|
1. Booleans are a data type you can use to test the length of a string
|
||||||
|
|
||||||
|
- [ ] true
|
||||||
|
- [ ] false
|
||||||
|
|
||||||
|
1. The following is an operation you can perform on a string
|
||||||
|
|
||||||
|
- [ ] concatenation
|
||||||
|
- [ ] appending
|
||||||
|
- [ ] splicing
|
||||||
|
|
||||||
|
3. `==` and `===` are interchangeable
|
||||||
|
|
||||||
|
- [ ] true
|
||||||
|
- [ ] false
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
# Data Types Practice
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
|
||||||
|
Imagine you are building a shopping cart. Write some documentation on the data types that you would need to complete your shopping experience. How did you arrive at your choices?
|
||||||
|
|
||||||
|
## Rubric
|
||||||
|
|
||||||
|
Criteria | Exemplary | Adequate | Needs Improvement
|
||||||
|
--- | --- | --- | -- |
|
||||||
|
||The six data types are listed and explored in detail, documenting their use|Four datatypes are explored|Two data types are explored|
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
*Complete this quiz by checking one answer per question.*
|
||||||
|
|
||||||
|
1. Arguments must be provided for all parameters in a function
|
||||||
|
|
||||||
|
- [ ] true
|
||||||
|
- [ ] false
|
||||||
|
|
||||||
|
2. What does a default value do?
|
||||||
|
|
||||||
|
- [ ] Sets a correct value
|
||||||
|
- [ ] Gives a starter value for a parameters so your code still behaves if you omit an argument for it
|
||||||
|
- [ ] Has no utility
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
*Complete this quiz in class*
|
||||||
|
|
||||||
|
1. What's an argument?
|
||||||
|
|
||||||
|
- [ ] It's something you declare in the function definition
|
||||||
|
- [ ] It's something you pass into a function at invocation time
|
||||||
|
- [ ] It's something you have with people you know
|
||||||
|
|
||||||
|
2. True or false: a function must return something
|
||||||
|
|
||||||
|
- [ ] true
|
||||||
|
- [ ] false
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
# Fun with Functions
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
|
||||||
|
Create different functions, both functions that return something and functions that don't return anything.
|
||||||
|
|
||||||
|
See if you can create a function that has a mix of parameters and parameters with default values.
|
||||||
|
|
||||||
|
## Rubric
|
||||||
|
|
||||||
|
| Criteria | Exemplary | Adequate | Needs Improvement |
|
||||||
|
| -------- | -------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | ----------------- |
|
||||||
|
| | Solution is offered with two or more well-performing functions with diverse parameters | Working solution is offered with one function and few parameters | Solution has bugs |
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
*Complete this quiz by checking one answer per question.*
|
||||||
|
|
||||||
|
1. What would the following code return: `'1' == 1`
|
||||||
|
|
||||||
|
- [ ] true
|
||||||
|
- [ ] false
|
||||||
|
|
||||||
|
2. Choose the correct operator to express _or_ logic
|
||||||
|
|
||||||
|
- [ ] `a | b`
|
||||||
|
- [ ] `a || b`
|
||||||
|
- [ ] `a or b`
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
*Complete this quiz in class*
|
||||||
|
|
||||||
|
1. The following operator `==` is called
|
||||||
|
|
||||||
|
- [ ] Equality
|
||||||
|
- [ ] Strict equality
|
||||||
|
- [ ] Assignment
|
||||||
|
|
||||||
|
2. A comparison in JavaScript returns what type?
|
||||||
|
|
||||||
|
- [ ] boolean
|
||||||
|
- [ ] null
|
||||||
|
- [ ] string
|
||||||
@ -0,0 +1,40 @@
|
|||||||
|
# Operators
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
|
||||||
|
Play around with operators. Here's a suggestion for a program you can implement:
|
||||||
|
|
||||||
|
You have a set of students from two different grading systems.
|
||||||
|
|
||||||
|
### First grading system
|
||||||
|
|
||||||
|
One grading system is defined as grades being from 1-5 where 3 and above means you pass the course.
|
||||||
|
|
||||||
|
### Second grading system
|
||||||
|
|
||||||
|
The other grade system has the following grades `A, A-, B, B-, C, C-` where `A` is the top grade and `C` is the lowest passing grade.
|
||||||
|
|
||||||
|
### The task
|
||||||
|
|
||||||
|
Given the following array `allStudents` representing all students and their grades, construct a new array `studentsWhoPass` containing all students who pass.
|
||||||
|
|
||||||
|
> TIP, use a for-loop and if...else and comparison operators:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
let allStudents = [
|
||||||
|
'A',
|
||||||
|
'B-'
|
||||||
|
1,
|
||||||
|
4
|
||||||
|
5,
|
||||||
|
2
|
||||||
|
]
|
||||||
|
|
||||||
|
let studentsWhoPass = [];
|
||||||
|
```
|
||||||
|
|
||||||
|
## Rubric
|
||||||
|
|
||||||
|
| Criteria | Exemplary | Adequate | Needs Improvement |
|
||||||
|
| -------- | ------------------------------ | ----------------------------- | ------------------------------- |
|
||||||
|
| | Complete solution is presented | Partial solution is presented | Solution with bugs is presented |
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
*Complete this quiz by checking one answer per question.*
|
||||||
|
|
||||||
|
1. What part of a for-loop would you need to modify to increment its iteration by 5
|
||||||
|
|
||||||
|
- [ ] condition
|
||||||
|
- [ ] counter
|
||||||
|
- [ ] iteration-expression
|
||||||
|
|
||||||
|
2. What's the difference between a `while` and a `for-loop`
|
||||||
|
|
||||||
|
- [ ] A `for-loop` has a counter and iteration-expression, where `while` only has a condition
|
||||||
|
- [ ] A `while` has a counter and iteration-expression where `for-loop` only has a condition
|
||||||
|
- [ ] They are the same, just an alias for one another
|
||||||
|
|
||||||
|
3. Given the code `for (let i=1; i < 5; i++)`, how many iterations will it perform?
|
||||||
|
|
||||||
|
- [ ] 5
|
||||||
|
- [ ] 4
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
*Complete this quiz in class*
|
||||||
|
|
||||||
|
1. To refer to specific item in an array, you would use a
|
||||||
|
|
||||||
|
- [ ] square bracket `[]`
|
||||||
|
- [ ] index
|
||||||
|
- [ ] curly braces `{}`
|
||||||
|
|
||||||
|
2. How do you get the number of items in an array
|
||||||
|
|
||||||
|
- [ ] The `len(array)` method
|
||||||
|
- [ ] The property `size` on the array
|
||||||
|
- [ ] The `length` property on the array
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
# Loop an Array
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
|
||||||
|
Create a program that lists every 3rd number between 1-20 and prints it to the console.
|
||||||
|
|
||||||
|
> TIP: use a for-loop and modify the iteration-expression
|
||||||
|
|
||||||
|
## Rubric
|
||||||
|
|
||||||
|
| Criteria | Exemplary | Adequate | Needs Improvement |
|
||||||
|
| -------- | --------------------------------------- | ------------------------ | ------------------------------ |
|
||||||
|
| | Program runs correctly and is commented | Program is not commented | Program is incomplete or buggy |
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
# Introduction to JavaScript
|
||||||
|
|
||||||
|
JavaScript is the language of the web. In these four lessons, you'll learn its basics.
|
||||||
|
|
||||||
|
### Topics
|
||||||
|
|
||||||
|
1. [Variables and Data Types](1-data-types/README.md)
|
||||||
|
2. [Functions and Methods](2-functions-methods/README.md)
|
||||||
|
3. [Making Decisions with JavaScript](3-making-decisions/README.md)
|
||||||
|
4. [Arrays and Loops](4-arrays-loops/README.md)
|
||||||
|
|
||||||
|
### Credits
|
||||||
|
|
||||||
|
These lessons were written with ♥️ by [Jasmine Greenaway](https://twitter.com/paladique), [Christopher Harrison](https://twitter.com/geektrainer) and [Chris Noring](https://twitter.com/chris_noring)
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
*Complete this quiz after the lesson by checking one answer per question.*
|
||||||
|
|
||||||
|
1. [Spans and Divs are interchangeable]
|
||||||
|
|
||||||
|
- [ ] [true]
|
||||||
|
- [ ] [false]
|
||||||
|
|
||||||
|
2. [The head of an HTML doc can contain:]
|
||||||
|
|
||||||
|
- [ ] [the title tag]
|
||||||
|
- [ ] [metadata]
|
||||||
|
- [ ] [all the above]
|
||||||
|
|
||||||
|
3. [You can't use deprecated tags in your markup]
|
||||||
|
- [ ] [true]
|
||||||
|
- [ ] [false]
|
||||||
|
- [ ] [false, but they have been deprecated for good reason]
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
*A warm-up quiz about HTML*
|
||||||
|
|
||||||
|
Complete this quiz in class
|
||||||
|
|
||||||
|
1. HTML stands for 'HyperText Mockup Language'
|
||||||
|
|
||||||
|
- [ ] [true]
|
||||||
|
- [ ] [false]
|
||||||
|
|
||||||
|
2. All HTML tags need both opening and closing tags
|
||||||
|
|
||||||
|
- [ ] [true]
|
||||||
|
- [ ] [false]
|
||||||
|
|
||||||
|
3. Using semantic markup is most important for
|
||||||
|
|
||||||
|
- [ ] [code readability]
|
||||||
|
- [ ] [screen readers]
|
||||||
|
- [ ] [maintenance]
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
# Practice your HTML: Build a blog mockup
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
|
||||||
|
Imagine you are designing, or redesigning, your personal web site. Create a graphical markup of your site, and then write down the HTML markup you would use to build out the various elements of the site. You can do this on paper, and scan it, or use software of your choice, just make sure to hand-code the HTML markup.
|
||||||
|
|
||||||
|
## Rubric
|
||||||
|
|
||||||
|
| Criteria | Exemplary | Adequate | Needs Improvement |
|
||||||
|
| -------- | ----------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- |
|
||||||
|
| | A blog layout is represented visually with at least 10 elements of markup displayed | A blog layout is represented visually with around 5 elements of markup displayed | A blog layout is represented visually with at most 3 elements of markup displayed |
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
*Complete this quiz after the lesson by checking one answer per question.*
|
||||||
|
|
||||||
|
You will need to reference the following learn module to complete the quiz:
|
||||||
|
|
||||||
|
[Work with CSS](https://docs.microsoft.com/en-us/learn/modules/build-simple-website/4-css-basics)
|
||||||
|
|
||||||
|
1. [You can write CSS directly in the head section of your HTML file]
|
||||||
|
|
||||||
|
- [ ] [true]
|
||||||
|
- [ ] [false]
|
||||||
|
|
||||||
|
1. [It's always necessary to include CSS in your app]
|
||||||
|
|
||||||
|
- [ ] [true]
|
||||||
|
- [ ] [false]
|
||||||
|
- [ ] [false, but if you want it to look good you need CSS]
|
||||||
|
|
||||||
|
1. [Which browser tool can be used to inspect CSS?]
|
||||||
|
- [ ] [Elements]
|
||||||
|
- [ ] [Styles]
|
||||||
|
- [ ] [Network]
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
*A warm-up quiz about CSS*
|
||||||
|
|
||||||
|
Complete this quiz in class
|
||||||
|
|
||||||
|
1. HTML elements must have either a class or an id in order to be styled
|
||||||
|
|
||||||
|
- [ ] [true]
|
||||||
|
- [ ] [false]
|
||||||
|
|
||||||
|
2. CSS stands for 'Complete Style Sheets'
|
||||||
|
|
||||||
|
- [ ] [true]
|
||||||
|
- [ ] [false]
|
||||||
|
|
||||||
|
3. CSS can be used to create animations
|
||||||
|
|
||||||
|
- [ ] [true]
|
||||||
|
- [ ] [false]
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
# CSS Refactoring
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
|
||||||
|
Restyle the terrarium using either Flexbox or CSS Grid, and take screenshots to show that you have tested it on several browsers. You might need to change the markup so create a new version of the app with the art in place for your refactor. Don't worry about making the elements draggable; only refactor the HTML and CSS for now.
|
||||||
|
|
||||||
|
## Rubric
|
||||||
|
|
||||||
|
| Criteria | Exemplary | Adequate | Needs Improvement |
|
||||||
|
| -------- | ----------------------------------------------------------------- | ----------------------------- | ------------------------------------ |
|
||||||
|
| | Present a completely restyled terrarium using Flexbox or CSS Grid | Restyle a few of the elements | Fail to restyle the terrarium at all |
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
*Complete this quiz after the lesson by checking one answer per question.*
|
||||||
|
|
||||||
|
1. [The DOM is a model to represent a document on the web]
|
||||||
|
|
||||||
|
- [ ] [true]
|
||||||
|
- [ ] [false]
|
||||||
|
|
||||||
|
2. [Use JavaScript closures to perform the following:]
|
||||||
|
|
||||||
|
- [ ] [write functions within functions]
|
||||||
|
- [ ] [enclose the DOM]
|
||||||
|
- [ ] [close script blocks]
|
||||||
|
|
||||||
|
3. [Fill in the blank: Closures are useful when one or more functions need to access an outer function's ______]
|
||||||
|
|
||||||
|
- [ ] [arrays]
|
||||||
|
- [ ] [scope]
|
||||||
|
- [ ] [functions]
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
*A warm-up quiz about the DOM*
|
||||||
|
|
||||||
|
Complete this quiz in class
|
||||||
|
|
||||||
|
1. The DOM stands for 'Document Object Management'
|
||||||
|
|
||||||
|
- [ ] [true]
|
||||||
|
- [ ] [false]
|
||||||
|
|
||||||
|
2. The DOM can be thought of as a tree
|
||||||
|
|
||||||
|
- [ ] [true]
|
||||||
|
- [ ] [false]
|
||||||
|
|
||||||
|
3. Using the Web API, you can manipulate the DOM
|
||||||
|
|
||||||
|
- [ ] [true]
|
||||||
|
- [ ] [false]
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
# Work a bit more with the DOM
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
|
||||||
|
Research the DOM a little more by 'adopting' a DOM element. Visit the MSDN's [list of DOM interfaces](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) and pick one. Find it being used on a web site in the web, and write an explanation of how it is used.
|
||||||
|
|
||||||
|
## Rubric
|
||||||
|
|
||||||
|
| Criteria | Exemplary | Adequate | Needs Improvement |
|
||||||
|
| -------- | --------------------------------------------- | ------------------------------------------------ | ----------------------- |
|
||||||
|
| | Paragraph write-up is presented, with example | Paragraph write-up is presented, without example | No writeup is presented |
|
||||||
@ -0,0 +1,34 @@
|
|||||||
|
# My Terrarium: A project to learn about HTML, CSS, and DOM manipulation using JavaScript 🌵🌱
|
||||||
|
|
||||||
|
A small drag and drop code-meditation. With a little HTML, JS and CSS, you can build a web interface, style it, and add an interaction.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
# Lessons
|
||||||
|
|
||||||
|
1. [Intro to HTML](./1-intro-to-html/README.md)
|
||||||
|
2. [Intro to CSS](./2-intro-to-css/README.md)
|
||||||
|
3. [Intro to DOM and JS Closures](./3-intro-to-DOM-and-closures/README.md)
|
||||||
|
|
||||||
|
## Credits
|
||||||
|
|
||||||
|
Written with ♥️ by [Jen Looper](https://www.twitter.com/jenlooper)
|
||||||
|
|
||||||
|
The terrarium created via CSS was inspired by Jakub Mandra's glass jar [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY).
|
||||||
|
|
||||||
|
The artwork was hand drawn by [Jen Looper](http://jenlooper.com) using Procreate.
|
||||||
|
|
||||||
|
## Deploy your Terrarium
|
||||||
|
|
||||||
|
You can deploy, or publish your terrarium to the web using Azure Static Web Apps.
|
||||||
|
|
||||||
|
1. Fork this repo
|
||||||
|
|
||||||
|
2. Press this button
|
||||||
|
|
||||||
|
[](https://portal.azure.com/?feature.customportal=false&WT.mc_id=cxaall-4621-cxall#create/Microsoft.StaticApp)
|
||||||
|
|
||||||
|
3. Walk through the wizard creating your app. Make sure you set the app root to either be `/solution` or the root of your codebase. There's no API in this app, so don't worry about adding that. A .github folder will be created in your forked repo that will help Azure Static Web Apps' build service build and publish your app to a new URL.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
*Complete this quiz by checking one answer per question.*
|
||||||
|
|
||||||
|
1. Just about anything a user does on a page raises an event
|
||||||
|
|
||||||
|
- [ ] true
|
||||||
|
- [ ] false
|
||||||
|
|
||||||
|
2. Common events include
|
||||||
|
|
||||||
|
- [ ] click_event
|
||||||
|
- [ ] select_event
|
||||||
|
- [ ] input_event
|
||||||
|
- [ ] all of these
|
||||||
|
|
||||||
|
3. You can use anonymous functions to create event handlers
|
||||||
|
|
||||||
|
- [ ] true
|
||||||
|
- [ ] false
|
||||||
@ -0,0 +1,20 @@
|
|||||||
|
*Complete this quiz in class.*
|
||||||
|
|
||||||
|
1. Event-driven programming is when a user
|
||||||
|
|
||||||
|
- [ ] clicks on a button
|
||||||
|
- [ ] changes a value
|
||||||
|
- [ ] interacts with the page
|
||||||
|
- [ ] any of the above
|
||||||
|
|
||||||
|
2. In procedural programming, functions are called
|
||||||
|
|
||||||
|
- [ ] any time
|
||||||
|
- [ ] in a specific order
|
||||||
|
- [ ] left to right
|
||||||
|
|
||||||
|
3. The universal method exposed in the DOM for registering event handlers is called
|
||||||
|
|
||||||
|
- [ ] addEventListener
|
||||||
|
- [ ] addListener
|
||||||
|
- [ ] addEvent
|
||||||
@ -0,0 +1,30 @@
|
|||||||
|
# Event-Driven Programming - Build a Typing Game
|
||||||
|
|
||||||
|
## Introduction
|
||||||
|
|
||||||
|
Typing is one of the most underrated skills of the developer. The ability to quickly transfer thoughts from your head to your editor allows creativity to flow freely. One of the best ways to learn is to play a game!
|
||||||
|
|
||||||
|
> So, let's build a typing game!
|
||||||
|
|
||||||
|
You're going to use the JavaScript, HTML and CSS skills you have built up so far to create a typing game. The game will present the player with a random quote (we're using [Sherlock Holmes](https://en.wikipedia.org/wiki/Sherlock_Holmes) quotes) and time how long the player takes to type it out accurately. You're going to use the JavaScript, HTML and CSS skills you have built up so far to create a typing game.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## Prerequisites
|
||||||
|
|
||||||
|
This lesson assumes you're familiar with the following concepts:
|
||||||
|
|
||||||
|
- Creating text input and button controls
|
||||||
|
- CSS and setting styles using classes
|
||||||
|
- JavaScript basics
|
||||||
|
- Creating an array
|
||||||
|
- Creating a random number
|
||||||
|
- Getting the current time
|
||||||
|
|
||||||
|
## Lesson
|
||||||
|
|
||||||
|
[Creating a typing game by using event driven programming](./typing-game/README.md)
|
||||||
|
|
||||||
|
## Credits
|
||||||
|
|
||||||
|
Written with ♥️ by [Christopher Harrison](http://www.twitter.com/geektrainer)
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
*Complete this quiz by checking one answer per question.*
|
||||||
|
|
||||||
|
1. The World Wide Web was invented by
|
||||||
|
|
||||||
|
- [ ] Tom Barnard-Loft
|
||||||
|
- [ ] Tim Berners-Lee
|
||||||
|
- [ ] Trish Berth-Pool
|
||||||
|
|
||||||
|
2. The first browser was called
|
||||||
|
|
||||||
|
- [ ] World Wide Web
|
||||||
|
- [ ] Mozilla
|
||||||
|
- [ ] Netscape
|
||||||
|
|
||||||
|
3. Browsers can store a user's browsing history
|
||||||
|
|
||||||
|
- [ ] true
|
||||||
|
- [ ] false
|
||||||
@ -0,0 +1,20 @@
|
|||||||
|
*A warm-up quiz about browsers*
|
||||||
|
|
||||||
|
Complete this quiz in class
|
||||||
|
|
||||||
|
1. You can get browser extensions from
|
||||||
|
|
||||||
|
- [ ] WalMart
|
||||||
|
- [ ] The browser's extension store
|
||||||
|
- [ ] The App store
|
||||||
|
|
||||||
|
2. NPM stands for
|
||||||
|
|
||||||
|
- [ ] Node Package Manager
|
||||||
|
- [ ] Netscape Primary Mix
|
||||||
|
- [ ] Natural Processing Manager
|
||||||
|
|
||||||
|
3. Your browser can serve web pages both securely and insecurely
|
||||||
|
|
||||||
|
- [ ] true
|
||||||
|
- [ ] false
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
# Restyle your Extension
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
|
||||||
|
The codebase for this extension comes complete with styles, but you don't have to use them; make your extension your own by restyling it by editing its css file.
|
||||||
|
|
||||||
|
## Rubric
|
||||||
|
|
||||||
|
| Criteria | Exemplary | Adequate | Needs Improvement |
|
||||||
|
| -------- | -------------------------------------------- | --------------------- | ----------------- |
|
||||||
|
| | Code is submitted with functional new styles | Styling is incomplete | Styles are buggy |
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
*Complete this quiz by checking one answer per question.*
|
||||||
|
|
||||||
|
1. LocalStorage is cleared every time you close the browser window
|
||||||
|
|
||||||
|
- [ ] true
|
||||||
|
- [ ] false
|
||||||
|
|
||||||
|
2. The main browser window controls a browser's extension's LocalStorage
|
||||||
|
|
||||||
|
- [ ] true
|
||||||
|
- [ ] false
|
||||||
|
|
||||||
|
3. REST in an API context stands for
|
||||||
|
- [ ] Representational State Transfer
|
||||||
|
- [ ] Returning State Tasks
|
||||||
|
- [ ] Rendering State To Browser
|
||||||
@ -0,0 +1,20 @@
|
|||||||
|
*A warm-up quiz about the browser*
|
||||||
|
|
||||||
|
Complete this quiz in class
|
||||||
|
|
||||||
|
1. APIs stand for
|
||||||
|
|
||||||
|
- [ ] Application Programming Interfaces
|
||||||
|
- [ ] A Programming Inference
|
||||||
|
- [ ] Anti Proven Intentions
|
||||||
|
|
||||||
|
2. Use an API to interact with
|
||||||
|
|
||||||
|
- [ ] Another web-connected asset
|
||||||
|
- [ ] A database
|
||||||
|
- [ ] Either of the above
|
||||||
|
|
||||||
|
3. Anyone can create an API
|
||||||
|
|
||||||
|
- [ ] true
|
||||||
|
- [ ] false
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
# Adopt an API
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
|
||||||
|
APIs can be very fun to play with. Here is a [list of many free ones](https://github.com/public-apis/public-apis). Pick and API, and build a browser extension that solves a problem. It can be as small a problem of not having enough pet pictures (so, try the [dog CEO API](https://dog.ceo/dog-api/)) or something bigger - have fun!
|
||||||
|
|
||||||
|
## Rubric
|
||||||
|
|
||||||
|
| Criteria | Exemplary | Adequate | Needs Improvement |
|
||||||
|
| -------- | -------------------------------------------------------------------------- | ---------------------------------------- | ----------------------- |
|
||||||
|
| | A complete browser extension is submitted using an API from the above list | A partial browser extension is submitted | The submission has bugs |
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
*Complete this quiz by checking one answer per question.*
|
||||||
|
|
||||||
|
1. To get a better view of your site's performance, clear its cache and reload in the profiler
|
||||||
|
|
||||||
|
- [ ] true
|
||||||
|
- [ ] false
|
||||||
|
|
||||||
|
2. Browser extensions are inherently performant
|
||||||
|
|
||||||
|
- [ ] true
|
||||||
|
- [ ] false
|
||||||
|
|
||||||
|
3. Analyze the following for performance bottlenecks
|
||||||
|
|
||||||
|
- [ ] DOM traversals
|
||||||
|
- [ ] JavaScript optimizations
|
||||||
|
- [ ] Asset management
|
||||||
|
- [ ] All the above
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
*Complete this quiz in class.*
|
||||||
|
|
||||||
|
1. Test the performance of your app
|
||||||
|
|
||||||
|
- [ ] Using the browser's tools
|
||||||
|
- [ ] Using a separate software package
|
||||||
|
- [ ] Manually
|
||||||
|
|
||||||
|
2. The 'performance' of a web site is an analysis of
|
||||||
|
|
||||||
|
- [ ] How fast it loads
|
||||||
|
- [ ] How fast the code on it runs
|
||||||
|
- [ ] Both of the above
|
||||||
|
|
||||||
|
3. Overall, the 'weight' of web pages over the past few years has gotten
|
||||||
|
- [ ] lighter
|
||||||
|
- [ ] heavier
|
||||||
|
- [ ] stayed the same
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
# Analyze a site for performance
|
||||||
|
|
||||||
|
Provide a detailed report of a web site, showing areas where performance is problematic. Analyze why the site is slow and what you could do to speed it up. Don't rely only on the browser tools, but do some research on other tools that can help your report
|
||||||
|
|
||||||
|
## Rubric
|
||||||
|
|
||||||
|
| Criteria | Exemplary | Adequate | Needs Improvement |
|
||||||
|
| -------- | ---------------------------------------------------------------------------------------------------------- | --------------------------- | ----------------------------- |
|
||||||
|
| | A report is presented with details drawn not only from browser tools but from 3rd party tools if available | A basic report is presented | A minimal report is presented |
|
||||||
@ -0,0 +1,28 @@
|
|||||||
|
# Carbon Trigger Browser Extension: Starter Code
|
||||||
|
|
||||||
|
Using tmrow's C02 Signal API to track electricity usage, build a browser extension so that you can have a reminder right in your browser about how heavy your region's electricity usage is. Using this extension ad hoc will help you to make judgement calls on your activities based on this information.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## Getting Started
|
||||||
|
|
||||||
|
You will need to have [npm](https://npmjs.com) installed. Download a copy of this code to a folder on your computer.
|
||||||
|
|
||||||
|
Install all the required packages:
|
||||||
|
|
||||||
|
```
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
Build the extension from webpack
|
||||||
|
|
||||||
|
```
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
To install on Edge, use the 'three dot' menu on the top right corner of the browser to find the Extensions panel. From there, select 'Load Unpacked' to load a new extension. Open the 'dist' folder at the prompt and the extension will load. To use it, you will need an API key for CO2 Signal's API ([get one here via email](https://www.co2signal.com/) - enter your email in the box on this page) and the [code for your region](http://api.electricitymap.org/v3/zones) corresponding to the [Electricity Map](https://www.electricitymap.org/map) (in Boston, for example, I use 'US-NEISO').
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Once the API key and region is input into the extension interface, the colored dot in the browser extension bar should change to reflect your region's energy usage and give you a pointer on what energy-heavy activities would be appropriate for you to perform. The concept behind this 'dot' system was given to me by the [Energy Lollipop extension](https://energylollipop.com/) for California emissions.
|
||||||
|
|
||||||
@ -0,0 +1,28 @@
|
|||||||
|
# Building a browser extension
|
||||||
|
|
||||||
|
Building browser extensions is a fun and interesting way to think about the performance of your apps while building a different type of web asset. This module includes lessons on how browsers work and how to deploy a browser extension, how to build a form, call an API, and use local storage, and how to gauge the performance of your website and improve it.
|
||||||
|
|
||||||
|
You'll build a browser extension that works on Edge, Chrome, and Firefox. This extension, which is like a mini web site that is tailored to a very specific task, checks the [C02 Signal API](https://www.co2signal.com) for a given region's electricity usage and carbon intensity, and returns a reading on the region's carbon footprint.
|
||||||
|
|
||||||
|
This extension can be called ad hoc by a user once an API key and region code is input into a form to determine local electricity usage and thereby offer data that can influence a user's electricity decisions. For example, it may be preferable to delay running a clothes dryer (a carbon-intense activity) during a period of high electricity usage in your region.
|
||||||
|
|
||||||
|
### Topics
|
||||||
|
|
||||||
|
1. [About the browser](1-about-browsers/README.md)
|
||||||
|
2. [Forms and local storage](2-forms-browsers-local-storage/README.md)
|
||||||
|
3. [Background tasks and performance](3-background-tasks-and-performance/README.md)
|
||||||
|
|
||||||
|
### Credits
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## Credits
|
||||||
|
|
||||||
|
The idea for this web carbon trigger was offered by Asim Hussain, lead at Microsoft of the Green Cloud Advocacy team and author of the [Green Principles](https://principles.green/). It was originally a [web site project](https://github.com/jlooper/green).
|
||||||
|
|
||||||
|
The structure of the browser extension was influenced by [Adebola Adeniran's COVID extension](https://github.com/onedebos/covtension).
|
||||||
|
|
||||||
|
The concept behind the 'dot' icon system was suggested by the icon structure of the [Energy Lollipop](https://energylollipop.com/) browser extension for California emissions.
|
||||||
|
|
||||||
|
These lessons were written with ♥️ by [Jen Looper](https://www.twitter.com/jenlooper)
|
||||||
|
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
*Complete this quiz after the lesson by checking one answer per question.*
|
||||||
|
|
||||||
|
1. Classes rely on inheritance to ascribe to behaviors
|
||||||
|
|
||||||
|
- [ ] true
|
||||||
|
- [ ] false
|
||||||
|
|
||||||
|
2. Composition is a preferred design pattern for game objects
|
||||||
|
|
||||||
|
- [ ] true
|
||||||
|
- [ ] false
|
||||||
|
|
||||||
|
3. Pub/Sub stands for:
|
||||||
|
|
||||||
|
- [ ] Publish/Subscribe
|
||||||
|
- [ ] Print/Staple
|
||||||
|
- [ ] Publish/Sanitize
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
*A warm-up quiz about game development using JavaScript*
|
||||||
|
|
||||||
|
Complete this quiz in class
|
||||||
|
|
||||||
|
1. JavaScript is an unpopular language for building games
|
||||||
|
|
||||||
|
- [ ] [true]
|
||||||
|
- [ ] [false]
|
||||||
|
|
||||||
|
2. Pub/Sub is a preferred pattern for managing the game's assets and flow
|
||||||
|
|
||||||
|
- [ ] [true]
|
||||||
|
- [ ] [false]
|
||||||
|
|
||||||
|
3. Object inheritance can be handled by either using classes or composition
|
||||||
|
|
||||||
|
- [ ] [true]
|
||||||
|
- [ ] [false]
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
# Mock up a game
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
|
||||||
|
Using the code samples in the lesson, write a representation of a game you enjoy. It will have to be a simple game, but the goal is to use either the class or the composition pattern and the pub/sub pattern to show how a game might launch. Get creative!
|
||||||
|
|
||||||
|
## Rubric
|
||||||
|
|
||||||
|
| Criteria | Exemplary | Adequate | Needs Improvement |
|
||||||
|
| -------- | ------------------------------------------------------- | ----------------------------------------------------- | --------------------------------------------------- |
|
||||||
|
| | Three elements are placed on the screen and manipulated | Two elements are placed on the screen and manipulated | One element is placed on the screen and manipulated |
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
*Complete this quiz after the lesson by checking one answer per question.*
|
||||||
|
|
||||||
|
1. You can perform drawing operations directly on the Canvas
|
||||||
|
|
||||||
|
- [ ] true
|
||||||
|
- [ ] false
|
||||||
|
|
||||||
|
2. You listen to the `onload` event to know when an image has loaded asynchronously
|
||||||
|
|
||||||
|
- [ ] true
|
||||||
|
- [ ] false
|
||||||
|
|
||||||
|
3. You draw images onto a screen with an operation called
|
||||||
|
|
||||||
|
- [ ] paintImage()
|
||||||
|
- [ ] drawImage()
|
||||||
|
- [ ] draw()
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
*A warm-up quiz about game development*
|
||||||
|
|
||||||
|
Complete this quiz in class
|
||||||
|
|
||||||
|
1. The Canvas element is what you use to draw on a screen
|
||||||
|
|
||||||
|
- [ ] true
|
||||||
|
- [ ] false
|
||||||
|
|
||||||
|
2. You can only draw simple geometric shapes
|
||||||
|
|
||||||
|
- [ ] true
|
||||||
|
- [ ] false
|
||||||
|
|
||||||
|
3. The point 0,0 is in the bottom left
|
||||||
|
|
||||||
|
- [ ] true
|
||||||
|
- [ ] false
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
*Complete this quiz after the lesson by checking one answer per question.*
|
||||||
|
|
||||||
|
1. You always need to redraw the screen
|
||||||
|
|
||||||
|
- [ ] true
|
||||||
|
- [ ] false
|
||||||
|
|
||||||
|
2. What is a game loop?
|
||||||
|
|
||||||
|
- [ ] A function that ensures the game can be restarted
|
||||||
|
- [ ] A function that decided how fast the game should run
|
||||||
|
- [ ] A function that is invoked at regular intervals and draws what the user should see
|
||||||
|
|
||||||
|
3. A good case for redrawing the screen is
|
||||||
|
|
||||||
|
- [ ] A user interaction happened
|
||||||
|
- [ ] Something has moved
|
||||||
|
- [ ] Time has passed
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
*A warm-up quiz about game development*
|
||||||
|
|
||||||
|
Complete this quiz in class
|
||||||
|
|
||||||
|
1. Any object on the screen can receive keyboard events
|
||||||
|
|
||||||
|
- [ ] true
|
||||||
|
- [ ] false
|
||||||
|
|
||||||
|
2. You can use the same method to listen to key events and mouse events
|
||||||
|
|
||||||
|
- [ ] true
|
||||||
|
- [ ] false
|
||||||
|
|
||||||
|
3. To make things happen at a regular interval, you use what function?
|
||||||
|
|
||||||
|
- [ ] setInterval()
|
||||||
|
- [ ] setTimeout()
|
||||||
|
- [ ] sleep()
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
# Comment Your Code
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
|
||||||
|
Go over your current /app.js file in your game folder, and find ways to comment it and tidy it up. It's very easy for code to get out of control, and now's a good chance to add comments to ensure that you have readable code so that you can use it later.
|
||||||
|
|
||||||
|
## Rubric
|
||||||
|
|
||||||
|
| Criteria | Exemplary | Adequate | Needs Improvement |
|
||||||
|
| -------- | ------------------------------------------------------------------ | ------------------------------------- | -------------------------------------------------------------- |
|
||||||
|
| | `app.js` code is fully commented and organized into logical blocks | `app.js` code is adequately commented | `app.js` code is somewhat disorganized and lacks good comments |
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
*Complete this quiz after the lesson by checking one answer per question.*
|
||||||
|
|
||||||
|
1. In collision detection you compare two
|
||||||
|
|
||||||
|
- [ ] circles and whether they intersect
|
||||||
|
- [ ] rectangles and whether they intersect
|
||||||
|
- [ ] the distance between two points
|
||||||
|
|
||||||
|
2. The reason for implementing a *cooldown* effect is because
|
||||||
|
|
||||||
|
- [ ] Making the game harder as you can't repeatedly fire a laser to destroy enemies
|
||||||
|
- [ ] JavaScript can only produce a certain number of events per time unit, so you need to limit them
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
*A warm-up quiz about about game development*
|
||||||
|
|
||||||
|
Complete this quiz in class
|
||||||
|
|
||||||
|
1. Collision detection is how we detect if two things have collided.
|
||||||
|
|
||||||
|
- [ ] true
|
||||||
|
- [ ] false
|
||||||
|
|
||||||
|
2. How can we remove an item from the screen?
|
||||||
|
|
||||||
|
- [ ] Call the garbage collector
|
||||||
|
- [ ] Mark it as dead, only paint *not dead* objects next time we draw the screen
|
||||||
|
- [ ] Place the item on a negative coordinate
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
# Explore Collisions
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
|
||||||
|
## Rubric
|
||||||
|
|
||||||
|
To better understand how collisions work, build a very small game with a few items that collide. Make them move via keypresses or mouse clicks, and make something happen to one of the items when it is hit. It could be something like a meteor hitting the earth, or bumper-cars. Get creative!
|
||||||
|
|
||||||
|
| Criteria | Exemplary | Adequate | Needs Improvement |
|
||||||
|
| -------- | ------------------------------------------------------------------------------------------------------------------------ | ------------------------------ | ----------------- |
|
||||||
|
| | Complete working code sample is produced, with items drawn to canvas, basic collision happening, and reactions occurring | Code is incomplete in some way | Code malfunctions |
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
*Complete this quiz after the lesson by checking one answer per question.*
|
||||||
|
|
||||||
|
1. What's a fun way to show how many lifes a player has left
|
||||||
|
|
||||||
|
- [ ] a number of ships
|
||||||
|
- [ ] a decimal number
|
||||||
|
|
||||||
|
2. How do you center text in the middle of the screen using the Canvas element
|
||||||
|
|
||||||
|
- [ ] You use Flexbox
|
||||||
|
- [ ] You instruct the text to be drawn at the x coordinate of: the client window width/2
|
||||||
|
- [ ] You set the `textAlign` property to the value `center` on the context object.
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
*A warm-up quiz about game development*
|
||||||
|
|
||||||
|
Complete this quiz in class
|
||||||
|
|
||||||
|
1. How do you draw text on a screen using the Canvas element?
|
||||||
|
|
||||||
|
- [ ] place text inside a div or span element
|
||||||
|
- [ ] Call drawText() on the Canvas element
|
||||||
|
- [ ] Call fillText() on the context object
|
||||||
|
|
||||||
|
2. Why do you have the concept of *lifes* in a game?
|
||||||
|
|
||||||
|
- [ ] to show how much damage you can take.
|
||||||
|
- [ ] So that the game doesn't end straight away, but you have n number of chances before the game is over.
|
||||||
@ -0,0 +1,189 @@
|
|||||||
|
# Build a Space Game Part 5: Scoring and Lives
|
||||||
|
|
||||||
|
## Pre-Lecture Quiz
|
||||||
|
|
||||||
|
[Pre-lecture quiz](.github/pre-lecture-quiz.md)
|
||||||
|
|
||||||
|
In this lesson, you'll learn how to add scoring to a game and calculate lives.
|
||||||
|
|
||||||
|
## Draw text on the screen
|
||||||
|
|
||||||
|
To be able to display a game score on the screen, you'll need to know how to place text on the screen. The answer is using the `fillText()` method on the canvas object. You can also control other aspects like what font to use, the color of the text and even its alignment (left, right, center). Below is some code drawing some text on the screen.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
ctx.font = "30px Arial";
|
||||||
|
ctx.fillStyle = "red";
|
||||||
|
ctx.textAlign = "right";
|
||||||
|
ctx.fillText("show this on the screen", 0, 0);
|
||||||
|
```
|
||||||
|
|
||||||
|
✅ Read more about [how to add text to a canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text), and feel free to make yours look fancier!
|
||||||
|
|
||||||
|
## Life, as a game concept
|
||||||
|
|
||||||
|
The concept of having a life in a game is only a number. In the context of a space game it's common to assign a set of lives that get deducted one by one when your ship takes damage. It's nice if you can show a graphical representation of this like miniships or hearts instead of a number.
|
||||||
|
|
||||||
|
## What to build
|
||||||
|
|
||||||
|
Let's add the following to your game:
|
||||||
|
|
||||||
|
- **Game score**: For every enemy ship that is destroyed, the hero should be awarded some points, we suggest a 100 points per ship. The game score should be shown in the bottom left.
|
||||||
|
- **Life**: Your ship has three lives. You lose a life every time an enemy ship collides with you. A life score should be displayed at the bottom right and be made out of the following graphic .
|
||||||
|
|
||||||
|
## Recommended steps
|
||||||
|
|
||||||
|
Locate the files that have been created for you in the `your-work` sub folder. It should contain the following:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
-| assets
|
||||||
|
-| enemyShip.png
|
||||||
|
-| player.png
|
||||||
|
-| laserRed.png
|
||||||
|
-| index.html
|
||||||
|
-| app.js
|
||||||
|
-| package.json
|
||||||
|
```
|
||||||
|
|
||||||
|
You start your project the `your_work` folder by typing:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd your-work
|
||||||
|
npm start
|
||||||
|
```
|
||||||
|
|
||||||
|
The above will start a HTTP Server on address `http://localhost:5000`. Open up a browser and input that address, right now it should render the hero and all the enemies, and as you hit your left and right arrows, the hero moves and can shoot down enemies.
|
||||||
|
|
||||||
|
### Add code
|
||||||
|
|
||||||
|
1. **Copy over the needed assets** from the `solution/assets/` folder into `your-work` folder; you will add a `life.png` asset. Add the lifeImg to the window.onload function:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
lifeImg = await loadTexture("assets/life.png");
|
||||||
|
```
|
||||||
|
|
||||||
|
1. Add the `lifeImg` to the list of assets:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
let heroImg,
|
||||||
|
...
|
||||||
|
lifeImg,
|
||||||
|
...
|
||||||
|
eventEmitter = new EventEmitter();
|
||||||
|
```
|
||||||
|
|
||||||
|
2. **Add variables**. Add code that represents your total score (0) and lives left (3), display these scores on a screen.
|
||||||
|
|
||||||
|
3. **Extend `updateGameObjects()` function**. Extend the `updateGameObjects()` function to handle enemy collisions:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
enemies.forEach(enemy => {
|
||||||
|
const heroRect = hero.rectFromGameObject();
|
||||||
|
if (intersectRect(heroRect, enemy.rectFromGameObject())) {
|
||||||
|
eventEmitter.emit(Messages.COLLISION_ENEMY_HERO, { enemy });
|
||||||
|
}
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
4. **Add `life` and `points`**.
|
||||||
|
1. **Initialize variables**. Under `this.cooldown = 0` in the `Hero` class, set life and points:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
this.life = 3;
|
||||||
|
this.points = 0;
|
||||||
|
```
|
||||||
|
|
||||||
|
1. **Draw variables on screen**. Draw these values to screen:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
function drawLife() {
|
||||||
|
// TODO, 35, 27
|
||||||
|
const START_POS = canvas.width - 180;
|
||||||
|
for(let i=0; i < hero.life; i++ ) {
|
||||||
|
ctx.drawImage(
|
||||||
|
lifeImg,
|
||||||
|
START_POS + (45 * (i+1) ),
|
||||||
|
canvas.height - 37);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawPoints() {
|
||||||
|
ctx.font = "30px Arial";
|
||||||
|
ctx.fillStyle = "red";
|
||||||
|
ctx.textAlign = "left";
|
||||||
|
drawText("Points: " + hero.points, 10, canvas.height-20);
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawText(message, x, y) {
|
||||||
|
ctx.fillText(message, x, y);
|
||||||
|
}
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
1. **Add methods to Game loop**. Make sure you add these functions to your window.onload function under `updateGameObjects()`:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
drawPoints();
|
||||||
|
drawLife();
|
||||||
|
```
|
||||||
|
|
||||||
|
1. **Implement game rules**. Implement the following game rules:
|
||||||
|
|
||||||
|
1. **For every hero and enemy collision**, deduct a life.
|
||||||
|
|
||||||
|
Extend the `Hero` class to do this deduction:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
decrementLife() {
|
||||||
|
this.life--;
|
||||||
|
if (this.life === 0) {
|
||||||
|
this.dead = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
2. **For every laser that hits an enemy**, increase game score with a 100 points.
|
||||||
|
|
||||||
|
Extend the Hero class to do this increment:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
incrementPoints() {
|
||||||
|
this.points += 100;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Add these functions to your Collision Event Emitters:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
|
||||||
|
first.dead = true;
|
||||||
|
second.dead = true;
|
||||||
|
hero.incrementPoints();
|
||||||
|
})
|
||||||
|
|
||||||
|
eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
|
||||||
|
enemy.dead = true;
|
||||||
|
hero.decrementLife();
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
✅ Do a little research to discover other games that are created using JavaScript/Canvas. What are their common traits?
|
||||||
|
|
||||||
|
By the end of this work, you should see the small 'life' ships at the bottom right, points at the bottom left, and you should see your life count decrement as you collide with enemies and your points increment when you shoot enemies. Well done! Your game is almost complete.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚀 Challenge
|
||||||
|
|
||||||
|
Your code is almost complete. Can you envision your next steps?
|
||||||
|
|
||||||
|
## Post-Lecture Quiz
|
||||||
|
|
||||||
|
[Post-lecture quiz](.github/post-lecture-quiz.md)
|
||||||
|
|
||||||
|
## Review & Self Study
|
||||||
|
|
||||||
|
Research some ways that you can increment and decrement game scores and lives. There are some interesting game engines like [PlayFab](https://playfab.com). How could using one of these would enhance your game?
|
||||||
|
|
||||||
|
## Assignment
|
||||||
|
|
||||||
|
[Build a Scoring Game](assignment.md)
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
# Build a Scoring Game
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
|
||||||
|
Create a game where you display life and points in a creative way. A suggestion is to show the life as hearts and the points as a big number in the bottom center part of the screen. Have a look here for [Free game resources](https://www.kenney.nl/)
|
||||||
|
|
||||||
|
# Rubric
|
||||||
|
|
||||||
|
| Criteria | Exemplary | Adequate | Needs Improvement |
|
||||||
|
| -------- | ---------------------- | --------------------------- | -------------------------- |
|
||||||
|
| | full game is presented | game is partially presented | partial game contains bugs |
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
*Complete this quiz after the lesson by checking one answer per question.*
|
||||||
|
|
||||||
|
1. What is a good pattern to use when a game end condition has been met?
|
||||||
|
|
||||||
|
- [ ] Display a suitable message
|
||||||
|
- [ ] Quit the game
|
||||||
|
- [ ] Display a suitable message, offer the player to restart, and display what key to hit for that action
|
||||||
|
|
||||||
|
1. You should offer a restart only when the game has ended
|
||||||
|
|
||||||
|
- [ ] true
|
||||||
|
- [ ] false
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
*A warm-up quiz about game development*
|
||||||
|
|
||||||
|
Complete this quiz in class
|
||||||
|
|
||||||
|
1. When is a good time to restart a game
|
||||||
|
|
||||||
|
- [ ] when a player wins or loses
|
||||||
|
- [ ] whenever
|
||||||
|
|
||||||
|
2. When should a game end
|
||||||
|
|
||||||
|
- [ ] when an enemy ship is destroyed
|
||||||
|
- [ ] when a hero ship is destroyed
|
||||||
|
- [ ] when points are collected
|
||||||
@ -0,0 +1,222 @@
|
|||||||
|
# Build a Space Game Part 6: End and Restart
|
||||||
|
|
||||||
|
## Pre-Lecture Quiz
|
||||||
|
|
||||||
|
[Pre-lecture quiz](.github/pre-lecture-quiz.md)
|
||||||
|
|
||||||
|
There are different ways to express and *end condition* in a game. It's up to you as the creator of the game to say why the game has ended. Here are some reasons, if we assume we are talking about the space game you have been building so far:
|
||||||
|
|
||||||
|
- **`N` Enemy ships have been destroyed**: It's quite common if you divide up a game into different levels that you need to destroy `N` Enemy ships to complete a level
|
||||||
|
- **Your ship has been destroyed**: There are definitely games where you lose the game if your ship is destroyed. Another common approach is that you have the concept of lives. Every time a your ship is destroyed it deducts a life. Once all lives have been lost then you lose the game.
|
||||||
|
- **You've collected `N` points**: Another common end condition is for you to collect points. How you get points is up to you but it's quite common to assign points to various activities like destroying an enemy ship or maybe collect items that items *drop* when they are destroyed.
|
||||||
|
- **Complete a level**: This might involve several conditions such as `X` enemy ships destroyed, `Y` points collected or maybe that a specific item has been collected.
|
||||||
|
|
||||||
|
## Restarting
|
||||||
|
|
||||||
|
If people enjoy your game they are likely to want to replay it. Once the game ends for whatever reason you should offer an alternative to restart.
|
||||||
|
|
||||||
|
✅ Think a bit about under what conditions you find a game ends, and then how you are prompted to restart
|
||||||
|
|
||||||
|
## What to build
|
||||||
|
|
||||||
|
You will be adding these rules to your game:
|
||||||
|
|
||||||
|
1. **Winning the game**. Once all enemy ships have been destroyed, you win the game. Additionally display some kind of victory message.
|
||||||
|
1. **Restart**. Once all your lives are lost or the game is won, you should offer a way to restart the game. Remember! You will need to reinitialize the game and the previous game state should be cleared.
|
||||||
|
|
||||||
|
## Recommended steps
|
||||||
|
|
||||||
|
Locate the files that have been created for you in the `your-work` sub folder. It should contain the following:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
-| assets
|
||||||
|
-| enemyShip.png
|
||||||
|
-| player.png
|
||||||
|
-| laserRed.png
|
||||||
|
-| life.png
|
||||||
|
-| index.html
|
||||||
|
-| app.js
|
||||||
|
-| package.json
|
||||||
|
```
|
||||||
|
|
||||||
|
You start your project the `your_work` folder by typing:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd your-work
|
||||||
|
npm start
|
||||||
|
```
|
||||||
|
|
||||||
|
The above will start a HTTP Server on address `http://localhost:5000`. Open up a browser and input that address. Your game should be in a playable state.
|
||||||
|
|
||||||
|
> tip: to avoid warnings in Visual Studio Code, edit the `window.onload` function to call `gameLoopId` as is (without `let`), and declare the gameLoopId at the top of the file, independently: `let gameLoopId;`
|
||||||
|
|
||||||
|
### Add code
|
||||||
|
|
||||||
|
1. **Track end condition**. Add code that keeps track of the number of enemies, or if the hero ship has been destroyedby adding these two functions:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
function isHeroDead() {
|
||||||
|
return hero.life <= 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
function isEnemiesDead() {
|
||||||
|
const enemies = gameObjects.filter((go) => go.type === "Enemy" && !go.dead);
|
||||||
|
return enemies.length === 0;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
1. **Add logic to message handlers**. Edit the `eventEmitter` to handle these conditions:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
|
||||||
|
first.dead = true;
|
||||||
|
second.dead = true;
|
||||||
|
hero.incrementPoints();
|
||||||
|
|
||||||
|
if (isEnemiesDead()) {
|
||||||
|
eventEmitter.emit(Messages.GAME_END_WIN);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
|
||||||
|
enemy.dead = true;
|
||||||
|
hero.decrementLife();
|
||||||
|
if (isHeroDead()) {
|
||||||
|
eventEmitter.emit(Messages.GAME_END_LOSS);
|
||||||
|
return; // loss before victory
|
||||||
|
}
|
||||||
|
if (isEnemiesDead()) {
|
||||||
|
eventEmitter.emit(Messages.GAME_END_WIN);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
eventEmitter.on(Messages.GAME_END_WIN, () => {
|
||||||
|
endGame(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
eventEmitter.on(Messages.GAME_END_LOSS, () => {
|
||||||
|
endGame(false);
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
1. **Add new message types**. Add these Messages to the constants object:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
GAME_END_LOSS: "GAME_END_LOSS",
|
||||||
|
GAME_END_WIN: "GAME_END_WIN",
|
||||||
|
```
|
||||||
|
|
||||||
|
2. **Add restart code** code that restarts the game at the press of a selected button.
|
||||||
|
|
||||||
|
1. **Listen to key press `Enter`**. Edit your window's eventListener to listen for this press:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
else if(evt.key === "Enter") {
|
||||||
|
eventEmitter.emit(Messages.KEY_EVENT_ENTER);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
1. **Add restart message**. Add this Message to your Messages constant:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
KEY_EVENT_ENTER: "KEY_EVENT_ENTER",
|
||||||
|
```
|
||||||
|
|
||||||
|
1. **Implement game rules**. Implement the following game rules:
|
||||||
|
|
||||||
|
1. **Player win condition**. When all enemy ships are destroyed, display a victory message.
|
||||||
|
|
||||||
|
1. First, create a `displayMessage()` function:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
function displayMessage(message, color = "red") {
|
||||||
|
ctx.font = "30px Arial";
|
||||||
|
ctx.fillStyle = color;
|
||||||
|
ctx.textAlign = "center";
|
||||||
|
ctx.fillText(message, canvas.width / 2, canvas.height / 2);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
1. Create an `endGame()` function:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
function endGame(win) {
|
||||||
|
clearInterval(gameLoopId);
|
||||||
|
|
||||||
|
// set a delay so we are sure any paints have finished
|
||||||
|
setTimeout(() => {
|
||||||
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||||
|
ctx.fillStyle = "black";
|
||||||
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||||
|
if (win) {
|
||||||
|
displayMessage(
|
||||||
|
"Victory!!! Pew Pew... - Press [Enter] to start a new game Captain Pew Pew",
|
||||||
|
"green"
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
displayMessage(
|
||||||
|
"You died !!! Press [Enter] to start a new game Captain Pew Pew"
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}, 200)
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
1. **Restart logic**. When all lives are lost or the player won the game, display that the game can be restarted. Additionally restart the game when the *restart* key is hit (you can decide what key should be mapped to restart).
|
||||||
|
|
||||||
|
1. Create the `resetGame()` function:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
function resetGame() {
|
||||||
|
if (gameLoopId) {
|
||||||
|
clearInterval(gameLoopId);
|
||||||
|
eventEmitter.clear();
|
||||||
|
initGame();
|
||||||
|
gameLoopId = setInterval(() => {
|
||||||
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||||
|
ctx.fillStyle = "black";
|
||||||
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||||||
|
drawPoints();
|
||||||
|
drawLife();
|
||||||
|
updateGameObjects();
|
||||||
|
drawGameObjects(ctx);
|
||||||
|
}, 100);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
1. Add a call to the `eventEmitter` to reset the game in `initGame()`:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
eventEmitter.on(Messages.KEY_EVENT_ENTER, () => {
|
||||||
|
resetGame();
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
1. Add a `clear()` function to the EventEmitter:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
clear() {
|
||||||
|
this.listeners = {};
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
👽 💥 🚀 Congratulations, Captain! Your game is complete! Well done! 🚀 💥 👽
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚀 Challenge
|
||||||
|
|
||||||
|
Add a sound! Can you add a sound to enhance your game play, maybe when there's a laser hit, or the hero dies or wins? Have a look at this [sandbox](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_play) to learn how to play sound using JavaScript
|
||||||
|
|
||||||
|
## Post-Lecture Quiz
|
||||||
|
|
||||||
|
[Post-lecture quiz](.github/post-lecture-quiz.md)
|
||||||
|
|
||||||
|
## Review & Self Study
|
||||||
|
|
||||||
|
Your assignment is to create a fresh sample game, so explore some of the interesting games out there to see what type of game you might build.
|
||||||
|
|
||||||
|
## Assignment
|
||||||
|
|
||||||
|
[Build a Sample Game](assignment.md)
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
# Build a Sample Game
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
|
||||||
|
Try building a small game where you practice on different end conditions. Vary between getting a number of points, the hero loses all lives or all monsters are defeated. Build something simple like a console based adventure game. Use the below game flow as inspiration:
|
||||||
|
|
||||||
|
```
|
||||||
|
Hero> Strikes with broadsword - orc takes 3p damage
|
||||||
|
Orc> Hits with club - hero takes 2p damage
|
||||||
|
Hero> Kicks - orc takes 1p damage
|
||||||
|
Game> Orc is defeated - Hero collects 2 coins
|
||||||
|
Game> ****No more monsters, you have conquered the evil fortress****
|
||||||
|
```
|
||||||
|
|
||||||
|
## Rubric
|
||||||
|
|
||||||
|
| Criteria | Exemplary | Adequate | Needs Improvement |
|
||||||
|
| -------- | ---------------------- | --------------------------- | -------------------------- |
|
||||||
|
| | full game is presented | game is partially presented | partial game contains bugs |
|
||||||
@ -0,0 +1,31 @@
|
|||||||
|
# Build a Space Game
|
||||||
|
|
||||||
|
A space game to teach more advanced JavaScript fundamentals
|
||||||
|
|
||||||
|
In this lesson you will learn how to build your own space game. If you've ever played the game "Space Invaders", this game has the same idea: to steer a spaceship and fire on monsters that come down from above. Here's what the finished game will look like:
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
In these six lessons you will learn the following:
|
||||||
|
|
||||||
|
- **Interact** with the Canvas element to draw things on a screen
|
||||||
|
- **Understand** the cartesian coordinate system
|
||||||
|
- **Learn** the Pub-Sub pattern to create sound game architecture that's easier to maintain and extend
|
||||||
|
- **Leverage** Async/Await to load game resources
|
||||||
|
- **Handle** keyboard events
|
||||||
|
|
||||||
|
## Overview
|
||||||
|
|
||||||
|
- Theory
|
||||||
|
- [Introduction to building games with JavaScript](1-introduction/README.md)
|
||||||
|
- Practice
|
||||||
|
- [Drawing to canvas](2-drawing-to-canvas/README.md)
|
||||||
|
- [Moving elements around the screen](3-moving-elements-around/README.md)
|
||||||
|
- [Collision detection](4-collision-detection/README.md)
|
||||||
|
- [Keeping score](5-keeping-score/README.md)
|
||||||
|
- [Ending and restarting the game](6-end-condition/README.md)
|
||||||
|
|
||||||
|
## Credits
|
||||||
|
|
||||||
|
The assets used for this came from https://www.kenney.nl/.
|
||||||
|
If you are into building games, these are some seriously good assets, a lot is free and some are paid.
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
*Complete this quiz by checking one answer per question.*
|
||||||
|
|
||||||
|
1. HTML templates are part of the DOM by default
|
||||||
|
|
||||||
|
- [ ] true
|
||||||
|
- [ ] false
|
||||||
|
|
||||||
|
2. Which part of the URL is needed for routing?
|
||||||
|
|
||||||
|
- [ ] window.location.pathname
|
||||||
|
- [ ] window.location.origin
|
||||||
|
- [ ] both
|
||||||
|
|
||||||
|
3. What's the name of the event triggered when calling the `history.pushState()` function?
|
||||||
|
|
||||||
|
- [ ] `pushstate`
|
||||||
|
- [ ] `popstate`
|
||||||
|
- [ ] `navigate`
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
*A quick warm-up about web apps*
|
||||||
|
|
||||||
|
*Complete this quiz in class.*
|
||||||
|
|
||||||
|
1. You need to create multiple HTML files to display different screens in a web app
|
||||||
|
|
||||||
|
- [ ] true
|
||||||
|
- [ ] false
|
||||||
|
|
||||||
|
2. You can store and persist data locally in a web app
|
||||||
|
|
||||||
|
- [ ] true
|
||||||
|
- [ ] false
|
||||||
|
|
||||||
|
3. What's the best data provider for a web app?
|
||||||
|
|
||||||
|
- [ ] A local database
|
||||||
|
- [ ] A JavaScript object
|
||||||
|
- [ ] A server with a JSON API
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
# Improve the routing
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
|
||||||
|
The routes declaration contains currently only the template ID to use. But when displaying a new page, a bit more is needed sometimes. Let's improve our routing implementation with two additional features:
|
||||||
|
|
||||||
|
- Give titles to each template and update the window title with this new title when the template changes.
|
||||||
|
- Add an option to run some code after the template changes. We want to print `'Dashboard is shown'` in the developer console every time the dashboard page is displayed.
|
||||||
|
|
||||||
|
## Rubric
|
||||||
|
|
||||||
|
| Criteria | Exemplary | Adequate | Needs Improvement |
|
||||||
|
| -------- | ---------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
|
||||||
|
| | The two features are implemented and working. Title and code addition also work for a new route added in the `routes` declaration. | The two features work, but the behavior is hardcoded and not configurable via the `routes` declaration. Adding a third route with title and code addition does not work or works partially. | One of the features is missing or not working properly. |
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
*Complete this quiz by checking one answer per question.*
|
||||||
|
|
||||||
|
1. Using `<label>` elements in forms is only for making the form pretty
|
||||||
|
|
||||||
|
- [ ] true
|
||||||
|
- [ ] false
|
||||||
|
|
||||||
|
2. How can you define how a form is sent to the server?
|
||||||
|
|
||||||
|
- [ ] using the `action` attribute
|
||||||
|
- [ ] using the `method` attribute
|
||||||
|
- [ ] both
|
||||||
|
|
||||||
|
3. Which attribute can you use to set the maximum size of a text `<input>`?
|
||||||
|
- [ ] `max`
|
||||||
|
- [ ] `maxlength`
|
||||||
|
- [ ] `pattern`
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
*Complete this quiz in class.*
|
||||||
|
|
||||||
|
1. HTML forms allow to send user input to a server without using JavaScript
|
||||||
|
|
||||||
|
- [ ] true
|
||||||
|
- [ ] false
|
||||||
|
|
||||||
|
2. `<label>` elements are mandatory for every form control
|
||||||
|
|
||||||
|
- [ ] true
|
||||||
|
- [ ] false
|
||||||
|
|
||||||
|
3. It is secure to send form data to a server over HTTP
|
||||||
|
|
||||||
|
- [ ] true
|
||||||
|
- [ ] false
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
# Style your bank app
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
|
||||||
|
Create a new `styles.css` file and add a link to it in your current `index.html` file. In the CSS file you just created add some styling to make the *Login* and *Dashboard* page looks nice and tidy. Try to create a color theme to give your app its own branding.
|
||||||
|
|
||||||
|
> Tip: you can modify the HTML and add new elements and classes if needed.
|
||||||
|
|
||||||
|
## Rubric
|
||||||
|
|
||||||
|
| Criteria | Exemplary | Adequate | Needs Improvement |
|
||||||
|
| -------- | ----------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------- |
|
||||||
|
| | All pages looks clean and readable, with a consistent color theme and and the different sections standing out properly. | Pages are styled but without a theme or with sections not clearly delimitated. | Pages lack styling, the sections looks disorganized and the information is difficult to read. |
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
*Complete this quiz by checking one answer per question.*
|
||||||
|
|
||||||
|
1. In a Single-page application, the HTML is loaded once and never updated:
|
||||||
|
|
||||||
|
- [ ] true
|
||||||
|
- [ ] false
|
||||||
|
|
||||||
|
2. Why is it important to not trust data coming from user input?
|
||||||
|
|
||||||
|
- [ ] because using special characters can make the UI ugly.
|
||||||
|
- [ ] because it can contain non-sense or offensive words.
|
||||||
|
- [ ] because it can be used as vector of attack to execute malicious scripts.
|
||||||
|
|
||||||
|
3. What's the API name for sending asynchronous HTTP requests to a web server?
|
||||||
|
- [ ] `request()`
|
||||||
|
- [ ] `fetch()`
|
||||||
|
- [ ] `ajax()`
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
*Complete this quiz in class.*
|
||||||
|
|
||||||
|
1. You can fetch data from a server synchronously in a browser
|
||||||
|
|
||||||
|
- [ ] true
|
||||||
|
- [ ] false
|
||||||
|
|
||||||
|
2. What's the most common format used to exchange *data* on the web?
|
||||||
|
|
||||||
|
- [ ] HTML
|
||||||
|
- [ ] XML
|
||||||
|
- [ ] JSON
|
||||||
|
|
||||||
|
3. There's no way to prevent a web page from accessing a public server API
|
||||||
|
- [ ] true
|
||||||
|
- [ ] false
|
||||||
@ -0,0 +1,15 @@
|
|||||||
|
# Refactor and comment your code
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
|
||||||
|
As your codebase grows, it's important to refactor your code frequently to keep it readable and maintainable over time. Add comments and refactor your `app.js` to improve the code quality:
|
||||||
|
|
||||||
|
- Extract constants, like the server API base URL
|
||||||
|
- Factorize similar code: for example you can create a `sendRequest()` function to regroup the code used in both `createAccount()` and `getAccount()`
|
||||||
|
- Reorganize the code to make it easier to read, and add comments
|
||||||
|
|
||||||
|
## Rubric
|
||||||
|
|
||||||
|
| Criteria | Exemplary | Adequate | Needs Improvement |
|
||||||
|
| -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |
|
||||||
|
| | Code is commented, well-organized in different sections and easy to read. Constants are extracted and a factorized `sendRequest()` function has been created. | Code is clean but can still be improved with more comments, constant extraction or factorization. | Code is messy, not commented, constants are not extracted and code is not factorized. |
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
*Complete this quiz by checking one answer per question.*
|
||||||
|
|
||||||
|
1. What do you think *state management* means?
|
||||||
|
|
||||||
|
- [ ] Enforcement of law & order
|
||||||
|
- [ ] Logging the user interface state over time
|
||||||
|
- [ ] Keeping your app data flows clean and synchronizing the user interface with data
|
||||||
|
|
||||||
|
2. How can you keep track of the user session state?
|
||||||
|
|
||||||
|
- [ ] HTTP cookies
|
||||||
|
- [ ] Local or session storage
|
||||||
|
- [ ] All of the above
|
||||||
|
|
||||||
|
3. Mutating an object is always the best way to update it
|
||||||
|
- [ ] true
|
||||||
|
- [ ] false
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
*Complete this quiz in class.*
|
||||||
|
|
||||||
|
1. What is an immutable object?
|
||||||
|
|
||||||
|
- [ ] An object defined as a constant
|
||||||
|
- [ ] An object that cannot be modified after it's created
|
||||||
|
- [ ] A copy of an existing object
|
||||||
|
|
||||||
|
2. What benefit(s) you get from using state management?
|
||||||
|
|
||||||
|
- [ ] You can keep track of every place the state is updated
|
||||||
|
- [ ] It's easier to debug the code
|
||||||
|
- [ ] All of the above
|
||||||
|
|
||||||
|
3. What's the best way to persist critical user data across different sessions?
|
||||||
|
- [ ] Using files
|
||||||
|
- [ ] Using the browser's `localStorage` API
|
||||||
|
- [ ] In a database behind a server API
|
||||||
@ -0,0 +1,25 @@
|
|||||||
|
# Implement "Add transaction" dialog
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
|
||||||
|
Our bank app is still missing one important feature: the possibility to enter new transactions.
|
||||||
|
Using everything that you've learnt in the four previous lessons, implement an "Add transaction" dialog:
|
||||||
|
|
||||||
|
- Add an "Add transaction" button in the dashboard page
|
||||||
|
- Either create a new page with an HTML template, or use JavaScript to show/hide the dialog HTML without leaving the dashboard page (you can use [`hidden`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden) property for that, or CSS classes)
|
||||||
|
- Make sure you handle [keyboard and screen reader accessibility](https://developer.paciellogroup.com/blog/2018/06/the-current-state-of-modal-dialog-accessibility/) for the dialog
|
||||||
|
- Implement an HTML form to receive input data
|
||||||
|
- Create JSON data from the form data and send it to the API
|
||||||
|
- Update the dashboard page with the new data
|
||||||
|
|
||||||
|
Look at the [server API specifications](../api/README.md) to see which API you need to call and what is the expected JSON format.
|
||||||
|
|
||||||
|
Here's an example result after completing the assignment:
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## Rubric
|
||||||
|
|
||||||
|
| Criteria | Exemplary | Adequate | Needs Improvement |
|
||||||
|
| -------- | ------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------- | --------------------------------------------|
|
||||||
|
| | Adding a transaction is implemented completely following all best practices seen in the lessons. | Adding a transaction is implement, but not following the best practices seen in the lessons, or working only partially. | Adding a transaction is not working at all. |
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
# Bank app
|
||||||
|
|
||||||
|
> Example solution for the bank app project, built with vanilla HTML5, CSS and JavaScript (no frameworks or libraries used).
|
||||||
|
|
||||||
|
## Running the app
|
||||||
|
|
||||||
|
First make sure you have the [API server](../api/README.md) running.
|
||||||
|
|
||||||
|
Any web server can be used to run the app, but since you should have [Node.js](https://nodejs.org) installed anyway to run the API, you can:
|
||||||
|
|
||||||
|
1. Git clone this repo.
|
||||||
|
2. Open a terminal, then run `npx lite-server solution`. It will start a development web server on port `3000`
|
||||||
|
3. Open `http://localhost:3000` in a browser to run the app.
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
# :dollar: Build a Bank
|
||||||
|
|
||||||
|
In this project, you'll learn how to build a fictional bank. These lessons include instructions on how to layout a web app and provide routes, build forms, manage state, and fetch data from an API from which you can fetch the bank's data.
|
||||||
|
|
||||||
|
|  |  |
|
||||||
|
|--------------------------------|--------------------------------|
|
||||||
|
|
||||||
|
## Lessons
|
||||||
|
|
||||||
|
1. [HTML Templates and Routes in a Web App](1-template-route/README.md)
|
||||||
|
2. [Build a Login and Registration Form](2-forms/README.md)
|
||||||
|
3. [Methods of Fetching and Using Data](3-data/README.md)
|
||||||
|
4. [Concepts of State Management](4-state-management/README.md)
|
||||||
|
|
||||||
|
### Credits
|
||||||
|
|
||||||
|
These lessons were written with :hearts: by [Yohan Lasorsa](https://twitter.com/sinedied).
|
||||||
|
|
||||||
|
If you're interested to learn how to build the [server API](./api/README) used in these lessons, you can follow [this series of videos](https://aka.ms/NodeBeginner) (in particular videos 17 through 21).
|
||||||
|
|
||||||
|
You can also take a look at [this interactive Learn tutorial](https://aka.ms/learn/express-api).
|
||||||
@ -0,0 +1,24 @@
|
|||||||
|
*Complete this quiz along with your submission by checking one answer per question.*
|
||||||
|
|
||||||
|
You will need to complete the following learn module(s) to complete the quiz:
|
||||||
|
|
||||||
|
[Learn Link 1]()
|
||||||
|
[Learn Link 2]()
|
||||||
|
|
||||||
|
1. [Q1]
|
||||||
|
|
||||||
|
- [ ] [Option 1]
|
||||||
|
- [ ] [Option 2]
|
||||||
|
- [ ] [Option 3]
|
||||||
|
|
||||||
|
2. [Q2]
|
||||||
|
|
||||||
|
- [ ] [Option 1]
|
||||||
|
- [ ] [Option 2]
|
||||||
|
- [ ] [Option 3]
|
||||||
|
|
||||||
|
3. [Q3]
|
||||||
|
|
||||||
|
- [ ] [Option 1]
|
||||||
|
- [ ] [Option 2]
|
||||||
|
- [ ] [Option 3]
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
*Complete this quiz in class*
|
||||||
|
|
||||||
|
1. [Q1]
|
||||||
|
|
||||||
|
- [ ] [Option 1]
|
||||||
|
- [ ] [Option 2]
|
||||||
|
- [ ] [Option 3]
|
||||||
|
|
||||||
|
2. [Q2]
|
||||||
|
|
||||||
|
- [ ] [Option 1]
|
||||||
|
- [ ] [Option 2]
|
||||||
|
- [ ] [Option 3]
|
||||||
|
|
||||||
|
3. [Q3]
|
||||||
|
|
||||||
|
- [ ] [Option 1]
|
||||||
|
- [ ] [Option 2]
|
||||||
|
- [ ] [Option 3]
|
||||||
@ -0,0 +1,51 @@
|
|||||||
|
# [Lesson Topic]
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## [Pre-lecture quiz](.github/pre-lecture-quiz.md)
|
||||||
|
|
||||||
|
[Describe what we will learn]
|
||||||
|
|
||||||
|
### Introduction
|
||||||
|
|
||||||
|
Describe what will be covered
|
||||||
|
|
||||||
|
> Notes
|
||||||
|
|
||||||
|
### Prerequisite
|
||||||
|
|
||||||
|
What steps should have been covered before this lesson?
|
||||||
|
|
||||||
|
### Preparation
|
||||||
|
|
||||||
|
Preparatory steps to start this lesson
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
[Step through content in blocks]
|
||||||
|
|
||||||
|
## [Topic 1]
|
||||||
|
|
||||||
|
### Task:
|
||||||
|
|
||||||
|
Work together to progressively enhance your codebase to build the project with shared code:
|
||||||
|
|
||||||
|
```html
|
||||||
|
code blocks
|
||||||
|
```
|
||||||
|
|
||||||
|
✅ Knowledge Check - use this moment to stretch students' knowledge with open questions
|
||||||
|
|
||||||
|
## [Topic 2]
|
||||||
|
|
||||||
|
## [Topic 3]
|
||||||
|
|
||||||
|
🚀 Challenge: Add a challenge for students to work on collaboratively in class to enhance the project
|
||||||
|
|
||||||
|
Optional: add a screenshot of the completed lesson's UI if appropriate
|
||||||
|
|
||||||
|
## [Post-lecture quiz](.github/post-lecture-quiz.md)
|
||||||
|
|
||||||
|
## Review & Self Study
|
||||||
|
|
||||||
|
**Assignment Due [MM/YY]**: [Assignment Name](assignment.md)
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
# [Assignment Name]
|
||||||
|
|
||||||
|
## Instructions
|
||||||
|
|
||||||
|
## Rubric
|
||||||
|
|
||||||
|
| Criteria | Exemplary | Adequate | Needs Improvement |
|
||||||
|
| -------- | --------- | -------- | ----------------- |
|
||||||
|
| | | | |
|
||||||
Loading…
Reference in new issue