Add a resistor color chart to chart page

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';

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

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 (
+			<ScrollView>
+				<View style={{padding: 20}}>
+					<Section>
+						<View style={{flexDirection: 'row'}}>
+							{rowData[0].cells.map((x, col) =>
+								<View style={{flex: 1}} key={col}>
+									{rowData.map((row, n) =>
+										<View
+											key={n}
+											style={{
+												backgroundColor: row.bgColor,
+												paddingTop: 4,
+												paddingBottom: 4,
+												borderBottomColor: 'white',
+												borderBottomWidth: 1,
+											}}
+										>
+											<MyText
+												key={n}
+												style={{
+													color: row.textColor,
+													textAlign: 'center',
+													fontWeight: n ? 'normal' : 'bold',
+												}}
+											>
+												{row.cells[col]}
+											</MyText>
+										</View>
+									)}
+								</View>
+							)}
+						</View>
+					</Section>
+					<Section>
+						<MyText>
+							A mnemonic to help you remember the colors:
+						</MyText>
+						<MyText style={{textAlign: 'center'}}>
+							Bad Booze Rots Our Young
+						</MyText>
+						<MyText style={{textAlign: 'center'}}>
+							Guts But Vodka Goes Well
+						</MyText>
+					</Section>
+				</View>
+			</ScrollView>
+		);
+	}
+}
+

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 (
 			<View style={styles.main}>
 				<ScrollView>
 					<Image style={{alignSelf: 'flex-start', height: 121.30401, width: 250}} source={require('../images/menulogo.png')} resizeMode={'contain'} />
 					<MyText style={styles.menutable} onPress={main}>Calculator</MyText>
+					<MyText style={styles.menutable} onPress={chart}>Color Chart</MyText>
 					<MyText style={styles.menutable} onPress={help}>Help</MyText>
 					<MyText style={styles.menutable} onPress={example}>Example</MyText>
 					<MyText style={styles.menutable} onPress={null}>Tips</MyText>

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 (
+			<Chart />
+		);
+	}
+}

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 <CalcApp />;
+								case 'chart':
+									return <ChartApp />;
 								case 'help':
 									return <HelpApp />;
 								case 'example':

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,