Add a section on app varieties

Author: kentcdodds

exercises/02.app-varieties/01.problem.no-preview/README.mdx

@@ -0,0 +1,15 @@
+# No Preview
+
+👨‍💼 Some apps don't have a `dev` script in the `package.json` because they don't
+actually run and you're instead expected to run the app manually.
+
+You'll notice we also don't have a preview for the problem and solution either
+for the same reason, so those tabs won't appear.
+
+Incidentally, this exercise also does not have a `test` script so there is no
+Test tab either.
+
+🐨 Open a terminal into the `./playground` directory and run `node greet.js` to
+see what it outputs.
+
+🐨 Continue to the solution for this step.

exercises/02.app-varieties/01.problem.no-preview/greet.js

@@ -0,0 +1,6 @@
+function greet(name) {
+	// 🐨 change this to "Yo" instead of "Hello"
+	return `Hello, ${name}!`
+}
+
+console.log(greet('John'))

exercises/02.app-varieties/01.problem.no-preview/package.json

@@ -0,0 +1,4 @@
+{
+  "name": "exercises_02.app-varieties_01.problem.no-preview",
+  "type": "module"
+}

exercises/02.app-varieties/01.solution.no-preview/README.mdx

@@ -0,0 +1,5 @@
+# No Preview
+
+👨‍💼 In some workshops (especially testing workshops) you'll be expected to run
+scripts manually (like you would in practice) which is why there's no preview
+for this type of app.

exercises/02.app-varieties/01.solution.no-preview/greet.js

@@ -0,0 +1,6 @@
+function greet(name) {
+	// 🐨 change this to "Yo" instead of "Hello"
+	return `Hello, ${name}!`
+}
+
+console.log(greet('John'))

exercises/02.app-varieties/01.solution.no-preview/package.json

@@ -0,0 +1,4 @@
+{
+  "name": "exercises_02.app-varieties_01.solution.no-preview",
+  "type": "module"
+}

exercises/02.app-varieties/02.problem.simple/README.mdx

@@ -0,0 +1,14 @@
+# Simple Apps
+
+👨‍💼 Some apps are so simple they don't even have a `package.json` file. Instead
+they just have an index file which is automatically opened in the playground.
+
+If an `index.html` is present, that's what gets rendered. Otherwise, one is
+created automatically and `index.js` (or `index.ts`) is loaded into it. Even
+`index.css` will be loaded.
+
+These also can have tests as well, and they run automatically when you open the
+Test tab.
+
+🐨 Go ahead and complete this exercise. Notice how the playground directory only
+has a single file in it.

exercises/02.app-varieties/02.problem.simple/index.js

@@ -0,0 +1,9 @@
+const button = document.createElement('button')
+button.textContent = 'Click me'
+button.addEventListener('click', () => {
+	// 🐨 change this to navigate to https://www.youtube.com/watch?v=dQw4w9WgXcQ
+	// using the global `open` function
+	alert('TODO')
+})
+
+document.body.appendChild(button)

exercises/02.app-varieties/02.solution.simple/README.mdx

@@ -0,0 +1,5 @@
+# Simple Apps
+
+👨‍💼 These kinds of apps will automatically refresh when you make changes.
+
+Good job on this one!

exercises/02.app-varieties/02.solution.simple/index.js

@@ -0,0 +1,7 @@
+const button = document.createElement('button')
+button.textContent = 'Click me'
+button.addEventListener('click', () => {
+	open('https://www.youtube.com/watch?v=dQw4w9WgXcQ')
+})
+
+document.body.appendChild(button)