DEV Community

Cover image for DailyUI #004 - Calculator (CodePen)
annie.exe
annie.exe

Posted on

DailyUI #004 - Calculator (CodePen)

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.
HTML Snippet

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.

CSS Snippet

CodePen

Discussion (1)

Collapse
imiahazel profile image
Imia Hazel

Nice.