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

              
                <html>
<head>
  <meta author="Alexander Kallaway">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
  <link href='https://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
<body>
  <div id="info">
    <p>?</p>
  </div>
  <div id="project-description">
    <p>Zen Calculator</p>
    <p>Author: Alexander Kallaway</p>
    <p>Tech: VanillaJS</p>
    <p>Concept: Simplicity</p>
    <p>For: FreeCodeCamp</p>
  </div>
  <div class="calc-body">
    <!-- <p>Written in VanillaJS.</p> -->
    <!-- <p>Still in Progress</p> -->
    <div id="display">
      <p id="result">Breathe.</p>
      
      <!-- BUTTONS -->
      <div class="keyboard">
        <!-- row 1. Should include: AC, CE, %, / -->
        <div class="key-row">
          <button id="ac">AC</button>
          <button id="ce">CE</button>
          <button id="%">%</button>
          <button id="divider">/</button>
        </div>
        <!-- row 2. Should include: 7, 8, 9, X -->
        <div class="key-row">
          <button id="7">7</button>
          <button id="8">8</button>
          <button id="9">9</button>
          <button id="x">X</button>
        </div>
        <!-- row 3. Should include: 4, 5, 6, -  -->
        <div class="key-row">
          <button id="5">4</button>
          <button id="5">5</button>
          <button id="6">6</button>
          <button id="minus">-</button>
        </div>
        <!-- row 4. Should include: 1, 2, 3, +  -->
        <div class="key-row">
          <button id="1">1</button>
          <button id="2">2</button>
          <button id="3">3</button>
          <button id="plus">+</button>
        </div>
        <!-- row 5. Should include: 0, ., =, +  -->
        <div class="key-row">
          <button id="0">0</button>
          <button id="decimal">.</button>
          <button id="equals">=</button>
          <!--<button id="+">+</button>-->
        </div>
      </div>
    </div>  
  </div>
  
  <div id="info-bottom">
    <p>Zen Calculator</p>
    <p>Author: Alexander Kallaway</p>
    <p>Tech: VanillaJS</p>
    <p>Concept: Simplicity</p>
    <p>For: FreeCodeCamp</p>
  </div>
</body>
</html>
              
            
!

CSS

              
                /* Basic styles ***************/
/* Color scheme chosen is http://colorhunt.co/c/1649 */

body {
  background: #C9D6DF;
  
  font-family: "Inconsolata", sans-serif;
  font-weight: bold;
  letter-spacing: 0.02em;
  font-size: 24px;
}

p {
  font-size: 1em;
  margin: 2% 2%;
}

button {
  width: 25%;
  height: 3.8em;
  font-size: 24px;
  margin: 0;
  
  justify-content: center;
  text-align: center;
  
  background-color: #F0F5F9;
  color: #52616B;
  
  border: none;
  
  float: left;
  
  /*border-radius: 20%;*/
}

#plus:after {
  /* INCREASE the size so that it doubles */
  height: 7.4em;
}

/* Main styles ****************/

#info p {
  display: flex;
  position: absolute;
  float: left;
  
  height: 1em;
  width: 1em;
  
  left: 1%;
  background-color: #F0F5F9;
  padding: 1%;
  
  margin-bottom: 1%;
  
  border-radius: 50%;
  justify-content: center;
  text-align: center;
  z-index: 2;
  
  font-size: 24px;
} 

#project-description {
  position: absolute;
  top: 130px;
  left: 20px;
  background-color: #F0F5F9;
  display: none;
  
  width: 20%;

  font-size: 16px;
}

.calc-body {
  max-width: 380px;
  min-width: 200px;
  width: 50%;
  height: 50%; /* 80% in codepen */
  
  margin: auto;
  margin-top: 0.5em;
  
  text-align: center;
  background-color: #F0F5F9;
  
  display: flex;
  justify-content: center;
}

#calc-name {
  padding: 1% 2% 2%;
  margin-bottom: 1%;
  font-family: "Century Gothic", "Arial", sans-serif;
  font-size: 1.2em;
}

#display {
  background-color: #F0F5F9;
  width: 100%;
  margin: auto;
}

#result {
  text-align: right;
  padding: 5% 5%;
  background: #52616B;
  color: #F0F5F9;
  border: 1px solid grey;
  
  font-size: 32px;
  
/*  border-radius: 5%;*/
}

.key-row button {
  margin: 0;
  padding: 0;
}

#info-bottom {
  display: none;
}

/* Layout styles **************/

/* Pseudoclass styles */

button:hover {
  background-color: #52616B;
  color: #F0F5F9;
}


/* Media Queries **************/
@media (min-width: 900px) {
  #project-description {
    top: 150px;
  }
}


@media (max-width: 680px) {
  body {
    font-size: 22px;
  }
  
  h1, h2 {
    display: hide;
  }
  
  button {
    font-size: 24px;
    height: 4em;
  }
    
   .calc-body {
    width: 80%;
  }

  #result {
    font-size: 24px;
  }
  
  /* Dealing with info and info-bottom */
  
  #info {
    display: none;
  }
  
  #info-bottom {
    display: block;
    width: 80%;
    margin: auto;
    text-align: center;
    margin-top: 10%;
  }
}


@media (max-width: 530px) {
  /* hide the first div */

  
  #info p {
    display: block;
  }
  
  #project-description {
    width: 25%;
  }
  
  button {
    height: 3.8em;
  }
}

@media (max-width: 380px) {
  button {
    height: 2.5em;
  }
  
  #result {
    font-size: 20px;
  }
}
              
            
!

JS

              
                // IDEA: Add a random quote to be displayed on the calculator (maybe each time AC is pressed).
// When you hover over the question mark - the list of features is displayed in a box

// IDEA: Change from switch statement to an object with keys that are + - * / etc. for better representation and structure

// IDEA: buttons should have gradient going from grey to white from top to bottom, but when clicked, the gradient is reversed.

// Getting all the needed elements on the page

var keyInfo = document.getElementById("info");
var displayInfo = document.getElementById("project-description");
var result = document.getElementById("result");

// Should this be a loop?
var key0 = document.getElementById("0");
var key1 = document.getElementById("1");
var key2 = document.getElementById("2");
var key3 = document.getElementById("3");
var key4 = document.getElementById("4");
var key5 = document.getElementById("5");
var key6 = document.getElementById("6");
var key7 = document.getElementById("7");
var key8 = document.getElementById("8");
var key9 = document.getElementById("9");

var ac = document.getElementById("ac");
var ce = document.getElementById("ce");
var keyPercentage = document.getElementById("0");
var keyDivide = document.getElementById("divider");
var keyMultiply = document.getElementById("x");
var keySubtract = document.getElementById("minus");
var keySum = document.getElementById("plus")
var keyDecimal = document.getElementById("decimal");
var keyEquals = document.getElementById("equals");

var zenQuotes = [ "breathe", "peace", "know thyself", "now",
 				 "be", "walk slowly", "meditate", "meditate on this",
 				 "free your mind", "let go", "follow your bliss", "wake up",
 				 "declutter", "help others", "be mindful", "focus",
 				 "be kind", "simplify", "uncommit", "be yourself",
 				 "slow down", "relax", "be aware", "notice the urge",
 				 "here", "enjoy every step", "accept yourself", "don't compare",
 				 "praise others", "share knowledge", "respect others", "be like water",
 				 "respect yourself", "clear distractions", "create", "share",
 				 "support others", "dance", "sing", "smile",
 				 "travel", "start", "start today", "start now",
 				 "carry on", "try", "clean", "live simply",
 				 "choose your thoughts", "be flexible", "practice", "look within" ];

console.log("The current number of quotes in the calculator is " + zenQuotes.length);

// function to generate the a random number based on the array given
function randomArrayElement(arr) {
	return Math.floor(Math.random() * arr.length + 1);
}

function setRandomQuote(arr) {
	var randomQuoteIndex = randomArrayElement(arr);
	result.textContent = arr[randomQuoteIndex];
}

// run the function and hold on to the number
// inject the array element (quote) that is at the index of the random number - into the display of the calculator
setRandomQuote(zenQuotes);

var expression = "";
var isCalculating = true;
var saveTheValue;

var actions = []; // building up an array of actions.

// Function to display and hide the description of the project.
keyInfo.addEventListener("mouseover", function() {
		displayInfo.style.display = "inline-block";
}, false);

keyInfo.addEventListener("mouseout", function() {
	displayInfo.style.display = "none";
}, false);


// Basic arithmetic functions:
function sum(a, b) { return a + b; }
function subtract(a, b) { return a - b; }
function multiply(a, b) { return a * b; }
function divide(a, b) {	
		var divResult = a / b;
		divResult = ("" + divResult).slice(0, 15);
		return divResult;
	}
function percentage(a, b) { return (a / b) * 100; }

// Functions of a calculator

function buttonGrabber() {
	var value = this.textContent;
	console.log(value);
	//result.textContent = value;

	workWithInput(value);

	//return value;
}


function filterArray(array) {

	var simpleArray = [];
	// Filtering out the empty strings first (Later work on a fix for this)
	array = array.filter(function(value) {
		if (value) { return value; };
	});

	// Getting rid of extra actions
	for (var i = 0; i < array.length; i++) {
		if (isNaN(parseInt(array[0]))) {
			array.shift();
		} else {
			break;
		}
	}

	console.log("After filtering out the empty strings, the array contains: ");
	console.log(array);

	simpleArray.push(array[0]);

	for (var i = 1; i < array.length; i++) {
		if (isNaN(parseInt(array[i-1])) === false) {
			simpleArray.push(array[i]);
		} else {
			if (isNaN(parseInt(array[i]))) {
				simpleArray.pop();
				simpleArray.push(array[i]);
			} else {
				simpleArray.push(array[i]);
			}
		}
	}

	console.log("After filtering out the extra actions, the array contains: ");
	console.log(simpleArray);

	return simpleArray;
}


function calculate(actions) {
	// * This function should only get a filtered actions array - number should be first
	// Calculate the expression's result based on the actions array
	// Display the result on the calculator
	console.log("function Calculate is activated.");
	console.log("The list of actions I am working with is " + actions)

	// Filtering the array of actions
	actions = filterArray(actions);
	console.log("After the filter function, the array contains: " + actions);

	var runningResult = 0;

	for (var i = 0; i < actions.length; i++) {
		if (runningResult === 0) {
			var indexDot = actions[i].toString().indexOf(".");
			console.log("the index of the Dot if present is " + indexDot)
			if (indexDot !== -1) {
				runningResult = parseFloat(actions[i]);
			} else {
				runningResult = parseInt(actions[i]); 
			}

		} else if (parseInt(actions[i]) < 10) {
			continue;
		} else {
			// Choosing whether to parseInt or parseFloat based on the dot symbol
			// Create a function that automates the process of this?

			console.log("Modified running result is " + runningResult)

			var formattedNumber;
			if (actions[i+1].indexOf(".") !== -1) {
				formattedNumber = parseFloat(actions[i+1]);
			} else {
				formattedNumber = parseInt(actions[i+1]);
			}
			console.log("THE FORMATTED NUMBER IS " + formattedNumber);

			switch (actions[i]) {
				case "+":
					runningResult = sum(runningResult, formattedNumber);
					break;

				case "-":
					runningResult = subtract(runningResult, formattedNumber);
					break;

				case "X":
					runningResult = multiply(runningResult, formattedNumber);
					break;

				case "/":
					runningResult = divide(runningResult, formattedNumber);
					break;

				case "%":
					runningResult = percentage(runningResult, formattedNumber);
					break;	

				default:
					alert("This function is not available. Try something simpler.");
			}
		}

	}
	console.log("The result in the end of the calculate function is " + runningResult);
	result.textContent = runningResult;
	saveTheValue = runningResult;
	
	return saveTheValue; // ADDITION
}





function workWithInput(input) {
	// Until user inputs number, don't record anything

	// FIRST check if it is an equals.
	if (input === "=") {
		actions.push(expression);
		console.log(actions);
		calculate(actions); // if so, calculate and display it.


		actions = [];
		//actions.push(saveTheValue); // Cleaning the array
		expression = saveTheValue; // Cleaning the expression
		console.log("After I am done calculating, this is what is currently within the array actions " + actions)

	} else if (input === "AC") {

		actions = [];
		expression = "";
		setRandomQuote(zenQuotes);

	} else if (input === "CE") {

		expression = "";

	} else if (parseInt(input) < 10 || input === ".") {

		if (expression.length < 15) { // Check whether the displayed digit limit is hit
			expression += input;
			result.textContent = expression;

			console.log("Current Expression: " + expression);
		} else {
			console.log("You've hit the limit of digits that can be displayed on the calculator.")
		}

	} else {
			actions.push(expression);
			expression = input;
			actions.push(expression);
			expression = "";
	}
} 		




// The calculator app itself

function attachListeners(collection) {
	for (var i = 0; i < collection.length; i++) {
		collection[i].addEventListener("click", buttonGrabber, false);
	}
}


// Attaching functions to events
var buttons = document.getElementsByTagName("button");

// Attaching listeners to the collection of buttons
attachListeners(buttons);


// IDEA : BUILD UP AN ARRAY OF ACTIONS UNTIL THE PERSON CLICKS EQUALS
// THEN GO THROUGH THE EVALUATOR FUNCTION WHICH EVALUATES BASED ON THE INPUT.
// IF A NUMBER COMES ALONG AFTER THE PREVIOUS THING WAS A NUMBER THEN BUILD THEM INTO A STRING, 
// THEN PUSH AS A NUMBER
              
            
!
999px

Console