✅ Генерируем случайную цитату

Эта штука будет отображать случайную цитату при каждом обновлении страницы. В этом коде при каждом нажатии на кнопку "Новая цитата" будет загружаться случайная цитата с использованием открытого 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

✅ Вопрос с собеседования

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

Ответ:

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

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

@code_ready | #собеседование

✅ Создание печатающего эффекта

Попробуйте этот 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

✅ Шпаргалка типов курсора в CSS

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

@code_ready | #css #шпаргалка

✅ Делаем разные фигуры из картинок

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

@code_ready | #мем

@code_ready | #консоль

✅ Создание 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

✅ Вопрос с собеседования

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

Ответ:

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

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

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

@code_ready | #собеседование

✅ Приложение - калькулятор расходов

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

<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

@code_ready | #консоль

✅ Создание генератора цветов

Генератор цветов на JavaScript: код, который меняет цвет фона элемента при каждом клике. Просто запустите функцию changeColor(), и она создаст случайный цвет в формате HEX.

<div id="colorDisplay"></div>
    <button onclick="changeColor()">Генерировать цвет</button>

#colorDisplay {
  width: 120px;
  height: 120px;
  margin: 10px;
  border: 2px solid #333;}

function changeColor() {
    const randomColor = getRandomColor();
    document.getElementById('colorDisplay').style.backgroundColor = randomColor;}
function getRandomColor() {
    const letters = '0123456789ABCDEF';
    let color = '#';
    for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];}
    return color;}

@code_ready | #обучение #css #js

✅ Вопрос с собеседования

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

Ответ:

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

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

@code_ready | #собеседование

✅ Распознавание голоса на JS

Web Speech API позволяет взаимодействовать с голосовыми интерфейсами в ваших веб приложениях. Web Speech API состоит из двух частей: SpeechSynthesis (Текст-в-Речь), и SpeechRecognition (Асинхронное распознавание речи)

<h2>Распознавание голоса</h2>
    <p id="transcription"></p>
    <button id="startRecognitionButton">Запись</button>

const startRecognitionButton = document.getElementById("startRecognitionButton");
const transcription = document.getElementById("transcription");
startRecognitionButton.addEventListener("click", function () {
  const recognition = new webkitSpeechRecognition();
  recognition.lang = "ru-RU";
  recognition.onresult = function (event) {
   const transcript = event.results[0][0].transcript;
    transcription.textContent = transcript;};
  recognition.onerror = function (event) {
    console.error("Ошибка распознавания:", event.error);};
  recognition.start();});

@code_ready | #обучение #js

✅ Шпаргалка с обработчиками событий

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

@code_ready | #шпаргалка #js

✅ Горячие клавиши для быстрой верстки

• Ctrl + Shift + K — Удаляет текущую строку целиком.

• Ctrl + / — Закомментирует или раскомментирует текущую строку.

• Shift + ← / → / ↓ / ↑ — Позволяет выделять текст в направлении, указанном стрелкой.

@code_ready | #клавиши