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

Автор: @energy_it

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

Реклама на бирже: https://telega.in/c/code_ready
Download Telegram
Методы конструктора Object.

В объектно-ориентированном программировании конструктор является важной частью процесса создания объектов. Он применяется для инициализации объектов определенного класса, задавая начальные значения и устанавливая параметры объекта. Конструктор представляет собой метод, который вызывается при создании нового объекта.

👉 @code_ready | #js #шпаргалка
👍17🔥7😁5
👍13🔥7
Как вам посты на этой неделе? 🤔
Please open Telegram to view this post
VIEW IN TELEGRAM
👍37🔥5😁3🎉2
Реклама на канале

Хочу поговорить о важной теме. На этом канале реклама выходит почти каждый день, конечно это приносит мне некий доход, но я понимаю что в тоже время это и раздражает.

1. Я не рекламирую всякий бред по типу лотереи. Есть определенная тематика, а именно Web разработка. И если есть реклама, то только полезная для вас. ❤️

2. Старание должно оцениваться. Я каждый день сам делаю по 2-3 поста, чтобы каждому было интересно находиться на этом канале. Но без заработка, конечно меньше мотивации. И это не значит что я веду канал только ради денег. Я его веду в первую очередь чтобы нести пользу.

3. Есть тип рекламы, который мы не можем контролировать, она происходит в рандомный момент, и я за это не получаю ничего. Эту рекламу делает сам телеграмм. Она находиться внизу и её можно скрыть только с помощью telegram premium.

И на этом всё, согласны ли вы со мной? Удачи. 🔥

@code_ready | #новость
Please open Telegram to view this post
VIEW IN TELEGRAM
👍63🔥2219👎2
Как выглядит оператор вызова фнукции в JS?
Anonymous Quiz
53%
()
17%
{}
3%
[]
27%
function
👍21🔥3
😁43👍11🔥6👎1
Итоги 2023 года

Всем доброго вечера, буквально через пару часов будет новый 2024 год. Хоть этому каналу всего лишь 4 месяца, мы хотим поделиться итогами за это краткое время. ❤️

Что мы сделали?
За эти 4 месяца мы успели набрать почти 2000 подписчиков, спасибо каждому кто смотрит посты, надеюсь мы для вас полезны! Вы нам помогаете развиваться и делать контент лучше, так как чем больше аудитория, чем больше реакций и комментариев, тем лучше становиться качество постов.

Цели на новый 2024 год. Пожалуй самая главная цель, это 10 тысяч подписчиков на этом канале и 5 тысяч на нашем втором канале @time_design. Помимо этого, мы хотим расширяться и делать новые каналы, где уже будет в разы качественней контент. Также радовать вас и быть полезными для каждого кто смотрит наши каналы. Всем спасибо)

Пожелания
. Пусть этот год будет полон творческих идей и важных событий. Желаем каждому выполнить все свои цели, стать успешным разработчиком, желаем удачи, счастья и здоровья. ❤️

С наступающим Новым Годом! 🍾

@code_ready | #новость
Please open Telegram to view this post
VIEW IN TELEGRAM
👍137🔥5🎉1
С наступающим, друзья!

Пусть этот год Дракона будет полон творческих идей и важных событий. Желаю каждому реализовать все свои мечты, стать успешным разработчиком. А также я вам желаю удачи, счастья и здоровья, чтобы вы преодолели любые преграды и добились всех своих целей!
21🎉8👍4
С новым годом! 🎄
Please open Telegram to view this post
VIEW IN TELEGRAM
🎉368👍5
Подробная таблица использования группы child

При помощи этих псевдоклассов можно удобно выбирать элементы по их порядковому номеру внутри родительского элемента.

@code_ready | #css #шпаргалка
👍23🔥8
This media is not supported in your browser
VIEW IN TELEGRAM
Как создать цветной след от курсора

Анимация группы переливающихся квадратиков, движущихся за курсором. Для его создания оставляем SCSS и JavaScript код ниже. ⬇️

.loader-container {
width:100px;
height:100px;
position: absolute;
animation: scaleUp .5s linear;
opacity: 0;
transform: scale(0);
.loader {
background: #fff;
animation: filterHue 2.5s linear infinite;
height:100%;
width: 100%;
}
}
@keyframes scaleUp {
50% { transform: scale(0.5); opacity: 1; }
100% { transform: scale(0.25) }
}

window.addEventListener("mousemove", function (e) {
var to_append = document.getElementsByClassName('loader-container')[0];
var all = document.getElementsByClassName('loader-container');
var parent_div = document.createElement('div');
parent_div.className = "loader-container";
var inner_div = document.createElement('div');
inner_div.className = "loader";
parent_div.appendChild(inner_div)
var d = document.body.appendChild(parent_div);
parent_div.style.left = (e.clientX - 50)+'px';
parent_div.style.top = (e.clientY - 50)+'px';
if(document.getElementsByClassName('loader-container').length > 50) {
document.body.removeChild(to_append)
}
});


@code_ready | #практика #scss #js
👍204🔥3
Шпаргалка с методами строк в JS

@code_ready | #js #шпаргалка
👍25🔥105
This media is not supported in your browser
VIEW IN TELEGRAM
Горячие клавиши для быстрой верстки

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

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

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

@code_ready | #клавиши
👍32🔥75
Какое значение не принимает свойство border-style
Anonymous Quiz
38%
ridge
30%
color
16%
none
17%
dashed
👍12🔥4👎2
This media is not supported in your browser
VIEW IN TELEGRAM
Создание таймера с помощью JS

В этом примере создан простой таймер с кнопками "Старт", "Стоп" и "Сброс". Вы можете начать, остановить и сбросить таймер, используя соответствующие кнопки. Таймер отображает количество часов, минут и секунд.

Ниже оставляем HTML, CSS и JavaScript код для создания крутого таймера. ⤵️

<div id="timer">00:00:00</div>
<button onclick="startStopTimer()">Старт/Стоп</button>
<button button onclick="resetTimer()">Сброс</button>

body { font-family: Arial, sans-serif; text-align: center; margin: 50px; }
#timer { font-size: 2em; margin-bottom: 20px; }
button { font-size: 1em; padding: 10px 20px; cursor: pointer; }

let timer, s = 0, m = 0, h = 0, t = 0;
function startStopTimer() {
if (t) {
clearInterval(timer);
} else {
timer = setInterval(() => {
t ? s++ : clearInterval(timer);
updateTimer();
}, 1000);
} t ^= 1;}
function resetTimer() {
clearInterval(timer);
timer = undefined;
s = m = h = 0;
updateTimer();
t = 0; }
function updateTimer() {
const padZero = (value) => (value < 10 ? '0' : '') + value;
document.getElementById('timer').innerText = `${padZero(h)}:${padZero(m)}:${padZero(s)}`; }


@code_ready | #html #css #js
👍24🔥5👎2
Как вам посты на этой неделе? 🤔
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥55👍196🎉3
This media is not supported in your browser
VIEW IN TELEGRAM
Создание бесконечных часов на JS

Этот код создает простые часы, отображающие текущее время в формате "часы:минуты:секунды". Функция setInterval вызывает функцию updateClock каждую секунду для обновления отображаемого времени. ⤵️

<div id="clock"></div>

#clock { font-size: 50px; font-family: Arial, sans-serif; text-align: center; margin: 100px; }

function updateClock() {
const now = new Date();
const hours = now.getHours().toString().padStart(2, '0');
const minutes = now.getMinutes().toString().padStart(2, '0');
const seconds = now.getSeconds().toString().padStart(2, '0');
document.getElementById('clock').innerText = `${hours}:${minutes}:${seconds}`;
}
// Обновляем часы каждую секунду
setInterval(updateClock, 1000);
// Запускаем обновление сразу, чтобы избежать задержки в отображении времени
updateClock();


@code_ready | #обучение #js
👍193🔥3👎1