✅ Калькулятор массы тела

Данный код реализует калькулятор индекса массы тема(ИМТ), по нажатию кнопки "Рассчитать ИМТ"

<label for="weight">Вес (кг):</label>
<input type="number" id="weight" required><br>
<label for="height">Рост (см):</label>
<input type="number" id="height" required><br>
<button onclick="calculateBMI()">Рассчитать ИМТ</button>
<div id="result"></div>

function calculateBMI() {
    const weight = parseFloat(document.getElementById('weight').value);
    const height = parseFloat(document.getElementById('height').value) / 100;
    const bmi = weight / (height * height);
    const bmiCat = getBMICategory(bmi);
    document.getElementById('result').innerHTML = `Ваш ИМТ: ${bmi.toFixed(1)} (${bmiCat})`;
}
function getBMICategory(bmi) {
    if (bmi < 18.5) {
        return 'Недостаточный вес';
    } else if (bmi >= 18.5 && bmi < 25) {
        return 'Нормальный вес';
    } else if (bmi >= 25 && bmi < 30) {
        return 'Избыточный вес';
    } else {
        return 'Ожирение';
    }
}

@code_ready | #обучение #js

✅ Декорация текста с помощью псевдоэлементов

Данный CSS-эффект добавляет декоративные элементы в виде синих квадратов в углах блока. Они создаются с использованием ::before и ::after, которые позиционируются абсолютно относительно родительского элемента .decorated-box.

  <div class="decorated-box">
    <h2>Заголовок</h2>
    <p>Некоторый текст</p>
  </div>

.decorated-box {
  position: relative;
  width: 300px;
  padding: 20px;
  background-color: #f0f0f0;
}
.decorated-box::before, .decorated-box::after {
  content: '';
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: #3498db;
}
.decorated-box::before {
  top: 0;
  left: 0;
}
.decorated-box::after {
  bottom: 0;
  right: 0;
}

@code_ready | #обучение #css

@code_ready | #консоль

✅ CSS Свойство Perspective

Свойство perspective позволяет задавать трехмерным объектам расстояние. То есть то, насколько далеко или близко наблюдатель видит сцену.
Значение задается в стандартных единицах: px, %, em.

Возможны разные вариации, наклона, вращения и масштабирования, как и использование этого свойства в связке с hover.

Я оставлю готовый код с примером из видео в комментариях.

@code_ready | #свойство #css

✅ Методы для работы с файлами

В данной шпаргалке представлены основные методы для работы с файлами на JavaScript. После каждого метода есть комментарий поясняющий его функционал

@code_ready | #шпаргалка #js

✅ Использование сторонней библиотеки для работы с картами

Библиотека Leaflet предоставляет широкий функционал для работы с картой мира. Это может быть удобно для вставки местоположения какого-либо предприятия, или компании к себе на сайт.

<div id="map"></div>
<!-- Подключение библиотеки Leaflet -->
 <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>

let mymap = L.map("map").setView([55.7558, 37.6173], 10);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
  maxZoom: 19,
}).addTo(mymap);
// Создание маркера с указанными координатами
L.marker([55.7558, 37.6173]).addTo(mymap);

@code_ready | #обучение #js

✅ Компиляция кода прямо в редакторе

Плагин Quokka позволяет компилировать JavaScript код прямо внутри редактора. Результат кода выводится справа от самого кода(не комментарием).

Ссылка на видео с полным функционалом плагина - https://www.youtube.com/watch?v=l-zB8k582k8

@code_ready | #плагин

@code_ready | #мем

✅ Для чего используются операторы break и continue?

Эти два термина относятся к циклам и являются единственными операторами, которые могут прервать выполнение кода.

• Оператор break заставляет интерпретатор перейти в конец цикла или другой инструкции.

• Оператор continue прерывает одну итерацию и продолжает следующую в цикле.

• По сути, в коде цикл должен отработать до 10, но поскольку есть условие i === 5, а после него выход из цикла break, то выведется значения до 5.

• В следующем примере ситуация аналогичная, но на значении 5, оно будет пропущено из-за ключевого слова continue.

@code_ready | #собеседование

✅ Построение графиков прямо в браузере

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

Если данный код работает неправильно, или вам не нужно делать его на весь экран, в комментариях оставлю css код для правки.

<canvas id="myChart"></canvas>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

let ctx = document.getElementById("myChart").getContext("2d");
let myChart = new Chart(ctx, {
  type: "line",
  data: {
   labels: ["Янв", "Фев", "Мар", "Апр", "Май", "Июн"],
    datasets: [
      {
        label: "Продажи",
        data: [12, 19, 3, 5, 2, 3],
        borderColor: "rgba(255, 99, 132, 1)",
        borderWidth: 1,},],},
  options: {
    scales: {
      y: { beginAtZero: true },},},
});

@code_ready | #обучение #js

✅ Размещение по центру с помощью html

Тег <center> помогает расположить любой вложенный в него контент по центру страницы, без помощи CSS

@code_ready | #обучение #html

@code_ready | #консоль

✅ Слайдер загрузки с процентами

Данный код создает трёхцветный слайдер загрузки, где цвет соответствует процентам, отображающимся снизу.
Реализовано без JavaScript.

• С помощью свойства animation задаётся анимация контейнера загрузки.

• Далее с помощью декораторов @keyframes кастомизируется сколько угодно значений.

• Внутри декоратора задаем значения на 0 ,25, 50 и 100%.

• В следующем декораторе происходит смена текста под слайдером в соответствии процентам.

Уже готовый код я оставил в комментариях)

@code_ready | #обучение #js

✅ Настраиваемый перенос строки

Часто ли у вас возникала проблема, что большой объем текста с длинными словами выходит за рамки контейнера?
Вместо того, чтобы задавать переносы вручную, можно воспользоваться свойством hyphens.

Оно позволяет позволяет задавать перенос строки по значению:
• auto — автоматически, в зависимости от языка
• none — без переносов
• manual — настраиваемое вручную

Не забудьте указать значение языка в теге <html lang> для корректной работы свойства.

@code_ready | #свойство #css

✅ Шпаргалка по регулярным выражениям

Эта шпаргалка представляет набор основных методов для создания и использования регулярных выражений в JavaScript. В ней содержатся все основные операции.

@code_ready | #шпаргалка #js

✅ Горячие клавиши для быстрой верстки

• Ctrl + F2 — Выделяет все вхождения текущего слова.

• Alt + ↑ / ↓ — Переместит строку с курсором вверх или вниз, в зависимости от комбинации клавиш.

• Shift + Tab — Удаляет отступы.

@code_ready | #клавиши

✅ Делаем генератор штрих-кодов

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

<input type="text" id="barcodeValue">
<button id="generateButton">Создать штрих-код</button>
<canvas id="barcodeCanvas"></canvas>
<script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.0/dist/JsBarcode.all.min.js"></script>

const barcodeValueInput = document.getElementById("barcodeValue");
const barcodeCanvas = document.getElementById("barcodeCanvas");
const generateButton = document.getElementById("generateButton");
function generateBarcode() {
    let barcodeValue = barcodeValueInput.value;
    JsBarcode(barcodeCanvas, barcodeValue);
}
generateButton.addEventListener("click", generateBarcode);

@code_ready | #обучение #js