React

by enagu

HTML

<div id="app"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

.done {
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;
}

input {
  margin-right: 5px;
}

React

let el = `3 2 Metodologia de la investigacion > 4
3 2 Taller de programacion > 8
4 2 Sistemas distribuidos > 8
5 1 Relaciones humanas > 5
5 1 Tecnologias para la explotacion de datos > 6
5 1 Seguridad en Sistemas de la Informacion > 5
5 1 Consolidación de Tecnologías de la Información y las Comunicaciones > 6
5 2 Desarollo de Aplicaciones Cliente-Servidor > 5
5 2 Gestion Avanzada de Datos > 6
5 2 Auditoria de Sistemas de la Información > 6
5 2 UIT y los Organismos Internacionales de TIC > 3`;

var electivas = [];
let regexexp = /(?<anio>\d) (?<cuatr>\d) (?<materia>[^>]+) > (?<horas>\d+)/g;
let match = regexexp.exec(el);
do {
  electivas.push({año: parseInt(match.groups.anio), cuatrimestre: parseInt(match.groups.cuatr), materia: match.groups.materia, horas: parseInt(match.groups.horas)});
} while((match = regexexp.exec(el)) !== null);

class Materia extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      checked: false,
      hours: props.horas
    }
    this.setMateria = this.setMateria.bind(this);
  }
  
  setMateria() {
    this.props.addHours(this.state.hours)
  }
  
  render () {
  
  const {materia, año, cuatrimestre, horas} = this.props.materia;
  return (
    <label className="checkbox">
      {materia}
      <input onClick={this.setMateria} type="checkbox" name={materia} checked={this.checked} />
    </label>
  );
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      total: 0
    };
    
    this.addHours = this.addHours.bind(this);
  }
  
  addHours(hours) {
    this.setState((prev) => ({
      total: prev.total + hours
    }))
  }
  
  render () {
    return (
      <div>
        <span className="total">{this.state.total}</span>
        {this.props.electivas.map((el, index) => <Materia addHours={this.addHours} key={index} materia={el} />)}
      </div>
    );
  }
}

  ReactDOM.render(
    <App electivas={electivas}/>,
    document.getElementById('root')
  );