Colorful, shadow effected web calculator

calc-script.js

/**
 * Coder ACJHP
 * 30/06/2017
 */

//initialize global variable.
var screenText = "";
    
//Here we adding all functions into window loading to be ready to play :)
window.onload = function() {
    
    //we need to define some variables to get objects from our page 
    var calcKeys = document.querySelectorAll(".buttons span");
    var screen = document.querySelector(".screen");
    var clear = document.querySelector(".clear");
    
    /*
     * instead of adding listener to all buttons separately we will 
     *make it into for loop just one time for saving time and code.
    */
    for (var i = 0; i < calcKeys.length; i++) {
    	calcKeys[i].onclick = run;

    }
    
    //add listener to clear button.
    clear.addEventListener("click", function(){
	screen.innerHTML = "";
    });
    
    //main function that added to all buttons.
    function run(event) {
	
	var buttonValue = event.target.innerHTML;
	 
	if(buttonValue == "x") {
	    
	    //first append the new button value,
	    screen.innerHTML += buttonValue;
	    
	    //add the screen value to new variable to can be used,
	    screenText = screen.innerHTML;

	    //replace 'X' character with '*' this to work in eval function.
	    var regexPattern = screenText.replace("x", "*");

	    //and here change screen value with replaced string.
	    screenText = regexPattern;

	}else if(buttonValue == "=") {

	    //get result with eval() function and show it in screen.
	    screen.innerHTML = eval(screenText);
	    
	    //reset replaced string.
	    screenText = "";
	    
	}else{
	    //append value to both (screen and replaced string).
	    screen.innerHTML += buttonValue;
	    screenText += buttonValue;
	}
    	
    }
    
/*Clock*/    
var startTheClock = function() {    
    //define a variable to get the div object that used for clock
    var clockElem = document.querySelector(".clock");
    
    //create new date object
    var today = new Date();
    
    //create some variables to add day,hours, minutes, seconds,
    var dayHours = today.getHours();
    var dayMinute = today.getMinutes();
    var daySeconds = today.getSeconds();
    var days = ["Pazar", "Pazartesi", "Salı", "Çarşamba", "Perşembe", "Cuma", "Cumartesi"];
    var getDay = days[today.getDay()];
    
    var clock = [dayHours, dayMinute, daySeconds].join(":");
    
    if(dayHours < 12) {
	clockElem.innerHTML = clock + " AM" +"<br>" + getDay;
    }else {
	clockElem.innerHTML = clock + " PM" +"<br>" + getDay;
    }
    
    
}
//start the clock
startTheClock();

//repeat it every one second
setInterval(startTheClock, 1000);


}

calc-style.css

/*Joker settings for all page*/
* {
	margin: 0;
	padding: 0;
	
	box-sizing: border-box;
	font: bold 18px Arial, sans-serif;
}

html {
	width: 100%;
	height: 100%;
	background-color: #e7fdff;
}

/*main div including all calculator*/
.calculator {
	float: left;
	position: relative;
	
	width: 400px;
	height: 305px;
	
	left: 36%;
	top: 90px;
		
	background-color: #ffb3ec;
	border-radius: 3px;
	box-shadow: 3px 3px 3px 3px #888888;
	
}

.ust {
	
	float: left;
	overflow: hidden;
	margin: 7px;
	padding: 5px;

}

/*eraser button*/
.clear {
	
	width: 75px;
	height: 40px;
	float: left;
	margin-right: 10px;
	
	color: white;
	background-color: #ff0000;
	border-radius: 3px;
	box-shadow: 3px 3px 5px #b30000;
	
	text-align: center;
	line-height: 10px;
	padding: 14px;
	
	cursor: pointer;
	user-select: none;
}

/*eraser button when hover*/
.clear:HOVER {

	background-color: #ca0001;
}

/*calculator screen*/
.screen {
	
	width: 285px;
	height: 40px;
	float: left;

	border-radius: 3px;
	background-color: #7bcac8;
	box-shadow: inset 0px 4px rgba(0, 0, 0, 0.2);
	
	color: white;
	text-align: right;
	padding: 10px 15px;
	font-size: 25px;
}

.buttons span{
  
  float: left;
  overflow: hidden;
  margin: 4px;
  left: 8px;
  
  cursor: pointer;
  
  -ms-user-select: none; /*WINDOWS*/
  -webkit-user-select: none; /*CHROME*/
  -moz-user-select: none;/*MOZZILLA*/
  user-select: none; /*DEFAULT MUST BE LAST*/
}

/*all buttons*/
span{
  
  width: 85px;
  height: 50px;
  
  position: relative;
  border-radius: 3px;
  overflow: hidden;
  
  font-size: 17px;
  text-align: center;
  line-height: 20px;
  padding: 12px 10px;
  
  color:white;
  background-color: #4d79ff;
  box-shadow: 3px 3px 5px #0039e6;

}

/*change color of buttons when mouse comes on*/
span:HOVER {
	
	background-color: #3555b5;
}

/*add some animation when buttons pressed*/
span:ACTIVE {
	
	background-color: #3555b5;
	transform: translateY(2px);
}

.operator {
  
  width: 95px;
  background-color: #009999;
  box-shadow: 3px 3px 5px #006666;
  
}

.operator:HOVER {
	
	background-color: #007f7f;
}

.equals {
	
	background-color: #99cc00;
  	box-shadow: 3px 3px 5px #739900;
}

.equals:HOVER {
	
	background-color: #77a101;
}

/*header*/
.row p {
	
	position: relative;
	left: 37%;
	top: 70px;	
	margin-bottom: 15px;
	
	font-size: 2em;
	text-shadow: 0 0 2px #787878;
}

.lbl {
	
	position: relative;
	left: 39%;
	top: 75px;
	margin-bottom: 25px;
	
	color:gray;
	font-size: 15px;
}

/*div for live clock*/
.clock {
	
	width: 250px;
	height: 100px;
	
	float: left;
	margin-top:20px;
	margin-left: 40%;
	
	color: #FFFFFF;
	background-color: #e5db3c;
	
	border-radius: 4px;
	border-bottom: 5px solid maroon;
	
	text-shadow: 0 1px 0 #ccc,
	 0 2px 0 #c9c9c9,
	 0 3px 0 #bbb,
	 0 4px 0 #b9b9b9,
	 0 5px 0 #aaa,
	 0 6px 1px rgba(0,0,0,.1),
	 0 0 5px rgba(0,0,0,.1),
	 0 1px 3px rgba(0,0,0,.3),
	 0 3px 5px rgba(0,0,0,.2),
	 0 5px 10px rgba(0,0,0,.25),
	 0 10px 10px rgba(0,0,0,.2),
	 0 20px 20px rgba(0,0,0,.15);
	
	text-align: center;
	font-size: 38px;
	font-family: Arial;
	overflow: hidden;
	
	padding: 6px 10px;
	user-select: none;
	
}

Index.html

<html>
<head>
	<meta charset="UTF-8">
	<link type="text/css" rel="stylesheet" href="../CSS/calc-style.css">
	<script type="text/javascript" src="../JAVASCRIPT/calc-script.js"></script>
	<title>Coder Calculator</title>
</head>
<body>
	<div class="row">
		<p>Calculator<small> made by </small><label>Coder ACJHP</label></p>
		<label class="lbl">Used technologies : HTML, CSS, Javascript</label>
	</div>
	<div class="calculator">
		<div class="ust">
			<span class="clear">C</span>
			<div class="screen"></div>
		</div>
    
		<div class="buttons">
			  <span>7</span>
		      <span>8</span>
		      <span>9</span>
		      <span class="operator">+</span>
		      <span>4</span>
		      <span>5</span>
		      <span>6</span>
		      <span class="operator">-</span>
		      <span>1</span>
		      <span>2</span>
		      <span>3</span>
		      <span class="operator">/</span>
		      <span>0</span>
		      <span>.</span>
		      <span class="equals">=</span>
		      <span class="operator">x</span>
		</div>
	</div>
	<div class="clock">
	</div>
</body>
</html>