diff --git a/src/actions/actionTypes.js b/src/actions/actionTypes.js
index 2ff289e..5015373 100644
--- a/src/actions/actionTypes.js
+++ b/src/actions/actionTypes.js
@@ -4,5 +4,6 @@ export const CLEARALL = 'CLEARALL';
export const MENUOPEN = 'MENUOPEN';
export const MENUCLOSE = 'MENUCLOSE';
export const MAIN = 'MAIN';
+export const CHART = 'CHART';
export const HELP = 'HELP';
export const EXAMPLE = 'EXAMPLE';
diff --git a/src/actions/menuActions.js b/src/actions/menuActions.js
index f78ba3f..9a15e86 100644
--- a/src/actions/menuActions.js
+++ b/src/actions/menuActions.js
@@ -18,6 +18,12 @@ export function main() {
};
}
+export function chart() {
+ return {
+ type: types.CHART
+ };
+}
+
export function help() {
return {
type: types.HELP
diff --git a/src/components/chart.js b/src/components/chart.js
new file mode 100644
index 0000000..725a245
--- /dev/null
+++ b/src/components/chart.js
@@ -0,0 +1,132 @@
+import React, {Component} from 'react';
+import {ScrollView, Text, View} from 'react-native';
+
+import MyText from './mytext.js';
+import Section from './section.js';
+
+const rowData = [
+ {
+ bgColor: 'white',
+ textColor: 'black',
+ cells: ['Color', '1st', '2nd', 'Multiplier', 'Tolerance'],
+ },
+ {
+ bgColor: 'black',
+ textColor: 'white',
+ cells: ['Black', '0', '0', '1', ' '],
+ },
+ {
+ bgColor: 'brown',
+ textColor: 'white',
+ cells: ['Brown', '1', '1', '10', '±1%'],
+ },
+ {
+ bgColor: 'red',
+ textColor: 'white',
+ cells: ['Red', '2', '2', '100', '±2%'],
+ },
+ {
+ bgColor: 'orange',
+ textColor: 'black',
+ cells: ['Orange', '3', '3', '1k', ' '],
+ },
+ {
+ bgColor: 'yellow',
+ textColor: 'black',
+ cells: ['Yellow', '4', '4', '10k', ' '],
+ },
+ {
+ bgColor: 'green',
+ textColor: 'white',
+ cells: ['Green', '5', '5', '100k', '±0.5%'],
+ },
+ {
+ bgColor: 'blue',
+ textColor: 'white',
+ cells: ['Blue', '6', '6', '1M', '±0.25%'],
+ },
+ {
+ bgColor: 'violet',
+ textColor: 'black',
+ cells: ['Violet', '7', '7', '10M', '±0.1%'],
+ },
+ {
+ bgColor: 'gray',
+ textColor: 'black',
+ cells: ['Gray', '8', '8', ' ', '±0.05%'],
+ },
+ {
+ bgColor: 'white',
+ textColor: 'black',
+ cells: ['White', '9', '9', ' ', ' '],
+ },
+ {
+ bgColor: 'gold',
+ textColor: 'black',
+ cells: ['Gold', ' ', ' ', '0.10', '±5%'],
+ },
+ {
+ bgColor: 'silver',
+ textColor: 'black',
+ cells: ['Silver', ' ', ' ', '0.01', '±10%'],
+ },
+];
+
+
+export default class Chart extends Component {
+ constructor(props) {
+ super(props);
+ }
+
+ render() {
+ return (
+
+
+
+
+ {rowData[0].cells.map((x, col) =>
+
+ {rowData.map((row, n) =>
+
+
+ {row.cells[col]}
+
+
+ )}
+
+ )}
+
+
+
+
+ A mnemonic to help you remember the colors:
+
+
+ Bad Booze Rots Our Young
+
+
+ Guts But Vodka Goes Well
+
+
+
+
+ );
+ }
+}
+
diff --git a/src/components/menu.js b/src/components/menu.js
index 200b7a0..45d22a7 100644
--- a/src/components/menu.js
+++ b/src/components/menu.js
@@ -22,13 +22,14 @@ export default class Menu extends Component {
}
render() {
- const {main, help, example} = this.props;
+ const {main, chart, help, example} = this.props;
return (
Calculator
+ Color Chart
Help
Example
Tips
diff --git a/src/containers/chartApp.js b/src/containers/chartApp.js
new file mode 100644
index 0000000..094eb39
--- /dev/null
+++ b/src/containers/chartApp.js
@@ -0,0 +1,16 @@
+'use strict';
+
+import React, {Component} from 'react';
+import Chart from '../components/chart';
+
+export default class ChartApp extends Component {
+ constructor(props) {
+ super(props);
+ }
+
+ render() {
+ return (
+
+ );
+ }
+}
diff --git a/src/containers/nav.js b/src/containers/nav.js
index 5ae9eeb..57fece2 100644
--- a/src/containers/nav.js
+++ b/src/containers/nav.js
@@ -8,6 +8,7 @@ import Drawer from 'react-native-drawer';
import * as menuActions from '../actions/menuActions';
import MenuApp from '../containers/menuApp';
+import ChartApp from '../containers/chartApp';
import CalcApp from '../containers/calcApp';
import HelpApp from '../containers/helpApp';
import ExampleApp from '../containers/exampleApp';
@@ -59,6 +60,8 @@ class Nav extends Component {
switch (state.page) {
case 'main':
return ;
+ case 'chart':
+ return ;
case 'help':
return ;
case 'example':
diff --git a/src/reducers/menu.js b/src/reducers/menu.js
index 33d39e6..ce1e217 100644
--- a/src/reducers/menu.js
+++ b/src/reducers/menu.js
@@ -27,6 +27,13 @@ export default function menu(state = initialState, action = {}) {
page: 'main',
subtitle: 'Calculator Page',
};
+ case types.CHART:
+ return {
+ ...state,
+ isOpen: false,
+ page: 'chart',
+ subtitle: 'Color Chart',
+ };
case types.HELP:
return {
...state,