👩‍💻 Простой калькулятор с динамическим вводом

Создайте калькулятор, который позволяет выполнять основные арифметические операции (сложение, вычитание, умножение, деление). Пользователь вводит два числа и выбирает операцию из выпадающего списка. Результат отображается автоматически.

Требования:

• Два текстовых поля для ввода чисел.
• Выпадающий список для выбора операции.
• Динамическое отображение результата при изменении любого из входных значений.

Решение задачи🔽

<div>
<input type="number" id="num1" placeholder="Введите первое число">
<select id="operation">
<option value="add">+</option>
<option value="subtract">-</option>
<option value="multiply">×</option>
<option value="divide">÷</option>
</select>
<input type="number" id="num2" placeholder="Введите второе число">
</div>
<div>
<h3>Результат: <span id="result">0</span></h3>
</div>

const num1 = document.getElementById('num1');
const num2 = document.getElementById('num2');
const operation = document.getElementById('operation');
const result = document.getElementById('result');

function calculate() {
const value1 = parseFloat(num1.value) || 0;
const value2 = parseFloat(num2.value) || 0;

let res = 0;
switch (operation.value) {
case 'add':
res = value1 + value2;
break;
case 'subtract':
res = value1 - value2;
break;
case 'multiply':
res = value1 * value2;
break;
case 'divide':
res = value2 !== 0 ? value1 / value2 : 'Ошибка (деление на 0)';
break;
}

result.textContent = res;
}

[num1, num2, operation].forEach(element => {
element.addEventListener('input', calculate);
});

🔝 Самые интересные статьи за последние дни:

• HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи. Часть 11

• Вы всё ещё устанавливаете display:none по таймауту? Тогда мы идём к вам

• Парольная защита статичной HTML-страницы на JS

• 9 open source библиотек для вашего следующего проекта

• Модули CSS раскладки — что такое и как готовить

⚙️ 9 open source библиотек для вашего следующего проекта

Разработчики часто сталкиваются с выбором, какие инструменты использовать для своего следующего проекта. Даже если вы серьёзно настроены на разработку продукта, проблема остаётся той же.

В этой статье я расскажу о 9 библиотеках с открытым исходным кодом, которые улучшат ваш проект.

Читать...

👩‍💻 Remove anchor from URL

Завершите функцию/метод так, чтобы он возвращал URL с чем-либо после удаления привязки (#).

Пример кода:

"www.codewars.com#about" --> "www.codewars.com"
"www.codewars.com?page=1" -->"www.codewars.com?page=1"

Решение задачи🔽

function removeUrlAnchor(url) {
return url.split('#')[0];
}

// Примеры использования
console.log(removeUrlAnchor("www.codewars.com#about")); // "www.codewars.com"
console.log(removeUrlAnchor("www.codewars.com?page=1")); // "www.codewars.com?page=1"

🔎 Подборка вакансий для джунов

Frontend-разработчик (React) Junior/Junior+
🟢React, HTML5, CSS, JavaScript
🟢Уровень дохода не указан | Опыт разработки на React

Junior frontend разработчик (Vue)
🟢Vue 2/3, Vuex, Git, Figma, npm/yarn
🟢Уровень дохода не указан | Опыт работы от 1 года

Junior Frontend разработчик (Vue\Nuxt)
🟢HTML5, CSS3(SCSS), JavaScript, TypeScript, Vue 2/3, Webpack/Vite, Vuex/Pinia, Stylelint/Eslint, GitLab
🟢Уровень дохода не указан | 1–3 года

👩‍💻 Face Toggle

Интересный дизайн переключателя. Сделаны на SCSS и JavaScript.

Открыть код...

⚙️ Что такое AbortController в JavaScript и зачем он используется?

AbortController — это API, который позволяет отменять асинхронные операции, такие как запросы fetch. Это полезно для предотвращения утечек ресурсов и отмены операций, которые больше не нужны.

➡️ Пример:

const controller = new AbortController();
const signal = controller.signal;

// Отправляем запрос с возможностью отмены
fetch('https://jsonplaceholder.typicode.com/posts', { signal })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(err => {
    if (err.name === 'AbortError') {
      console.log('Запрос был отменён');
    } else {
      console.error(err);
    }
  });

// Отмена запроса через 500 мс
setTimeout(() => controller.abort(), 500);

🗣️ В этом примере AbortController отменяет запрос через 500 мс. Это позволяет избежать обработки ненужных данных, если, например, пользователь покинул страницу или отменил действие.

🖥 Подробнее тут

📝 Подборка вакансий для мидлов

Frontend Developer
• JavaScript, Vue.js, Nuxt.js, TypeScript
• от 180 000 ₽ | от 3 лет опыта

Frontend developer Vue
• JavaScript, Vue.js, Nuxt.js, HTML, SCSS, Sass, JSON, HTTP, Next.js
• от 150 000 ₽ | от 2 лет опыта

Frontend-разработчик (Vue.js)
• Vue.js, JavaScript, HTML, TypeScript, Vite
• от 180 000 до 250 000 ₽ | Опыт не указан

🤔 Разбираемся с цветами: пространства, иллюзии и квантование

Статья исследует природу цвета, его восприятие и обработку. Рассмотрим дискретизацию, цветовые модели, пространство и причины несоответствия при передаче изображений. Узнайте, что скрывается за HEX-кодами.

Читать...

👩‍💻 Стилизация кнопки с эффектом наведения

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

Ожидаемое поведение:

• Основной цвет фона кнопки — синий (#007BFF).
• При наведении цвет фона становится темно-синим (#0056b3), добавляется тень, и кнопка слегка увеличивается.

Решение задачи🔽

<button class="styled-button">Нажми меня</button>

.styled-button {
background-color: #007BFF;
color: white;
padding: 10px 20px;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
}

.styled-button:hover {
background-color: #0056b3;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
transform: scale(1.05);
}

👩‍💻 Реализация интерактивной карты

Наглядный пример того, как с помощью JS API можно создавать нестандартные интерактивные карты. Яндекс Еда опубликовала исследование самых характерных блюд в городах в России и для визуализации использовала решение от API Яндекс Карт. Оно удобно тем, что позволяет легко и быстро настраивать цвета и детальность карты, убирать или добавлять нужную информацию.

Читать...

👩‍💻 Very cool animated text

Интересная анимация спирального текста. Сделана на CSS и JavaScript.

Открыть код...

📝 Подборка вакансий для сеньоров

Frontend-разработчик (React)
• JavaScript, React, Node.js
• Уровень дохода не указан | от 3 лет

QA-инженер (frontend)
• JavaScript, TypeScript, SQL
• Уровень дохода не указан | от 2 лет

Senior Fullstack Developer (Nest / React)
• Node.js, RabbitMQ, TypeScript, MySQL, React, Redux, TypeORM, NestJS
• от 3 000 до 4 000 $ | от 6 лет

📈 Подборка статей для вашей карьеры

• Выбираем подарки с умом

• 10 лучших приёмов логирования для разработчиков

• Из белой каски и грязных сапог в белый халат и тапки

• Погружение в Web3: изучаем Node.js на открытом курсе

• Чем стартап отличается от бизнеса и что выбрать

👩‍💻 CSS единицы измерения: lh и rlh

Изучение новых относительных единиц измерения CSS основанных на высоте строки и позволяющих отказаться от угадывания вертикального ритма.

Смотреть…

⚙️ Что такое throttle в JavaScript и зачем он используется?

Throttle — это техника ограничения частоты вызова функции до определённого интервала времени. Это полезно для обработки часто происходящих событий, таких как прокрутка или изменение размеров окна, не перегружая производительность.

➡️ Пример:

function throttle(func, delay) {
  let lastCall = 0;
  return (...args) => {
    const now = Date.now();
    if (now - lastCall >= delay) {
      lastCall = now;
      func(...args);
    }
  };
}

const handleScroll = throttle(() => {
  console.log('Прокрутка страницы');
}, 1000);

window.addEventListener('scroll', handleScroll);

🗣️ В этом примере функция handleScroll вызывается не чаще одного раза в секунду, даже если пользователь прокручивает страницу интенсивно. Throttle помогает оптимизировать производительность и уменьшить количество вызовов функции.

🖥 Подробнее тут

📝 Подборка вакансий для лидов

Chapter Lead Angular Frontend разработки
• Angular, TypeScript, RxJS, NgRx, REST API, WebSockets, CI/CD, Git, Docker
• Уровень дохода не указан | от 5 лет опыта

Team Lead Frontend (Управление перспективных проектов)
• React, TypeScript, JavaScript, HTML, CSS (SCSS), REST API, JSON, JWT, Nivo, Highcharts, Chart.js, axios, Fluent UI, final-form, i18next, Jotai, Mitt, React Query, Tanstack Table, Vite
• Уровень дохода не указан | от 4 лет опыта

Teamlead Frontend (Vue)
• CSS, JavaScript, HTML, Vue.js
• Уровень дохода не указан | более 5 лет опыта

👩‍💻 Вышел React v19

В нашем руководстве по обновлению React 19 мы поделились пошаговыми инструкциями по обновлению вашего приложения до React 19. В этом посте мы расскажем о новых возможностях React 19 и о том, как их можно использовать.

Читать...

💾 Используй код-черновик перед коммитом

Написал большой кусок кода, а потом пришлось его переделывать, потому что что-то не учёл?

👉 Совет: перед тем как писать «боевой» код, создай черновой вариант. Быстро набросай логику, протестируй гипотезы, сломай пару раз. Это поможет избежать больших переделок и сэкономит время на исправления.

👀 От живых гайдлайнов к Documentation as Code. Как изменилась документация во фронтенд-разработке

Статья анализирует изменения в подходах к документированию фронтенд-проектов за последние пять лет. Рассматриваются новые инструменты и методы, которые сделали процесс создания и поддержки документации более эффективным.

Читать...