Do you calculate on calculators anymore? Missing the nostalgia of taking an actual calculator and doing all those nerd maths?. Here is a calculator for you to do all those maths.
Its a simple calculator just like old ones. This is designed by crawlist.net and I love it. I thought I will share it to you guys to for solving all your maths problems.

Use our Online HTML, CSS editor and previewer for blog spot and websites to verify the codes (code are below) and get the preview.

Free Custom Calculator for Blogger To Solve All Maths Problems
Calculator Preview

You can bookmark this tool for later use.


Start Solving Your Problems Now





Do you want to publish this calculator in your blogger site. Just copy the below code and paste in HTML of the post page. Share and solve problems of others too.

<div style="background-color: whitesmoke; height: 250px; margin: auto; padding: 10px 10px; width: 210px;">
<style>
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {   margin: 0;              }
/*
 * Copyright (c) 2012-2013 Thibaut Courouble
 * http://www.cssflow.com
 *http://www.shipmethis.com
 * Licensed under the MIT License:
 * http://www.opensource.org/licenses/mit-license.php
 */
input, button {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
::-moz-focus-inner {
  padding: 0;
  border: 0;
}
@font-face {
  font-family: 'Ubuntu Mono', ;
  font-style: normal;
  font-weight:normal;
  @import url(http://fonts.googleapis.com/css?family=Ubuntu+Mono);
}
.ks-calculator {
  padding: 15px;
  width: 177px;
  background: #3d4543;
  border: 1px solid #222;
  border-radius: 4px;
  background-image: -webkit-linear-gradient(top, #3d4543, #2f2a2f);
  background-image: -moz-linear-gradient(top, #3d4543, #2f2a2f);
  background-image: -o-linear-gradient(top, #3d4543, #2f2a2f);
  background-image: linear-gradient(to bottom, #3d4543, #2f2a2f);
  -webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 4px rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 4px rgba(0, 0, 0, 0.5);
}
.ks-calculator-display {
  margin: 0 0 20px;
  padding: 3px;
  background: #222;
  border-radius: 3px;
  -webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.ks-calculator-display-input {
  display: block;
  width: 100%;
  height: 35px;
  padding: 0 8px;
  font: 26px/35px UbuntuMono, monospace;
  color: #444;
  text-align: right;
  background: #bccd95;
  background-clip: padding-box;
  border: 1px solid #222;
  border-radius: 2px;
  background-image: -webkit-linear-gradient(top, #bccd95, #e0f5b1);
  background-image: -moz-linear-gradient(top, #bccd95, #e0f5b1);
  background-image: -o-linear-gradient(top, #bccd95, #e0f5b1);
  background-image: linear-gradient(to bottom, #bccd95, #e0f5b1);
  -webkit-box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.ks-calculator-row {
  margin-top: 7px;
  zoom: 1;
}
.ks-calculator-row:before, .ks-calculator-row:after {
  content: '';
  display: table;
}
.ks-calculator-row:after {
  clear: both;
}
.ks-calculator-button {
  float: left;
  padding: 0;
  margin: 0 0 0 7px;
  width: 39px;
  font: 14px/23px UbuntuMono, monospace;
  color: white;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 1px rgba(0, 0, 0, 0.4);
  background: #313131;
  background-clip: padding-box !important;
  border: 0;
  border: 1px solid rgba(0, 0, 0, 0.8);
  border-radius: 3px;
  cursor: pointer;
  background-image: -webkit-linear-gradient(top, #313131, #1c1c1c);
  background-image: -moz-linear-gradient(top, #313131, #1c1c1c);
  background-image: -o-linear-gradient(top, #313131, #1c1c1c);
  background-image: linear-gradient(to bottom, #313131, #1c1c1c);
  -webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.ks-calculator-button:first-child {
  margin-left: 0;
}
.ks-calculator-button:active {
  background: #282828;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6), 0 1px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6), 0 1px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.ks-calculator-button-gray {
  background: #6f6f6f;
  background-image: -webkit-linear-gradient(top, #6f6f6f, #515151);
  background-image: -moz-linear-gradient(top, #6f6f6f, #515151);
  background-image: -o-linear-gradient(top, #6f6f6f, #515151);
  background-image: linear-gradient(to bottom, #6f6f6f, #515151);
}
.ks-calculator-button-gray:active {
  background: #555;
}
.ks-calculator-button-red {
  background: #ff4561;
  background-image: -webkit-linear-gradient(top, #ff7286, #ff4561);
  background-image: -moz-linear-gradient(top, #ff7286, #ff4561);
  background-image: -o-linear-gradient(top, #ff7286, #ff4561);
  background-image: linear-gradient(to bottom, #ff7286, #ff4561);
}
.ks-calculator-button-red:active {
  background: #ff4561;
}
.ks-calculator-button-yellow {
  background: #ffa70c;
  background-image: -webkit-linear-gradient(top, #ffb935, #ffa70c);
  background-image: -moz-linear-gradient(top, #ffb935, #ffa70c);
  background-image: -o-linear-gradient(top, #ffb935, #ffa70c);
  background-image: linear-gradient(to bottom, #ffb935, #ffa70c);
}
.ks-calculator-button-yellow:active {
  background: #ffa70c;
}
.ks-calculator-button-big {
  font-size: 16px;
}
.lt-ie8 .ks-calculator-display-input {
  width: 152px;
}
.lt-ie7 .ks-calculator-row {
  margin-left: -7px;
}/*crawlist.net calculator css ends*/</style>
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
<head>


  <!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
  <form class="ks-calculator">
    <div class="ks-calculator-display">
      <input class="ks-calculator-display-input" id="res" name="res" onfocus="this.blur()" type="text" value="" />
    </div>
<div class="ks-calculator-row">
      <button class="ks-calculator-button ks-calculator-button-gray" onclick="s('Just....')" type="button">mrc</button>
      <button class="ks-calculator-button ks-calculator-button-gray" onclick="s('....do..')" type="button">m-</button>
      <button class="ks-calculator-button ks-calculator-button-gray" onclick="s('......it')" type="button">m+</button>
      <button class="ks-calculator-button ks-calculator-button-red ks-calculator-button-big" onclick="a('/')" type="button">÷</button>
    </div>
<div class="ks-calculator-row">
      <button class="ks-calculator-button" onclick="a('7')" type="button">7</button>
      <button class="ks-calculator-button" onclick="a('8')" type="button">8</button>
      <button class="ks-calculator-button" onclick="a('9')" type="button">9</button>
      <button class="ks-calculator-button ks-calculator-button-red ks-calculator-button-big" onclick="a('*')" type="button">x</button>
    </div>
<div class="ks-calculator-row">
      <button class="ks-calculator-button" onclick="a('4')" type="button">4</button>
      <button class="ks-calculator-button" onclick="a('5')" type="button">5</button>
      <button class="ks-calculator-button" onclick="a('6')" type="button">6</button>
      <button class="ks-calculator-button ks-calculator-button-red ks-calculator-button-big" onclick="a('-')" type="button">-</button>
    </div>
<div class="ks-calculator-row">
      <button class="ks-calculator-button" onclick="a('1')" type="button">1</button>
      <button class="ks-calculator-button" onclick="a('2')" type="button">2</button>
      <button class="ks-calculator-button" onclick="a('3')" type="button">3</button>
      <button class="ks-calculator-button ks-calculator-button-red ks-calculator-button-big" onclick="a('+')" type="button">+</button>
    </div>
<div class="ks-calculator-row">
      <button class="ks-calculator-button" onclick="a('0')" type="button">0</button>
      <button class="ks-calculator-button" onclick="a('.')" type="button">.</button>
      <button class="ks-calculator-button" onclick="s('')" type="button">C</button>
      <button class="ks-calculator-button ks-calculator-button-yellow ks-calculator-button-big" onclick="e()" type="button">=</button>
    </div>
</form>
<script>
    function s(v) { document.getElementById('res').value = v }
    function a(v) { document.getElementById('res').value += v }
    function e() { try { s(eval(document.getElementById('res').value)) } catch(e) { s('Error') } }
  </script></body></div>


Firework Gadget

 Click your mouse pointer on the screen and drag...ENJOY Canvas is not supported in your browser. 

Get the fireworks code here


<!-- setup our canvas element shipmethis.com-->
<canvas id="canvas">Canvas is not supported in your browser.</canvas>&nbsp;</h4>
<h4 style="text-align: left;">
<br /></h4>
<h4 style="text-align: left;">
Get the code here</h4>
<div>
<br /></div>
<div>
<br /></div>
<h4 style="text-align: left;">
<style>/* basic styles for black background and crosshair cursor */
canvas {
background-color: #000;
 cursor: crosshair;
 display: block;
width: 800px;
}</style>
<script>// when animating on canvas, it is best to use requestAnimationFrame instead of setTimeout or setInterval
// not supported in all browsers though and sometimes needs a prefix, so we need a shim
window.requestAnimFrame = ( function() {
 return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    function( callback ) {
     window.setTimeout( callback, 1000 / 60 );
    };
})();
// now we will setup our basic variables for the demo
var canvas = document.getElementById( 'canvas' ),
  ctx = canvas.getContext( '2d' ),
  // full screen dimensions
  cw = window.innerWidth,
  ch = window.innerHeight,
  // firework collection
  fireworks = [],
  // particle collection
  particles = [],
  // starting hue
  hue = 120,
  // when launching fireworks with a click, too many get launched at once without a limiter, one launch per 5 loop ticks
  limiterTotal = 5,
  limiterTick = 0,
  // this will time the auto launches of fireworks, one launch per 80 loop ticks
  timerTotal = 80,
  timerTick = 0,
  mousedown = false,
  // mouse x coordinate,
  mx,
  // mouse y coordinate
  my;

// set canvas dimensions
canvas.width = cw;
canvas.height = ch;
// now we are going to setup our function placeholders for the entire demo
// get a random number within a range
function random( min, max ) {
 return Math.random() * ( max - min ) + min;
}
// calculate the distance between two points
function calculateDistance( p1x, p1y, p2x, p2y ) {
 var xDistance = p1x - p2x,
   yDistance = p1y - p2y;
 return Math.sqrt( Math.pow( xDistance, 2 ) + Math.pow( yDistance, 2 ) );
}
// create firework
function Firework( sx, sy, tx, ty ) {
 // actual coordinates
 this.x = sx;
 this.y = sy;
 // starting coordinates
 this.sx = sx;
 this.sy = sy;
 // target coordinates
 this.tx = tx;
 this.ty = ty;
 // distance from starting point to target
 this.distanceToTarget = calculateDistance( sx, sy, tx, ty );
 this.distanceTraveled = 0;
 // track the past coordinates of each firework to create a trail effect, increase the coordinate count to create more prominent trails
 this.coordinates = [];
 this.coordinateCount = 3;
 // populate initial coordinate collection with the current coordinates
 while( this.coordinateCount-- ) {
  this.coordinates.push( [ this.x, this.y ] );
 }
 this.angle = Math.atan2( ty - sy, tx - sx );
 this.speed = 2;
 this.acceleration = 1.05;
 this.brightness = random( 50, 70 );
 // circle target indicator radius
 this.targetRadius = 1;
}
// update firework
Firework.prototype.update = function( index ) {
 // remove last item in coordinates array
 this.coordinates.pop();
 // add current coordinates to the start of the array
 this.coordinates.unshift( [ this.x, this.y ] );

 // cycle the circle target indicator radius
 if( this.targetRadius < 8 ) {
  this.targetRadius += 0.3;
 } else {
  this.targetRadius = 1;
 }

 // speed up the firework
 this.speed *= this.acceleration;

 // get the current velocities based on angle and speed
 var vx = Math.cos( this.angle ) * this.speed,
   vy = Math.sin( this.angle ) * this.speed;
 // how far will the firework have traveled with velocities applied?
 this.distanceTraveled = calculateDistance( this.sx, this.sy, this.x + vx, this.y + vy );

 // if the distance traveled, including velocities, is greater than the initial distance to the target, then the target has been reached
 if( this.distanceTraveled >= this.distanceToTarget ) {
  createParticles( this.tx, this.ty );
  // remove the firework, use the index passed into the update function to determine which to remove
  fireworks.splice( index, 1 );
 } else {
  // target not reached, keep traveling
  this.x += vx;
  this.y += vy;
 }
}
// draw firework
Firework.prototype.draw = function() {
 ctx.beginPath();
 // move to the last tracked coordinate in the set, then draw a line to the current x and y
 ctx.moveTo( this.coordinates[ this.coordinates.length - 1][ 0 ], this.coordinates[ this.coordinates.length - 1][ 1 ] );
 ctx.lineTo( this.x, this.y );
 ctx.strokeStyle = 'hsl(' + hue + ', 100%, ' + this.brightness + '%)';
 ctx.stroke();

 ctx.beginPath();
 // draw the target for this firework with a pulsing circle
 ctx.arc( this.tx, this.ty, this.targetRadius, 0, Math.PI * 2 );
 ctx.stroke();
}
// create particle
function Particle( x, y ) {
 this.x = x;
 this.y = y;
 // track the past coordinates of each particle to create a trail effect, increase the coordinate count to create more prominent trails
 this.coordinates = [];
 this.coordinateCount = 5;
 while( this.coordinateCount-- ) {
  this.coordinates.push( [ this.x, this.y ] );
 }
 // set a random angle in all possible directions, in radians
 this.angle = random( 0, Math.PI * 2 );
 this.speed = random( 1, 10 );
 // friction will slow the particle down
 this.friction = 0.95;
 // gravity will be applied and pull the particle down
 this.gravity = 1;
 // set the hue to a random number +-20 of the overall hue variable
 this.hue = random( hue - 20, hue + 20 );
 this.brightness = random( 50, 80 );
 this.alpha = 1;
 // set how fast the particle fades out
 this.decay = random( 0.015, 0.03 );
}
// update particle
Particle.prototype.update = function( index ) {
 // remove last item in coordinates array
 this.coordinates.pop();
 // add current coordinates to the start of the array
 this.coordinates.unshift( [ this.x, this.y ] );
 // slow down the particle
 this.speed *= this.friction;
 // apply velocity
 this.x += Math.cos( this.angle ) * this.speed;
 this.y += Math.sin( this.angle ) * this.speed + this.gravity;
 // fade out the particle
 this.alpha -= this.decay;

 // remove the particle once the alpha is low enough, based on the passed in index
 if( this.alpha <= this.decay ) {
  particles.splice( index, 1 );
 }
}
// draw particle
Particle.prototype.draw = function() {
 ctx. beginPath();
 // move to the last tracked coordinates in the set, then draw a line to the current x and y
 ctx.moveTo( this.coordinates[ this.coordinates.length - 1 ][ 0 ], this.coordinates[ this.coordinates.length - 1 ][ 1 ] );
 ctx.lineTo( this.x, this.y );
 ctx.strokeStyle = 'hsla(' + this.hue + ', 100%, ' + this.brightness + '%, ' + this.alpha + ')';
 ctx.stroke();
}
// create particle group/explosion
function createParticles( x, y ) {
 // increase the particle count for a bigger explosion, beware of the canvas performance hit with the increased particles though
 var particleCount = 30;
 while( particleCount-- ) {
  particles.push( new Particle( x, y ) );
 }
}
// main demo loop
function loop() {
 // this function will run endlessly with requestAnimationFrame
 requestAnimFrame( loop );

 // increase the hue to get different colored fireworks over time
 hue += 0.5;

 // normally, clearRect() would be used to clear the canvas
 // we want to create a trailing effect though
 // setting the composite operation to destination-out will allow us to clear the canvas at a specific opacity, rather than wiping it entirely
 ctx.globalCompositeOperation = 'destination-out';
 // decrease the alpha property to create more prominent trails
 ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
 ctx.fillRect( 0, 0, cw, ch );
 // change the composite operation back to our main mode
 // lighter creates bright highlight points as the fireworks and particles overlap each other
 ctx.globalCompositeOperation = 'lighter';

 // loop over each firework, draw it, update it
 var i = fireworks.length;
 while( i-- ) {
  fireworks[ i ].draw();
  fireworks[ i ].update( i );
 }

 // loop over each particle, draw it, update it
 var i = particles.length;
 while( i-- ) {
  particles[ i ].draw();
  particles[ i ].update( i );
 }

 // launch fireworks automatically to random coordinates, when the mouse isn't down
 if( timerTick >= timerTotal ) {
  if( !mousedown ) {
   // start the firework at the bottom middle of the screen, then set the random target coordinates, the random y coordinates will be set within the range of the top half of the screen
   fireworks.push( new Firework( cw / 2, ch, random( 0, cw ), random( 0, ch / 2 ) ) );
   timerTick = 0;
  }
 } else {
  timerTick++;
 }

 // limit the rate at which fireworks get launched when mouse is down
 if( limiterTick >= limiterTotal ) {
  if( mousedown ) {
   // start the firework at the bottom middle of the screen, then set the current mouse coordinates as the target
   fireworks.push( new Firework( cw / 2, ch, mx, my ) );
   limiterTick = 0;
  }
 } else {
  limiterTick++;
 }
}
// mouse event bindings
// update the mouse coordinates on mousemove
canvas.addEventListener( 'mousemove', function( e ) {
 mx = e.pageX - canvas.offsetLeft;
 my = e.pageY - canvas.offsetTop;
});
// toggle mousedown state and prevent canvas from being selected
canvas.addEventListener( 'mousedown', function( e ) {
 e.preventDefault();
 mousedown = true;
});
canvas.addEventListener( 'mouseup', function( e ) {
 e.preventDefault();
 mousedown = false;
});
// shipmethis.com says once the window loads, we are ready for some fireworks!
window.onload = loop;
</script>

Subscribe us to get more such widgets for bloggers or you will miss them for sure.



| Comments || >