Привет, меня зовут Бхарат Сарасват, и это мой первый пост в блоге о создании небольшой панели мониторинга covid-трекера с использованием Vanilla JS.

Почему Vanilla JS?

Я хотел создать небольшую панель инструментов, которая была бы быстрой (например, очень быстрой) и показывала бы данные, мне не хотелось использовать такие фреймворки, как React, VUE и т. д. при разработке.

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

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

covid-трекер данных с vanilla js

Если хотите посмотреть демо, вот оно: covidtrackerlite.in

Я начал с HTML-кода, в котором есть три карточки: «подтверждено», «активно» и «восстановлено». Мы также можем показать другие показатели в зависимости от данных.

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

...
<!-- Referencing skeleton here -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css"/>
...

<div class="container">
  <h1>
    Covid tracker, Data for
    <b class="strong">India</b>
  </h1>
  <div class="row">
    <div class="four columns">
      <div class="card card--red">
        <div class="card__heading">
          <h5>Confirmed</h5>
          <h2 id="confirmed">260000+</h2>
        </div>
      </div>
    </div>
    <div class="four columns">
      <div class="card card--blue">
        <h5>Active</h5>
        <h2 id="active">129000+</h2>
      </div>
    </div>
    <div class="four columns">
      <div class="card card--green">
        <h5>Recovered</h5>
        <h2 id="recovered">129000+</h2>
      </div>
    </div>
  </div>
</div>

Я использовал API для получения доступных данных, и то же самое используется веб-сайтом covid india
Ссылка на API: https://github.com/covid19india/api

Затем я использовал функцию fetch javascript, чтобы сделать вызов API и установить его для соответствующих элементов DOM, которые я создал ранее.
main.js

// fetch covid data and later set it to object cards
(function () {
  let countriesData = null;

  let elementIds = {
    confirmed: "confirmed",
    active: "active",
    recovered: "recovered",
  };

  function fetchData() {
    // use js fetch
    const apiURL = "https://api.covid19india.org/data.json";
    fetch(apiURL)
      .then((response) => response.json())
      .then((data) => {
        let summaryData = data.statewise[0];
        document.getElementById(elementIds.confirmed).textContent = Number(
          summaryData.confirmed
        ).toLocaleString("en-IN");
        document.getElementById(elementIds.active).textContent = Number(
          summaryData.active
        ).toLocaleString("en-IN");
        document.getElementById(elementIds.recovered).textContent = Number(
          summaryData.recovered
        ).toLocaleString("en-IN"); // to show correct number format
      })
      .catch((error) => console.log("api data fetch error", error));
  }
  // comment this method while developing to save api calls
  fetchData();
})();

Я также добавил некоторые стили для деталей карты. Поскольку все до сих пор является ванильным, то почему бы не использовать некоторые переменные CSS 😜😁

main.css

/* CSS variables here */
:root {
  --primary-color: #fff;
  --secondary-color: #000;
  --bg-color: #fff;
  --font-color: #000;
  --heading-color: #000;
  --card-bg: #fff;

  /* color variants */
  --blood-red: #FF073A;
  --cold-blue: #057EFF;
  --nice-green: #2AA846;

  /* slider */
  --slider-color: #ccc;
}

/* dark theme variables here */
[data-theme="dark"] {
  --bg-color: #000;
  --font-color: #fff;
  --card-bg: #333;
}

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

И еще несколько стилей, которые являются глобальными и используются страницей и карточками.
main.css

/* global styles */

body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  min-height: 100%;
}

body {
  background-color: var(--bg-color);
  color: var(--font-color);
  transition: all 0.3s ease-out;
}

.container {
  height: 80%;
}

.container .strong {
  border-bottom: 4px solid var(--font-color);
}

.container .row {
  display: flex;
  justify-items: center;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  height: 80%;
}

/* card styles */
.card {
  padding: 20px;
  border: 1px solid var(--card-border-color);
  border-radius: 7px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15);
  background-color: var(--card-bg);
}

.card:hover {
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.15);
}

/* card variants */
.card.card--red {
  border-bottom: 4px solid var(--blood-red);
}

.card.card--blue {
  border-bottom: 4px solid var(--cold-blue);
}

.card.card--green {
  border-bottom: 4px solid var(--nice-green);
}

/* footer styles */
footer {
  background: #000;
  color: #fff;
  padding: 15px;
  width: 100%;
}

Теперь, пока здесь у нас есть готовый шаблон с карточками и динамическими данными. Круто… верно?
Примечание. Не забудьте добавить ссылки на файлы CSS и JS.

Мы можем добавить в наш шаблон функциональность переключения темы (темная тема).

Поэтому нам нужно добавить кнопку-переключатель, которая переключает тему.
Мы можем добавить атрибут data-theme="dark" к нашему документу или тегу html, поскольку ранее мы уже написали стили, которые в основном обновляют переменные CSS.

Во-первых, мы добавим кнопку переключения темы в наш html
index.html

<div class="theme-switch-wrapper">
  <label class="theme-switch" for="theme-toggle">
    <input type="checkbox" id="theme-toggle" />
    <div class="slider round"></div>
  </label>
  &nbsp;
  <em>Enable Dark Mode</em>
</div>

и стили для того же.

main.css

/*Simple css to style it like a toggle switch*/
.theme-switch-wrapper {
  display: flex;
  align-items: center;
}

.theme-switch-wrapper em {
  margin-left: 10px;
  font-size: 1rem;
}

.theme-switch {
  display: inline-block;
  height: 34px;
  position: relative;
  width: 60px;
}

.theme-switch input {
  display: none;
}

.slider {
  background-color: var(--slider-color);
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: .2s;
}

.slider:before {
  background-color: var(--bg-color);
  bottom: 4px;
  content: "";
  height: 26px;
  left: 4px;
  position: absolute;
  transition: .4s;
  width: 26px;
}

input:checked+.slider {
  background-color: var(--font-color);
}

input:checked+.slider:before {
  transform: translateX(26px);
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

Итак, переключатель выглядит хорошо, но он не работает.
Это потому, что нам нужно написать код JS для переключения класса при переключении переключателя.

Ниже я написал код, который делает то же самое
theme-toggle.js

// theme toggle function, toggles through light and dark mode
(function () {
  let themeToggle = document.getElementById("theme-toggle");
  themeToggle.addEventListener(
    "click",
    function (event) {
      if (event.target.checked) {
        document.documentElement.setAttribute("data-theme", "dark");
        localStorage.setItem("data-theme", "dark");
      } else {
        document.documentElement.setAttribute("data-theme", "light");
        localStorage.setItem("data-theme", "light");
      }
    },
    false
  );

  const currentTheme = localStorage.getItem("data-theme")
    ? localStorage.getItem("data-theme")
    : null;

  if (currentTheme) {
    document.documentElement.setAttribute("data-theme", currentTheme);

    if (currentTheme === "dark") {
      themeToggle.checked = true;
    }
  }
})();

Здесь вы можете найти подробную статью о добавлении темной темы от ananyaneogi.

Вот и все 👏

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

Что ж, это была моя первая статья, и я хотел поделиться проектом с вами.

Дайте мне знать, если это кому-то помогло, также, пожалуйста, сообщите мне, нужно ли мне обновить пост (поскольку я плохой писатель 🙈) или код.

Спасибо за прочтение ✨

Первоначально опубликовано на https://dev.to 22 июля 2020 г.