Code Ready | Frontend

Как же круто быть сеньором!😎 Удаленка, релокация в ЕС/США, зп в долларах, зимовка в Тайланде, топовые гаджеты от компании - вот что доступно для Senior инженеров, и не важно на чем ты пишешь - JS / PHP / Python, выбирай что по душе. Главное кодить, кодить и еще раз кодить! Вот тебе подборочка каналов, которая облегчит твой путь🔝: ✅Senior Frontend - все про современный фронтенд ✅Frontendinterview - подготовка к собеседованиям по фронту ✅WebCraft - PHP и все что связано с веб разработкой ✅Frontender Libs - всё про библиотеки и готовые решения для фронтенда ✅Python Practics - обучающий канал по Python

@code_ready | #консоль

Много полезной практики по Javascript ты можешь найти на канале .CCODE Подпишись 👉

✅ Горячие клавиши для ускорения верстки • Ctrl + B — Открыть/скрыть боковую панель • Ctrl + X — Удаляет строку полностью •Ctrl + ~ / J — Открывает терминал @code_ready | #клавиши

Много полезной практики по Javascript ты можешь найти на канале .CCODE Подпишись 👉

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

<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

Совет фронтендерам: уважайте свое время В Html Gram собраны готовые и уникальные codepen решения на каждый день. От эффектов при наведении до 3D анимации. Учитесь, практикуйтесь и прокачивайте свое портфолио вместе с @HtmlGram

✅ Вопрос с собеседования Что такое "асинхронность" в JavaScript и какие инструменты используются для работы с асинхронным кодом? Ответ: В JavaScript, когда говорят о "асинхронности", они обычно имеют в виду выполнение кода, который может выполняться в неопределенное время и не блокирует основной поток выполнения. Это позволяет программе продолжать работать, в то время как ожидаются другие задачи, такие как загрузка данных из сети, чтение файлов или выполнение длительных вычислений. Для работы с асинхронным кодом в JavaScript часто используются такие инструменты, как колбэки (callbacks), промисы (promises) и асинхронные функции (async/await). В данном коде асинхронность проявляется в вызовах функций fetch() и .json(). Эти операции занимают время, поэтому JavaScript не ждет их завершения и продолжает выполнение последующего кода. Вместо этого, с помощью ключевого слова await, код ждет завершения асинхронных операций, прежде чем продолжить выполнение. @code_ready | #собеседование

✅ Вопрос с собеседования Что такое "асинхронность" в JavaScript и какие инструменты используются для работы с асинхронным кодом? Ответ: В JavaScript, когда говорят о "асинхронности", они обычно имеют в виду выполнение кода, который может выполняться в неопределенное время и не блокирует основной поток выполнения. Это позволяет программе продолжать работать, в то время как ожидаются другие задачи, такие как загрузка данных из сети, чтение файлов или выполнение длительных вычислений. Для работы с асинхронным кодом в JavaScript часто используются такие инструменты, как колбэки (callbacks), промисы (promises) и асинхронные функции (async/await). В данном коде асинхронность проявляется в вызовах функций fetch() и .json(). Эти операции занимают время, поэтому JavaScript не ждет их завершения и продолжает выполнение последующего кода. Вместо этого, с помощью ключевого слова await, код ждет завершения асинхронных операций, прежде чем продолжить выполнение. @code_ready | #собеседование

✅ Вопрос с собеседования Что такое "асинхронность" в JavaScript и какие инструменты используются для работы с асинхронным кодом? Ответ: В JavaScript, когда говорят о "асинхронности", они обычно имеют в виду выполнение кода, который может выполняться в неопределенное время и не блокирует основной поток выполнения. Это позволяет программе продолжать работать, в то время как ожидаются другие задачи, такие как загрузка данных из сети, чтение файлов или выполнение длительных вычислений. Для работы с асинхронным кодом в JavaScript часто используются такие инструменты, как колбэки (callbacks), промисы (promises) и асинхронные функции (async/await). Таким образом, асинхронность в JavaScript позволяет создавать быстрые и отзывчивые веб-приложения, обрабатывая асинхронные операции без блокировки основного потока выполнения кода. @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

Вам нравится читать контент на этом канале? Возможно, вы задумывались о том, чтобы купить на нем интеграцию? Следуйте 3 простым шагам, чтобы сделать это: 1) Регистрируйтесь по ссылке: https://telega.in/c/code_ready 2) Пополняйтесь удобным способом 3) Размещайте публикацию Если тематика вашего поста подойдет нашему каналу, мы с удовольствием опубликуем его.

JavaScript теперь в телеграм! JavaScript — самый популярный язык в мире, он используется в 95% всех сайтов, которые вообще существуют. Теперь у JS есть русскоязычный канал. Это первоисточник всего, что появляется в платных курсах и остальных ресурсов. Стоит подписаться!

@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