Button Clicks

Notes & Exercises

Code Snapshot

A snapshot of the code at the end of the video is in the video-code/03-button-clicks directory of the code bundle.

Streamlined HEEx Syntax

In the video, we used curly braces {} to interpolate values within HTML tag attributes and <%= %> to interpolate values in the HTML tag body, like this:

<span style={"width: #{@brightness}%"}>
  <%= @brightness %>%
</span>

You can now use curly braces {} to interpolate values within the HTML tag body, as well:

<span style={"width: #{@brightness}%"}>
  {@brightness}%
</span>

It's a cosmetic change and conveniently Elixir's code formatter automatically converts <%= %> to curly braces. So if you have VS Code configured with the editor.formatOnSave setting set to true then the conversion happens when you save the file.

Using <%= %> is still supported and is required when interpolating arbitrary HEEx blocks, as well as for interpolating values within <script> and <style> tags.

To use the new curly-brace syntax within tag bodies, in the mix.exs file you'll need to update the version of the phoenix_live_view dependency to 1.0.0. Here's the diff:

- {:phoenix_live_view, "~> 1.0.0-rc.6", override: true}
+ {:phoenix_live_view, "~> 1.0.0"}

Then fetch the updated dependency and re-start the server:

mix deps.get

mix phx.server

Two Ways to Assign State ✌️

In the video, we passed the assign/2 function a keyword list like so:

assign(socket, brightness: 10)

Alternatively, you can call the assign/3 function and pass the key (typically an atom) and value as separate arguments, like this:

assign(socket, :brightness, 10)

Either way works. Passing a keyword list, however, makes it easier to assign multiple key/value pairs if necessary. For example, if we also needed to store the initial color temperature of the light then we'd pass a keyword list like so:

assign(socket, brightness: 10, temp: 3000)

Anyway, that's just a lil' pro-tip. 😉

Exercise: Constrain Min/Max Brightness

You may have noticed that you can continue to turn the light up even after it's reached full brightness. Same with turning the light down even when it's already off.

If you're keen to keep the values in bounds, that's easy to do using Elixir's min and max functions.

def handle_event("up", _, socket) do
  socket = update(socket, :brightness, &min(&1 + 10, 100))
  {:noreply, socket}
end

def handle_event("down", _, socket) do
  socket = update(socket, :brightness, &max(&1 - 10, 0))
  {:noreply, socket}
end

Exercise: Light Me Up!

Here's a fun one to practice everything you learned in the video...

Add a button that when clicked sets the brightness to a random number between 0 and 100. The app already has a fire.svg image that you can use for the button if you like.

Try doing it from memory before peeking at the answer for guidance. 👀

1. Add a button that emits an event when clicked.

   Show Answer

   Hide Answer

   <button phx-click="rando">
     <img src="/images/fire.svg" />
   </button>
   

2. Handle the event by assigning a random number as the brightness.

   Show Answer

   Hide Answer

   def handle_event("rando", _, socket) do
     socket = assign(socket, :brightness, Enum.random(0..100))
     {:noreply, socket}
   end
   

3. Throw a disco party! 🕺

Solutions

The solutions for the exercises in this module are in the exercise-solutions/03-button-clicks directory of the code bundle.

📚 Dive Deeper

• Phoenix 1.7 apps are pre-configured to use Tailwind CSS by default. But rather than using Tailwind's utility classes directly in the LiveView templates, we used Tailwind's @apply directive in the assets/css/app.css file. That way there's a lot less CSS to look around in templates, and we can better focus on learning LiveView.

  Check out our Using Tailwind CSS in Phoenix 1.7 tutorial for more details on how we set it all up.

How's Your Elixir Game?

If you're new to the Elixir programming language, learning LiveView might feel like someone tied your shoe laces together and asked you play some hoops. 🏀 🤕

Imagine knowing Elixir so well you can drive to the basket and dunk! ⛹🏻 That's what you'll be able to do after taking our Elixir & OTP course. So before getting too far into LiveView, we highly recommend joining us in the Elixir course to gain clarity and confidence with the language.

We start with the Elixir fundamentals and leave no stone unturned as we build an app step-by-step from scratch. And the second half is all about OTP, so it's like getting two courses in one. 🙌

We think you're gonna love it!