This media is not supported in your browser
VIEW IN TELEGRAM
✅ Sliding Sign In Sign Up Page
Концепт формы авторизации и регистрации с интересной анимацией переключения. Написан на Html, Css и немного Js
👨💻 Готовый код: Ссылочка
@code_ready | #кодпен
Концепт формы авторизации и регистрации с интересной анимацией переключения. Написан на Html, Css и немного Js
@code_ready | #кодпен
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥70👍15
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
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