gmtd Apr 17 at 08:18

HTML и CSS — языки программирования

Easy

1 min

6.6K

Доказано.

Пример реализации на чистом HTML и CSS конечного автомата, а именно, мини-калькулятора, складывающего два числа, заданных в двоичном формате.

Песочница

HTML

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>CSS-is-PL</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <h2>Add two numbers in binary format</h2>
  <div>
    x:
    <input class="v1-1" type="checkbox">
    <input class="v1-2" type="checkbox">
  </div>
  <div>
    y:
    <input class="v2-1" type="checkbox">
    <input class="v2-2" type="checkbox">
  </div>
  <div class="result">
    x + y =
  </div>
</body>

</html>

CSS

body {
  margin: 1em;
  --v1-1: 0;
  --v1-2: 0;
  --v2-1: 0;
  --v2-2: 0;
}

input {
  margin-left: 2em;
}

.v1-1::after,
.v1-2::after,
.v2-1::after,
.v2-2::after {
  margin-left: 1.5em;
  content: "0";
}

body:has(.v1-1:checked) {
  --v1-1: 3;

  .v1-1::after {
    content: "1";
  }
}

body:has(.v1-2:checked) {
  --v1-2: 1;

  .v1-2::after {
    content: "1";
  }
}

body:has(.v2-1:checked) {
  --v2-1: 3;

  .v2-1::after {
    content: "1";
  }
}

body:has(.v2-2:checked) {
  --v2-2: 1;

  .v2-2::after {
    content: "1";
  }
}

.result {
  margin-top: 1em;
}

.result::after {
  --v1: calc(var(--v1-1) + var(--v1-2));
  --v2: calc(var(--v2-1) + var(--v2-2));
  --result: calc(var(--v1) + var(--v2));
  counter-reset: result var(--result);
  content: counter(result);
}

Наш Telegram-канал о Vue.js и фронтенд-разработке в целом: @vuefaq

Вебсайт: Vue‑FAQ.org.

Tags:

Hubs: