From 31d1b06972e30c466198e14593ab593f5ec4b8b9 Mon Sep 17 00:00:00 2001
From: Manal Abbas <maa458@drexel.edu>
Date: Tue, 26 Jan 2021 17:45:14 -0500
Subject: [PATCH] source code
---
IntroToJavaScript/src/index.html | 23 ++++++++++
IntroToJavaScript/src/script.js | 29 ++++++++++++
IntroToJavaScript/src/style.css | 79 ++++++++++++++++++++++++++++++++
3 files changed, 131 insertions(+)
create mode 100644 IntroToJavaScript/src/index.html
create mode 100644 IntroToJavaScript/src/script.js
create mode 100644 IntroToJavaScript/src/style.css
diff --git a/IntroToJavaScript/src/index.html b/IntroToJavaScript/src/index.html
new file mode 100644
index 0000000..5c15473
--- /dev/null
+++ b/IntroToJavaScript/src/index.html
@@ -0,0 +1,23 @@
+<!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>
diff --git a/IntroToJavaScript/src/script.js b/IntroToJavaScript/src/script.js
new file mode 100644
index 0000000..0d7922d
--- /dev/null
+++ b/IntroToJavaScript/src/script.js
@@ -0,0 +1,29 @@
+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;
+ }
+ };
+}
diff --git a/IntroToJavaScript/src/style.css b/IntroToJavaScript/src/style.css
new file mode 100644
index 0000000..331ee2d
--- /dev/null
+++ b/IntroToJavaScript/src/style.css
@@ -0,0 +1,79 @@
+* {
+ 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;
+}
--
GitLab