added filter from bd, added apearance with onClick

ci/application/models/Products_model.php

@@ -13,4 +13,5 @@ class Products_model extends CI_Model{
         $query = $this->db->get_where('products', array('slug' => $slug));
         $query = $this->db->get_where('products', array('slug' => $slug));
         return $query->row_array();
         return $query->row_array();
     }
     }
-}
+
\ No newline at end of file
+}

ci/application/views/pages/food_page.php

@@ -120,13 +120,15 @@
 
 
 <table>
 <table>
 <?php foreach ($products as $key => $value): ?>
 <?php foreach ($products as $key => $value): ?>
-   
-    <h1 class=" zoekbox grid-item Deserts" data-text-color="#000" ><?php echo $value['title']; ?></h1>
+	<?php echo $value['title']; ?></h1>
 
 
     <?php echo $value['description']; ?>
     <?php echo $value['description']; ?>
     <?php echo   $value['price'];  ?>
     <?php echo   $value['price'];  ?>
-
-    <?php echo   $value['photo']; ?> 
-    <?php echo  $value['category'] == 'All';   ?> 
+    <?php echo  $value['category'];   ?> 
     <?php endforeach ?>   
     <?php endforeach ?>   
-	</table>
+</table>
\ No newline at end of file
+
+<?php
+$query = "SELECT title FROM 'products' where category=Vegeterian";
+      echo $query;
+?>
\ No newline at end of file

ci/application/views/products/index.php

 <header>
 <header>
 	<h1>Choose an order!</h1>
 	<h1>Choose an order!</h1>
-	<a href="#"><span id="filter_all" onclick="myFunction_All()" data-filter="*">All</span></a>
+	<a href="#"><span id="filter_all" onclick="myFunction_all()" data-filter="*">All</span></a>
     
     
 	<a href="#"><span id="filter_vegeterian" onclick="myFunction_Vegeterian()" data-filter=".Vegeterian">Vegeterian</span></a>
 	<a href="#"><span id="filter_vegeterian" onclick="myFunction_Vegeterian()" data-filter=".Vegeterian">Vegeterian</span></a>
     
     
@@ -11,27 +11,57 @@
 	<a href="#"><span class="filter" onclick="myFunction()" data-filter=".Special">Special offers</span></a>
 	<a href="#"><span class="filter" onclick="myFunction()" data-filter=".Special">Special offers</span></a>
 </header>
 </header>
 
 
+<div id="food_data">
+    
+</div>
 
 
-<div id="block-content">
-<?php foreach ($products as $key => $value): ?>
-   
-    <h1 class=" zoekbox grid-item Deserts" data-text-color="#000" ><?php echo $value['title']; ?></h1>
+<script>
+    function myFunction_all(){
+        var food_data = document.getElementById("food_data");
+        
+        <?php foreach ($products as $key => $value): ?>
+            <?php if ($value['category']=='All'): ?>
+                var ryu = document.createElement("span");
+                ryu.innerHTML = " <?php echo $value['title']; ?>";
+                ryu.innerHTML += "<?php echo $value['description']; ?>";
+            <?php endif ?>
+        <?php endforeach ?>
+                food_data.appendChild(ryu);     
+}
+</script>
 
 
-    <?php echo $value['description']; ?>
-    <?php echo   $value['price'];  ?>
+<script>
+    function myFunction_Vegeterian(){
+        var food_data = document.getElementById("food_data");
+        
+        <?php foreach ($products as $key => $value): ?>
+            <?php if ($value['category']=='Vegeterian'): ?>
+                var ryu = document.createElement("span");
+                ryu.innerHTML = " <?php echo $value['title']; ?>";
+                ryu.innerHTML += "<?php echo $value['description']; ?>";
+            <?php endif ?>
+        <?php endforeach ?>
+                food_data.appendChild(ryu);     
+}
+</script>
+<!--
 
 
-    <?php echo   $value['photo']; ?> 
-    <?php echo  $value['category'] == 'All';   ?> 
-    <?php endforeach ?> 
+<div id="block-content">
     
     
-  <!--  <img src="localhost/ci/index.php/products/images/tortilla.jpg"> 
-     
 <div class="grid">  
 <div class="grid">  
-  <div class="grid-item Deserts Vegeterian" data-text-color="#000" data-image="https:"><a href="https://codepen.io/evalasters/pen/zKoXWX/">Nombre1</a></div>
+  <div class="grid-item All" data-text-color="#000" data-image="https:"><a >
+
+
+</a></div>
 	
 	
-  <div class="grid-item Deserts" data-text-color="#000" data-image="https:"><a href="https://codepen.io/evalasters/pen/bwYwgx">Nombre2</a></div>
+  <div class="grid-item All" data-text-color="#000" data-image="https:"><a href="https://codepen.io/evalasters/pen/bwYwgx">Nombre2
+    <h1 class=" zoekbox grid-item Deserts" data-text-color="#000" >
+      </h1>
+      </a>
+    </div>
 	
 	
-  <div class="grid-item Deserts" data-text-color="#000" data-image="https:"><a href="https://codepen.io/evalasters/pen/KgRGdR">Nombre3</a></div>
+  <div class="grid-item Deserts" data-text-color="#000" data-image="https:"><a href="https://codepen.io/evalasters/pen/KgRGdR">
+      </a></div>
 	
 	
   <div class="grid-item Deserts" data-text-color="#000" data-image="https:" data-trans-color="#FFF"><a href="https://codepen.io/evalasters/pen/RGddRY">Nombre4</a></div>
   <div class="grid-item Deserts" data-text-color="#000" data-image="https:" data-trans-color="#FFF"><a href="https://codepen.io/evalasters/pen/RGddRY">Nombre4</a></div>
 	
 	
@@ -47,7 +77,7 @@
  
  
 </div>
 </div>
     
     
--->
+
 
 
 <!-- partial -->
 <!-- partial -->
   <script src='https://npmcdn.com/isotope-layout@3/dist/isotope.pkgd.js'></script><script  src="./script.js"></script>
   <script src='https://npmcdn.com/isotope-layout@3/dist/isotope.pkgd.js'></script><script  src="./script.js"></script>

ci/application/views/templates/footer.php

@@ -84,6 +84,7 @@
   <script src="<?php echo base_url(); ?>https://maps.googleapis.com/maps/api/js?key=AIzaSyBVWaKrjvy3MaE7SQ74_uJiULgl1JY0H2s&sensor=false"></script>
   <script src="<?php echo base_url(); ?>https://maps.googleapis.com/maps/api/js?key=AIzaSyBVWaKrjvy3MaE7SQ74_uJiULgl1JY0H2s&sensor=false"></script>
   <script src="<?php echo base_url(); ?>assets/js/google-map.js"></script>
   <script src="<?php echo base_url(); ?>assets/js/google-map.js"></script>
   <script src="<?php echo base_url(); ?>assets/js/main.js"></script>
   <script src="<?php echo base_url(); ?>assets/js/main.js"></script>
+<script src="<?php echo base_url(); ?> assets/js/jquery.v3.5.0.js"></script>
 
 
 </body>
 </body>
 </html>
 </html>

ci/application/views/templates/header.php

@@ -26,6 +26,7 @@
     <link rel="stylesheet" href="<?=base_url(); ?>assets/css/flaticon.css">
     <link rel="stylesheet" href="<?=base_url(); ?>assets/css/flaticon.css">
     <link rel="stylesheet" href="<?=base_url(); ?>assets/css/icomoon.css">
     <link rel="stylesheet" href="<?=base_url(); ?>assets/css/icomoon.css">
     <link rel="stylesheet" href="<?=base_url(); ?>assets/css/style.css">
     <link rel="stylesheet" href="<?=base_url(); ?>assets/css/style.css">
+      
   </head>
   </head>
     <body>
     <body>
   	<nav class="navbar navbar-expand-lg navbar-dark ftco_navbar bg-dark ftco-navbar-light" id="ftco-navbar">
   	<nav class="navbar navbar-expand-lg navbar-dark ftco_navbar bg-dark ftco-navbar-light" id="ftco-navbar">

ci/assets/js/main.js

@@ -297,121 +297,3 @@
 })(jQuery);
 })(jQuery);
 
 
 
 
-
-
-
-
-
-var reg;
-
-var iso = new Isotope( '.grid', {
-  itemSelector: '.grid-item',
-  layoutMode: 'fitRows'
-});
-
-// filter functions
-var filterFns = {
-  search: function( itemGrid ) {
-    var elem = itemGrid.querySelector('a').textContent;
-    return elem.match(reg);
-  }
-};
-
-// bind filter button click
-var filtersElem = document.querySelector('header');
-filtersElem.addEventListener( 'click', function( event ) {
-  if ( !matchesSelector( event.target, 'span' ) ) {
-    return;
-  }
-  var filterValue = event.target.getAttribute('data-filter');
-  filterValue = filterFns[ filterValue ] || filterValue;
-  iso.arrange({ filter: filterValue });
-});
-
-// change is-checked class on buttons
-var buttonGroups = document.querySelectorAll('header');
-for ( var i=0, len = buttonGroups.length; i < len; i++ ) {
-  var buttonGroup = buttonGroups[i];
-  radioButtonGroup( buttonGroup );
-}
-function radioButtonGroup( buttonGroup ) {
-  buttonGroup.addEventListener( 'click', function( event ) {
-    // only work with links
-    if ( !matchesSelector( event.target, 'span' ) ) {
-      return;
-    }
-    buttonGroup.querySelector('.is-checked').classList.remove('is-checked');
-    event.target.classList.add('is-checked');
-  });
-}
-
-// kleuren koppelen aan de divs dmv data-attribuut
-// hashtags extracten uit de classes-informatie van de grid-items
-var gridItems = document.querySelectorAll('.grid-item');
-for ( var i=0, len = gridItems.length; i < len; i++ ) {
-  var gridItem = gridItems[i];
-  gridItem.style.backgroundColor = gridItem.getAttribute('data-color');
-  gridItem.style.color = gridItem.getAttribute('data-text-color');
-  var categories = gridItem.classList;
-  var innerDiv = document.createElement("div");
-  gridItem.appendChild(innerDiv); 
-  for ( var j=1, k = categories.length; j < k; j++ ) {
-    var category = categories[j];
-    var link = document.createElement("a");
-    link.setAttribute("href", "#");
-    link.innerHTML = "#" + category;
-    link.setAttribute("data-filter", "." + category);
-    link.addEventListener( 'click', function( event ) { 
-        document.getElementsByClassName("is-checked")[0].classList.remove('is-checked');
-        var filterValue = this.getAttribute('data-filter');
-        filterValue = filterFns[ filterValue ] || filterValue;
-        iso.arrange({ filter: filterValue });
-        var knoppen = document.getElementsByTagName("header")[0].getElementsByTagName("span");
-        for ( var l=0, m = knoppen.length; l < m; l++ ) {
-        var knop = knoppen[l];
-          if (knop.getAttribute("data-filter") === this.getAttribute('data-filter')) {
-            knop.classList.add('is-checked');
-          }
-        }    
-    }); 
-    innerDiv.appendChild(link);   
-  }
-  if (gridItem.getAttribute('data-image')) { 
-      gridItem.style.backgroundImage = "url('" + gridItem.getAttribute('data-image') + "')";
-      var links = gridItem.getElementsByTagName("a");
-      for ( var n=0, o = links.length; n < o; n++ ) {
-        var link = links[n];
-        if (gridItem.getAttribute('data-trans-color')) {
-          link.style.backgroundColor = gridItem.getAttribute('data-trans-color');
-        }
-        else {
-          link.style.backgroundColor = "rgba(255,255,255,0.75)";
-        }
-        link.style.padding = "3px 4px";
-      }    
-  }
-  
-}
-
-document.getElementsByClassName("zoekbox")[0].onkeyup = function() {
-  reg = new RegExp(this.value,'gi');
-  var filterValue = event.target.getAttribute('data-filter');
-  filterValue = filterFns[ filterValue ] || filterValue;
-  iso.arrange({ filter: filterValue });
-};
-
-function myFunction_All(){
-    document.getElementById("filter_all").innerHTML = "
-    <?php 
-        $query = "SELECT category FROM products" ?>
-    <?php echo $query ?>
-    "
-
-}
-function myFunction_Vegeterian(){
-    document.getElementById("filter_vegeterian").innerHTML = "
-    <?php 
-        $query = "SELECT category FROM products" ?>
-    <?php echo $query ?>
-    "
-}