Reactive programming with Svelte example calculadora Papi(promedio) (#…

…244)

* Reactive programming with Svelte example calculadora Papi(promedio)

* Update reactive/reactive_teoria/index.html

---------

Co-authored-by: Johan Medina <jmedinac@bch.bancodechile.cl>
Co-authored-by: Felipe Restrepo-Calle <ferestrepoca@unal.edu.co>

reactive/reactive_teoria/index.html

@@ -830,7 +830,38 @@ <h4 id="line8_8">Ejemplo en Svelte</h4>
                     <!-- end row -->
 
                     <hr>
+                    <hr>
+                    <div class="row">
+                        <div class="col-md-12">
+                            <h4 id="line8_8">Ejemplo en Svelte - Calculadora de PAPI</h4>
+                            <p> En el siguiente link se puede acceder a un repositorio que contiene el ejemplo presentado a continuación.</p>
+                            <a href="https://github.com/josmedinaca/calculadora-papi">https://github.com/josmedinaca/calculadora-papi</a>
+                            <p> En las siguientes imágenes podemos observar cómo implementar una Calculadora responsive que se encarga de darnos nuestro PAPI </p>
+                            <p>Estructura del proyecto</p>
+                            <img src="images/svelteexample/papi-01.png" class="img-responsive img-thumbnail">
+                            <p>Componente SubjectForm</p>
+                            <p>Este componente se encarga de añadir la asignatura, asi como sus créditos, nota y si fue cancelada o no.
+                            </p>
+                            <img src="images/svelteexample/papi-02.png" class="img-responsive img-thumbnail">
+                            <p>Componente SubjectsList</p>
+                            <p>Este componente se encarga de mostrarnos a manera de tabla las asignaturas que hemos ido añadiendo para realizar nuestro cálculo de papi, de igual forma en esta sección se pueden eliminar asignaturas.
+                            </p>
+                            <img src="images/svelteexample/papi-03.png" class="img-responsive img-thumbnail">
+                            <p>Componente app</p>
+                            <p>El componente app es el componente central de la aplicación. Dentro de script se observa cómo se hace un llamado a los otros 2 componentes, SubjectForm y SubjectsList.
+                                En esta parte realizamos el cálculo del papi y lo imprimimos en la pantalla del usuario.
+                            </p>
+                            <img src="images/svelteexample/papi-04.png" class="img-responsive img-thumbnail">
+
+                            <p>Ejecución</p>
+                            <p>Podemos ver el papi despues de añadir 2 asignaturas y 1 de ellas fue cancelada.</p>
+                            <img src="images/svelteexample/papi-05.png" class="img-responsive img-thumbnail">
+                        </div>
+                        <!-- end col -->
+                    </div>
+                    <!-- end row -->
 
+                    <hr>
                 </section>
                 <!-- end section -->