Hello world!
Please don't mind because the calculator inside the blog post isn't matching the calculator on the cover picture. I don't like misleading information. That's exactly why I used my calculator picture on the cover picture, as shown below. It turned out awful for me.
However did You see that the colour-code of "UI" has been kept unchanged? Yes, precisely because it reflects the personality of the actual blog-culator! It wasn't planned out. I was constantly tinkering to match the colour-code of the title text with the green calculator's theme. It looked even more disgusting. Then I stumbled upon an idea (by accident!). Let's not change the colour-code of "UI"! It fitted beautifully with my story.
Welcome lovely people, to my article on what I did in my first CSS project idea. The way I got my idea is very exciting to say the least. I didn't take inspiration from any internet resources or books. After reading through how I got the idea, You might very well say that I accidentally stumbled upon it. That's exactly the case!
What's the project?
Firstly my project is the Windows 10 Calculator UI made purely with HTML and CSS. Shown below on the left is my version (which doesn't calculate by the way) and on the right stands the Microsoft calculator. My design philosophy for this project was to containerize all the elements within a single block so that all of them can be moved or addressed at once. The whole structure must be a coherent whole.
The story behind the project
I was reading the articles on HTML Tables at w3schools.com and experimenting on those concepts.
The going along was fun as I saw things coming to life and responding to my tinkerings. I was playing with the data cell tags, cell and table borders, cell border colors, cell roundness and cell spacing. Little was I aware then that I was going to be blown away by the idea which was coming up next, Designing the Windows 10 Calculator UI using only the concepts of tables I learnt just now (and some CSS). I am left with a memory to cherish now.
How does the calculator "work"?
The final version of the calculator You are seeing in the picture above has seen three revisions before it's actualization. It went through several steps which I documented as milestone snapshots. I can show You all the versions below.
Version 1
- Outline
This is where I was setting up the calculator's skeleton using only HTML (HTML is literally a website's skeleton). The structure includes these sections:
Keypad section
Memory buttons panel
Display panel
Menu bar
Title bar
This was to ensure a structural look-alikeness with the actual role model.
Concepts
<table> tag
<td> tag
class and id to selectively target a tag
plain text
colspan attribute (we can allocate a cell to take the area of N columns)
padding (a little CSS just to position the Calculator text)
Version 2
- Outline
Next, I filled up the display panel with a big 0 using just text.
Concepts
No additional tag or concept was used.
Version 3
- Outline
Thirdly, You can see I have started rounding the buttons. Slowly CSS is coming into the limelight now. If You also notice, I have added the control buttons and they look fantastically pathetic, owing to their positioning and look.
Concepts
border-radius property of a table cell (CSS)
favicons (the minimize, maximize and close buttons here). I obtained them from fontawesome. A little working knowledge on that:
- Sign-up on the website to receive your starter kit. Confirm your email address. You will receive a JavaScript code to put inside your HTML code's <head> tag. Now You are ready to use all favicons from this website just by selecting a favicon of choice there, clicking it, copying the HTML class code and pasting it inside the tag You want the favicon to be in.
Version 4
Outline
You can see in this version the control buttons coming into shape. This is done to give them a definition and a spatial allocation. The red border simply and playfully signifies the spatial allocation for the 3 control buttons to play within!
Concepts
- buttons (real clickable HTML buttons this time!)
Version 5
Outline
The colours were added this time and attempts were continuously made to replicate the colour of the original functional calculator. Additionally, You can also see a red close button fighting for Your attention. I ensured that the buttons weren't visible and added hover effects to them so that when we hover the mouse pointer over those buttons, they appear in a fade-in fashion, show a certain colour and fade-out the same way. As we know the terms fade-in and fade-out are transition properties, so there also exists a setting to adjust the transition duration. You can see all of these in action, in the video attached to this blog post.
Concepts
hover pseudo-class (we can think of it as a class modifier)
transition-duration
background-color (to set the container element's colour)
color (to set the contained element's colour)
rgb() property of setting a colour
Version 6
- Outline
Tadaaa!
This version was about adding 5 extra favicons (the 3-stacked bars, arrow-out-of-square, history-clock and the calculator icon, cancel button icon), black borders for sharpness and memory panel buttons. The implementation of memory panel buttons was very challenging owing to the difficulty of achieving the exact placement that I struggled to arrive at. When the structure is final, joy goes viral.
Concepts
- Nothing new
Version 7 (Final)
- Outline
I'm sure You can't make out this time which one Windows made! Relax, I'm just joking. I'm sure You found out the final touch of beauty added to the calculator. Yes, You're absolutely precise at pointing it out. It's a blue soothing border and a shadow. I didn't know the technical concept of the shadow and copied it from W3Schools' code example. However I learnt just after seeing it in action and by tweaking it's cool parameters.
Concepts
box-shadow
opacity
This brings us to an end of the calculator project journal, a "calculator" made with pure HTML and CSS. You can watch the video [26-seconds watch] attached below.
Conclusion
This project was 98% manual application of learned HTML-CSS topics and 2% copy-pasting (favicons and shadow property). A big thank you for investing your time in reading this post. Hope You found something valuable in it!