Initial jsx and css setup

pollman · pollman · commit 4e8a1fe3fc04 · 2018-01-29T11:10:19.000-07:00
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,24 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# post
+post.md
diff --git a/README.md b/README.md
@@ -0,0 +1 @@
+# Using AWS Lambda and API Gateway with React
diff --git a/package.json b/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "aws-lambda-with-api-gateway-and-react",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0"
+  },
+  "devDependencies": {
+    "react-scripts": "1.1.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
diff --git a/public/favicon.png b/public/favicon.png
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#000000">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.png">
+    <link href="https://fonts.googleapis.com/css?family=Orbitron:400,700,900" rel="stylesheet">
+    <title>Issa Calculator</title>
+  </head>
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/src/App.css b/src/App.css
@@ -0,0 +1,7 @@
+.App {
+  align-items: center;
+  display: flex;
+  height: 100vh;
+  justify-content: center;
+  width: 100vw;
+}
diff --git a/src/App.js b/src/App.js
@@ -0,0 +1,15 @@
+import React, {Component} from 'react';
+import Calculator from './components/Calculator/Calculator';
+import './App.css';
+
+class App extends Component {
+  render() {
+    return (
+      <div className="App">
+        <Calculator />
+      </div>
+    );
+  }
+}
+
+export default App;
diff --git a/src/components/Calculator/Calculator.css b/src/components/Calculator/Calculator.css
@@ -0,0 +1,4 @@
+.calculator-container {
+  height: 60%;
+  width: 24%;
+}
diff --git a/src/components/Calculator/Calculator.jsx b/src/components/Calculator/Calculator.jsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import './Calculator.css';
+
+import Display from '../Display/Display';
+import Keypad from '../Keypad/Keypad';
+
+const Calculator = () => {
+  return (
+    <div className="calculator-container">
+      <Display />
+      <Keypad />
+    </div>
+  );
+}
+ 
+export default Calculator;
diff --git a/src/components/Display/Display.css b/src/components/Display/Display.css
@@ -0,0 +1,15 @@
+.display-container {
+  align-items: center;
+  background: var(--display-background);
+  display: flex;
+  padding: 4% 4% 0 4%;
+  width: 92%;
+}
+
+.display-value {
+  color: var(--display-text-color);
+  font-size: var(--display-text-size);
+  font-family: var(--main-font);
+  font-weight: var(--display-text-weight);
+  margin-left: auto;
+}
diff --git a/src/components/Display/Display.jsx b/src/components/Display/Display.jsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import './Display.css';
+
+const Display = () => {
+  return (
+    <div className="display-container">
+      <p className="display-value">
+        0
+      </p>
+    </div>
+  );
+}
+
+export default Display;
diff --git a/src/components/Key/Key.css b/src/components/Key/Key.css
@@ -0,0 +1,36 @@
+.key-container {
+  align-items: center;
+  display: flex;
+  height: 25%;
+  justify-content: center;
+  transition: background-color 0.3s linear;
+}
+
+.key-container:hover {
+  cursor: pointer;
+}
+
+.action-key {
+  background-color: var(--action-key);
+  width: 100%;
+}
+
+.action-key:hover {
+  background-color: var(--action-key-hover); 
+}
+
+.number-key {
+  background-color: var(--number-key);
+  width: calc(100%/3);
+}
+
+.number-key:hover {
+  background-color: var(--number-key-hover);
+}
+
+.key-value {
+  color: var(--key-text-color);
+  font-family: var(--main-font);
+  font-size: var(--key-text-size);
+  font-weight: var(--key-text-weight);
+}
diff --git a/src/components/Key/Key.jsx b/src/components/Key/Key.jsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import './Key.css';
+
+const Key = ({keyType, keyValue}) => {
+  const keyClass = `key-container ${keyType}`;
+  
+  return (
+    <div className={keyClass}>
+      <p className="key-value">
+        {keyValue}
+      </p>
+    </div>
+  );
+}
+
+export default Key;
diff --git a/src/components/Keypad/Keypad.css b/src/components/Keypad/Keypad.css
@@ -0,0 +1,25 @@
+.keypad-container {
+  background: var(--keypad-background);
+  display: flex;
+  flex-direction: row;
+  height: 76%;
+  padding: 2%;
+  width: 96%;
+}
+
+.numbers-container {
+  background: lightgray;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  height: 100%;
+  width: 75%;
+}
+
+.actions-container {
+  background: darkgray;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 25%;
+}
diff --git a/src/components/Keypad/Keypad.jsx b/src/components/Keypad/Keypad.jsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import './Keypad.css';
+
+import Key from '../Key/Key';
+
+const Keypad = () => {
+  let numbers = ['ce', 0, '.', 1, 2, 3, 4, 5, 6, 7, 8, 9];
+  let actions = ['/', 'x', '-', '+'];
+
+  numbers = numbers.reverse().map((number, iterator) => {
+    return (
+      <Key
+        key={`${number}${iterator}`}
+        keyType="number-key" 
+        keyValue={number}
+      />
+    );
+  });
+
+  actions = actions.map((action, iterator) => {
+    return (
+      <Key
+        key={`${action}${iterator}`}
+        keyType="action-key" 
+        keyValue={action} 
+      />
+    );
+  });
+
+  return (
+    <div className="keypad-container">
+      <div className="numbers-container">
+        {numbers}
+      </div>
+      <div className="actions-container">
+        {actions}
+      </div>
+    </div>
+  );
+}
+
+export default Keypad;
diff --git a/src/index.css b/src/index.css
@@ -0,0 +1,33 @@
+/* app variables here */
+
+:root {
+  /* colors */
+  --action-key: #545454;
+  --action-key-hover: #2a2a2a;
+  --display-background: #1d1f1f;
+  --display-text-color: #23e000;
+  --key-text-color: #d3d3d3;
+  --keypad-background: #696969;
+  --number-key: #696969;
+  --number-key-hover: #3f3f3f;
+
+  /* font */
+  --main-font: 'Orbitron', sans-serif;
+
+  /* font sizes */
+  --display-text-size: 5em;
+  --key-text-size: 3em;
+
+  /* font weights */
+  --display-text-weight: 400;
+  --key-text-weight: 700;
+
+}
+
+/* global css here */
+
+body, div, p {
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+}
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,6 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './App';
+
+ReactDOM.render(<App />, document.getElementById('root'));
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+# Using AWS Lambda and API Gateway with React`