Today we're going to be creating an 8 digit calculator, a preview of what you have above. We could make two variations of calculation from the calculator. First would be a calculator that has everything displayed onto the screen excluding important keys like on, off, equal, clear etc. It then performs calculation and return results based on what is found on the screen. The second variation would be a calculator that get values from the screen, stores this value, takes note of the operator used on them without displaying it to the screen and then returns computed result when requested upon.
From the two variations, one seem more logical that the other, whichever one, there should be no problem cos we'll create the two variations, starting from the former and then we'll walk you through the latter, but you have to be conversant with HTML, CSS and at least basic JavaScript. So let's get started already.
We'll create a basic HTML template with the title "My Calculator" and then link it out to a CSS file in which we've also created and called style.css.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<title>My Calculator</title>
</head>
<body>
</body>
</html>
Now we need two containers, the screen container and keys container embedded inside the calculator container. That's more or less a skeleton of the structure we're going to be needing.
We are going to be using an input field placed inside a form for our screen. This is to allow us manage overflows and maximum input in the screen area. We could have something like this;
<div class="calculator">
<form name="screenform">
<input name="screen" class="screen">
</form>
<div class="keys"></div>
</div>
But then, we could place the screen form inside two or more containers to allow us give effect to its styling more differently just as you have in the preview. So we can call this containers screen-bg1, screen-bg2 and screen-bg3.
<div class="calculator">
<div class="screen-bg1">
<div class="screen-bg2">
<div class="screen-bg3">
<form name="screenform">
<input name="screen" class="screen" disabled="disabled">
</form>
</div>
</div>
</div>
<div class="keys"></div>
</div>
Now for the keys container we go ahead to add the required number of buttons we need for our calculator, that'll be 23 buttons. We can also add an id attribute indicating the number or name of the button to allow us give effect to its styling.
<div class="keys">
<button id="btn1">C</button>
<button id="btn2">MRC</button>
<button id="btn3">M-</button>
<button id="btn4">M+</button>
<button id="btn5">OFF</button>
<button id="btn6">n<sup>2</sup></button>
<button id="btn7">%</button>
<button id="btn8">÷</button>
<button id="btn9">7</button>
<button id="btn10">8</button>
<button id="btn11">9</button>
<button id="btn12">×</button>
<button id="btn13">6</button>
<button id="btn14">5</button>
<button id="btn15">4</button>
<button id="btn16">-</button>
<button id="btn17">3</button>
<button id="btn18">2</button>
<button id="btn19">1</button>
<button id="btn20">+</button>
<button id="btn21">0</button>
<button id="btn22">.</button>
<button id="btn23">=</button>
</div>
There you go with the markup, so basically the calculator container embeds the screen and keys container which contains several buttons. We will come back to modify this much later, but for now let's do with this, cos if we go ahead adding up everything now, you may not follow us along quite well. So let's get back to our stylesheet (CSS file). We start with taking care of the browser's default setting, that is by assigning the asterisk a margin, border and padding of 0 pixels.
*{
margin:0px;
border:0px;
padding:0px;
}
Next we want to style the body's background, we could make its color blue.
body{
background-color:blue;
}
We can now start styling our containers, we start with the calculator container.
.calculator {
}
And inside of the curly braces we specify its properties and value. We start with positioning it relatively so that other elements can be placed absolutely inside of it. And then we specify a height and width of 1340px and 940px.
position:relative;
height:1340px;
width:940px;
We also set a margin-left of 25px, this moves our element 25 pixels away from the left, centering our element for a 1000px screen width. We also include a brilliant blue background color with an rgb value of rgb(63,84,117).
margin-left:25px;
background-color: rgb(63,84,117);
We're now done with the calculator container, so we move onto the screen. Remember that the screen form is to be placed inside the screen-bg 1, 2 and 3. We start with bg1.
.screen-bg1{
}
We position it absolutely on the calculator container, add width of 900px and height of 200px.
position:absolute;
width:900px;
height: 200px;
Now to determine what margin from the left would centralize our element inside the calculator container, we do a bit of arithmetics. The width of our calculator container is 940 pixels and that of the screen container is 900 pixel, so if we place the screen container inside the calculator container just as we have done, we're left with 40 pixels in the calculator container. So if we share this 40px by 2 such that the margin from the left is the same as that from the right, we'll end up with 20px, this becomes our margin-left.
We also set our margin-top to 100px I.e 100px away from the top border of the calculator container.
margin-top:100px;
margin-left:20px;
We also add to it a background color, that would be a combination of two nice colors inclined at an angle, to give us the desired effect.
background:linear-gradient (202deg, black, rgb(92,123,147),black, rgb(70,96,122),black);
And lastly we specify the border radius to be 200px, just good enough to achieve what we want. That's all for screen-bg1, so unto screen-bg2.
#screen-bg2{
}
An absolute positioning, width and height of 650px and 180px. If you use the technique we used earlier, you can correctly center the sceen-bg2 inside of the sceen-bg1. Just as a quick recap;
margin-left = screen-bg1 - screen-bg2/2 => 900 - 650/2=>125px.
We also take care of the element's edges by assigning a border radius of 40px, not as curvy as that of the screen-bg1 but gives us what we want. We're done here, up next is screen-bg3.
.screen-bg3{
position: absolute;
width:600px;
height:160px;
margin-left: 25px;
margin-top:10px;
border: 2px solid black;
background:rgb(134,174,178);
}
By now you should'nt have issues with any of this, its more or less a repetition of what we've been doing a couple of times now, all we did was just reduce the size of screen-ng3 and correctly place it inside sceeen-bg2. Then we go ahead to add a border and this nice screen background color. Let's move on ..
We're now left to style our screen input field, this is where all entries would be made, so let's add effect to its styling, then come back to explain.
.screen{
position: absolute;
display: block;
width:570px;
height:140px;
margin-left:13px;
margin-top:10px;
font-size:100px;
box-shadow:2px 2px 5px black, 2px 2px 5px green;
}
Our screen input field is placed absolutely inside the screen-bg3, by setting its position to absolute. Input is an inline element, we make it display block so that it stretches out to take the full width available, in which we've set to 570px. We've also added a height of 140px, played around with the margin top and left. We've also added a font size of 100px so that all entries would be visible enough, not forgetting to include a box shadow of green and black, which is placed 2px horizontally and vertically, blurred by 5px.
At this point you should have your screen all looking good. So let's head on to styling the keys container and buttons. We start with the keys container.
.keys{
}
We have it positioned absolutely, we also declare a width of 900px and play around with the top and left property to have it centered inside the calculator container.
;
.keys{
position:absolute;
width:900px;
margin-left: 45px;
margin-top:320px;
}
So for the keys button, we want them to have a height and width of 150px and 180px, we also add margins to have them equally spaced, we use a margin-right of 40px. We now include a font-size of 50px, so the numbers and operators are legible enough, we can even go ahead and make it bolder using the font-weight property. We also add a text color of white and get rid of the buttons outline by setting it to none. We add a border-radius of 20px. We drop a bit of shadow and this is the whole setout.
.keys button{
position:absolute;
height: 150px;
width:180px;
margin-right:40px;
margin-top:20px;
font-size:50px;
color: white;
font-weight:bolder;
outline:none;
border-radius:20px;
box-shadow:10px 10px 15px black;
}
We now have our buttons correctly styled except for one thing, we need to increase the height of the add button to fit in with the last rows of buttons. If we go ahead and do that, we will alter the positioning of the fifth and last row but of course, we can always come back to fix it. So let's call out the add button.
#btn20{
}
We use the same width as other buttons which is 180px but increase its height.
width:180px;
height:310px;
When you have this previewed, you'll notice the alteration in positioning of the fifth and last row. The buttons affected are btn17, btn18, btn19 for the fifth row and btn21, btn22, btn23 for the last. So let's reposition them.
#btn17,#btn18,btn19{
position:relative;
top:-80px;
}
#btn21,#btn22,btn23{
position:relative;
top:-160px;
}
The relative positioning allows us to reposition these buttons by declaring the top property. Everything is now in place but we still need to include background color to the buttons and also change the text color for the number buttons to black. What we do is call out the required buttons id and add a specified background-color. Let's work this out.
#btn1, #btn5, #btn20{
background-color:linear-gradient(90deg, rgb(182,84,112), rgb(228,113,142),rgb(182,84,112));
}
#btn9, #btn10, #btn11, #btn13, #btn14, #btn15, #btn17, #btn18, #btn19, #btn21, #btn22, #btn23{
background-color: linear-gradient (90deg, rgb(193,216,241), rgb(238, 253,255),rgb(193,216,241));
}
#btn2, #btn3, #btn4, #btn6, #btn7, #btn8, #btn12, #btn16, #btn19, #btn20{
background-color: linear-gradient (90deg, rgb(4,155,158), rgb(12,206,217),rgb(4,155,158));
}
Let's change the border style of btn1, btn2, btn3 and btn4.
#btn1{
border-radius:50%;
height: 180px;
}
#btn2, #btn3, #btn4{
border-radius:0px;
border-top-left-radius:50%;
border-top-right-radius:50%;
border-bottom-left-radius:50%;
height;180px;
}
You may be wondering why we changed border-radius to 0px and later assign it again in individual corner form. This is the reason, remember that we gave all keys buttons a border-radius of 20px, so by declaring a 0px border radius for this few buttons, they become and exception. We then go ahead to set each corner border radius leaving out the border-bottom-right-radius. We also change the height of these 4 buttons, so it is same as their width. This is to allow us have a perfect circle when we make its border-radius 50%.
Just very one problem we need to take care of , before we're done with all of this. We need to round the edges of our container just as it is I'm the preview and include company name, logo or version number. We can decide to use border-radius property to have our calculator container edges rounded bit then we won't get too much of a good result. Get back to the preview, take a closer look, notice that the curve on Tue top of the calculator container is quite different from that of the bottom. Now I know, you'll suggest the border-top-right-radius property and the rest, give it a try, you won't still get at what we want. What we can do is add two div containers, one before and after the calculator container. We can call these containers cont1 and cont2, we attach to it the same background-color, same width and margin-left as the calculator container, we also prescribe an enormous border-radius for cont1 so that it curves more sharply.
.cont{
position:relative;
width:940px;
height:300px;
margin-top:30px;
margin-left:25px;
border-radius:100%;
background-color:rgb(63,84,117);
}
So what we have here, is that we've positioned cont1 relatively so that the calculator container can be placed absolutely on it once we decrease it's margin top. We made the cont1 have the same width and of course the same margin left as that of the calculator container. We also included a height and made a 100% border-radius such that once the calculator container is moved half upward the height of the cont1, it would fit rightly at the center of the cont1 taking away all traces of binding two elements. I like to think am having two elements welded.
We can place our branding name inside this cont1, let's do that right away, so we head back to our markup and do a bit of modification.
<div class="cont1">
<span>K-Aloud<sup>®</sup><p>Version 1.01</p></span>
<pre>8 digit electronic calculator </pre>
<ouriv>
A span tag is used to place our company name K-aloud inside the cont1, we've also placed a paragraph element carrying the version number inside of it and we've also added a pre tag which carries a little description. Let style these elements.
.cont1 span{
position:absolute;
text-align:center;
font-size:50px;
margin-left:247px;
margin-top:50px;
font-weight:bolder;
color:white;
}
.cont1 p{
display:inline;
font-size:30px;
margin-left:10px;
}
.cont1 pre{
position:absolute;
font-size:50px;
font-family:cursive;
margin-left:180px;
margin-top:120px;
color:white;
}
That's all there is that'll make our span, p and pre element correctly placed inside the cont1 container. Now that we this all in place, let's head back to the calculator container and move it upward, halfway the height of the cont1 by setting the margin top to -150px.
.calculator {
//other CSS
margin-left:-150px
}
All we have left to do is style the cont2 .
.cont2{
width:940px;
height:200px;
margin-left:25px;
border-radius:100%;
background-color:rgb(63,84,117);
margin-top:-100px;
}
I hope you enjoyed this walkthrough, that's not all, what you have here is the users experience of the calculator we intend to create, with no working functionalities. Let's go make this work in JavaScript. If you've still got issues or challenges with what we've done here, let us know, we're waiting for you at the comment section. Hope to meet you in Calculator Walkthrough Js.
No comments:
Post a Comment