Reactive programming with Svelte example calculadora Papi(promedio)

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 imagenes podemos observar como 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 creditos, 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 calculo de papi, de igual forma en esta seccion 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 como se hace un llamado a los otros 2 componentes, SubjectForm y SubjectsList.
+                                En esta parte realizamos el calculo 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 -->