Powered by AppSignal & Oban Pro
Notesclub
Sign in with GitHub
created by hec & contributors
terms privacy

Common Components

exercises/common_components.livemd

avatar
Ammar Massoud
avatar
avatar
Share to X
Share to Bluesky
More notebooks

Common Components

Mix.install([
  {:jason, "~> 1.4"},
  {:kino, "~> 0.8.0", override: true},
  {:youtube, github: "brooklinjazz/youtube"},
  {:hidden_cell, github: "brooklinjazz/hidden_cell"}
])

Navigation

Return Home<span style=”padding: 0 30px”></span> Report An Issue

Common Components

You’re going to use HTML and CSS to replicate some styled components.

Create an .html document or use CodePen to create these components.

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
    </style>
  </head>
  <body>
<!-- Component goes here -->

  </body>
</html>

Hoverable Outline Button

Replicate the following outlined button as closely as you can.

On hover, the button should change the background-color.

Rainbow Boxes

Create a series of rainbow colored boxes like the following.

Hint Research `padding`, `margin`, `background-color`, and `border` and consider using nested elements.

Card Component

Components like the following are often called Card Components. Create a card component matching the following with an image, heading, subtitle, body, and bottom bar decoration.

You can use https://picsum.photos/200/100 to retrieve a fake image:

<img src="https://picsum.photos/200/100"></img>
Hint You can create a rounded border using the `border-radius` and `border` declarations. You can create a horizontal bar using either the `
` element, or an empty `div` element.

Mark As Completed

file_name = Path.basename(Regex.replace(~r/#.+/, __ENV__.file, ""), ".livemd")

save_name =
  case Path.basename(__DIR__) do
    "reading" -> "common_components_reading"
    "exercises" -> "common_components_exercise"
  end

progress_path = __DIR__ <> "/../progress.json"
existing_progress = File.read!(progress_path) |> Jason.decode!()

default = Map.get(existing_progress, save_name, false)

form =
  Kino.Control.form(
    [
      completed: input = Kino.Input.checkbox("Mark As Completed", default: default)
    ],
    report_changes: true
  )

Task.async(fn ->
  for %{data: %{completed: completed}} <- Kino.Control.stream(form) do
    File.write!(
      progress_path,
      Jason.encode!(Map.put(existing_progress, save_name, completed), pretty: true)
    )
  end
end)

form

Commit Your Progress

Run the following in your command line from the curriculum folder to track and save your progress in a Git commit. Ensure that you do not already have undesired or unrelated changes by running git status or by checking the source control tab in Visual Studio Code.

$ git checkout -b common-components-exercise
$ git add .
$ git commit -m "finish common components exercise"
$ git push origin common-components-exercise

Create a pull request from your common-components-exercise branch to your solutions branch. Please do not create a pull request to the DockYard Academy repository as this will spam our PR tracker.

DockYard Academy Students Only:

Notify your teacher by including @BrooklinJazz in your PR description to get feedback. You (or your teacher) may merge your PR into your solutions branch after review.

If you are interested in joining the next academy cohort, sign up here to receive more news when it is available.

Up Next

Previous Next
HTML + CSS Home Page

Other notebooks:

Back