Выпей воды

Создание динамичных и отзывчивых веб-интерфейсов может быть сложной задачей, но современные фреймворки, такие как Vue.js, значительно упрощают этот процесс. Vue предлагает реактивность, декларативную разработку и компонентный подход, что позволяет превращать статичные макеты в живые, интерактивные приложения с минимальными усилиями.

Перед вами — наглядный пример того, как просто и элегантно можно создать полезный UI-компонент. Это трекер употребления воды, который визуализирует ваш прогресс. Интерактивность, вычисляемые значения и плавные анимации реализованы с помощью Vue буквально в несколько десятков строк кода.

Ниже вы можете не только протестировать готовый компонент, но и изучить его полный исходный код с подробными пояснениями.

Выпей воды

Цель: {{ total }} литра

{{remained}}л осталось

{{drinked}}%

Выберите количество стаканов, которые вы должны выпить

<div id="app" class="app">
  <p class="app__title">Выпей воды</p>
  <p class="app__subtitle">Цель: {{ total }} литра</p>
  <div class="app__vessel">
    <div class="app__vessel-top" :style="{height: 100 - drinked + '%'}">
      <span class="app__vessel-top-num">{{remained}}л</span>
      <span>осталось</span>
    </div>
    <div class="app__vessel-bottom" :style="{height: drinked + '%'}">
      <span>{{drinked}}%</span>
    </div>
  </div>
  <div class="app__desc">Выберите количество стаканов, которые вы должны выпить</div>
  <div class="app__glasses">
    <div class="app__glasses-item" :class="{active: i <= ind}" v-for="glass,i in glasses" @click="handleClick(i)">
    </div>
  </div>
</div>

.app {
  --tr: .3s ease-in-out;
  display: grid;
  place-items: center;
  align-content: center;
  margin-inline: calc(-50vw + 50%);
  color: #fff;
  background-color: #3498DB;
  font-family: Montserrat, sans-serif;
}
.app__title {
  font-size: clamp(24px, 1.3261rem + 0.8696vi, 32px);
}
.app__subtitle {
  margin-bottom: 20px;
}
.app__vessel {
  --tr: .4s ease-in-out;
  overflow: hidden;
  width: 150px;
  height: 300px;
  margin-bottom: 20px;
  color: #21618C;
  background-color: #fff;
  border: 4px solid #21618C;
  border-radius: 0 0 40px 40px;
}
.app__vessel-top {
  overflow: hidden;
  display: grid;
  place-items: center;
  align-content: center;
  height: 50%;
  line-height: 1;
  transition: height var(--tr);
}
.app__vessel-top-num {
  font-size: clamp(21px, 1.2473rem + 0.3261vi, 24px);
  font-weight: 700;
}
.app__vessel-bottom {
  display: grid;
  place-items: center;
  height: 50%;
  background-color: #85C1E9;
  font-size: clamp(24px, 1.3261rem + 0.8696vi, 32px);
  font-weight: 700;
  line-height: 1;
  transition: height var(--tr);
}
.app__desc {
  margin-bottom: 10px;
  text-align: center;
}
.app__glasses {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.app__glasses-item {
  display: grid;
  place-items: center;
  align-content: center;
  width: 50px;
  height: 100px;
  color: #21618C;
  background-color: #EBF5FB;
  line-height: 1.1;
  border: 4px solid #21618C;
  border-radius: 0 0 15px 15px;
  cursor: pointer;
  transition: color var(--tr), background-color var(--tr);
}
.app__glasses-item.active {
  color: #fff;
  background-color: #85C1E9;
}

const {createApp,ref} = Vue
createApp({
  setup() {
    const total = ref(2)
    const glasses = ref(8)
    const drinked = ref(0)
    const remained = ref(2)
    const ind = ref(-1)
    const handleClick = (i) => {
      if (i === ind.value) {
        ind.value -= 1
        i--
      } else {
        ind.value = i
      }
      remained.value = total.value - ((i + 1) * (total.value / glasses.value))
      drinked.value = 100 - (remained.value / total.value) * 100
    }
    return {
      total,
      glasses,
      drinked,
      remained,
      ind,
      handleClick
    }
  }
}).mount('#app')

Внимание! Представленный код — это готовый компонент, но для его работы на странице должен быть установлен и подключен фреймворк Vue. Если вы начинающий разработчик, просто добавьте строку
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
в раздел <head> вашего HTML, и всё заработает.

Разбор кода: как работает этот компонент на Vue.js

Давайте подробно разберем, как устроен этот интерактивный трекер.

Структура и данные (Composition API)

В разделе script мы используем Composition API Vue 3. Функция ref создает реактивные переменные:

total — общая цель в литрах (2л).
glasses — общее количество стаканов для визуализации (8).
drinked — процент выпитой воды (от 0 до 100).
remained — оставшийся объем в литрах.
ind — индекс последнего выбранного стакана.

Логика интерактивности

Ключевая функция handleClick(i) вызывается при клике на стакан:

Она определяет, был ли стакан уже активен, позволяя «отменять» выбор.
Вычисляет новый остаток: remained.value = total.value - ((i + 1) * (total.value / glasses.value)).
На основе остатка вычисляет процент заполнения: drinked.value = 100 - (remained.value / total.value) * 100.

Реактивная связь с шаблоном (HTML)

В шаблоне используется директивы Vue:

{{ total }}, {{ drinked }}% — вывод реактивных данных.
:style="{height: drinked + '%'}" — динамическое изменение высоты столба воды через inline-стили. Vue автоматически обновляет DOM при изменении drinked.
v-for="glass,i in glasses" — рендерим 8 стаканов на основе реактивного массива.
:class="{active: i <= ind}" — условное применение класса active к стаканам, которые должны быть «заполнены».
@click="handleClick(i)" — привязка функции-обработчика к клику.

Стилизация и анимация

В CSS заданы переменные --tr для времени анимации. Плавные переходы (transition) для высоты .app__vessel-top и .app__vessel-bottom создают эффект «переливания» воды при изменении реактивных переменных drinked и remained.

Итог: Этот компонент — отличная иллюстрация мощи Vue.js. Реактивность связывает данные и представление, а логика инкапсулирована в одном компоненте, что делает код чистым, понятным и легко поддерживаемым.

Вдохновились примером?

Мы готовы разработать креативный и функциональный интерфейс для вашего сайта.

Наша веб-студия специализируется на создании современных веб-приложений с использованием Vue.js и других передовых технологий. От сложных интерактивных виджетов и анимированных интерфейсов до полноценных бизнес-приложений — мы воплотим ваши идеи в цифровой реальности.

Напишите нам – и мы разработаем решение, которое будет не только работать безупречно, но и восхищать ваших пользователей.

Предыдущий Следующий