Code Ready | Frontend
20.1K subscribers
687 photos
308 videos
17 files
459 links
Авторский канал по Frontend разработке.
Ресурсы, гайды, задачи, шпаргалки.
Информация ежедневно пополняется!

Автор: @energy_it

РКН: https://clck.ru/3NJCKs

Реклама на бирже: https://telega.in/c/code_ready
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
Sliding Sign In Sign Up Page

Концепт формы авторизации и регистрации с интересной анимацией переключения. Написан на 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 | #клавиши
👍67🔥12👎1
This media is not supported in your browser
VIEW IN TELEGRAM
Создание простого ползунка со значением

Этот код создает простой ползунок на веб-странице, который позволяет пользователю выбирать значение от 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 #шпаргалка
👍55🔥8👎3😁3
This media is not supported in your browser
VIEW IN TELEGRAM
Исправление орфографических ошибок

Code Spell Checker — это расширение для VSCode, Цель которого проверка орфографии и помощь выявить распространенные орфографические ошибки и исправить их

@code_ready | #плагин
🔥48👍18👎3
😁80👍31🔥10👎2
Шпаргалка по методам объекта Math

Данная шпаргалка представляет собой основные методы объекта 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).

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
Что будет в консоли?
Anonymous Quiz
66%
1,5
8%
0
25%
4
1%
5
👍40🔥9👎8
Вопрос с собеседования

Что такое объекты аргументов в JavaScript?

Ответ:


Объект аргументов, это специальный тип объекта, хранящий в себе все переданные в функцию аргументы.

Хотя arguments и не является массивом, но он имеет свойство length, которое вернет количество переданных в него параметров.


Данный код объявляет функцию func с аргументом x. Её функционал заключается в выводе длинны объекта аргуметов, переданных в функцию. В первом случае будет выведено 0, во втором 1, и в третьем 3


@code_ready | #собеседование
👍49🔥15😁2
Фильтры для картинок

Свойство 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
📱 Заметки в файлах VS Code

Расширение 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
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥36👍9
Шпаргалка по событиям 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 | #кодпен
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥55👍22
This media is not supported in your browser
VIEW IN TELEGRAM
Калькулятор массы тела

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

<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.

  <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