Calculator React application for Learning React & Redux: decoupling w…

…ith stateless components Udemy course
Ajdija · Aug 26, 2017 · 6c07062 · 6c07062
commit 6c07062
Show file tree

Hide file tree

Showing 12 changed files with 7,224 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,37 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# IDE
+.idea
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+*.swp
+*~
+Thumbs.db
+.project
+.nvm-version
+/tags
+/atom-shell/
+/out/
+docs/output
+docs/includes
+out/
+/electron/
+
+debug.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/README.md b/README.md
@@ -0,0 +1,31 @@
+## Learning React & Redux: decoupling with stateless components
+
+Welcome to official repository for Udemy course
+[Learning React and Redux: decoupling with stateless components](https://www.udemy.com/course/1326760/)
+by Mateusz Grzesiukiewicz.
+
+## Install
+```
+yarn start
+```
+
+## Who is this course for?
+- Those with Javascript skills who want to learn React library and start with good practises
+- Experienced React developers who struggle to maintain their projects
+- Anyone who strives to write reusable code using modern Javascript libraries
+- Redux users who embrace Flux architecture but use other library for Views than React
+- Those who struggle to write easily testable React or Redux code
+
+## You will learn how to...
+- Create reusable stateless and easily testable components
+- Create pure & easily testable action handlers (reducers)
+- Connect stateless views with stateless reducers through React containers
+- Refactor applications to be more testable and reusable (decoupled)
+- Understand React Flux architecture and and how to connect all the bits
+
+## Take the course
+[Learning React and Redux: decoupling with stateless components](https://www.udemy.com/course/1326760/)
+
+## Create react app boilerplate
+
+This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).
diff --git a/package.json b/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "decouple-react-redux",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "react": "^15.6.1",
+    "react-dom": "^15.6.1",
+    "react-scripts": "1.0.11",
+    "wolfy87-eventemitter": "^5.2.2"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,40 @@
+<!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">
+    <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,15 @@
+{
+  "short_name": "Learning React & Redux: decoupling with stateless components",
+  "name": "Repository for Udemy course Learning React & Redux: decoupling with stateless components by Mateusz Grzesiukiewicz",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "192x192",
+      "type": "image/png"
+    }
+  ],
+  "start_url": "./index.html",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/src/Calculator.css b/src/Calculator.css
@@ -0,0 +1,223 @@
+/**
+ * This css was inspired by https://codepen.io/tbremer/pen/wKpaWe
+ */
+
+.react-calculator {
+    position: relative;
+    margin: 0 auto;
+    width: 440px;
+
+    box-shadow: 0 15px 45px rgba(19, 19, 19, .24), 0 15px 45px rgba(19, 19, 19, .12);
+}
+
+button {
+    outline: none;
+    border: 0;
+    padding: 1rem;
+    background-color: #292f36;
+    font-size: 1.5rem;
+    line-height: 1;
+    color: #FFFDF7;
+
+    -webkit-transition: all 300ms cubic-bezier(1, 1, 1, 1);
+    transition: all 300ms cubic-bezier(1, 1, 1, 1);
+}
+
+button:hover {
+    color: #FFE66D;
+}
+
+button .block {
+    width: 100%;
+}
+
+button .transparent {
+    background-color: transparent;
+}
+
+button .no-padding {
+    padding: 0;
+}
+
+button .control {
+    font-size: 1rem;
+}
+
+-webkit-scrollbar, .display::-webkit-scrollbar, .history::-webkit-scrollbar {
+    width: .5rem;
+}
+
+-webkit-scrollbar:horizontal,
+.display::-webkit-scrollbar:horizontal,
+.history::-webkit-scrollbar:horizontal {
+    height: .5rem;
+}
+
+-webkit-scrollbar-track,
+-webkit-scrollbar:horizontal,
+.display::-webkit-scrollbar-track,
+.display::-webkit-scrollbar:horizontal,
+.history::-webkit-scrollbar-track,
+.history::-webkit-scrollbar:horizontal {
+    background-color: #131313;
+}
+
+-webkit-scrollbar-thumb,
+-webkit-scrollbar:horizontal,
+.display::-webkit-scrollbar-thumb,
+.display::-webkit-scrollbar:horizontal,
+.history::-webkit-scrollbar-thumb,
+.history::-webkit-scrollbar:horizontal {
+    background-color: #FFE66D;
+}
+
+hover::-webkit-scrollbar-thumb,
+hover::-webkit-scrollbar:horizontal,
+.display:hover::-webkit-scrollbar-thumb,
+.display:hover::-webkit-scrollbar:horizontal,
+.history:hover::-webkit-scrollbar-thumb,
+.history:hover::-webkit-scrollbar:horizontal {
+    background-color: #FFE66D;
+}
+
+.display {
+    /*Positioning*/
+    position: relative;
+    width: 440px;
+    height: 120px;
+    z-index: 10;
+
+    /*Formatting*/
+    outline: none;
+    box-shadow: 0 4px 2px -2px rgba(19, 19, 19, .64);
+    padding: .5rem;
+    overflow-y: hidden;
+    overflow-x: scroll;
+    font-size: 3rem;
+    line-height: 2;
+    text-align: right;
+    direction: rtl;
+    white-space: nowrap;
+
+    /*Colors*/
+    background-color: rgba(19, 19, 19, .64);
+    color: #FFE66D;
+}
+
+.history {
+    /*Positioning*/
+    position: absolute;
+    top: 120px;
+    left: 0;
+    z-index: 10;
+
+    /*Formatting*/
+    width: 100%;
+    height: 0;
+    overflow: hidden;
+    padding: 0;
+
+    /*Colors*/
+    background-color: rgba(19, 19, 19, .64);
+    color: #00a3f5;
+
+    /*Animation*/
+    -webkit-transition: height 150ms cubic-bezier(1, 1, 1, 1),
+    overflow 1ms cubic-bezier(1, 1, 1, 1) 200ms,
+    padding 1ms cubic-bezier(1, 1, 1, 1) 200ms;
+
+    transition: height 150ms cubic-bezier(1, 1, 1, 1),
+    overflow 1ms cubic-bezier(1, 1, 1, 1) 200ms,
+    padding 1ms cubic-bezier(1, 1, 1, 1) 200ms;
+}
+
+.history .toggle-close {
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    padding: 2px 5px;
+}
+
+.history .toggle-close .title {
+    display: inline-block;
+
+    /*Rotation - plus sign*/
+    -webkit-transform: rotate(135deg);
+    transform: rotate(135deg);
+}
+
+.history.visible {
+    /*Formatting*/
+    height: calc(100% - 120px);
+    padding: 10px;
+
+    /*Overflow*/
+    overflow-y: auto;
+
+    /*Animation*/
+    -webkit-transition: height 200ms cubic-bezier(1, 1, 1, 1), padding 1ms cubic-bezier(1, 1, 1, 1);
+    transition: height 200ms cubic-bezier(1, 1, 1, 1), padding 1ms cubic-bezier(1, 1, 1, 1);
+}
+
+.buttons--controls,
+.buttons--operators {
+    background-color: #292f36;
+}
+
+.buttons--controls button, .buttons--operators button {
+    /*Formatting*/
+    display: inline-block;
+    width: 110px;
+    height: 110px;
+    vertical-align: top;
+
+    /*Color*/
+    color: #FFE66D;
+
+    /*Uppercase transform*/
+    text-transform: uppercase;
+    -webkit-font-feature-settings: "c2sc", "c2sc", "c2sc";
+    -moz-font-feature-settings: "c2sc", "c2sc", "c2sc";
+    font-feature-settings: "c2sc", "c2sc", "c2sc";
+    font-variant: small-caps;
+}
+
+.buttons--controls button:hover, .buttons--operators button:hover {
+    color: #c41c4f;
+}
+
+.buttons--digits {
+    /*Formatting*/
+    width: 330px;
+    float: left;
+
+    /*Color*/
+    background-color: #292f36;
+}
+
+.buttons--digits button {
+    /*Formatting*/
+    display: block;
+    position: relative;
+    width: 110px;
+    height: 110px;
+    float: left;
+
+    /*Color*/
+    background-color: #292f36;
+
+    /*Transforms*/
+    -webkit-transition: box-shadow 300ms cubic-bezier(1, 1, 1, 1);
+    transition: box-shadow 300ms cubic-bezier(1, 1, 1, 1);
+}
+
+.buttons--digits button:last-child {
+    width: 100%;
+}
+
+.buttons--controls {
+    clear: left;
+    float: left;
+    width: 330px;
+    height: 110px;
+}