Submission

README.md

@@ -1,47 +1,43 @@
-![CF](http://i.imgur.com/7v5ASc8.png) LAB
-=================================================
+# ![CF](http://i.imgur.com/7v5ASc8.png) LAB
 
-## Project Name
+## Counter
 
-### Author: Student/Group Name
+### Author: Jagdeep Singh
 
 ### Links and Resources
-* [submission PR](http://xyz.com)
-* [travis](http://xyz.com)
-* [back-end](http://xyz.com) (when applicable)
-* [front-end](http://xyz.com) (when applicable)
+
+- [submission PR](https://github.com/401-advanced-javascript-js/lab-33-counter-contextAPI/pull/1)
+- [travis](https://travis-ci.com/401-advanced-javascript-js/lab-33-counter-contextAPI)
+- [front-end](https://unruffled-beaver-15183f.netlify.com/)
 
 #### Documentation
-* [api docs](http://xyz.com) (API servers)
-* [jsdoc](http://xyz.com) (Server assignments)
-* [styleguide](http://xyz.com) (React assignments)
 
-### Modules
+- [styleguide](styleguide/index.html)
+
+<!-- ### Modules
+
 #### `modulename.js`
+
 ##### Exported Values and Methods
 
 ###### `foo(thing) -> string`
+
 Usage Notes or examples
 
 ###### `bar(array) -> array`
-Usage Notes or examples
+
+Usage Notes or examples -->
 
 ### Setup
-#### `.env` requirements
-* `PORT` - Port Number
-* `MONGODB_URI` - URL to the running mongo instance/db
 
 #### Running the app
-* `npm start`
-* Endpoint: `/foo/bar/`
-  * Returns a JSON object with abc in it.
-* Endpoint: `/bing/zing/`
-  * Returns a JSON object with xyz in it.
-
+
+- `npm run start`
+
 #### Tests
-* How do you run tests?
-* What assertions were made?
-* What assertions need to be / should be made?
+
+- How do you run tests? `npm test`
 
 #### UML
-Link to an image of the UML for your application and response to events
+
+![UML](assets/uml.jpeg)

package.json

@@ -20,7 +20,8 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "lint": "eslint src/**/*.js"
   },
   "eslintConfig": {
     "extends": "react-app"

src/app.js

@@ -1,11 +1,22 @@
 import React from 'react';
 
+import Counter from './components/counter/counter';
+import Incrementer from './components/incrementer/incrementer';
+import Decrementer from './components/decrementer/decrementer';
+import ContextProvider from './components/context/counter-context';
+
+import('./app.scss');
+
 export default function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <p>Hello, World!</p>
-      </header>
-    </div>
+    <ContextProvider>
+      <div className="App">
+        <>
+          <Incrementer />
+          <Counter />
+          <Decrementer />
+        </>
+      </div>
+    </ContextProvider>
   );
 }

src/app.scss

@@ -0,0 +1,17 @@
+
+button {
+  font-size: 25pt;
+  text-decoration: none;
+  width: 100%;
+  margin: 20px auto;
+  padding: 25px;
+  border-radius: 5px;
+}
+
+.up {
+  background: rgba(0, 128, 0, 0.671);
+}
+
+.down {
+  background: rgba(255, 0, 0, 0.671);
+}