search

jsartisan / frontend-challenges

FrontendChallenges is a collection of frontend interview questions and answers. It is designed to help you prepare for frontend interviews. It's free and open source.
https://frontend-challenges.com
20 stars 3 forks source link

Checkbox #47

Closed jsartisan closed 3 months ago

jsartisan commented 3 months ago

Info

difficulty: medium
title: Checkbox
template: vanilla
tags: css, design-system, html

Question

One common UI element found in many web applications is a checkbox. While HTML provides a built-in checkbox element, sometimes we need to create custom checkboxes to better suit the design or functionality requirements of our application.

Checkbox States

Create a custom checkbox component using HTML, CSS, and JavaScript. The component should have the following features:

Template

styles.css

body {
  font-family: sans-serif;
}

h1 {
  font-size: 1.5rem;
}

index.js

import "./styles.css";

index.html

<!DOCTYPE html>
<html>

<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
</head>

<body>
  <label class="checkbox">
    <input type="checkbox" checked="true" />
    Label
  </label>
</body>

</html>
github-actions[bot] commented 3 months ago

48 - Pull Request updated.