#CodepenChallenge Disappear: Swipe, and delete action for mobile devices

#codepen #javascript #react #webdev

Swipe, and delete action for mobile devices

This is for the second week of Codepen challenge Action!: Disappear

Description

Example interactive design for data list.

The design is based on the latest trend 'glassmorphism' design.

This design and action is more optimized for mobile devices. Although, the interactivity will also respond to mouse click event.

When you swipe a data to left or right, you would be able to see the delete button. When you click on it, the data will be disappear from the list (or deleted).

I tried to make the disappearance having a 'dispersed' effect, by adding

opacity: 0;

and

filter: blur(5rem)

to the CSS.

I also added some micro interactions on the other elements, although they're not working.

The 'menu' button will be a 'x' mark, and menu list will appear when clicked.

The search icon will extend, and then the handle of magnifier will be a 'x' mark. Clicking the 'x' mark will clear the data.

The tabs menu will change its active state when clicked.

I used React JS to create all these interactions, so Javascript must be active to see the actual design.

This is my first time to use React hooks, so there is a chance that I misuse its usage. Though I read the Rules before proceeding.

The only function of the hook I used is the useState hook.

const [test, setTest] = useState("");

setTest("test");

I used Font Awesome for the icons at the bottom menu, and the delete button.

Resources

Javascript library: ReactJS

Fonts: Open Sans (Look at 'Assets/Fonts')

Icons: Font Awesome

Demonstration

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.