DailyUI #004 - Calculator (CodePen)

#codepen #css #design #100daysofcode

DailyUI Challenge #004 - I made clone of the Google Calculator app, only the UI with a blinking cursor animation, might add functionality later on.

Font:

Open Sans

Color Scheme:

#2D3033 - top half background and button hover color
#202124 - bottom half background
#E8EAED - white input text and number color
#174EA6 - blue strip on the right of numpad
#88B2F5 - operator icon color
#B7B7B7 - gray navbar text and calculated result color

Blinking Cursor Animation:

HTML

The part we want to animate is right after the input.

CSS

In the CSS for after the input, set the content empty and a very thin border to the right with your choice of color.

For each rendering engine's keyframe, set the border color at the beginning and end (0%, 100%) of the animation to be transparent and at the very middle (50%) of the animation to be your choice of color. The 50% is when you see the cursor blink.

For each rendering engine's animation, we set the blink animation to a 1 second duration, the timing-function to step-end, and the iteration-count to infinite because we want it to continuously blink.