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

Автор: @energy_it

Заявления РКН: № 5383712961
Download Telegram
Шпаргалка по сравнению разных типов

Этот небольшой справочник предоставляет основные операции для сравнения различных типов данных в JavaScript. В нем содержатся примеры сравнения чисел, строк, логических значений, объектов, а также особенности сравнения null и undefined

@code_ready | #шпаргалка #js
👍47🔥5
Что будет в консоли?
Anonymous Quiz
38%
true
52%
false
5%
undefined
6%
ReferenceError
🔥16👍7
Вопрос с собеседования

Что такое стрелочная функция в JavaScript?

Ответ:
Стрелочная функция в JavaScript - это новый синтаксис для определения функций, который предоставляет более краткую и удобную запись функций.

Она использует стрелку => для определения функции, а также имеет несколько особенностей по сравнению с обычными функциями, включая более короткий синтаксис, отсутствие собственного контекста this, и автоматический возврат значения, если тело функции содержит только одно выражение.


@code_ready | #собеседование
👍51🔥11
👍72😁38🔥10
This media is not supported in your browser
VIEW IN TELEGRAM
Генерируем случайную цитату

Эта штука будет отображать случайную цитату при каждом обновлении страницы. В этом коде при каждом нажатии на кнопку "Новая цитата" будет загружаться случайная цитата с использованием открытого API "Quotable".

<div class="random-quote">
<p id="quoteDisplay"></p>
<button onclick="fetchRandomQuote()">Новая цитата</button>
</div>

async function fetchRandomQuote() {
const response = await fetch('https://api.quotable.io/random');
const data = await response.json();
const quote = `${data.content} - ${data.author}`;
document.getElementById('quoteDisplay').textContent = quote;
}
// Загружаем случайную цитату при загрузке страницы
window.onload = fetchRandomQuote;


@code_ready | #обучение #js
👍32🔥8
Какой метод используется для проверки того, что значение переменной является числом в JavaScript?
Anonymous Quiz
12%
isNaN()
26%
typeof
61%
isNumber()
1%
isNone()
👍14👎7🔥4
Вопрос с собеседования

Что такое callback функции в JavaScript, и как они используются для управления асинхронным кодом?

Ответ:

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

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


@code_ready | #собеседование
👍41🔥12
This media is not supported in your browser
VIEW IN TELEGRAM
Создание печатающего эффекта

Попробуйте этот CSS код для создания эффекта печатающегося текста .typing-demo устанавливает ширину блока для текста и создает анимацию typing, которая плавно расширяет его до конца. Затем анимация blink мигает границей, чтобы придать тексту более реалистичный вид

<div class="wrapper">
<div class="typing-demo">@code_ready for you!</div>
</div>

.typing-demo {
width: 21ch;
animation: typing 2.5s steps(22), blink .5s step-end infinite alternate;
white-space: nowrap;
overflow: hidden;
border-right: 3px solid;
font-family: monospace;
font-size: 2rem;
}
@keyframes typing {
from {width: 0;}
}
@keyframes blink {
50% {border-color: transparent;}
}


@code_ready | #практика #css
🔥61👍24
Шпаргалка типов курсора в CSS

CSS-свойство cursor устанавливает курсор мыши, если таковой имеется, для отображения, когда указатель мыши находится над элементом. Вы можете указать тип курсора с помощью ключевого слова или загрузить свой значок.

@code_ready | #css #шпаргалка
👍47🔥12
Делаем разные фигуры из картинок

CSS-свойство clip-path создаёт ограниченную область, которая определяет какая часть элемента должна быть видимой. Части, которые находятся внутри области, видимы, а части вне области скрыты.

Если хотите создавать любые фигуры из картинок, держите ссылку на официальный сайт Clip Path, там можно как и пользоваться шаблонами, так и делать собственные фигуры!

Как первый пример, оставляю код для создания креста из картинки:

img {
width: 280px;
height: 280px;
clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
}


@code_ready | #практика #css
🔥43👍10
😁102👍7🔥7
Что будет в консоли?
Anonymous Quiz
9%
10
44%
20
8%
30
39%
50
👍21🔥4
Создание Favicon на сайт

Favicon — значок веб-страницы. Отображается браузером во вкладке перед названием страницы, и в качестве картинки рядом с закладкой.

Чтобы его добавить, нужно использовать тег <link> вместе с атрибутами:
1. rel — тип ресурса: со значением icon или shortcut icon
2. type — Тип передаваемых данных: допустим png, jpeg...
3. href — указывающий на путь к изображению.

Как первый пример, кидаю код для создания фавикона с картинкой "Gmail". Там я использую всё, о чем рассказывал выше:

<link rel="icon" type="png" href="https://cdn4.iconfinder.com/data/icons/logos-brands-in-colors/48/google-gmail-128.png">


@code_ready | #практика #html
👍36🔥4👎1
Вопрос с собеседования

Что такое "асинхронность" в JavaScript и какие инструменты используются для работы с асинхронным кодом?

Ответ:

В JavaScript, когда говорят о "асинхронности", они обычно имеют в виду выполнение кода, который может выполняться в неопределенное время и не блокирует основной поток выполнения. Это позволяет программе продолжать работать, в то время как ожидаются другие задачи, такие как загрузка данных из сети, чтение файлов или выполнение длительных вычислений.

Для работы с асинхронным кодом в JavaScript часто используются такие инструменты, как колбэки (callbacks), промисы (promises) и асинхронные функции (async/await).

В данном коде асинхронность проявляется в вызовах функций fetch() и .json(). Эти операции занимают время, поэтому JavaScript не ждет их завершения и продолжает выполнение последующего кода. Вместо этого, с помощью ключевого слова await, код ждет завершения асинхронных операций, прежде чем продолжить выполнение.


@code_ready | #собеседование
👍34🔥3
This media is not supported in your browser
VIEW IN TELEGRAM
Приложение - калькулятор расходов

Это простое приложение для отслеживания расходов, которое позволяет пользователям добавлять название расхода и его сумму, а затем отображает общую сумму расходов.

<div id="expenses">
<input type="text" id="expenseName" placeholder="Expense Name">
<input type="number" id="expenseAmount" placeholder="Amount in USD">
<button onclick="addExpense()">Add Expense</button>
<ul id="expenseList"></ul>
<p>Total Expenses: $<span id="totalExpenses">0.00</span></p>
</div>

function addExpense() {
const name = document.getElementById("expenseName").value;
const amount = parseFloat(document.getElementById("expenseAmount").value);
if (isNaN(amount) || amount <= 0) {
alert("Please enter a valid amount.");
return;
}
const totalExpensesElement = document.getElementById("totalExpenses");
const totalExpenses = parseFloat(totalExpensesElement.textContent);
totalExpensesElement.textContent = (totalExpenses + amount).toFixed(2);
const listItem = document.createElement("li");
listItem.textContent = `${name}: $${amount.toFixed(2)}`;
document.getElementById("expenseList").appendChild(listItem);
document.getElementById("expenseName").value = "";
document.getElementById("expenseAmount").value = "";
}


@code_ready | #обучение #js
👍29🔥4
true или false? В JavaScript все числа, кроме нуля, преобразуются в true при использовании в условных выражениях.
Anonymous Quiz
76%
True
24%
False
👍14🔥3