Faeze Amini - Portfolio

Case Study

Form Input Wave

Logging Page

IndustryWeb Store
Year2024
ServiceWeb application

Challenge

The platform is implemented using JavaScript. The objective is to create an animated label for input fields that behaves as follows:

  • When the input field is focused, the label should animate.
  • If the input field is empty and the user clicks anywhere else on the page, the label should return to its initial position.
  • If the input field is filled, the label should remain in its animated position.

Solution

- Define a CSS class for the label and apply it to the input field based on its state (filled or empty). This will ensure that the label animates correctly according to user interactions.

Visit website

Technologies

HTML

CSS

Github

js

Git

main*
Go Live