Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="container">
	<div class="row">
		<div class="cols-md-12 text-center">
			<h1 id="heading">Virtual iPhone Calculator</h1>
		</div>
	</div>
	<div class="row">
		<div class="cols-md-12">
			<!-- <div class="center-block"><img id="height-restrict" src="images/iphone6.jpeg" /></div>-->
			<div class="center-block" id="css-iphone-shape">
				<div class="row">
					<div class="cols-md-12">
						<div id="camera"></div>
						<div id="speaker" class="center-block"></div>
					</div>
				</div>
				<div id="screen">
					<div class="btn-line">
						<div id="display-area">
							<div class="row">
								<div class="top-area">
									<img id="signal-bar-icon" src="https://dl.dropboxusercontent.com/s/ltpea0qopvpnlpq/iphone6-signal-bar.png" />
									<span id="clock"></span>
									<img id="battery-icon" src="https://dl.dropboxusercontent.com/s/xfws10b2e33bg7w/iphone6-battery-icon.png" />
								</div>
							</div>
							<div class="row">
								<div id="display"></div>
							</div>
						</div>
					</div>
					<div class="btn-line">
						<div class="calc-btn special-operators clear clear-all" data-value="clear">AC</div>
						<div class="calc-btn special-operators sign" data-value="sign">+/-</div>
						<div class="calc-btn special-operators percent" data-value="0.01">%</div>
						<div class="calc-btn basic-operators right-btns divide" data-value=" / ">&divide;</div>
					</div>
					<div class="btn-line">
						<div class="calc-btn number" data-value="7">7</div>
						<div class="calc-btn number" data-value="8">8</div>
						<div class="calc-btn number" data-value="9">9</div>
						<div class="calc-btn basic-operators right-btns multiply" data-value=" * ">x</div>
					</div>
					<div class="btn-line">
						<div class="calc-btn number" data-value="4">4</div>
						<div class="calc-btn number" data-value="5">5</div>
						<div class="calc-btn number" data-value="6">6</div>
						<div class="calc-btn larger-text basic-operators right-btns" data-value=" - ">-</div>
					</div>
					<div class="btn-line">
						<div class="calc-btn number" data-value="1">1</div>
						<div class="calc-btn number" data-value="2">2</div>
						<div class="calc-btn number" data-value="3">3</div>
						<div class="calc-btn basic-operators add right-btns" data-value=" + ">+</div>
					</div>
					<div class="btn-line">
						<div class="calc-btn-zero number bottom-btns" data-value="0">0</div>

						<div class="calc-btn number larger-text decimal bottom-btns" data-value=".">.</div>
						<div class="calc-btn bottom-btns right-btns equals-sign" data-value="=">=</div>
					</div>
				</div>
				<div id="home-btn" class="center-block"></div>
			</div>
		</div>
	</div>
</div>
</div>
              
            
!

CSS

              
                 /* iphone calculator color scheme
    top bar background color: #202020;
    darker gray: #C5C6C9;
    darker gray:hover: #b1b2b4;
    lighter gray: #D1D2D5;
    lighter gray:hover: #bebec0;
    orange: #F18F00;
    orange:hover: #e0790e;
    */
 
 body {
 	font-size: 2.5em;
 	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Roboto", Arial, "Lucida Grande", sans-serif;
 	font-weight: 100;
 	background-color: #999;
 }
 
 #heading {
 	color: #FFF;
 }
 
 #height-restrict {
 	height: 550px;
 }
 
 #css-iphone-shape {
 	height: 550px;
 	width: 282px;
 	border: solid black 2px;
 	border-radius: 45px;
 	background-color: #fff;
 }
 
 #screen {
 	height: 397px;
 	width: 222px;
 	margin-top: 38px;
 	margin-left: 28px;
 	position: relative;
 	border: solid black 1px;
 }
 
 .btn-line {
 	margin-bottom: 0;
 	margin-right: 0;
 	margin-left: 0;
 	margin-top: 0;
 }
 
 .calc-btn {
 	height: 55px;
 	width: 55px;
 	float: left;
 	display: block;
 	text-align: center;
 	padding-top: 8px;
 	border-bottom: solid black 1px;
 	border-right: solid black 1px;
 	-webkit-user-select: none;
 	/* Chrome/Safari */
 	-moz-user-select: none;
 	/* Firefox */
 	-ms-user-select: none;
 	/* IE10+ */
 }
 
 .calc-btn-zero {
 	height: 55px;
 	width: 110px;
 	float: left;
 	padding-top: 8px;
 	padding-right: 50px;
 	text-align: center;
 	vertical-align: center;
 	border-bottom: solid black 1px;
 	border-right: solid black 1px;
 	-webkit-user-select: none;
 	/* Chrome/Safari */
 	-moz-user-select: none;
 	/* Firefox */
 	-ms-user-select: none;
 	/* IE10+ */
 }
 
 .right-btns {
 	border-right: none;
 	font-weight: 200;
 }
 
 .bottom-btns {
 	border-bottom: none;
 }
 
 .number {
 	background-color: #D1D2D5;
 	color: #000;
 }
 
 .number:hover {
 	background-color: #bebec0;
 	cursor: pointer;
 }
 
 .basic-operators:hover {
 	background-color: #e0790e;
 	cursor: pointer;
 }
 
 .basic-operators:active {
 	background-color: #e0790e;
 	cursor: pointer;
 }
 
 .pendingFunction {
 	background-color: #F18F00;
 	cursor: pointer;
 	border: solid black 2px;
 }
 
 .equals-sign {
 	background-color: #F18F00;
 	color: #FFF;
 }
 
 .equals-sign:hover {
 	background-color: #e0790e;
 	cursor: pointer;
 }
 
 .special-operators:hover {
 	background-color: #b1b2b4;
 	cursor: pointer;
 }
 
 .basic-operators {
 	background-color: #F18F00;
 	color: #FFF;
 	-webkit-user-select: none;
 	/* Chrome/Safari */
 	-moz-user-select: none;
 	/* Firefox */
 	-ms-user-select: none;
 	/* IE10+ */
 }
 
 .special-operators {
 	background-color: #C5C6C9;
 	color: #000;
 	-webkit-user-select: none;
 	/* Chrome/Safari */
 	-moz-user-select: none;
 	/* Firefox */
 	-ms-user-select: none;
 	/* IE10+ */
 }
 
 .percent {
 	font-size: 0.9em;
 	padding-top: 12px;
 }
 
 .larger-text {
 	font-size: 1.1em;
 }
 
 .decimal {
 	background-color: #D1D2D5;
 	font-size: 1.2em;
 	font-weight: 700;
 	font-family: "Arial";
 }
 
 .decimal:hover {
 	background-color: #bebec0;
 	cursor: pointer;
 }
 
 #display-area {
 	height: 120px;
 	width: 221px;
 	background-color: #202020;
 	color: white;
 	text-align: right;
 	font-size: 1.8em;
 	font-weight: 100;
 }
 
 .top-area {
 	height: 55px;
 	width: 221px;
 }
 
 #display {
 	text-align: right;
 	padding-right: 24px;
 	color: #fff;
 }
 
 #camera {
 	background-color: #000;
 	border-radius: 50%;
 	height: 10px;
 	width: 10px;
 	position: relative;
 	margin-left: 100px;
 	margin-top: 42px;
 	border: solid gray 2px;
 }
 
 #speaker {
 	background-color: #000;
 	width: 45px;
 	height: 8px;
 	border-radius: 50px;
 	margin-top: -8px;
 	position: relative;
 	border: solid gray 2px;
 }
 
 #home-btn {
 	border-radius: 50%;
 	height: 35px;
 	width: 35px;
 	border: solid black 3px;
 	margin-top: 12px;
 	position: relative;
 }
 
 #signal-bar-icon {
 	height: 11px;
 	float: left;
 	margin-left: 18px;
 	margin-top: 4px;
 }
 
 #battery-icon {
 	height: 12px;
 	float: right;
 	margin-right: -7px;
 	margin-top: 5px;
 }
 
 #clock {
 	color: #FFF;
 	font-size: 0.19em;
 	position: relative;
 	float: left;
 	margin-left: 34px;
 	padding-top: 5px;
 	/*vertical-align: top; */
 }
              
            
!

JS

              
                // function to include an actual clock at the top of the virtual iPhone calculator
function updateClock() {
	var currentTime = new Date();
	var currentHours = currentTime.getHours();
	var currentMinutes = currentTime.getMinutes();
	var currentSeconds = currentTime.getSeconds();

	//pad the minutes and seconds with leading zeros, if needed
	currentMinutes = (currentMinutes < 10 ? "0" : "") + currentMinutes;
	currentSeconds = (currentSeconds < 10 ? "0" : "") + currentSeconds;

	// Choose either AM or PM as appropriate
	var timeOfDay = (currentHours < 12) ? "AM" : "PM";

	// Convert the hours component to 12-hour format, if needed
	currentHours = (currentHours > 12) ? currentHours - 12 : currentHours;

	// Convert the hours component from "0" to "12"
	currentHours = (currentHours == 0) ? 12 : currentHours;

	// Compose the string for time display
	var currentTimeString = currentHours + ":" + currentMinutes + ":" + currentSeconds + " " + timeOfDay;

	$("#clock").html(currentTimeString);
}

$(document).ready(function() {
	setInterval("updateClock()", 1000);
});

function resetCalculator(currentValue, currentClearState) {
	$("#display").text(currentValue);
	$(".basic-operators").removeClass("pendingFunction");
	$("#display").data("isOperationPending", false);
	$("#display").data("thePendingOperation", "");
	$("#display").data("firstValueLocked", false);
	$("#display").data("secondValueLocked", false);
	$("#display").data("firstValue", currentValue);
	$("#display").data("secondValue", 0);
	$("#display").data("previousCalculationOccured", false);
	$("#display").data("decimalAdded", false);
	$("#display").data("allClearClearState", currentClearState); // the alternate state should be "C"
	// AC = all clear, C = clear
};

function debugStates() {
	console.log("------------")
	var displayObject = $("#display").data();
	console.log("isOperationPending: " + displayObject.isOperationPending);
	console.log("thePendingOperation: " + displayObject.thePendingOperation);
	console.log("firstValueLocked: " + displayObject.firstValueLocked);
	console.log("secondValueLocked: " + displayObject.secondValueLocked);
	console.log("firstValue: " + displayObject.firstValue);
	console.log("secondValue: " + displayObject.secondValue);
	console.log("previousCalculationOccured: " + displayObject.previousCalculationOccured);
	console.log("decimalAdded: " + displayObject.decimalAdded);
	console.log("allClearClearState: " + displayObject.allClearClearState);
};

/*function insertCommas(str) {
    var str = str.replace(/,/g, "");
    //if (str.length )
    //return str;
    return str.substr(0, str.length - 3) + "," + str.substr(str.length - 3);
};*/

$(function() {
	// reset to fresh state when calculator loads
	resetCalculator(0, "AC");
	debugStates();
	//What happens when number buttons are clicked
	$(".number").click(function() {
		// click a number button after a calculation has already been performed. (This should replace firstValue with what is clicked)    
		var displayObject = $("#display").data();
		if (displayObject.previousCalculationOccured == true)

		{
			resetCalculator($(this).text(), displayObject.allClearClearState);
			debugStates();
		}

		// clicking a number immediately after an arithmetical operator has been clicked
		else if ((displayObject.isOperationPending == true) && (displayObject.firstValueLocked == true))

		{
			var newValue = $(this).text();
			$("#display").text(newValue);

			if (displayObject.secondValue !== 0) {
				var currentValue = displayObject.secondValue;
				currentValue = currentValue + newValue;
				displayObject.secondValue = currentValue;

				/*if (currentValue.length > 3) 
				{
				     currentValue = insertCommas(currentValue);
				      var str = str.replace(/,/g, "");
				}*/
				currentValue = currentValue.replace(/,/g, ""); //remove any commas
				$("#display").text(Number(currentValue).toLocaleString('en')); // display a fresh comma-delimited number
				debugStates();

			} else {

				displayObject.secondValue = newValue;
				debugStates();
			}
		}

		// clicking on a number from a "fresh" state    
		else

		{
			var currentValue = $("#display").text();
			currentValue = currentValue.replace(/,/g, ""); //get rid of error-inducing commas
			console.log(currentValue);
			if (eval(currentValue == 0) && (currentValue.indexOf(".") == -1)) {
				currentValue = "";
			}

			var toAdd = $(this).text();

			var newValue = currentValue + toAdd;
			console.log(newValue);
			/* if ((newValue.length > 3) && (newValue.indexOf(",") == -1))
			               {
			                    newValue = insertCommas(newValue);
			               }*/
			$("#display").text(Number(newValue).toLocaleString('en')); //at display time, show proper numberical commas
			displayObject.firstValue = newValue;
			displayObject.allClearClearState = "C";
			//$("#display").data("allClearClearState", "C");
			debugStates();
			$(".clear").html(displayObject.allClearClearState);
		}
	});

	// clear the calculator or all clear the calculator
	$(".clear").click(function() {
		// actually, there is additional functionality needed.
		// 1) when any number is pressed, the label should change to "C" (instead of "AC")
		// 2) functionally, when I hit = after a calculation, and hit "C", secondValue and thePendingOperation should remain, so that if equals is pressed again, the previous operation is done, using zero as firstValue
		// 3) When I press "C", the label should return to "AC".  A second press will then do ALL clear, everything back to zero / false, etc.
		// 4) if firstValue is locked, but secondValue is still zero, upon click of clear, label should go back to AC, but if = button is clicked next, the firstValue should still be in memory and put back on the screen BUT NOT do any further calc if = button is pressed again
		var displayObject = $("#display").data();

		var currentValue = $("#display").text();
		if ((eval(currentValue == 0)) && (displayObject.allClearClearState == "C") && (displayObject.previousCalculationOccured == true)) {

			displayObject.allClearClearState = "AC";
			var currentClearState = displayObject.allClearClearState;
			$(".clear").html(currentClearState);

		} else {

			displayObject.allClearClearState = "AC";
			var currentClearState = displayObject.allClearClearState;
			$(".clear").html(currentClearState);
			resetCalculator("0", displayObject.allClearClearState);
			debugStates();
		}

	});

	// what happens when the decimal key is pressed
	/*   $(".decimal").click(function() {
            //append a decimal to the current value
            //if there is already a decimal in the current value, do nothing
            //if equals or a math operator is pushed with the decimal in the far right most position, drop it before doing the calculation
              var displayObject = $("#display").data();
              var currentValue = $("#display").text();
console.log(currentValue);
                  if (currentValue.indexOf(".") == -1) {
                   // console.log(currentValue.indexOf("."));
                    
                      currentValue = currentValue + ".";
                    console.log(currentValue.indexOf("."));  
                    console.log(currentValue);
                  }

                  else if (currentValue.indexOf(".") >= eval("0")) {
                    // don't add a decimal if one is already present

                      currentValue = currentValue;
                    console.log(currentValue.indexOf("."));  
                    console.log(currentValue);
                  }

            $("#display").text(currentValue);
      });
*/

	// what happens when the % key is pressed
	$(".percent").click(function() {
		//multiply the current value by 0.01
		// if the current value is> -100 and < 100, make sure there is a leading zero
		var displayObject = $("#display").data();
		var percentNum = $("#display").text();

		if (percentNum == 0) {
			// do nothing
		} else if ((displayObject.firstValueLocked == false) && (displayObject.secondValueLocked == false)) {
			/* if (($("#display").data("firstValueLocked") == false) && ($("#display").data("secondValueLocked") == false)) { */
			var percentNum = $("#display").text();

			//console.log(percentNum);

			percentNum = percentNum / 100;
			displayObject.firstValue = percentNum;
			//console.log(percentNum);
			$("#display").text(percentNum);
		} else if ((displayObject.secondValueLocked == true) && (displayObject.thePendingOperation == "-") || (displayObject.thePendingOperation == "+")) {
			var percentNum = displayObject.secondValue;
			var newNum = percentNum / 100;
			newNum = newNum * percentNum;
			$("#display").text(Number(newNum).toLocaleString('en'));
			displayObject.secondValue = newNum;
		} else if ((displayObject.secondValueLocked == true) && (displayObject.thePendingOperation == String.fromCharCode(215)) || (displayObject.thePendingOperation == String.fromCharCode(247))) {
			var percentNum = displayObject.secondValue;
			var newNum = percentNum / 100;
			newNum = newNum * percentNum;
			$("#display").text(Number(newNum).toLocaleString('en'));
			displayObject.secondValue = newNum;
		}
	});

	// perform mathematical operations using the four basic operators (+,-,*,/)
	$(".basic-operators").click(function() {
		if ($("#display").data("previousCalculationOccured") == true) {
			resetCalculator($("#display").text());
			$("#display").data("firstValueLocked", false);
			$("#display").data("previousCalculationOccured", false);
		}

		//Let it be known that a function has been selected
		var pendingFunction = $(this).text();

		$("#display").data("isOperationPending", true);
		$("#display").data("thePendingOperation", pendingFunction);
		$("#display").data("firstValueLocked", true);
		debugStates();
		//Visually represent the current function
		$(".basic-operators").removeClass("pendingFunction");
		$(this).addClass("pendingFunction");
	});

	// display the result of the current operation
	$(".equals-sign").click(function() { //use switch statement!

		var displayObject = $("#display").data();

		if ((displayObject.firstValueLocked == true) && (displayObject.isOperationPending == true)) {
			switch (displayObject.thePendingOperation) {

				case "+":
					displayObject.secondValueLocked = true;
					displayObject.previousCalculationOccured = true;
					var finalValue = parseFloat(displayObject.firstValue) + parseFloat(displayObject.secondValue);
					debugStates();
					console.log(parseFloat(displayObject.firstValue));
					console.log(parseFloat(displayObject.secondValue));
					console.log("add");
					console.log(finalValue);
					displayObject.firstValue = finalValue;
					break;

				case "-":
					displayObject.secondValueLocked = true;
					displayObject.previousCalculationOccured = true;
					var finalValue = parseFloat(displayObject.firstValue) - parseFloat(displayObject.secondValue);
					debugStates();
					console.log("subtract");
					console.log(finalValue);
					displayObject.firstValue = finalValue;
					break;

				case "\x78":
					displayObject.secondValueLocked = true;
					displayObject.previousCalculationOccured = true;
					var finalValue = parseFloat(displayObject.firstValue) * parseFloat(displayObject.secondValue);
					debugStates();
					console.log("multiply");
					console.log(finalValue);
					displayObject.firstValue = finalValue;
					break;

					// case String.fromCharCode(247):
				case "\xF7":
					// if secondValue = 0, display the word "Error" in the display window, since you cannot divide by 0.
					displayObject.secondValueLocked = true;
					displayObject.previousCalculationOccured = true;
					var finalValue = parseFloat(displayObject.firstValue) / parseFloat(displayObject.secondValue);
					debugStates();
					console.log("divide");
					console.log(finalValue);
					displayObject.firstValue = finalValue;
					break;

				default:
					// if value of displayObject.thePendingOperation is unexpected / not one of the 4

			}

			var currentClearState = $("#display").data("allClearClearState");
			console.log(Number(finalValue).toLocaleString('en'));
			// $("#display").html(Number(finalValue).toLocaleString('en'));
			$("#display").text(finalValue);
			console.log($("#display").text());
			resetCalculator(finalValue, currentClearState);
			$("#display").data("previousCalculationOccured", true);

		} else {
			// both numbers not "locked", do nothing. !! 2nd number isnt locked UNTIL you hit equals after entering 2nd value
		}

	});

	$(".sign").click(function() {

		var displayObject = $("#display").data();
		// there are only 3 times you would hit the +/- button...
		// 1) right after hitting firstValue (all other values are false or empty string)
		// 2) right after hitting secondValue
		// 3) right after htting equals
		// additional behaviors:  if screen shows zero, display a negative, but don't apply it to anything.  The user will have to touch it again, if they want it to be applied to an actual number
		if (($("#display").data("firstValueLocked") == false) && ($("#display").data("secondValueLocked") == false)) {
			var changeSign = $("#display").text();
			changeSign = changeSign * -1;
			$("#display").text(changeSign);
			displayObject.firstValue = changeSign;
			console.log(displayObject.firstValue);
		} else if (($("#display").data("firstValueLocked") == true)) {
			var changeSign = $("#display").data("secondValue");
			changeSign = changeSign * -1;
			displayObject.secondValue = changeSign;
			$("#display").text(changeSign);
		} else if (($("#display").data("secondValueLocked") == true)) {
			var changeSign = $("#display").data("firstValue");
			changeSign = changeSign * -1;
			$("#display").data("firstValue", changeSign);
			$("#display").text(changeSign);
		}
	});
  $( function() {
    $( "#css-iphone-shape" ).draggable();
  } );
});
              
            
!
999px

Console