Code Ready | Frontend

👩‍💻 Делаем анимированный счётчик кликов на JS Сегодня написал простое веб-приложение Click Counter: при каждом нажатии на кнопку счетчик увеличивается, и число кликов плавно анимируется. Интерфейс современный и минималистичный.

Готовый код оставляю ниже, а Css стили для него, кину в комментарии, т.к его не мало ⬇️

<div class="container">
  <h1>Click Counter</h1>
  <button id="clickButton">Click me!</button>
  <p>Clicks: <span id="clickCount">0</span></p>
</div>

document.addEventListener('DOMContentLoaded', () => {
  const clickButton = document.getElementById('clickButton');
  const clickCount = document.getElementById('clickCount');
  let count = 0;
  clickButton.addEventListener('click', () => {
    count++;
    clickCount.textContent = count;
    clickCount.style.transform = 'scale(1.5)';
    setTimeout(() => {
      clickCount.style.transform = 'scale(1)';
    }, 200);});});

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

Emmet Cheat Sheet — сайт-шпаргалка для Emmet. Здесь собраны все аббревиатуры и формулы, при написании которых раскрываются большие куски кода, а это очень ускоряет разработку сайта. ⛓ Ссылочка: https://docs.emmet.io/cheat-sheet/ ➡️ @code_ready | #ресурсы

Верстаешь? Оцени 7 причин пройти наш бесплатный интенсив по Frontend-разработке: 1. Ты с нуля сверстаешь веб-сайт на HTML + CSS; 2. Оживишь страницу с помощью JavaScript; 3. Создашь проект на Angular; 4. Подключишь Backend и загрузишь сайт на хостинг; 5. Сделаешь сайту адаптив; 6. Получишь проверку домашек от кураторов; 7. В итоге своими руками разработаешь качественный сайт, который не стыдно добавить в портфолио или продать. А главное, ты узнаешь, что тебе делать, чтобы уже в этом году гарантировано зарабатывать от 1000$/мес. на фронтенд-разработке, не выходя из дома. Начинаем уже завтра. 👉 Успей проскочить на интенсив бесплатно Бонусом для портфолио тебе выдадут именной сертификат после окончания интенсива и успешной сдачи всех домашних работ.

👩‍💻 Как работает JSON.stringify() в JS? Функция JSON.stringify: Преобразует JavaScript-объект или значения в строку JSON (текст, форматированный в соответствии с текущим стандартом) Аргументы: • Значение (value) — Это основной аргумент, который указывает, что нужно преобразовать. • Заменитель (replacer) необязательный — Функция или массив для фильтрации свойств. — Если является функцией, преобразует значения по ходу их преобразования в строку. Если является массивом, определяет набор свойств, включаемых в объект в окончательной строке • Пробелы (space) необязательный — Число или строка для форматирования с отступами. ➡️ @code_ready | #функция #js

👋 Уже со вторника начинаю делать посты ежедневно, с новыми шаблонами, рубриками и многим другим на этой недели 😎. Извиняюсь что пришлось терпеть старые контент)) И до сих пор, ищу контентщика на этот канал, отпишите в лс всем кому интересно https://t.me/energy_it

Всем привет 😕 Хотел бы рассказать про контент на этом канале, как вы могли заметить, сейчас контент стал хуже и реже выходить. Почему? Потому что времени вообще нет.

Поэтому мне нужно найти контентщика. Который сможет делать точно такой же контент, как и в этом канале. Знания по html, css и особенно Javascript. Кому интересно отпишите в лс @energy_it.

А также, в канале сильно упала активность, просмотры, реакции и т.д. Если вам нравится этот канал, и хотите чтобы тут часто выходили качественный посты, поставьте просто реакцию 👍🔥, и напишите любой комментарий, что об этом думаете. Спасибо ❤️

👩‍💻 Вопрос с собеседования Как использовать модули в JavaScript? Ответ: 1. Экспортирование модулей: Позволяет делать функции, объекты или переменные доступными для других файлов. Используется export для экспорта нескольких элементов из модуля.

// utils.js
export function add(a, b) {
  return a + b;
}
export const pi = 3.14159;

2. Импортирование модулей: Позволяет использовать ранее экспортированные элементы. Используется import для импорта отдельных элементов из модуля.

// main.js
import { add, pi } from './utils.js';
console.log(add(2, 3)); // 5
console.log(`Value of pi: ${pi}`); // Value of pi: 3.14159

3. Экспорт по умолчанию: Используется для экспорта одного основного элемента из модуля. Это может быть функция, класс или объект. Используется export default для этого.

// math.js
export default function multiply(a, b) {
  return a * b;
}

4. Импорт по умолчанию: Осуществляется без фигурных скобок. Можно дать импортируемому элементу любое имя.

// main.js
import multiply from './math.js';
console.log(multiply(2, 3)); // 6

5. Динамический импорт: Позволяет загружать модули асинхронно, что полезно для загрузки модулей по требованию. Используется import() для динамического импорта.

// main.js
async function loadModule() {
  const { add } = await import('./utils.js');
  console.log(add(5, 10)); // 15
}
loadModule();

6. Импорт всего содержимого модуля: Иногда нужно импортировать все содержимое модуля под одним именем. Используется import * as для этого.

// main.js
import * as Utils from './utils.js';
console.log(Utils.add(2, 3)); // 5
console.log(`Value of pi: ${Utils.pi}`); // Value of pi: 3.14159

➡️ @code_ready | #техсобес

Ребят, это мой второй канал @roadmap_ready по общему IT. Подписываемся) Также следующий канал будет создан по дизайну, и уже потом каналы по Python и Java

👩‍💻 Программирование теперь в телеграм! Вот обширная база материалов, которая ежедневно обновляется, выбирай своё направление: Обучение JavaScript с нуля Обучение Python с нуля Обучение HTML/CSS с нуля Обучение Java с нуля Обучение C/С++ с нуля Обучение С# с нуля Обучение SQL/GO/PHP с нуля Обучение Kotlin/Swift с нуля ⛓ Архив на 1789ГБ: Курсы, книги, шпаргалки, статьи, видео ресурсы — всё собрано в одном месте: @roadmap_ready

➡️ @code_ready | #мем

👩‍💻 Последние 2 фильтра для картинок Мы с вами уже рассмотрели 11 атрибутов свойства filter в css. Эти 2 - последние в этой рубрике, в следующем посте всё объединю одной шпаргалкой) • Сепия — эффект, достигаемый при использовании оттенков коричневого цвета. Атрибут sepia() преобразует входное изображение в сепию. Принимает значения от 0% (оставляет входные данные неизменными) до 100% (полностью соответствует сепии). • Атрибут drop-shadow() используется не только в свойстве filter. Создает эффект тени к входному изображению. В примере мы используем первые числа 20px — для смещения тени по оси X. Вторые числа 20px — для смещения тени по оси X. 12px — радиус размытия, и последние это цвет тени ➡️ @code_ready | #свойство #css

Говорят, что хороший программист напишет хороший код на любом языке. Но всегда ли хороший код означает быстрый код? И как выбор языка программирования влияет на производительность? Сначала ребята из Merk/daily захотели разобраться в этих вопросах сами и пригласили в гости Александра Нозика — директора центра научного программирования МФТИ, ex-руководителя направления в JetBrains Research и кандидата наук по физике частиц. А потом решили, что таких спикеров нельзя держать в тайне... Завтра, 10 июля, в 18:00 CEST (19:00 GMT+3) вместе с Александром ребята проведут прямой эфир на тему: «Пишут ли хорошие программисты быстрый код?» 🤔 Участие бесплатное, нужно только зарегистрироваться ❤️ https://mercdev.timepad.ru/event/2949941/

👨‍💻 Форма с капчей Реализовано на HTML, CSS и JS ⛓ Ссылочка: https://codepen.io/Frontend-Portal/pen/oNRbjXG ➡️ @code_ready | #кодпен

✅ Интерактивный конвертор валют Это веб-приложение — современный конвертер валют, оно обеспечивает быструю и удобную конвертацию суммы из одной валюты в другую с помощью простого интерфейса 😸 Ссылочка на репозиторий:

https://github.com/TgCodeReady/Code-Ready.-Upload-files/tree/main/Currency%20Converter

➡️ @code_ready | #github

💻 Пролистывая этот пост, вы теряете возможность получить дополнительные средства, которые могли бы быть использованы для новых гаджетов, подписок на полезные сервисы или курсов повышения квалификации. В телеграм-канале InvestFuture подготовлена инструкция о том, как использовать кредитные карты для увеличения дохода 💰💳 В закрепленном сообщении канала подробно описаны все детали: какую карту выбрать, какие действия могут быть рискованными, и, самое главное — как с помощью кредитной карты создать дополнительный источник дохода. Используйте полученные бонусы и кэшбэк на покупку нового оборудования или на обучение новым навыкам! ✅ Переходите по ссылке https://t.me/investfuture и узнайте, как начать зарабатывать на кредитных картах. Реклама. ИП Юхтенко Кира Викторовна. ИНН 780162812750. erid: 2VtzqwLGxCp

html-css-javascript-projects — это репозиторий представляет собой сборник более 100 проектов для веб-разработки, включая готовые коды для создания лендингов, пользовательских интерфейсов и веб-приложений. ⛓ Ссылочка: https://github.com/solygambas/html-css-javascript-projects?tab=readme-ov-file ➡️ @code_ready | #ресурсы

✅ Готовый макет 2rism Оставляю уже готовый макет с кодом: Github (без адаптива) 😸 • Сложность: Лёгкий • Язык: Английский • Адаптив: Нет Ссылка на макет — Figma 👩‍💻 ➡️ @code_ready | #github

Все надоело и пропал интерес, чувствуешь себя амебой и хочется только залипать в телефоне. Бывает? Психолог взрослого человека - канал для айтишников, у которых периодически опускаются руки и отключается мозг, ибо переработки и постоянная тревожность не приводят к другим исходам. ✔️ Как научиться отвлекаться от работы и отдыхать? ✔️ Как совместить кучу рабочих задач и время с семьей? ✔️ Как справиться с прокрастинацией? ✔️ Как не растерять запал, даже если начальник и коллеги 💩 и кажется, что ничего не выходит? Подписывайтесь на канал @vadimpetrov_psy и научитесь работать без упахивания, выгорания и ущерба для личной жизни! 👨🏻‍💻 Псс. Заходите в закреп канала - там много полезного, и даже бесплатный мини-курс.

@code_ready | #мем

👩‍💻 Вопрос с собеседования Как организовать обработку ошибок в JavaScript? Ответ: 1. Использование try...catch: Позволяет ловить и обрабатывать ошибки в блоке кода.

try {
  throw new Error('Что-то пошло не так');
} catch (error) {
  console.log(error.message); // Что-то пошло не так
}

2. Обработка ошибок в промисах: С помощью метода catch.

// Функция возвращает промис
function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject(new Error('Ошибка при получении данных'));
    }, 1000);
  });
}
// Обработка ошибки
fetchData().catch(error => {
  console.log(error.message); // Ошибка при получении данных
});

3. Обработка ошибок в async/await: Используется try...catch внутри асинхронных функций.

// Функция возвращает промис
function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject(new Error('Ошибка при получении данных'));
    }, 1000);
  });
}
// Асинхронная функция с await
async function getData() {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.log(error.message); // Ошибка при получении данных
  }
}
getData();

➡️ @code_ready | #техсобес