Exercises for sections 01/01 - 02/05

milesfrain · Feb 1, 2020 · e632c8d · e632c8d
1 parent 1586d8f
commit e632c8d
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 0 deletions.
diff --git a/src/01-Static-HTML/01-Static-HTML.md b/src/01-Static-HTML/01-Static-HTML.md
@@ -46,3 +46,7 @@ To compile the next file and view its results in the browser, use these instruct
 spago bundle-app -m StaticHTML.StaticHTML -t assets/static-html/static-html.js
 parcel serve assets/static-html/static-html.html -o static-html--parcelified.html --open
 ```
+
+## Exercises
+1. Add another button below the first button with text label "Another Button".
+2. Add a paragraph (`p` tag) containing any text.
diff --git a/src/01-Static-HTML/03-Adding-Properties.md b/src/01-Static-HTML/03-Adding-Properties.md
@@ -70,3 +70,6 @@ To compile the next file and view its results in the browser, use these instruct
 spago bundle-app -m StaticHTML.AddingProperties -t assets/static-html/adding-properties.js
 parcel serve assets/static-html/adding-properties.html -o adding-properties--parcelified.html --open
 ```
+
+## Exercises
+1. Assign class names of "special-button" and "it-clicks" to the button.
diff --git a/src/01-Static-HTML/05-Adding-CSS.md b/src/01-Static-HTML/05-Adding-CSS.md
@@ -85,3 +85,6 @@ To compile the next file and view its results in the browser, use these instruct
 spago bundle-app -m StaticHTML.AddingCSS -t assets/static-html/adding-css.js
 parcel serve assets/static-html/adding-css.html -o adding-css--parcelified.html --open
 ```
+
+## Exercises
+1. Change the `color` of the text of the span to `blue` and the button to `green`. Remember to add the necessary imports.
diff --git a/src/02-Dynamic-HTML/01-Adding-State.md b/src/02-Dynamic-HTML/01-Adding-State.md
@@ -28,3 +28,7 @@ To compile the next file and view its results in the browser, use these instruct
 spago bundle-app -m DynamicHtml.AddingState -t assets/dynamic-html/adding-state.js
 parcel serve assets/dynamic-html/adding-state.html -o adding-state--parcelified.html --open
 ```
+
+## Exercises
+1. Change the numbered states `1 2 3` to characters `A B C`.
+2. Add a 4th state. Note that `assets/dynamic-html/adding-state.html` requires an edit.
diff --git a/src/02-Dynamic-HTML/04-Adding-Event-Handling.md b/src/02-Dynamic-HTML/04-Adding-Event-Handling.md
@@ -64,3 +64,7 @@ To compile the next file and view its results in the browser, use these instruct
 spago bundle-app -m DynamicHtml.AddingEventHandling -t assets/dynamic-html/adding-event-handling.js
 parcel serve assets/dynamic-html/adding-event-handling.html -o adding-event-handling--parcelified.html --open
 ```
+
+## Exercises
+1. Make the button behave as a stoplight that rotates through three states: `Green, Yellow, Red`. Hint, use "algebraic data types" and `case` statements.
+2. Change the background color of the button to match its state. Hint, refer to previous chapter on CSS.