Написать логику кнопки на js?

Question

[Serqwezxc]

Есть тз. Условия следующие: Анимацию нужно реализовать средствами css, Логику на ванильном JS. Я многое не понимаю и вопрос в том, как вообще можно реализовать копку на js, не говоря уже о том - зачем на js. Вот кнопка https://jsfiddle.net/rpx4a0ej/9/

Comments

[v3shin]

Без внятного ТЗ - результат ХЗ.

Answer 1

[thatguy1]

На JS можно реализовать всё, что можно реализовать с помощью HTML и CSS и больше.
Вас, очевидно, просят реализовать взаимодействие пользователя с кнопкой на... внезапно... JavaScript, а не добавить/раскрасить кнопку джаваскриптом.

Comments

[Serqwezxc]

А если не описано в тз взаимодействие, необходимо самому придумать?

[thatguy1]

Serqwezxc, вы же понимаете, что я не экстрасенс? Если это какая-то форма, то наверняка ожидается, что она должна работать и нет необходимости уточнять это. Приложили бы тз, иначе это всё догадки.

[Serqwezxc]

Понимаю. Вот полное тз. По ссылке, о которой идет речь в тз, только кнопка и ничего более.

По ссылке сделан прототип анимированного виджета баланса.
Необходимо реализовать его по следующим параметрам:
Постоянно иконка кошелька меняется на плюсик.
При наведении на мигающую иконку, она разворачивается в кнопку Депозит.

Оценить вариант реализации анимации, представленный в прототипе и кратко описать, какими средствами/методами будет сверстан элемент. Есть ли предложения по оптимизации или альтернативные способы решения задачи?
Анимацию нужно реализовать средствами css
Логику на ванильном JS
Проект должен быть набором простой статики и не требовать сборки

[thatguy1]

Serqwezxc, Есть ли альтернативные способы реализации? Безусловно. Что можно улучшить? Как минимум translate заменить на translate3d. Вот это

transition: 0.5s ease, opacity 0.2s ease;

, например, – супер-иррационально. Указывать нужно ровно те свойства, которые действительно будут анимироваться.

кратко описать, какими средствами/методами будет сверстан элемент

Видимо, ожидают оптимизации существующей вёрстки, то есть как сделать лучше? Например, использовав меньше тегов. И опять же, оптимизировать CSS для плавности/производительности.

А вот про логику взаимодействия, действительно, непонятно чего они ожидают.

[Serqwezxc]

Я не очень хорошо объясняю. Вёрстка кнопки моя, в ссылке только файл адоба, в котором предоставлен макет кнопки. И вот вопрос как раз в js, тоже никак не пойму что они ожидают

[Марк]

Serqwezxc, если заказчик (или потенциальный работодатель) формирует ТЗ таким образом, то есть смысл не сотрудничать с ним вообще. Ибо из написанного остаётся только угадывать, что именно нужно сделать в плане логики.