Added Resistor code

src/components/Resistor/index.js

@@ -1,15 +1,167 @@
 import React, { Component } from 'react';
+import {
+  Container,
+  Row,
+  Col,
+  FormGroup,
+  Label,
+  Input,
+  Button
+} from 'reactstrap';
+import Result from './result'
 
 class Resistor extends Component {
+  state = {};
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      powerSource: 12,
+      powerLed: 3.3,
+      ledConsumption: 200,
+
+      showResult: false,
+
+      series: {
+        //Source: https://www.positron-libre.com/cours/electronique/resistances/serie-resistance.php
+        e24: [
+          1,
+          1.1,
+          1.2,
+          1.3,
+          1.5,
+          1.6,
+          1.8,
+          2.0,
+          2.2,
+          2.4,
+          2.7,
+          3.0,
+          3.30,
+          3.60,
+          3.90,
+          4.30,
+          4.70,
+          5.10,
+          5.60,
+          6.20,
+          6.80,
+          7.50,
+          8.20,
+          9.10
+        ]
+      },
+      factors: [ //À factoriser via un for 0 -> 12
+        1,
+        10,
+        100,
+        1000,
+        10000,
+        100000,
+        1000000,
+        10000000,
+        100000000,
+        1000000000,
+        10000000000,
+        100000000000,
+        1000000000000
+      ]
+    }
+
+    this.handleChange = this.handleChange.bind(this);
+    this.submit = this.submit.bind(this);
+  }
+
+  handleChange(event) {
+    const target = event.target;
+    const value = target.type === 'checkbox' ? target.checked : target.value;
+    const name = target.name;
+
+    this.setState({
+      [name]: value,
+      showResult: false
+    });
+  }
+
+  submit() {
+    this.setState({
+      showResult: true
+    })
+  }
+
   render() {
     return (
-      <div>
-        {' '}
-Resistor
-        {' '}
-      </div>
+      <Container>
+        <h1>Calcul de la valeur d&#39;une résistance</h1>
+        <Row>
+          <Col xs="12" md="4">
+            <FormGroup>
+              <Label for="powerSource">Alimentation</Label>
+              <Input
+                type="number"
+                id="powerSource"
+                name="powerSource"
+                placeholder="Alimentation (ex: 12V)"
+                step="0.5"
+                value={this.state.powerSource}
+                onChange={this.handleChange}
+              />
+            </FormGroup>
+          </Col>
+        </Row>
+        <Row>
+          <Col xs="12" md="4">
+            <FormGroup>
+              <Label for="powerLed">Tension max admissible par la led</Label>
+              <Input
+                type="number"
+                id="powerLed"
+                name="powerLed"
+                placeholder="ex: 3.3V"
+                step="0.1"
+                value={this.state.powerLed}
+                onChange={this.handleChange}
+              />
+            </FormGroup>
+          </Col>
+        </Row>
+        <Row>
+          <Col xs="12" md="4">
+            <FormGroup>
+              <Label for="ledConsumption">Consommation de la led (en mA)</Label>
+              <Input
+                type="number"
+                id="ledConsumption"
+                name="ledConsumption"
+                placeholder="20mA"
+                step="1"
+                value={this.state.ledConsumption}
+                onChange={this.handleChange}
+              />
+            </FormGroup>
+          </Col>
+        </Row>
+        <Row>
+          <Col xs="12" md="4">
+            <Button onClick={this.submit}>Calculer</Button>
+          </Col>
+        </Row>
+        {
+          this.state.showResult ?
+          <Result
+            powerSource={this.state.powerSource}
+            powerLed={this.state.powerLed}
+            ledConsumption={this.state.ledConsumption}
+            series={this.state.series}
+            factors={this.state.factors}
+            />
+          :
+          (null)
+        }
+      </Container>
     );
   }
 }
 
-export default Resistor;
+export default Resistor

src/components/Resistor/result.js

@@ -0,0 +1,69 @@
+import React, { Component } from 'react';
+import {
+  Row,
+  Col,
+} from 'reactstrap';
+
+class Result extends Component {
+  state = {};
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      powerSource: this.props.powerSource,
+      powerLed: this.props.powerLed,
+      ledConsumption: this.props.ledConsumption,
+
+      perfectMatch: null,
+      overR: null,
+      underR: null,
+
+      series: this.props.series,
+      factors: this.props.factors
+    };
+  }
+
+  componentDidMount = () => {
+    const perfectMatch = Math.round( 1000 * ((this.state.powerSource - this.state.powerLed ) / ( this.props.ledConsumption/1000))) / 1000;
+    let overR = null;
+    let beforeR = null;
+
+    for( let iFactor = 0 ; iFactor < this.state.factors.length ; iFactor += 1 ) {
+      const factor = this.state.factors[iFactor];
+      for( let iSerie = 0 ; iSerie < this.state.series.e24.length ; iSerie += 1 ) {
+        const currentR = this.state.series.e24[iSerie] * factor;
+
+        if ( currentR > perfectMatch ) {
+          overR = currentR;
+          console.log( overR);
+          break;
+        }
+
+        beforeR = currentR;
+      }
+      if ( overR)
+      {
+        break;
+      }
+    }
+
+    this.setState({perfectMatch, overR, underR: beforeR});
+
+  }
+
+  render() {
+    return (
+      <Row>
+        <Col xs="12" md="12">
+          Vous devez mettre une résistance de <strong>{this.state.perfectMatch}&#8486;</strong>.
+        </Col>
+        <Col xs="12" md="12">
+          Les 2 résistances standard les plus proches sont <strong>{this.state.underR}&#8486;</strong> et <strong>{this.state.overR}&#8486;</strong>.
+        </Col>
+      </Row>
+    )
+  }
+}
+
+export default Result