Merge pull request #18 from melange-re/better-hints

Improve hints from earlier chapters

docs/celsius-converter-exception/index.md

@@ -157,6 +157,13 @@ single expression:
 This compiles, but it now contains a hidden bug. Do you know what silent error
 might occur?
 
+::: details Hint
+
+The `getValueFromEvent` function is not being invoked in the same scope as
+before.
+
+:::
+
 <b>3.</b> It's possible to use partial application with most functions in OCaml,
 even operators. Take a look at the following program:
 
@@ -171,12 +178,17 @@ What do you think it outputs? Run it in [Melange
 Playground](https://melange.re/v2.2.0/playground) to confirm your hypothesis.
 
 <b>4.</b> Use the pipe last operator (`|>`) and partial application to write a
-function that takes an integer
-argument `x`, subtracts `x` from 10, and converts that result to binary. Hint:
+function that takes an integer argument `x`, subtracts `x` from 10, and converts
+that result to binary.
+
+::: details Hint
+
 Use the
 [Js.Int.toStringWithRadix](https://melange.re/v2.2.0/api/re/melange/Js/Int/#val-toStringWithRadix)
 function.
 
+:::
+
 ## Overview
 
 - `Js.t` objects (with the type `Js.t({..})`) can have fields of any name and
@@ -200,8 +212,10 @@ correctly](https://melange.re/v2.2.0/communicate-with-javascript/#strings), so
 any string that contains non-ASCII text must be delimited using `{js||js}`.
 
 ::: tip
-Note that quoted string literals using the `js` identifier are specific to
-Melange and are not available in native OCaml.
+
+Note that `{js||js}` quoted string literals are specific to Melange and are not
+available in native OCaml.
+
 :::
 
 <b>2.</b> Rewriting `onChange` the handler to use a single expression creates a

docs/celsius-converter-option/index.md

@@ -138,15 +138,29 @@ system](https://melange.re/v2.2.0/build-system/) used by Melange.
 
 <b>1.</b> If you enter a space in the input, it'll unintuitively produce a
 Fahrenheit value of 32.00 degrees (because `float_of_string_opt(" ") ==
-Some(0.)`). Handle this case correctly by showing "? °F" instead. Hint: Use the
-`String.trim` function.
+Some(0.)`). Handle this case correctly by showing "? °F" instead.
+
+::: details Hint
+
+Use the `String.trim` function.
+
+:::
 
 <b>2.</b> Add another branch with a `when` guard that renders "Unreasonably
 cold🥶" if the temperature is less than -128.6°F (the lowest temperature
 ever recorded on Earth).
 
-<b>3.</b> Use `Js.Float.fromString` instead of `float_of_string_opt` to parse a
-string to float. Hint: Use `Js.Float.isNaN`.
+<b>3.</b> Use
+[Js.Float.fromString](https://melange.re/v2.2.0/api/re/melange/Js/Float/#val-fromString)
+instead of `float_of_string_opt` to parse a string to float. Note that
+`Js.Float.fromString` does not return `None` if it fails to parse a string to a
+valid float.
+
+::: details Hint
+
+Use [Js.Float.isNaN](https://melange.re/v2.2.0/api/re/melange/Js/Float/#val-isNaN).
+
+:::
 
 ## Overview
 

docs/counter/index.md

@@ -122,12 +122,25 @@ future chapters we'll create more complex and interesting components.
 
 ## Exercises
 
-<b>1.</b> There aren't any runtime errors in our app right now. But what happens
-if you try to remove the `| None` branch of the `switch (node)` expression?
+<b>1.</b> What happens if you try to remove the `| None` branch of the
+`switch (node)` expression in `Index.re`?
+
+```reason
+let node = ReactDOM.querySelector("#root");
+switch (node) {
+| Some(root) => ReactDOM.render(<App />, root)
+| None => // [!code --]
+  Js.Console.error("Failed to start React: couldn't find the #root element") // [!code --]
+};
+```
 
 <b>2.</b> What happens if you rename the `_evt` variable inside the button
 callback to `evt`?
 
+```reason
+<button onClick={evt => setCounter(v => v - 1)}>
+```
+
 <b>3.</b> Comment out the `[@react.component]` attribute in `Counter.re`. What
 happens?
 
@@ -161,8 +174,8 @@ to ship your app. This is part of what makes OCaml such a type-safe language.
 Error (warning 27 [unused-var-strict]): unused variable evt.
 ```
 
-OCaml wants you to use all the variables you declare, unless they begin with
-`_` (underscore).
+By default, OCaml wants you to use all the variables you declare, unless they
+begin with `_` (underscore).
 
 <b>3.</b> Commenting out `[@react.component]` in `Counter.re` will trigger a
 compilation error in `Index.re`, at the place where `Counter` component is used:

docs/numeric-types/index.md

@@ -222,9 +222,14 @@ Js.log(baz);
 Note the use of underscores to make the large number more readable. What is the
 JavaScript representation of int64?
 
-<b>3.</b> How do you add two int64 values? Hint: Take a look at the standard
-library's
-[Int64 module](https://melange.re/v2.2.0/api/re/melange/Stdlib/Int64/index.html).
+<b>3.</b> How do you add two int64 values?
+
+::: details Hint
+
+Take a look at the standard library's [Int64
+module](https://melange.re/v2.2.0/api/re/melange/Stdlib/Int64/index.html).
+
+:::
 
 ## Overview
 

docs/order-confirmation/index.md

@@ -283,6 +283,12 @@ don't expect it to be used anywhere else (items rendered in a menu component
 would look different). Rename it to `OrderItem` and move it inside the `Order`
 module.
 
+::: details Hint
+
+Create a submodule inside `Order.re`
+
+:::
+
 <b>2.</b> Add another constructor to `Item.t` variant type. Update the `Item`
 module's helper functions to get your program to compile again.
 
@@ -291,6 +297,12 @@ Js.Float.toFixedWithPrecision(~digits=2)
 |> React.string`, add a helper function `Format.currency` that does
 the same thing.
 
+::: details Hint
+
+Create a new file named `Format.re`.
+
+:::
+
 ## Overview
 
 - By convention, the main type in a module is often named `t`