This media is not supported in your browser
    VIEW IN TELEGRAM
  ✅ Лучшие горячие клавиши для верстки
• Shift + Alt + F — отформатировать листинг. Быстро выровняет код, чтобы он стал более читаемым, понятным и красивым.
• Ctrl + D — множественное редактирование. Изменит одинаковый код сразу в нескольких местах.
• Alt — множественный ввод. Поможет написать одно и то же сразу в нескольких местах.
@code_ready | #клавиши
• Shift + Alt + F — отформатировать листинг. Быстро выровняет код, чтобы он стал более читаемым, понятным и красивым.
• Ctrl + D — множественное редактирование. Изменит одинаковый код сразу в нескольких местах.
• Alt — множественный ввод. Поможет написать одно и то же сразу в нескольких местах.
@code_ready | #клавиши
👍67🔥12❤1👎1
  This media is not supported in your browser
    VIEW IN TELEGRAM
  ✅ Создание простого ползунка со значением
Этот код создает простой ползунок на веб-странице, который позволяет пользователю выбирать значение от 0 до 100. Под ползунком отображается текущее выбранное значение.
@code_ready | #обучение #js
Этот код создает простой ползунок на веб-странице, который позволяет пользователю выбирать значение от 0 до 100. Под ползунком отображается текущее выбранное значение.
<div>
<input type="range" max="100" id="sliderRange"/>
<p>Value: <span id="demo"></span></p>
</div>
const slider = document.getElementById("sliderRange");
const output = document.getElementById("demo");
output.innerHTML = slider.value;
slider.oninput = function () {
   output.innerHTML = this.value;
};@code_ready | #обучение #js
👍43🔥12
  ✅ Шпаргалка по методам Date
Эта шпаргалка содержит основные методы JavaScript для работы с Date. Каждый метод сопровождается кратким описанием его функциональности и примером использования.
@code_ready | #js #шпаргалка
Эта шпаргалка содержит основные методы JavaScript для работы с Date. Каждый метод сопровождается кратким описанием его функциональности и примером использования.
@code_ready | #js #шпаргалка
👍55🔥8👎3😁3
  This media is not supported in your browser
    VIEW IN TELEGRAM
  ✅ Исправление орфографических ошибок
Code Spell Checker — это расширение для VSCode, Цель которого проверка орфографии и помощь выявить распространенные орфографические ошибки и исправить их
@code_ready | #плагин
Code Spell Checker — это расширение для VSCode, Цель которого проверка орфографии и помощь выявить распространенные орфографические ошибки и исправить их
@code_ready | #плагин
🔥48👍18👎3
  ✅ Шпаргалка по методам объекта Math 
Данная шпаргалка представляет собой основные методы объекта Math для работы с математическими функциями и константами. Каждый метод снабжён комментарием, поясняющим его функцию
@code_ready | #шпаргалка #js
Данная шпаргалка представляет собой основные методы объекта Math для работы с математическими функциями и константами. Каждый метод снабжён комментарием, поясняющим его функцию
И оставлю ссылку на пост, где я делился лучшими шпаргалками на этом канале — https://t.me/code_ready/583 (кто ещё не видел)
@code_ready | #шпаргалка #js
👍39🔥9👎1
  This media is not supported in your browser
    VIEW IN TELEGRAM
  ✅ Использование стороннего API для получения температуры в городе
Этот код описывает характер работы со сторонними API. В этой реализации все работает на базе диалогового окна браузера. Выполняется запрос к API с использованием встроенного в браузер метода fetch() в асинхронном режиме (async/await).
@code_ready | #обучение #js
Этот код описывает характер работы со сторонними API. В этой реализации все работает на базе диалогового окна браузера. Выполняется запрос к API с использованием встроенного в браузер метода fetch() в асинхронном режиме (async/await).
async function getWeather() {
  const API_KEY = "12dd0fe5648f4507a47125430231301";
  const country = prompt("Введите ваш город/страну:  ");
  const URL = `https://api.weatherapi.com/v1/current.json?key=${API_KEY}&q=${country}`;
  try {
    const response = await fetch(URL);
    const data = await response.json();
    alert(`Температура в ${country}: ${data.current.temp_c} °C`);
  } catch (e) {
    console.log(e);
  }
}
getWeather();@code_ready | #обучение #js
👍38🔥12
  👍40🔥9👎8
  ✅ Вопрос с собеседования
Что такое объекты аргументов в JavaScript?
Ответ:
Объект аргументов, это специальный тип объекта, хранящий в себе все переданные в функцию аргументы.
Хотя arguments и не является массивом, но он имеет свойство length, которое вернет количество переданных в него параметров. 
@code_ready | #собеседование
Что такое объекты аргументов в JavaScript?
Ответ:
Хотя arguments и не является массивом, но он имеет свойство length, которое вернет количество переданных в него параметров.
Данный код объявляет функцию func с аргументом x. Её функционал заключается в выводе длинны объекта аргуметов, переданных в функцию. В первом случае будет выведено 0, во втором 1, и в третьем 3 
@code_ready | #собеседование
👍49🔥15😁2
  ✅ Фильтры для картинок
Свойство filter в CSS позволяет применять различные изменения на картинки.
• Атрибут blur накладывает размытие на картинку. Он принимает значения в: %, em, rem, vm, vh, px.
• Атрибут bright изменяет яркость картинки. Он принимает значения в процентах.
Это свойство имеет еще несколько атрибутов, они будут описаны в следующих постах.
@code_ready | #свойство #css
Свойство filter в CSS позволяет применять различные изменения на картинки.
• Атрибут blur накладывает размытие на картинку. Он принимает значения в: %, em, rem, vm, vh, px.
• Атрибут bright изменяет яркость картинки. Он принимает значения в процентах.
Это свойство имеет еще несколько атрибутов, они будут описаны в следующих постах.
• В первый раз мы задаем тегу с классом blur свойство фильтр с аргументом blur и значением в 5px. Это значит что картинка будет размыта на 5 пикселей.
• Во второй раз мы меняем яркость со стандартной 100% На 50, поэтому картинка становится в 2 раза темнее.
@code_ready | #свойство #css
👍45🔥18
  This media is not supported in your browser
    VIEW IN TELEGRAM
  Расширение Bookmarks позволяет ставить заметки на любой строчке каждого файла вашего проекта.
Добавлять ярлыки можно с помощью команды Bookmarks: Toggle
@code_ready | #плагин
Please open Telegram to view this post
    VIEW IN TELEGRAM
  🔥27👍10👎4
  Всем привет! 👋
Помню времена, когда я сам был начинающим разработчиком и не знал как настроить редактор кода и комфортно работать в нём(
Было сложно адаптироваться, мало качественного материала на эту тему.
НО! Недавно увидел полезное видео как раз на эту тему, и даже подчерпнул что-то для себя, хотя у меня уже не мало опыта в программировании)
В ходе курса автор показывает:
— как улучшить комфорт работы в редакторе кода VS Code👩💻 
— какие плагины лучше всего использовать;
— как ускорить работу с кодом!
В общем рекомендую к просмотру! 💪
https://www.youtube.com/watch?v=SE0_wdokumg
Помню времена, когда я сам был начинающим разработчиком и не знал как настроить редактор кода и комфортно работать в нём(
Было сложно адаптироваться, мало качественного материала на эту тему.
НО! Недавно увидел полезное видео как раз на эту тему, и даже подчерпнул что-то для себя, хотя у меня уже не мало опыта в программировании)
В ходе курса автор показывает:
— как улучшить комфорт работы в редакторе кода VS Code
— какие плагины лучше всего использовать;
— как ускорить работу с кодом!
В общем рекомендую к просмотру! 💪
https://www.youtube.com/watch?v=SE0_wdokumg
Please open Telegram to view this post
    VIEW IN TELEGRAM
  YouTube
  
  VS Code ПОЛНЫЙ курс + настройка (интерфейс, плагины, работа с кодом)
  Основы работы в IDE VS Code, мои настройки, плагины, рекомендации по использованию этого ПО в работе.
— В ходе просмотра рекомендую повторять действия за мной, чтобы закрепить все функции на практике.
— Курс рассчитан на новичков, однако некоторые моменты…
— В ходе просмотра рекомендую повторять действия за мной, чтобы закрепить все функции на практике.
— Курс рассчитан на новичков, однако некоторые моменты…
🔥36👍9
  ✅ Шпаргалка по событиям JS
Данная шпаргалка представляет собой набор основных событий для обработки действий пользователя.
@code_ready | #шпаргалка #js
Данная шпаргалка представляет собой набор основных событий для обработки действий пользователя.
@code_ready | #шпаргалка #js
🔥53👍21👎3
  This media is not supported in your browser
    VIEW IN TELEGRAM
  ✅ Menu Icon Animation
Анимация различных иконок для меню на CSS. Написано без использования JavaScript.
👨💻  Готовый код: Ссылочка  
@code_ready | #кодпен
Анимация различных иконок для меню на CSS. Написано без использования JavaScript.
@code_ready | #кодпен
Please open Telegram to view this post
    VIEW IN TELEGRAM
  🔥55👍22
  This media is not supported in your browser
    VIEW IN TELEGRAM
  ✅ Калькулятор массы тела
Данный код реализует калькулятор индекса массы тема(ИМТ), по нажатию кнопки "Рассчитать ИМТ"
@code_ready | #обучение #js
Данный код реализует калькулятор индекса массы тема(ИМТ), по нажатию кнопки "Рассчитать ИМТ"
<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
👍50🔥14👎1
  ✅ Декорация текста с помощью псевдоэлементов
Данный CSS-эффект добавляет декоративные элементы в виде синих квадратов в углах блока. Они создаются с использованием ::before и ::after, которые позиционируются абсолютно относительно родительского элемента .decorated-box.
@code_ready | #обучение #css
Данный 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
👍36🔥10👎3
  👍22🔥8
  This media is not supported in your browser
    VIEW IN TELEGRAM
  ✅ CSS Свойство Perspective
Свойство perspective позволяет задавать трехмерным объектам расстояние. То есть то, насколько далеко или близко наблюдатель видит сцену.
Значение задается в стандартных единицах: px, %, em.
Возможны разные вариации, наклона, вращения и масштабирования, как и использование этого свойства в связке с hover.
@code_ready | #свойство #css
Свойство perspective позволяет задавать трехмерным объектам расстояние. То есть то, насколько далеко или близко наблюдатель видит сцену.
Значение задается в стандартных единицах: px, %, em.
Возможны разные вариации, наклона, вращения и масштабирования, как и использование этого свойства в связке с hover.
Я оставлю готовый код с примером из видео в комментариях.
@code_ready | #свойство #css
👍38🔥15