Start of something new

gistfile1.txt

<h2>Materias realizadas</h2>

<form class="search-form">
    <input type="text" id="myText" class="search" value ="Buscar Materia">
    <input type="button" class="button" value="Agregar">
</form>
<hr/>
<div class='materias realizadas'>
    <div class='materia' id='2341'>Álgebra</div>
    <div class='materia'>Matemática 2</div>
    <div class='materia'>Física 1</div>
</div>

<h2 id='demo'>Materias disponibles</h2>
<hr/>

<div class='materias disponibles'>
    <div class='materia'>Álgebra</div>
    <div class='materia'>Matemática 2</div>
    <div class='materia'>Física 1</div>
</div>

.....................css..........................

.search-form {
      max-width:400px;
      margin:20px auto;
    }
   
.button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}

.materias{
  display: flex;
  flex-direction: column;
  border: 1px solid #999
}

.materia{
  border: 0.9px solid #999;
  padding: 5px;
  background: #7ed6df;
}

.materia:hover {
    box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.5);
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

.......................js................................

document.getElementById("2341").addEventListener("click", agregarMateriaDisponible);

document.getElementsByClassName("button")[0].addEventListener("click", agregarMateriaRealizada);

function agregarMateriaDisponible() {
    var iDiv = document.createElement('div');
    iDiv.className = 'materia';
    iDiv.innerHTML = 'Fisica 2';
    document.getElementsByClassName('disponibles')[0].appendChild(iDiv);
}

function agregarMateriaRealizada(){
    var iDiv = document.createElement('div');
    iDiv.className = 'materia';
    iDiv.innerHTML = document.getElementById("myText").value ;
    document.getElementsByClassName('disponibles')[0].appendChild(iDiv);
}

function quitarMateria(){
  
}