Skip to content
Snippets Groups Projects
Commit 31d1b069 authored by Manal Abbas's avatar Manal Abbas
Browse files

source code

parent 645fa008
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
IntroToJavaScript/src/index.html 0 → 100644
+ 23
− 0
View file @ 31d1b069
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="images/logo.png">
<link rel="stylesheet" href="style.css">
<title>DrexelCHI</title>
</head>
<body>
<div class="main">
<div class="screen" id="screen"></div>
<div class="clear" id="clear">C</div>
<ul class="numbers">
<li>7</li><li>8</li><li>9</li><li>÷</li>
<li>4</li><li>5</li><li>6</li><li>x</li>
<li>1</li><li>2</li><li>3</li><li>-</li>
<li>0</li><li>.</li><li>=</li><li>+</li>
</ul>
</div>
<script src="script.js"></script>
</body>
</html>
IntroToJavaScript/src/script.js 0 → 100644
+ 29
− 0
View file @ 31d1b069
var screen = document.getElementById("screen");
var clear = document.getElementById("clear");
var elements = document.getElementsByTagName("li");
for (var i=0; i<elements.length; i++) {
if (elements[i].innerHTML === "=") {
elements[i].onclick = function() {
screen.innerHTML = eval(screen.innerHTML);
};
} else {
elements[i].onclick = updateScreen(i);
}
}
clear.onclick = function() {
screen.innerHTML = '';
};
function updateScreen(i) {
return function() {
if (elements[i].innerHTML === "÷") {
screen.innerHTML += "/" ;
} else if (elements[i].innerHTML === "x") {
screen.innerHTML += "*";
} else {
screen.innerHTML += elements[i].innerHTML;
}
};
}
IntroToJavaScript/src/style.css 0 → 100644
+ 79
− 0
View file @ 31d1b069
* {
box-sizing: border-box;
font: bold 14px 'Arial', sans-serif;
}
.main {
width: 278px;
margin: 17.5% auto;
background: #3F475B;
height: 310px;
box-shadow: 2px 2px 2px rgb(128, 128, 128);
padding: 15px;
border-bottom: 5px solid #ED586C;
border-radius: 4px;
position: relative;
}
.screen {
list-style: none;
color: white;
height: 45px;
margin-left: 8px;
border-radius: 4px;
border-top: 4px solid #828A9B;
text-align: center;
margin-bottom: 8px;
width: 182px;
background: #828A9B;
border-top: 4px solid #ED586C;
overflow: hidden;
}
.clear {
background: #7B8D8E;
padding: 10px 17px;
position: absolute;
border-radius: 3px;
left: 215px;
top: 18px;
color: white;
cursor: pointer;
text-align: center;
}
.numbers {
padding: 0;
margin: 0;
}
.numbers li {
list-style: none;
float: left;
width: 52px;
background: white;
margin: 9px 5px;
padding: 10px;
border-bottom: 4px solid #828A9B;
border-radius: 5px;
color: #888888;
text-align: center;
cursor: pointer;
}
.numbers li:hover {
background: #44B3C2;
border-bottom: 4px solid #336699;
color: white;
}
.numbers li:nth-child(15) {
background: #F43341;
color: white;
}
.numbers li:nth-child(15):hover {
background: #FE5E6A;
border-bottom: 4px solid #B3232E;
color: white;
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment