TypeScript

by Miguel Roman

HTML

<div id="app">
  
  <form id="form" action="#">
      <div>
     <label>
       <span>Notas:</span>
       <textarea id="notas">Sol mi mi mi 
sol mi mi mi  
mi re do si la sol fa mi fa sol 
sol mi mi mi 
Sol mi mi mi 
Mi re do si la sol sol# la 
Do la la la 
Re si si si 
Re si re si 
Mi do mi do
Sol mi mi mi 
Sol mi mi mi 
Mi re do si la sol fa mi fa sol
Sol mi mi mi 
Sol mi mi mi 
Mi re do si la sol sol# la 
Do la la la 
Re si si si 
Re si re si 
Mi do mi do 
Sol mi mi mi 
Sol mi mi mi 
Mi re do si la sol  sol# la.</textarea>
     </label>
    </div>
    <div>
      <button type="submit">
      Generar
      </button>
    
    </div>
  </form>
  
  <div id="result">
    
  </div>
  
</div>

CSS

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

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

TypeScript

const form = document.getElementById('form');
const notas = document.getElementById('notas');
const result = document.getElementById('result');
const colors: { [key: string]: string } = {
    do: 'red',
    re: 'orange',
    mi: 'yellow',
    fa: 'green',
    sol: 'skyblue',
    la: 'blue',
    si: 'purple'
};

form.addEventListener('submit', (event) => {
	event.preventDefault();
  
  const r = notas.value
  	.split(/\r?\n/).map((line) => line);


	console.log('submit ', r);

  
});