CCOM4030
/
artesanias
Watch 5
Star 0
Fork 0

5 Commits
7c8ca43e8b ... 1d5e09e395

Author SHA1 Message Date
  Emmanuel 1d5e09e395 Resuelto el bug de search y Lillie 4 years ago
  Emmanuel 30e315acc3 Resuelto el bug de search y Lillie 4 years ago
  Emmanuel 7152c1a5c5 Resuelto el bug de search y Lillie 4 years ago
  Emmanuel 56d8c273dc damn 4 years ago
  Emmanuel 8b6932c2aa bah 4 years ago
7 changed files with 373 additions and 88 deletions
Unified View Show Diff Stats
  1. 111
    19
      platforms/android/app/src/main/assets/www/index.html
  2. 10
    8
      platforms/android/app/src/main/assets/www/js/azar.js
  3. 119
    24
      platforms/browser/www/index.html
  4. 10
    8
      platforms/browser/www/js/azar.js
  5. 2
    2
      platforms/browser/www/js/searchfunctions.js
  6. 111
    19
      www/index.html
  7. 10
    8
      www/js/azar.js

+ 111
- 19
platforms/android/app/src/main/assets/www/index.html View File

86 
                 <ons-card id="azar"><!--style="height: 100%"-->
 86 
                 <ons-card id="azar"><!--style="height: 100%"-->
87
87
88 
                     <!--<div class="title" id="Title"></div>-->
 88 
                     <!--<div class="title" id="Title"></div>-->
89 
-                    <div id="image" style= "max-height:500px"></div><br>
89 
+                    <div id="image" style= "max-height:450px"></div><br>
90 
                     <div class="content" id="Content"></div>
 90 
                     <div class="content" id="Content"></div>
91 
                     <!--This javascript will randomly choose an image and information of a certain type of artesania used by a certain artists-->
 91 
                     <!--This javascript will randomly choose an image and information of a certain type of artesania used by a certain artists-->
92 
                     <!--For now all this information is stored inside a .csv file-->
 92 
                     <!--For now all this information is stored inside a .csv file-->
260 
                             //'title':'${Artesano.Nombre}','esp': '${info}'
 260 
                             //'title':'${Artesano.Nombre}','esp': '${info}'
261 
                             //Tries to pass all the info of each artesano into a new page, the page that display this information is 'artesano.html', not to be confused with 'artesanias.html' or 'artesanos.html'(current page)
 261 
                             //Tries to pass all the info of each artesano into a new page, the page that display this information is 'artesano.html', not to be confused with 'artesanias.html' or 'artesanos.html'(current page)
262 
                             //And puts this into the 'item' variable
 262 
                             //And puts this into the 'item' variable
263 
-                            var item = ons.createElement(`<ons-list-item onclick="myNavigator.pushPage('artesano.html', { data: { title: '${Artesano.Nombre}', mun: '${Artesano.Municipio}', tel: '${Artesano["Telefono 1"]}', email: '${Artesano["Email"]}', esp: '${Artesano.Especificacion}', redes: '${Artesano["E-Commerce 1"]}', tecnicas: '${Artesano["Tecnica"]}' } })" tappable>
263 
+                            var item = ons.createElement(`<ons-list-item onclick="myNavigator.pushPage('artesano.html', { data: { title: '${Artesano.Nombre.replace(/"/g, " ")}', mun: '${Artesano.Municipio}', tel: '${Artesano["Telefono 1"]}', email: '${Artesano["Email"]}', esp: '${Artesano.Especificacion}', redes: '${Artesano["E-Commerce 1"]}', tecnicas: '${Artesano["Tecnica"]}' } })" tappable>
264 
                         <div class="title">${Artesano.Nombre}</div>
 264 
                         <div class="title">${Artesano.Nombre}</div>
265 
                     </ons-list-item>`);
 265 
                     </ons-list-item>`);
266
266
552 
                     for (i = 0; i < all_artesanos.length;i++){
 552 
                     for (i = 0; i < all_artesanos.length;i++){
553 
                         all_artesanos[i].Nombre = all_artesanos[i].Nombre +  " " + all_artesanos[i]["Apellido Paterno"] + " " + all_artesanos[i]["Apellido Materno"];
 553 
                         all_artesanos[i].Nombre = all_artesanos[i].Nombre +  " " + all_artesanos[i]["Apellido Paterno"] + " " + all_artesanos[i]["Apellido Materno"];
554 
                         var artesano = ons.createElement(`<ons-list-item class = "artists"
 554 
                         var artesano = ons.createElement(`<ons-list-item class = "artists"
555 
-                        onclick="SNavigator.pushPage('artesano.html', { data: {title: '${all_artesanos[i].Nombre}', mun: '${all_artesanos[i].Municipio}', tel: '${all_artesanos[i]["Telefono 1"]}', email: '${all_artesanos[i]["Email"]}', esp: '${all_artesanos[i].Especificacion}', redes: '${all_artesanos[i]["E-Commerce 1"]}', tecnicas: '${all_artesanos[i]["Tecnica"]}' } })" tappable>
555 
+                        onclick="SNavigator.pushPage('artesano_s.html', { data: {title: '${all_artesanos[i].Nombre.replace(/"/g, " ")}', mun: '${all_artesanos[i].Municipio}', tel: '${all_artesanos[i]["Telefono 1"]}', email: '${all_artesanos[i]["Email"]}', esp: '${all_artesanos[i].Especificacion}', redes: '${all_artesanos[i]["E-Commerce 1"]}', tecnicas: '${all_artesanos[i]["Tecnica"]}' } })" tappable>
556 
                         <div>${all_artesanos[i].Nombre}</div>
 556 
                         <div>${all_artesanos[i].Nombre}</div>
557 
                     </ons-list-item>`);
 557 
                     </ons-list-item>`);
558 
                         document.getElementById('results').appendChild(artesano);
 558 
                         document.getElementById('results').appendChild(artesano);
672 
                 </script>
 672 
                 </script>
673 
             </ons-page>
 673 
             </ons-page>
674 
         </template>
 674 
         </template>
675 
+
676 
+         <template id= "artesano_s.html">
677 
+            <ons-page id = "artesano_s">
678 
+                <ons-toolbar>
679 
+                    <!-- Pretty self explanatory, its a button that goes back to the previous page -->
680 
+                    <div class = "left"> <ons-back-button> Atras </ons-back-button></div>
681 
+                    <div class = "center"></div>
682 
+                </ons-toolbar>
683 
+                <body>
684 
+                    <!-- This is where we'll put all the information of that artsts -->
685 
+                    <font size="+1">
686 
+                        <ons-card id="all2"></ons-card>
687 
+                    </font>
688 
+                </body>
689 
+                <script>
690 
+                    //when it opens this page this function starts to run, it first recieves the information that was sent to "artesano.html"
691 
+                    ons.getScriptPage().onInit = function () {
692 
+                        this.querySelector('ons-toolbar div.center').textContent = this.data.title;
693 
+
694 
+                        var data = '',
695 
+                            mun = this.data.mun,
696 
+                            tel = this.data.tel,
697 
+                            em = this.data.email,
698 
+                            esp = this.data.esp,
699 
+                            redes = this.data.redes,
700 
+                            tecnicas = this.data.tecnicas;
701 
+
702 
+                        //here the email is the string made from the start to where the '#' is.
703 
+
704 
+
705 
+                        //Here it's dividing all the especificaciones and writing them into the page (data) and then goes to the next line
706 
+                        //if it has many especificaciones then it will replace all the ';' in it with ',' and writes it into the page
707 
+                        //but if theres only one then you just write it into the page
708 
+                        if(esp.trim() != ""){
709 
+                            if(esp.includes(";", 0)){
710 
+                                esp=esp.replace(/;/g,", ");
711 
+                                data+='Tipos de artesanías: '+esp+'<br>';
712 
+                            }
713 
+                            else {
714 
+                                data+='Tipo de artesanía: '+esp+'<br>';
715 
+                            }
716 
+                        }
717 
+
718 
+                        if(tecnicas.trim() != ''){
719 
+                            if(tecnicas.includes(";", 0)){
720 
+                                tecnicas = tecnicas.replace(/;/g,", ");
721 
+                                data+='Técnicas que usan: '+tecnicas+'<br>';
722 
+                            }
723 
+                            else {
724 
+                                data+='Técnicas que usan: '+tecnicas+'<br>';
725 
+                            }
726 
+                        }
727 
+                        //console.log("Las redes son..."+this.data.redes);
728 
+                        //Here it's making sure theres something in municipio and writing their municipio into the page
729 
+                        if(mun.trim() != ""){
730 
+                            data+='Municipio: '+ mun +'<br>';
731 
+                        }
732 
+
733 
+                        //Here it's writing their email, in blue color and its used as a link to send one when it's clicked, then it goes to the next line
734 
+                        //Whenever the variable is empty or if it has "NO TIENE" then it doesnt write anything
735 
+                        if(em.trim() != "" & em.toUpperCase().trim() != "NO TIENE"){
736 
+                            data+='Correo Electr\u00f3nico: <a style="color:blue" href="mailto: '+em+'"><u>'+em+'</u></a><br>';
737 
+                        }
738 
+
739 
+                        //Here it's writing their phone number into the page,its in blue and whenever its clicked the app will redirect the user to call them, then it goes to the next line
740 
+                        if(tel.trim() != "" ){
741 
+                            data+='Tel\u00e9fono: <a style="color:blue" href="tel: '+ tel +'"><u>'+ tel +'</u></a><br>';
742 
+                        }
675
743
744 
+                        console.log("Redes: "+redes);
745 
+
746 
+                        //Here it has to decide what to do depending on the links they give to their social media pages
747 
+                        //if the link is to a facebook, instagram or myspace account then it will show the picture of the social media site, and when you click the picture then the app redirects you to their social media.
748 
+                        //The alt attribute is required for images, it's in case theres no internet connection, then it will display that tet instead, I think screen readers can also read that text
749 
+                        //If the link is to another website (but isn't a mailto link) then it will display a default picture we chose to display a default web browser, like the other ones clikcing on it will take you to the link.
750 
+                        //If it's none of them then it will not display anything
751 
+                        if(redes.includes("facebook")){
752 
+
753 
+                            console.log(redes.substring(1,redes.length-2));
754 
+                            data+='<br><a href="'+ redes.substring(1,redes.length-2) + '"><img src="img/facebook.png" alt="Facebook"style="width:35px;height:35px;border:0;"><br>';
755 
+                        }
756 
+                        else if(redes.includes("instagram")){
757 
+                            console.log(redes.substring(1,redes.length-2));
758 
+                            data+='<br><a href="'+ redes.substring(1,redes.length-2) + '"><img src="img/instagram.png" alt="Instagram"style="width:35px;height:35px;border:0;"><br>';
759 
+                        }
760 
+                        else if(redes.includes("myspace")){
761 
+                            console.log(redes.substring(1,redes.length-2));
762 
+                            data+='<br><a href="'+ redes.substring(1,redes.length-2) + '"><img src="img/MySpace.png" alt="MySpace"style="width:35px;height:35px;border:0;"><br>';
763 
+                        }
764 
+                        else if((redes.includes(".org") || redes.includes(".com")) && !redes.includes("mailto")){
765 
+                            redes = redes.substr(redes.indexOf("#")+1,redes.length);
766 
+                            redes = redes.substr(0, redes.length-1);
767 
+                            console.log(redes);
768 
+                            data+='<br><a href="'+ redes + '"><img src="img/internet.jpg" style="width:35px;height:35px;border:0;"><br>';
769 
+                        }
770 
+                        else if(redes.includes("#") || redes.includes("mailto")){
771 
+                            console.log("tiene un disparate");
772 
+                        } else {
773 
+                            console.log("no tiene nada");
774 
+                        }
775 
+
776 
+                        //This is the part that allows eveything (data) to be displayed
777 
+                        document.getElementById("all2").innerHTML = `${data}`;
778 
+
779 
+                    }
780 
+                </script>
781 
+            </ons-page>
782 
+        </template>
676 
 <!-- ------------------------------------------------------------------------------------------------------------------------------------------------------- -->
 783 
 <!-- ------------------------------------------------------------------------------------------------------------------------------------------------------- -->
677
784
678 
         <template id="renglones.html">
 785 
         <template id="renglones.html">
679 
           <ons-navigator swipeable animation="slide" id="myNavigator">
 786 
           <ons-navigator swipeable animation="slide" id="myNavigator">
680 
             <ons-page id="renglones">
 787 
             <ons-page id="renglones">
681
788
682 
-            <!--div class="search-bar">
683 
-                 <p style="text-align: center; margin-top: 10px;">
684 
-                    <ons-search-input placeholder="Search" onchange="ons.notification.alert('Searched for: ' + this.value)"
685 
-           style="width: 96%; margin: 6px auto 6px auto;"></ons-search-input>
686 
-                </p>
687 
-            </div-->
688 
-
689 
             <ons-card id="list">
 789 
             <ons-card id="list">
690 
               <script type="text/javascript" src="js/renglones.js"></script>
 790 
               <script type="text/javascript" src="js/renglones.js"></script>
691 
             </ons-card>
 791 
             </ons-card>
728
828
729 
         <template id="ferias.html">
 829 
         <template id="ferias.html">
730 
             <ons-page id="ferias">
 830 
             <ons-page id="ferias">
731 
-                <!--<ons-card>
732 
-
733 
-                <div id = "caleandar" class = "calendar" style="margin-top: 20px;">
734 
-                    <script type="text/javascript" src="calendar_files/js/caleandar.js"></script>
735 
-                    <script type="text/javascript" src="calendar_files/js/events.js"></script>
736 
-                </div>
737 
-
738 
-                </ons-card>--
739 
-                <br><br><br>-->
831 
+
740 
                 <ons-card>
 832 
                 <ons-card>
741 
                 <div id="logo" style="text-align: center">
 833 
                 <div id="logo" style="text-align: center">
742 
                     <img src="img/culturalpr1800x3200-2-01.png" style="width:150px;height:100px">
 834 
                     <img src="img/culturalpr1800x3200-2-01.png" style="width:150px;height:100px">

+ 10
- 8
platforms/android/app/src/main/assets/www/js/azar.js View File

3 
 // begin accessing JSON data here
 3 
 // begin accessing JSON data here
4 
 var data = JSON.parse(localStorage.getItem("AZAR"));
 4 
 var data = JSON.parse(localStorage.getItem("AZAR"));
5
5
6 
+// grabs the page with home id
6 
 var page = document.getElementById("home");
 7 
 var page = document.getElementById("home");
7
8
9 
+// assigns a random number to randomly determine which image and information to display in the home page.
10 
+// Then it grabs the image container of the card, and inserts the random image. It also garbs the content container
11 
+// and puts the corresponding title and description. This section activates on application startup.
8 
 var aleatorio = Math.floor(Math.random()*52);
 12 
 var aleatorio = Math.floor(Math.random()*52);
9 
-document.getElementById("image").innerHTML = `<img src="img/${aleatorio}.jpg" width="100%" height="auto">`;
10 
-document.getElementById("Content").innerHTML = "<h4>" + data[aleatorio].titulo + "</h4>" + data[aleatorio].texto;
13 
+document.getElementById("image").innerHTML = `<img src="img/${aleatorio}.jpg" width="100%" height="350px">`;
14 
+document.getElementById("Content").innerHTML = "<br><h4>" + data[aleatorio].titulo + "</h4>" + data[aleatorio].texto;
11
15
16 
+// This section activates every time you switch back to the home tab. It first empties the content on the card
17 
+// and then it newly assigns a new random number to fetch a new random image and description to display on home.
12 
 page.addEventListener("show", function(event){
 18 
 page.addEventListener("show", function(event){
13 
     document.getElementById("image").innerHTML='';
 19 
     document.getElementById("image").innerHTML='';
14 
     document.getElementById("Content").innerHTML='';
 20 
     document.getElementById("Content").innerHTML='';
15 
     var aleatorio = Math.floor(Math.random()*32);
 21 
     var aleatorio = Math.floor(Math.random()*32);
16 
-    //var azar = document.getElementById("azar");
17 
-    //var img = ons.createElement(`<img src="img/${aleatorio}.png">`);
18 
-    document.getElementById("image").innerHTML = `<img src="img/${aleatorio}.jpg" width="100%" height="auto">`;
19 
-    //document.getElementById("Title").innerHTML = data[aleatorio].Renglones;
20 
-    document.getElementById("Content").innerHTML = "<h4>" + data[aleatorio].titulo + "</h4>" + data[aleatorio].texto;
21 
-    //azar.appendChild(img);
22 
+    document.getElementById("image").innerHTML = `<img src="img/${aleatorio}.jpg" width="100%" height="350px">`;
23 
+    document.getElementById("Content").innerHTML = "<br><h4>" + data[aleatorio].titulo + "</h4>" + data[aleatorio].texto;
22 
     });
 24 
     });
23
25
24
26

+ 119
- 24
platforms/browser/www/index.html View File

86 
                 <ons-card id="azar"><!--style="height: 100%"-->
 86 
                 <ons-card id="azar"><!--style="height: 100%"-->
87
87
88 
                     <!--<div class="title" id="Title"></div>-->
 88 
                     <!--<div class="title" id="Title"></div>-->
89 
-                    <div id="image" style= "max-height:500px"></div><br>
89 
+                    <div id="image" style= "max-height:450px"></div><br>
90 
                     <div class="content" id="Content"></div>
 90 
                     <div class="content" id="Content"></div>
91 
                     <!--This javascript will randomly choose an image and information of a certain type of artesania used by a certain artists-->
 91 
                     <!--This javascript will randomly choose an image and information of a certain type of artesania used by a certain artists-->
92 
                     <!--For now all this information is stored inside a .csv file-->
 92 
                     <!--For now all this information is stored inside a .csv file-->
260 
                             //'title':'${Artesano.Nombre}','esp': '${info}'
 260 
                             //'title':'${Artesano.Nombre}','esp': '${info}'
261 
                             //Tries to pass all the info of each artesano into a new page, the page that display this information is 'artesano.html', not to be confused with 'artesanias.html' or 'artesanos.html'(current page)
 261 
                             //Tries to pass all the info of each artesano into a new page, the page that display this information is 'artesano.html', not to be confused with 'artesanias.html' or 'artesanos.html'(current page)
262 
                             //And puts this into the 'item' variable
 262 
                             //And puts this into the 'item' variable
263 
-                            var item = ons.createElement(`<ons-list-item onclick="myNavigator.pushPage('artesano.html', { data: { title: '${Artesano.Nombre}', mun: '${Artesano.Municipio}', tel: '${Artesano["Telefono 1"]}', email: '${Artesano["E-mail"]}', esp: '${Artesano.Especificacion}', redes: '${Artesano["E-Commerce 1"]}', tecnicas: '${Artesano["Tecnica 1"]}' } })" tappable>
263 
+                            var item = ons.createElement(`<ons-list-item onclick="myNavigator.pushPage('artesano.html', { data: { title: '${Artesano.Nombre.replace(/"/g, " ")}', mun: '${Artesano.Municipio}', tel: '${Artesano["Telefono 1"]}', email: '${Artesano["Email"]}', esp: '${Artesano.Especificacion}', redes: '${Artesano["E-Commerce 1"]}', tecnicas: '${Artesano["Tecnica"]}' } })" tappable>
264 
                         <div class="title">${Artesano.Nombre}</div>
 264 
                         <div class="title">${Artesano.Nombre}</div>
265 
                     </ons-list-item>`);
 265 
                     </ons-list-item>`);
266
266
367 
                              for(var i=0; i<results.length; i++) {
 367 
                              for(var i=0; i<results.length; i++) {
368
368
369 
                                  //if(Esp[num] in artesanos_json.) {}
 369 
                                  //if(Esp[num] in artesanos_json.) {}
370 
-                                 results[i].Nombre = results[i].Nombre + " " + results[i]["Apellido Paterno"] + " " + results[i]["Apellido Materno"]
371 
-                                 Artesanos+=`${results[i].Nombre}|`
372 
-                                 ArtesanosInfo+=`${results[i].Municipio}|${results[i]["Telefono 1"]}|${results[i]["E-mail"]}|${results[i].Especificacion}|${results[i]["Tecnica 1"]}&&`
370 
+                                 //results[i].Nombre = results[i].Nombre + " " + results[i]["Apellido Paterno"] + " " + results[i]["Apellido Materno"]
371 
+                                 ANombre = results[i].Nombre + " " + results[i]["Apellido Paterno"] + " " + results[i]["Apellido Materno"]
372 
+                                 Artesanos+=`${ANombre}|`
373 
+                                 ArtesanosInfo+=`${results[i].Municipio}|${results[i]["Telefono 1"]}|${results[i]["Email"]}|${results[i].Especificacion}|${results[i]["Tecnica"]}&&`
373 
                                  //`<a id='home.html'>${Artesania.artesano} | ${Artesania.municipio}</a> `
 374 
                                  //`<a id='home.html'>${Artesania.artesano} | ${Artesania.municipio}</a> `
374 
                              }
 375 
                              }
375
376
551 
                     for (i = 0; i < all_artesanos.length;i++){
 552 
                     for (i = 0; i < all_artesanos.length;i++){
552 
                         all_artesanos[i].Nombre = all_artesanos[i].Nombre +  " " + all_artesanos[i]["Apellido Paterno"] + " " + all_artesanos[i]["Apellido Materno"];
 553 
                         all_artesanos[i].Nombre = all_artesanos[i].Nombre +  " " + all_artesanos[i]["Apellido Paterno"] + " " + all_artesanos[i]["Apellido Materno"];
553 
                         var artesano = ons.createElement(`<ons-list-item class = "artists"
 554 
                         var artesano = ons.createElement(`<ons-list-item class = "artists"
554 
-                        onclick="SNavigator.pushPage('artesano.html', { data: {title: '${all_artesanos[i].Nombre}', mun: '${all_artesanos[i].Municipio}', tel: '${all_artesanos[i]["Telefono 1"]}', email: '${all_artesanos[i]["E-mail"]}', esp: '${all_artesanos[i].Especificacion}', redes: '${all_artesanos[i]["E-Commerce 1"]}', tecnicas: '${all_artesanos[i]["Tecnica 1"]}' } })" tappable>
555 
+                        onclick="SNavigator.pushPage('artesano_s.html', { data: {title: '${all_artesanos[i].Nombre.replace(/"/g, " ")}', mun: '${all_artesanos[i].Municipio}', tel: '${all_artesanos[i]["Telefono 1"]}', email: '${all_artesanos[i]["Email"]}', esp: '${all_artesanos[i].Especificacion}', redes: '${all_artesanos[i]["E-Commerce 1"]}', tecnicas: '${all_artesanos[i]["Tecnica"]}' } })" tappable>
555 
                         <div>${all_artesanos[i].Nombre}</div>
 556 
                         <div>${all_artesanos[i].Nombre}</div>
556 
                     </ons-list-item>`);
 557 
                     </ons-list-item>`);
557 
                         document.getElementById('results').appendChild(artesano);
 558 
                         document.getElementById('results').appendChild(artesano);
572 
                     <div class = "center"></div>
 573 
                     <div class = "center"></div>
573 
                 </ons-toolbar>
 574 
                 </ons-toolbar>
574 
                 <body>
 575 
                 <body>
575 
-                    <!-- This is where we'll put all the information of that artsts -->
576 
-                    <ons-card id="all"></ons-card>
576 
+                	<font size="+1">
577 
+                    	<!-- This is where we'll put all the information of that artsts -->
578 
+                    	<ons-card id="all"></ons-card>
579 
+                    </font>
577 
                 </body>
 580 
                 </body>
578 
                 <script>
 581 
                 <script>
579 
                     //when it opens this page this function starts to run, it first recieves the information that was sent to "artesano.html"
 582 
                     //when it opens this page this function starts to run, it first recieves the information that was sent to "artesano.html"
669 
                 </script>
 672 
                 </script>
670 
             </ons-page>
 673 
             </ons-page>
671 
         </template>
 674 
         </template>
675 
+
676 
+         <template id= "artesano_s.html">
677 
+            <ons-page id = "artesano_s">
678 
+                <ons-toolbar>
679 
+                    <!-- Pretty self explanatory, its a button that goes back to the previous page -->
680 
+                    <div class = "left"> <ons-back-button> Atras </ons-back-button></div>
681 
+                    <div class = "center"></div>
682 
+                </ons-toolbar>
683 
+                <body>
684 
+                    <!-- This is where we'll put all the information of that artsts -->
685 
+                    <font size="+1">
686 
+                        <ons-card id="all2"></ons-card>
687 
+                    </font>
688 
+                </body>
689 
+                <script>
690 
+                    //when it opens this page this function starts to run, it first recieves the information that was sent to "artesano.html"
691 
+                    ons.getScriptPage().onInit = function () {
692 
+                        this.querySelector('ons-toolbar div.center').textContent = this.data.title;
693 
+
694 
+                        var data = '',
695 
+                            mun = this.data.mun,
696 
+                            tel = this.data.tel,
697 
+                            em = this.data.email,
698 
+                            esp = this.data.esp,
699 
+                            redes = this.data.redes,
700 
+                            tecnicas = this.data.tecnicas;
701 
+
702 
+                        //here the email is the string made from the start to where the '#' is.
703 
+
704 
+
705 
+                        //Here it's dividing all the especificaciones and writing them into the page (data) and then goes to the next line
706 
+                        //if it has many especificaciones then it will replace all the ';' in it with ',' and writes it into the page
707 
+                        //but if theres only one then you just write it into the page
708 
+                        if(esp.trim() != ""){
709 
+                            if(esp.includes(";", 0)){
710 
+                                esp=esp.replace(/;/g,", ");
711 
+                                data+='Tipos de artesanías: '+esp+'<br>';
712 
+                            }
713 
+                            else {
714 
+                                data+='Tipo de artesanía: '+esp+'<br>';
715 
+                            }
716 
+                        }
672
717
718 
+                        if(tecnicas.trim() != ''){
719 
+                            if(tecnicas.includes(";", 0)){
720 
+                                tecnicas = tecnicas.replace(/;/g,", ");
721 
+                                data+='Técnicas que usan: '+tecnicas+'<br>';
722 
+                            }
723 
+                            else {
724 
+                                data+='Técnicas que usan: '+tecnicas+'<br>';
725 
+                            }
726 
+                        }
727 
+                        //console.log("Las redes son..."+this.data.redes);
728 
+                        //Here it's making sure theres something in municipio and writing their municipio into the page
729 
+                        if(mun.trim() != ""){
730 
+                            data+='Municipio: '+ mun +'<br>';
731 
+                        }
732 
+
733 
+                        //Here it's writing their email, in blue color and its used as a link to send one when it's clicked, then it goes to the next line
734 
+                        //Whenever the variable is empty or if it has "NO TIENE" then it doesnt write anything
735 
+                        if(em.trim() != "" & em.toUpperCase().trim() != "NO TIENE"){
736 
+                            data+='Correo Electr\u00f3nico: <a style="color:blue" href="mailto: '+em+'"><u>'+em+'</u></a><br>';
737 
+                        }
738 
+
739 
+                        //Here it's writing their phone number into the page,its in blue and whenever its clicked the app will redirect the user to call them, then it goes to the next line
740 
+                        if(tel.trim() != "" ){
741 
+                            data+='Tel\u00e9fono: <a style="color:blue" href="tel: '+ tel +'"><u>'+ tel +'</u></a><br>';
742 
+                        }
743 
+
744 
+                        console.log("Redes: "+redes);
745 
+
746 
+                        //Here it has to decide what to do depending on the links they give to their social media pages
747 
+                        //if the link is to a facebook, instagram or myspace account then it will show the picture of the social media site, and when you click the picture then the app redirects you to their social media.
748 
+                        //The alt attribute is required for images, it's in case theres no internet connection, then it will display that tet instead, I think screen readers can also read that text
749 
+                        //If the link is to another website (but isn't a mailto link) then it will display a default picture we chose to display a default web browser, like the other ones clikcing on it will take you to the link.
750 
+                        //If it's none of them then it will not display anything
751 
+                        if(redes.includes("facebook")){
752 
+
753 
+                            console.log(redes.substring(1,redes.length-2));
754 
+                            data+='<br><a href="'+ redes.substring(1,redes.length-2) + '"><img src="img/facebook.png" alt="Facebook"style="width:35px;height:35px;border:0;"><br>';
755 
+                        }
756 
+                        else if(redes.includes("instagram")){
757 
+                            console.log(redes.substring(1,redes.length-2));
758 
+                            data+='<br><a href="'+ redes.substring(1,redes.length-2) + '"><img src="img/instagram.png" alt="Instagram"style="width:35px;height:35px;border:0;"><br>';
759 
+                        }
760 
+                        else if(redes.includes("myspace")){
761 
+                            console.log(redes.substring(1,redes.length-2));
762 
+                            data+='<br><a href="'+ redes.substring(1,redes.length-2) + '"><img src="img/MySpace.png" alt="MySpace"style="width:35px;height:35px;border:0;"><br>';
763 
+                        }
764 
+                        else if((redes.includes(".org") || redes.includes(".com")) && !redes.includes("mailto")){
765 
+                            redes = redes.substr(redes.indexOf("#")+1,redes.length);
766 
+                            redes = redes.substr(0, redes.length-1);
767 
+                            console.log(redes);
768 
+                            data+='<br><a href="'+ redes + '"><img src="img/internet.jpg" style="width:35px;height:35px;border:0;"><br>';
769 
+                        }
770 
+                        else if(redes.includes("#") || redes.includes("mailto")){
771 
+                            console.log("tiene un disparate");
772 
+                        } else {
773 
+                            console.log("no tiene nada");
774 
+                        }
775 
+
776 
+                        //This is the part that allows eveything (data) to be displayed
777 
+                        document.getElementById("all2").innerHTML = `${data}`;
778 
+
779 
+                    }
780 
+                </script>
781 
+            </ons-page>
782 
+        </template>
673 
 <!-- ------------------------------------------------------------------------------------------------------------------------------------------------------- -->
 783 
 <!-- ------------------------------------------------------------------------------------------------------------------------------------------------------- -->
674
784
675 
         <template id="renglones.html">
 785 
         <template id="renglones.html">
676 
           <ons-navigator swipeable animation="slide" id="myNavigator">
 786 
           <ons-navigator swipeable animation="slide" id="myNavigator">
677 
             <ons-page id="renglones">
 787 
             <ons-page id="renglones">
678
788
679 
-            <!--div class="search-bar">
680 
-                 <p style="text-align: center; margin-top: 10px;">
681 
-                    <ons-search-input placeholder="Search" onchange="ons.notification.alert('Searched for: ' + this.value)"
682 
-           style="width: 96%; margin: 6px auto 6px auto;"></ons-search-input>
683 
-                </p>
684 
-            </div-->
685 
-
686 
             <ons-card id="list">
 789 
             <ons-card id="list">
687 
               <script type="text/javascript" src="js/renglones.js"></script>
 790 
               <script type="text/javascript" src="js/renglones.js"></script>
688 
             </ons-card>
 791 
             </ons-card>
725
828
726 
         <template id="ferias.html">
 829 
         <template id="ferias.html">
727 
             <ons-page id="ferias">
 830 
             <ons-page id="ferias">
728 
-                <!--<ons-card>
729 
-
730 
-                <div id = "caleandar" class = "calendar" style="margin-top: 20px;">
731 
-                    <script type="text/javascript" src="calendar_files/js/caleandar.js"></script>
732 
-                    <script type="text/javascript" src="calendar_files/js/events.js"></script>
733 
-                </div>
734 
-
735 
-                </ons-card>--
736 
-                <br><br><br>-->
831 
+
737 
                 <ons-card>
 832 
                 <ons-card>
738 
                 <div id="logo" style="text-align: center">
 833 
                 <div id="logo" style="text-align: center">
739 
                     <img src="img/culturalpr1800x3200-2-01.png" style="width:150px;height:100px">
 834 
                     <img src="img/culturalpr1800x3200-2-01.png" style="width:150px;height:100px">

+ 10
- 8
platforms/browser/www/js/azar.js View File

3 
 // begin accessing JSON data here
 3 
 // begin accessing JSON data here
4 
 var data = JSON.parse(localStorage.getItem("AZAR"));
 4 
 var data = JSON.parse(localStorage.getItem("AZAR"));
5
5
6 
+// grabs the page with home id
6 
 var page = document.getElementById("home");
 7 
 var page = document.getElementById("home");
7
8
9 
+// assigns a random number to randomly determine which image and information to display in the home page.
10 
+// Then it grabs the image container of the card, and inserts the random image. It also garbs the content container
11 
+// and puts the corresponding title and description. This section activates on application startup.
8 
 var aleatorio = Math.floor(Math.random()*52);
 12 
 var aleatorio = Math.floor(Math.random()*52);
9 
-document.getElementById("image").innerHTML = `<img src="img/${aleatorio}.jpg" width="100%" height="auto">`;
10 
-document.getElementById("Content").innerHTML = "<h4>" + data[aleatorio].titulo + "</h4>" + data[aleatorio].texto;
13 
+document.getElementById("image").innerHTML = `<img src="img/${aleatorio}.jpg" width="100%" height="350px">`;
14 
+document.getElementById("Content").innerHTML = "<br><h4>" + data[aleatorio].titulo + "</h4>" + data[aleatorio].texto;
11
15
16 
+// This section activates every time you switch back to the home tab. It first empties the content on the card
17 
+// and then it newly assigns a new random number to fetch a new random image and description to display on home.
12 
 page.addEventListener("show", function(event){
 18 
 page.addEventListener("show", function(event){
13 
     document.getElementById("image").innerHTML='';
 19 
     document.getElementById("image").innerHTML='';
14 
     document.getElementById("Content").innerHTML='';
 20 
     document.getElementById("Content").innerHTML='';
15 
     var aleatorio = Math.floor(Math.random()*32);
 21 
     var aleatorio = Math.floor(Math.random()*32);
16 
-    //var azar = document.getElementById("azar");
17 
-    //var img = ons.createElement(`<img src="img/${aleatorio}.png">`);
18 
-    document.getElementById("image").innerHTML = `<img src="img/${aleatorio}.jpg" width="100%" height="auto">`;
19 
-    //document.getElementById("Title").innerHTML = data[aleatorio].Renglones;
20 
-    document.getElementById("Content").innerHTML = "<h4>" + data[aleatorio].titulo + "</h4>" + data[aleatorio].texto;
21 
-    //azar.appendChild(img);
22 
+    document.getElementById("image").innerHTML = `<img src="img/${aleatorio}.jpg" width="100%" height="350px">`;
23 
+    document.getElementById("Content").innerHTML = "<br><h4>" + data[aleatorio].titulo + "</h4>" + data[aleatorio].texto;
22 
     });
 24 
     });
23
25
24
26

+ 2
- 2
platforms/browser/www/js/searchfunctions.js View File

123
123
124
124
125 
 function find_tecnicas(i,input){
 125 
 function find_tecnicas(i,input){
126 
-    var tecnicas = all_artesanos[i]["Tecnica 1"];
126 
+    var tecnicas = all_artesanos[i]["Tecnica"];
127 
     tecnicas = tecnicas.trim().toLowerCase();
 127 
     tecnicas = tecnicas.trim().toLowerCase();
128 
     tecnicas = acento_replace(tecnicas);
 128 
     tecnicas = acento_replace(tecnicas);
129 
     if(tecnicas.search(input) != -1){
 129 
     if(tecnicas.search(input) != -1){
170 
 //trata de ver si el input es parte del email del artista i
 170 
 //trata de ver si el input es parte del email del artista i
171 
 //Mayuscula and acento proof
 171 
 //Mayuscula and acento proof
172 
 function find_email(i,input){
 172 
 function find_email(i,input){
173 
-    var email = all_artesanos[i]["E-mail"];
173 
+    var email = all_artesanos[i]["Email"];
174 
     email = email.trim().toLowerCase();
 174 
     email = email.trim().toLowerCase();
175 
     email = acento_replace(email);
 175 
     email = acento_replace(email);
176 
     if(email.search(input) != -1){
 176 
     if(email.search(input) != -1){

+ 111
- 19
www/index.html View File

86 
                 <ons-card id="azar"><!--style="height: 100%"-->
 86 
                 <ons-card id="azar"><!--style="height: 100%"-->
87
87
88 
                     <!--<div class="title" id="Title"></div>-->
 88 
                     <!--<div class="title" id="Title"></div>-->
89 
-                    <div id="image" style= "max-height:500px"></div><br>
89 
+                    <div id="image" style= "max-height:450px"></div><br>
90 
                     <div class="content" id="Content"></div>
 90 
                     <div class="content" id="Content"></div>
91 
                     <!--This javascript will randomly choose an image and information of a certain type of artesania used by a certain artists-->
 91 
                     <!--This javascript will randomly choose an image and information of a certain type of artesania used by a certain artists-->
92 
                     <!--For now all this information is stored inside a .csv file-->
 92 
                     <!--For now all this information is stored inside a .csv file-->
260 
                             //'title':'${Artesano.Nombre}','esp': '${info}'
 260 
                             //'title':'${Artesano.Nombre}','esp': '${info}'
261 
                             //Tries to pass all the info of each artesano into a new page, the page that display this information is 'artesano.html', not to be confused with 'artesanias.html' or 'artesanos.html'(current page)
 261 
                             //Tries to pass all the info of each artesano into a new page, the page that display this information is 'artesano.html', not to be confused with 'artesanias.html' or 'artesanos.html'(current page)
262 
                             //And puts this into the 'item' variable
 262 
                             //And puts this into the 'item' variable
263 
-                            var item = ons.createElement(`<ons-list-item onclick="myNavigator.pushPage('artesano.html', { data: { title: '${Artesano.Nombre}', mun: '${Artesano.Municipio}', tel: '${Artesano["Telefono 1"]}', email: '${Artesano["Email"]}', esp: '${Artesano.Especificacion}', redes: '${Artesano["E-Commerce 1"]}', tecnicas: '${Artesano["Tecnica"]}' } })" tappable>
263 
+                            var item = ons.createElement(`<ons-list-item onclick="myNavigator.pushPage('artesano.html', { data: { title: '${Artesano.Nombre.replace(/"/g, " ")}', mun: '${Artesano.Municipio}', tel: '${Artesano["Telefono 1"]}', email: '${Artesano["Email"]}', esp: '${Artesano.Especificacion}', redes: '${Artesano["E-Commerce 1"]}', tecnicas: '${Artesano["Tecnica"]}' } })" tappable>
264 
                         <div class="title">${Artesano.Nombre}</div>
 264 
                         <div class="title">${Artesano.Nombre}</div>
265 
                     </ons-list-item>`);
 265 
                     </ons-list-item>`);
266
266
552 
                     for (i = 0; i < all_artesanos.length;i++){
 552 
                     for (i = 0; i < all_artesanos.length;i++){
553 
                         all_artesanos[i].Nombre = all_artesanos[i].Nombre +  " " + all_artesanos[i]["Apellido Paterno"] + " " + all_artesanos[i]["Apellido Materno"];
 553 
                         all_artesanos[i].Nombre = all_artesanos[i].Nombre +  " " + all_artesanos[i]["Apellido Paterno"] + " " + all_artesanos[i]["Apellido Materno"];
554 
                         var artesano = ons.createElement(`<ons-list-item class = "artists"
 554 
                         var artesano = ons.createElement(`<ons-list-item class = "artists"
555 
-                        onclick="SNavigator.pushPage('artesano.html', { data: {title: '${all_artesanos[i].Nombre}', mun: '${all_artesanos[i].Municipio}', tel: '${all_artesanos[i]["Telefono 1"]}', email: '${all_artesanos[i]["Email"]}', esp: '${all_artesanos[i].Especificacion}', redes: '${all_artesanos[i]["E-Commerce 1"]}', tecnicas: '${all_artesanos[i]["Tecnica"]}' } })" tappable>
555 
+                        onclick="SNavigator.pushPage('artesano_s.html', { data: {title: '${all_artesanos[i].Nombre.replace(/"/g, " ")}', mun: '${all_artesanos[i].Municipio}', tel: '${all_artesanos[i]["Telefono 1"]}', email: '${all_artesanos[i]["Email"]}', esp: '${all_artesanos[i].Especificacion}', redes: '${all_artesanos[i]["E-Commerce 1"]}', tecnicas: '${all_artesanos[i]["Tecnica"]}' } })" tappable>
556 
                         <div>${all_artesanos[i].Nombre}</div>
 556 
                         <div>${all_artesanos[i].Nombre}</div>
557 
                     </ons-list-item>`);
 557 
                     </ons-list-item>`);
558 
                         document.getElementById('results').appendChild(artesano);
 558 
                         document.getElementById('results').appendChild(artesano);
672 
                 </script>
 672 
                 </script>
673 
             </ons-page>
 673 
             </ons-page>
674 
         </template>
 674 
         </template>
675 
+
676 
+         <template id= "artesano_s.html">
677 
+            <ons-page id = "artesano_s">
678 
+                <ons-toolbar>
679 
+                    <!-- Pretty self explanatory, its a button that goes back to the previous page -->
680 
+                    <div class = "left"> <ons-back-button> Atras </ons-back-button></div>
681 
+                    <div class = "center"></div>
682 
+                </ons-toolbar>
683 
+                <body>
684 
+                    <!-- This is where we'll put all the information of that artsts -->
685 
+                    <font size="+1">
686 
+                        <ons-card id="all2"></ons-card>
687 
+                    </font>
688 
+                </body>
689 
+                <script>
690 
+                    //when it opens this page this function starts to run, it first recieves the information that was sent to "artesano.html"
691 
+                    ons.getScriptPage().onInit = function () {
692 
+                        this.querySelector('ons-toolbar div.center').textContent = this.data.title;
693 
+
694 
+                        var data = '',
695 
+                            mun = this.data.mun,
696 
+                            tel = this.data.tel,
697 
+                            em = this.data.email,
698 
+                            esp = this.data.esp,
699 
+                            redes = this.data.redes,
700 
+                            tecnicas = this.data.tecnicas;
701 
+
702 
+                        //here the email is the string made from the start to where the '#' is.
703 
+
704 
+
705 
+                        //Here it's dividing all the especificaciones and writing them into the page (data) and then goes to the next line
706 
+                        //if it has many especificaciones then it will replace all the ';' in it with ',' and writes it into the page
707 
+                        //but if theres only one then you just write it into the page
708 
+                        if(esp.trim() != ""){
709 
+                            if(esp.includes(";", 0)){
710 
+                                esp=esp.replace(/;/g,", ");
711 
+                                data+='Tipos de artesanías: '+esp+'<br>';
712 
+                            }
713 
+                            else {
714 
+                                data+='Tipo de artesanía: '+esp+'<br>';
715 
+                            }
716 
+                        }
717 
+
718 
+                        if(tecnicas.trim() != ''){
719 
+                            if(tecnicas.includes(";", 0)){
720 
+                                tecnicas = tecnicas.replace(/;/g,", ");
721 
+                                data+='Técnicas que usan: '+tecnicas+'<br>';
722 
+                            }
723 
+                            else {
724 
+                                data+='Técnicas que usan: '+tecnicas+'<br>';
725 
+                            }
726 
+                        }
727 
+                        //console.log("Las redes son..."+this.data.redes);
728 
+                        //Here it's making sure theres something in municipio and writing their municipio into the page
729 
+                        if(mun.trim() != ""){
730 
+                            data+='Municipio: '+ mun +'<br>';
731 
+                        }
732 
+
733 
+                        //Here it's writing their email, in blue color and its used as a link to send one when it's clicked, then it goes to the next line
734 
+                        //Whenever the variable is empty or if it has "NO TIENE" then it doesnt write anything
735 
+                        if(em.trim() != "" & em.toUpperCase().trim() != "NO TIENE"){
736 
+                            data+='Correo Electr\u00f3nico: <a style="color:blue" href="mailto: '+em+'"><u>'+em+'</u></a><br>';
737 
+                        }
738 
+
739 
+                        //Here it's writing their phone number into the page,its in blue and whenever its clicked the app will redirect the user to call them, then it goes to the next line
740 
+                        if(tel.trim() != "" ){
741 
+                            data+='Tel\u00e9fono: <a style="color:blue" href="tel: '+ tel +'"><u>'+ tel +'</u></a><br>';
742 
+                        }
675
743
744 
+                        console.log("Redes: "+redes);
745 
+
746 
+                        //Here it has to decide what to do depending on the links they give to their social media pages
747 
+                        //if the link is to a facebook, instagram or myspace account then it will show the picture of the social media site, and when you click the picture then the app redirects you to their social media.
748 
+                        //The alt attribute is required for images, it's in case theres no internet connection, then it will display that tet instead, I think screen readers can also read that text
749 
+                        //If the link is to another website (but isn't a mailto link) then it will display a default picture we chose to display a default web browser, like the other ones clikcing on it will take you to the link.
750 
+                        //If it's none of them then it will not display anything
751 
+                        if(redes.includes("facebook")){
752 
+
753 
+                            console.log(redes.substring(1,redes.length-2));
754 
+                            data+='<br><a href="'+ redes.substring(1,redes.length-2) + '"><img src="img/facebook.png" alt="Facebook"style="width:35px;height:35px;border:0;"><br>';
755 
+                        }
756 
+                        else if(redes.includes("instagram")){
757 
+                            console.log(redes.substring(1,redes.length-2));
758 
+                            data+='<br><a href="'+ redes.substring(1,redes.length-2) + '"><img src="img/instagram.png" alt="Instagram"style="width:35px;height:35px;border:0;"><br>';
759 
+                        }
760 
+                        else if(redes.includes("myspace")){
761 
+                            console.log(redes.substring(1,redes.length-2));
762 
+                            data+='<br><a href="'+ redes.substring(1,redes.length-2) + '"><img src="img/MySpace.png" alt="MySpace"style="width:35px;height:35px;border:0;"><br>';
763 
+                        }
764 
+                        else if((redes.includes(".org") || redes.includes(".com")) && !redes.includes("mailto")){
765 
+                            redes = redes.substr(redes.indexOf("#")+1,redes.length);
766 
+                            redes = redes.substr(0, redes.length-1);
767 
+                            console.log(redes);
768 
+                            data+='<br><a href="'+ redes + '"><img src="img/internet.jpg" style="width:35px;height:35px;border:0;"><br>';
769 
+                        }
770 
+                        else if(redes.includes("#") || redes.includes("mailto")){
771 
+                            console.log("tiene un disparate");
772 
+                        } else {
773 
+                            console.log("no tiene nada");
774 
+                        }
775 
+
776 
+                        //This is the part that allows eveything (data) to be displayed
777 
+                        document.getElementById("all2").innerHTML = `${data}`;
778 
+
779 
+                    }
780 
+                </script>
781 
+            </ons-page>
782 
+        </template>
676 
 <!-- ------------------------------------------------------------------------------------------------------------------------------------------------------- -->
 783 
 <!-- ------------------------------------------------------------------------------------------------------------------------------------------------------- -->
677
784
678 
         <template id="renglones.html">
 785 
         <template id="renglones.html">
679 
           <ons-navigator swipeable animation="slide" id="myNavigator">
 786 
           <ons-navigator swipeable animation="slide" id="myNavigator">
680 
             <ons-page id="renglones">
 787 
             <ons-page id="renglones">
681
788
682 
-            <!--div class="search-bar">
683 
-                 <p style="text-align: center; margin-top: 10px;">
684 
-                    <ons-search-input placeholder="Search" onchange="ons.notification.alert('Searched for: ' + this.value)"
685 
-           style="width: 96%; margin: 6px auto 6px auto;"></ons-search-input>
686 
-                </p>
687 
-            </div-->
688 
-
689 
             <ons-card id="list">
 789 
             <ons-card id="list">
690 
               <script type="text/javascript" src="js/renglones.js"></script>
 790 
               <script type="text/javascript" src="js/renglones.js"></script>
691 
             </ons-card>
 791 
             </ons-card>
728
828
729 
         <template id="ferias.html">
 829 
         <template id="ferias.html">
730 
             <ons-page id="ferias">
 830 
             <ons-page id="ferias">
731 
-                <!--<ons-card>
732 
-
733 
-                <div id = "caleandar" class = "calendar" style="margin-top: 20px;">
734 
-                    <script type="text/javascript" src="calendar_files/js/caleandar.js"></script>
735 
-                    <script type="text/javascript" src="calendar_files/js/events.js"></script>
736 
-                </div>
737 
-
738 
-                </ons-card>--
739 
-                <br><br><br>-->
831 
+
740 
                 <ons-card>
 832 
                 <ons-card>
741 
                 <div id="logo" style="text-align: center">
 833 
                 <div id="logo" style="text-align: center">
742 
                     <img src="img/culturalpr1800x3200-2-01.png" style="width:150px;height:100px">
 834 
                     <img src="img/culturalpr1800x3200-2-01.png" style="width:150px;height:100px">

+ 10
- 8
www/js/azar.js View File

3 
 // begin accessing JSON data here
 3 
 // begin accessing JSON data here
4 
 var data = JSON.parse(localStorage.getItem("AZAR"));
 4 
 var data = JSON.parse(localStorage.getItem("AZAR"));
5
5
6 
+// grabs the page with home id
6 
 var page = document.getElementById("home");
 7 
 var page = document.getElementById("home");
7
8
9 
+// assigns a random number to randomly determine which image and information to display in the home page.
10 
+// Then it grabs the image container of the card, and inserts the random image. It also garbs the content container
11 
+// and puts the corresponding title and description. This section activates on application startup.
8 
 var aleatorio = Math.floor(Math.random()*52);
 12 
 var aleatorio = Math.floor(Math.random()*52);
9 
-document.getElementById("image").innerHTML = `<img src="img/${aleatorio}.jpg" width="100%" height="auto">`;
10 
-document.getElementById("Content").innerHTML = "<h4>" + data[aleatorio].titulo + "</h4>" + data[aleatorio].texto;
13 
+document.getElementById("image").innerHTML = `<img src="img/${aleatorio}.jpg" width="100%" height="350px">`;
14 
+document.getElementById("Content").innerHTML = "<br><h4>" + data[aleatorio].titulo + "</h4>" + data[aleatorio].texto;
11
15
16 
+// This section activates every time you switch back to the home tab. It first empties the content on the card
17 
+// and then it newly assigns a new random number to fetch a new random image and description to display on home.
12 
 page.addEventListener("show", function(event){
 18 
 page.addEventListener("show", function(event){
13 
     document.getElementById("image").innerHTML='';
 19 
     document.getElementById("image").innerHTML='';
14 
     document.getElementById("Content").innerHTML='';
 20 
     document.getElementById("Content").innerHTML='';
15 
     var aleatorio = Math.floor(Math.random()*32);
 21 
     var aleatorio = Math.floor(Math.random()*32);
16 
-    //var azar = document.getElementById("azar");
17 
-    //var img = ons.createElement(`<img src="img/${aleatorio}.png">`);
18 
-    document.getElementById("image").innerHTML = `<img src="img/${aleatorio}.jpg" width="100%" height="auto">`;
19 
-    //document.getElementById("Title").innerHTML = data[aleatorio].Renglones;
20 
-    document.getElementById("Content").innerHTML = "<h4>" + data[aleatorio].titulo + "</h4>" + data[aleatorio].texto;
21 
-    //azar.appendChild(img);
22 
+    document.getElementById("image").innerHTML = `<img src="img/${aleatorio}.jpg" width="100%" height="350px">`;
23 
+    document.getElementById("Content").innerHTML = "<br><h4>" + data[aleatorio].titulo + "</h4>" + data[aleatorio].texto;
22 
     });
 24 
     });
23
25
24
26