//Input!! 
//document.querySelectorAll(cssSelect)
//document.querySelector(cssSelect)
const nine = getSelector('#nine')
const eight = getSelector('#eight')
const seven = getSelector('#seven')
const six = getSelector('#six')
const five = getSelector('#five')
const four = getSelector('#four')
const three = getSelector('#three')
const two = getSelector('#two')
const one = getSelector('#one')
const zero = getSelector('#zero')

// Operators
const subtract = getSelector('#subtract') 
const add = getSelector('#add') 
const divide = getSelector('#divide') 
const multiply = getSelector('#multiply') 
/* Fix multiply using regex - replace("X","*") */
const decimal = getSelector('#decimal') 
const equal = getSelector('#equal')

// Output!!
let equals = getSelector('#equals')

// Clears
const allClear = getSelector('#allClear') 
const clearOne = getSelector('#clearOne') 

// Test Event Listner Builder
/* */
function buildListner (id){
	id.addEventListener('click', function() {
	  equals.innerHTML = equals.innerHTML + id.innerHTML;
	})
}// Could use an array as well? Done! See below
const numbers = [zero,one,two,three,four,five,six,seven,eight,nine]
numbers.forEach(number => buildListner(number))

/* Version 2

function buildListner (id){
	id.addEventListener('click', buildListnerResult)
}
function buildListnerResult (id){
	equals.innerHTML = equals.innerHTML + id.innerHTML;
}

//version 3 - use array
operators.forEach(operator => buildListner(operator))

*/
/* // Version 1: Number Listeners
buildListner(zero)
buildListner(one)
buildListner(two)
buildListner(three)
buildListner(four)
buildListner(five)
buildListner(six)
buildListner(seven)
buildListner(eight)
buildListner(nine)
*/
/* zero.addEventListener('click', function() {
  equals.innerHTML = equals.innerHTML + zero.innerHTML;
}) 
one.addEventListener('click', function() {
  equals.innerHTML = equals.innerHTML + one.innerHTML;
})
two.addEventListener('click', function() {
  equals.innerHTML = equals.innerHTML + two.innerHTML;
})
three.addEventListener('click', function() {
  equals.innerHTML = equals.innerHTML + three.innerHTML;
})
four.addEventListener('click', function() {
  equals.innerHTML = equals.innerHTML + four.innerHTML;
})

five.addEventListener('click', function() {
  equals.innerHTML = equals.innerHTML + five.innerHTML;
})
six.addEventListener('click', function() {
  equals.innerHTML = equals.innerHTML + six.innerHTML;
})
seven.addEventListener('click', function() {
  equals.innerHTML = equals.innerHTML + seven.innerHTML;
})
eight.addEventListener('click', function() {
  equals.innerHTML = equals.innerHTML + eight.innerHTML;
})
nine.addEventListener('click', function() {
  equals.innerHTML = equals.innerHTML + nine.innerHTML;
})
*/
// Operator Listners
// Try with Array
const operators =  [divide, multiply, subtract, decimal, add]
operators.forEach(operator => buildListner(operator))

equal.addEventListener('click', function() {
  equals.innerHTML = eval(equals.innerHTML);
})

// Clear output 
allClear.addEventListener('click', clearAllData)
clearOne.addEventListener('click', clearOneData)

//Clear data when called
function clearAllData(){
	equals.innerHTML='';
}
function clearOneData (){
	let str = equals.innerHTML
	shrinkString(str)
}
function shrinkString (val) {
		equals.innerHTML = val.substr(0,val.length-1)
}

// Helper Functions for Listners/Selectors
// Use for Numbers & Operators
function getAllSelectors (cssSelect) {
	return document.querySelectorAll(cssSelect)
}
// Use for symbols and Utilities on Calculator
function getSelector(cssSelect){
	return document.querySelector(cssSelect)
}