Code Ready | Frontend

@code_ready | #консоль

@code_ready | #мем

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

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

let totalExpenses = 0;
function addExpense() {
    const expenseName = document.getElementById('expenseName').value.trim();
    const expenseAmount = parseFloat(document.getElementById('expenseAmount').value);
    if (expenseName && !isNaN(expenseAmount) && expenseAmount > 0) {
        const expenseList = document.getElementById('expenseList');
        const listItem = document.createElement('li');
        listItem.textContent = ${expenseName}: $${expenseAmount.toFixed(2)};       expenseList.appendChild(listItem);
        totalExpenses += expenseAmount;      document.getElementById('totalExpenses').textContent = totalExpenses.toFixed(2);        document.getElementById('expenseName').value = '';      document.getElementById('expenseAmount').value = '';
    }
}

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

Канал с полезными инструментами для верстальщика найден! Навыки верстальщика - канал в котором ты найдешь: ▫️Макеты в формате фигма для верстки ▫️Полезные фичи по CSS & HTML ▫️Готовые решения по верстке 👉 Мы ждем тебя в нашем дружном комьюнити!

✅ Делаем разные фигуры из картинок 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

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

Каждому фронтендеру будет полезно ⚠️ True Frontender – канал, который поможет поднять грейд и вырасти как разработчику. Авторские статьи, разбор задач с собеседований, шпаргалки и многое другое. 🪩 Присоединяйся и становись лучше с @TrueFrontender

✅ Создание печатающего эффекта Попробуйте этот 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

✅ Вопрос с собеседования Что такое callback функции в JavaScript, и как они используются для управления асинхронным кодом? Ответ: Callback функции - это функции, которые передаются в качестве аргументов в другие функции и вызываются после завершения выполнения определенной операции или события. Они часто используются для обработки результатов асинхронных операций, таких как загрузка данных из сети или обработка событий пользовательского ввода. Callback функции позволяют создавать гибкий и масштабируемый код, который может быть выполнен в определенный момент времени или в ответ на определенное событие. Они могут быть переданы в качестве аргументов в функции, которые выполняются асинхронно, чтобы определить, что делать после их завершения. @code_ready | #собеседование

Всем привет! Нашел клевый и полезный канал для фронтендеров - @gki_webik_ru Тут выпускают необычные и крутые рецепты кода, оч смешные мемы и полезные материалы для веб разработчиков. Подписывайтесь и прокачивайте свой скилл вместе с @gki-webik.ru ! 😎

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

Как готовиться к собеседованию? В канале progway вы можете найти самые популярные вопросы с собеседований с их подробным разбором: — Как оценить алгоритм? — Откуда методы у примитивов? — Какая структура у HTTP запроса? — Что такое cookies? — и ещё более 150 вопросов Разбор теоретических вопросов, популярных задач, простое описание сложных концепций с нуля! Готовься к собеседованиям эффективно вместе с @prog_way_blog — выделись среди конкурентов!

@code_ready |#мем

Делать ли разбор вопросов с собеседований? По типу таких. И как часто хотите их видеть на канале? 🔥

✅ Вопрос с собеседования Что такое стрелочная функция в JavaScript? Ответ: Стрелочная функция в JavaScript - это новый синтаксис для определения функций, который предоставляет более краткую и удобную запись функций. Она использует стрелку => для определения функции, а также имеет несколько особенностей по сравнению с обычными функциями, включая более короткий синтаксис, отсутствие собственного контекста this, и автоматический возврат значения, если тело функции содержит только одно выражение. @code_ready | #собеседование

Анимируй — канал с готовыми анимациями для сайтов. ✔️ Только проверенные варианты, без ошибок в коде и лишних скриптов: * hover эффекты для ссылок и карточек; * анимированный фон; * анимация загрузки и другое. 👇🏼 Переходите, выбирайте анимацию, нажимайте кнопку "Получить код" и забирайте к себе на сайт.

@code_ready | #консоль