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

Автор: @energy_it

Заявления РКН: № 5383712961
Download Telegram
Вопрос с собеседования

Разница между function declaration и function expression

Ответ:

Function Declaration:

• Используется ключевое слово function в начале строки кода.
• Обычно используется для создания функций, которые должны быть доступны во всем текущем контексте выполнения (например, внутри любых блоков кода в текущем скрипте).
• Функции, объявленные таким образом, поднимаются вверх в области видимости (hoisting), что означает, что они могут быть вызваны до фактического объявления функции в коде.

Function Expression:
• Функция присваивается переменной как значение.
• Обычно используется для создания анонимных функций или функций, которые должны быть доступны только внутри определенного контекста выполнения.
• Функции, созданные таким образом, не поднимаются вверх в области видимости (hoisting), их можно вызывать только после того, как они были присвоены переменной.


@code_ready | #собеседование
👍57🔥9
This media is not supported in your browser
VIEW IN TELEGRAM
Анимированный индикатор меню

Написан на HTML, CSS & JS

👨‍💻 Готовый код: Ссылочка

@code_ready | #кодпен\
Please open Telegram to view this post
VIEW IN TELEGRAM
👍25🔥18😁1
Кодинг в ночное время

"Night Owl"
- это тема оформления для редактора кода VSCode, разработанная для обеспечения комфортного и эффективного программирования в темное время суток. Она предлагает темные оттенки, которые снижают утомляемость глаз и делают код более читаемым и контрастным.

@code_ready | #плагин
🔥40👍9👎1
This media is not supported in your browser
VIEW IN TELEGRAM
Тег <select>

Селектор выбора позволяет выбрать один конкретный вариант или же выбрать сразу несколько различных вариантов, полезная вещь если вы хотите создать поле с выбором различной информации.

У него есть множество атрибутов и функций, кому интересно, я оставлю ссылку на документацию про этот тег)

<select name="select">
<option value="value1">Значение 1</option>
<option value="value2">Значение 2</option>
<option value="value3">Значение 3</option>
</select>


@cod0e_ready | #практика #html
👍37🔥10😁1
Вопрос с собеседования

Что такое конкатенация строк в JS?

Ответ:

Конкатенация строк в JavaScript - это процесс объединения двух или более строк в одну строку. Этот процесс осуществляется с использованием оператора +, который также используется для сложения чисел.

Когда вы используете оператор + с двумя строками, он не выполняет сложение, как это происходит с числами. Вместо этого он обрабатывает их как строки и склеивает их вместе.

В этом примере мы объединяем значение переменной firstName, пробел и значение переменной lastName, чтобы получить полное имя "John Doe". Оператор + выполняет конкатенацию строк, склеивая их в одну.


@code_ready | #собеседование
🔥26👍20
Что выведет консоль? console.log(typeof []);
Anonymous Quiz
34%
array
13%
null
48%
object
4%
string
1%
number
👍26🔥5
😁96👍12🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
Генератор QR кода на JS

Этот код использует встроенный API https://api.qrserver.com для генерации QR-кода на лету. Он сохраняет простоту и убирает необходимость в сторонних библиотеках.

<h1>QR Code Generator</h1>
<input type="text" id="qr-text" placeholder="Enter text">
<button onclick="generateQR()">Generate QR Code</button>
<div id="qr-code"></div>

function generateQR() {
const qrText = document.getElementById("qr-text").value;
const qrCode = `<img src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${qrText}" alt="QR Code">`;
document.getElementById("qr-code").innerHTML = qrCode;}


@code_ready | #обучение #js
👍45🔥15👎1
Шпаргалка по методам массива

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

@code_ready | #js #шпаргалка
👍65🔥18
Японский стиль в VSCode

"Kanagawa" — это тема оформления для редактора кода VSCode, вдохновленная японской культурой. Она предлагает приятные цвета и элементы дизайна, делая работу с кодом более приятной и комфортной.

@code_ready | #плагин
👍40🔥13👎3😁1
This media is not supported in your browser
VIEW IN TELEGRAM
Создание простого счетчика кликов

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

<button id="clickButton">Нажми на меня</button>
<p>Количество кликов: <span id="clickCount">0</span></p>

 const clickButton = document.getElementById('clickButton');
const clickCountDisplay = document.getElementById('clickCount');
let clickCount = 0;
function updateClickCount() {
clickCountDisplay.textContent = clickCount;}
clickButton.addEventListener('click', function() {
clickCount++;
updateClickCount();});


@code_ready | #обучение #js
👍32🔥7👎4
Что будет в консоли?
Anonymous Quiz
44%
false
5%
TypeError
47%
true
4%
ReferenceError
👍18🔥6
Всем доброго утра! Я планирую создать ещё один канал про фронтенд. В планах конечно бэкенд и дизайн каналы, но это позже) для начала мне нужно это выучить. Поэтому голосуйте про какую отдельную тему, хотите увидеть новый канал.
Anonymous Poll
27%
Разные виды опросов и их объяснение (консоль, true/false...)
16%
Плагины и темы для vscode
17%
Ссылки на кодпены, макеты, статьи...
39%
Также, могу совместить все эти идеи, в 1 канал (если они вам нравятся)
1%
Предложу идею в коментах
👍26🔥7
This media is not supported in your browser
VIEW IN TELEGRAM
Social Media Icons with Popups

Анимация иконок социальных сетей с всплывающими окнами. Написано без использования JavaScript.

👨‍💻 Готовый код: Ссылочка

@code_ready | #кодпен
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥36👍22
Какого типа input не существует в JS?
Anonymous Quiz
28%
hidden
19%
name
13%
submit
41%
color
👍15🔥8
This media is not supported in your browser
VIEW IN TELEGRAM
Тег <optgroup>

Тег <optgroup> в HTML используется внутри тега <select> для группировки пунктов списка выбора. Он позволяет создавать подгруппы или категории для удобства пользователя. Внутри тега <optgroup> вы можете размещать один или несколько тегов <option>, представляющих отдельные пункты выбора.

<select>
<optgroup label="Fruits">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
</optgroup>
<optgroup label="Vegetales">
<option value="carrot">Carrot</option>
<option value="potato" disabled>Potato</option>
</optgroup>
</select>


@code_ready | #практика #html
🔥43👍28
This media is not supported in your browser
VIEW IN TELEGRAM
Делаем генератор паролей

Этот пример создает простой генератор паролей, который при нажатии кнопки, генерирует случайный пароль длиной 12 символов из указанных в charset.

<div class="password-generator">
<input type="text" id="password" readonly>
<button onclick="generatePassword()">Генерировать</button>
</div>

function generatePassword() {
const length = 12;
const charset = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()_+";
let password = "";
for (let i = 0; i < length; i++) {
const randomIndex = Math.floor(Math.random() * charset.length);
password += charset[randomIndex];
}
document.getElementById("password").value = password;
}


@code_ready | #обучение #js
👍53🔥25
Всем привет! По прошлому голосованию, мне предложили множество прикольных идей для нового канала, и я решил создать, 1 канал про фронтенд и бэкенд вместе. Объясняю идею:

Будет создан канал "Roadmap Ready", в нем я буду публиковать:

1. Полезные ссылки на статьи, видео с ютуба, книги, кодпены, репозитории и т.д. Все эти ресурсы я буду скидывать про фронтенд и бэкенд.
2. Затем, будет идти тест про эту тему (консоль, опрос, true/false), и в комментариях объяснение. Примерно как сейчас в этом канале #консоль, но добавится ещё и бэкенд опросы (Python, PHP...)
3. Ну и конечно же, будет разбор вопросов с собеседований (codewars). Также как на этом канале #собеседование. Но добавится бэкенд.

Как вам идея нового канала? Пишите мнение в комментариях и ставьте реакцию 🔥

В этом канале будут такие языки программирования как: (Html, Css, JavaScript, Python, Php, Java, и возможно что то ещё)
🔥84👍12
Что выведет консоль? console.log(typeof Boolean);
Anonymous Quiz
39%
boolean
39%
object
11%
string
11%
function
😁17👍13🔥12