diff --git a/Week1/Calculator/index.html b/Week1/Calculator/index.html
new file mode 100644
index 000000000..ab1183a91
--- /dev/null
+++ b/Week1/Calculator/index.html
@@ -0,0 +1,177 @@
+
+
+
+
+
+
+
+
+ Calculator
+
+
+
+ HTML Calculator
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Week1/Calculator/style.css b/Week1/Calculator/style.css
new file mode 100644
index 000000000..4044a0096
--- /dev/null
+++ b/Week1/Calculator/style.css
@@ -0,0 +1,74 @@
+@import url("https://fonts.googleapis.com/css?family=Roboto:100&display=swap");
+
+body {
+ font-family: "Roboto", sans-serif;
+ user-select: none;
+}
+
+h1 {
+ text-align: center;
+ margin-top: 50px;
+}
+
+.calc-parent {
+ margin-left: calc(50% - 125px);
+}
+.calc-btn {
+ background-color: silver;
+ color: #000;
+ width: 25px;
+ height: 45px;
+ border: 1px solid gray;
+ text-align: center;
+ cursor: pointer;
+ font-size: 32px;
+ font-weight: 100;
+ padding-top: 3px;
+}
+
+.calc-btn:hover {
+ background-color: orange;
+}
+
+.row {
+ display: table;
+ table-layout: fixed;
+ width: 250px;
+}
+
+.column {
+ display: table-cell;
+}
+
+#calc-zero {
+ width: 52.66666667px;
+ border-radius: 0 0 0 7px;
+}
+
+#calc-clear {
+ width: 52.66666667px;
+}
+
+#calc-equals {
+ border-radius: 0 0 7px 0;
+}
+
+#calc-display-val {
+ height: 80px;
+ color: white;
+ text-align: right;
+ border-right: 1px solid gray;
+ border-left: 1px solid gray;
+ border-top: 1px solid gray;
+ font-size: 48px;
+ background-color: #383838;
+ overflow: hidden;
+ white-space: nowrap;
+ padding: 12px 12px 0 12px;
+ border-radius: 7px 7px 0 0;
+}
+
+.calc-btn-operator {
+ background-color: orange;
+ color: white;
+}