Commit 8a459d64 by Yana

added filters

parent 4843d92e
...@@ -29,7 +29,21 @@ ...@@ -29,7 +29,21 @@
<link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/style.css"> <link rel="stylesheet" href="<?php echo 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">
<div class="container">
<a class="navbar-brand" href="index.html"><span class="flaticon-pizza-1 mr-1"></span>Food<br><small>Runner</small></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#ftco-nav" aria-controls="ftco-nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="oi oi-menu"></span> Menu
</button>
<div class="collapse navbar-collapse" id="ftco-nav">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a href="#" class="nav-link">Home</a></li>
<li class="nav-item"><a href="#about" class="nav-link">About us</a></li>
<li class="nav-item"><a href="#contacts" class="nav-link">Contacts</a></li>
</ul>
</div>
</div>
</nav>
<!-- Page Features --> <!-- Page Features -->
<!-- /.row --> <!-- /.row -->
...@@ -102,4 +116,17 @@ ...@@ -102,4 +116,17 @@
</body> </body>
</html> </html>
\ No newline at end of file
<table>
<?php foreach ($products as $key => $value): ?>
<h1 class=" zoekbox grid-item Deserts" data-text-color="#000" ><?php echo $value['title']; ?></h1>
<?php echo $value['description']; ?>
<?php echo $value['price']; ?>
<?php echo $value['photo']; ?>
<?php echo $value['category'] == 'All'; ?>
<?php endforeach ?>
</table>
\ No newline at end of file
<header> <header>
<h1>Choose an order!</h1> <h1>Choose an order!</h1>
<a href="#"><span class="is-checked" data-filter="*">All</span></a> <a href="#"><span id="filter_all" onclick="myFunction_All()" data-filter="*">All</span></a>
<a href="#"><span data-filter=".Vegeterian">Vegeterian</span></a>
<a href="#"><span data-filter=".Deserts">Deserts</span></a> <a href="#"><span id="filter_vegeterian" onclick="myFunction_Vegeterian()" data-filter=".Vegeterian">Vegeterian</span></a>
<a href="#"><span data-filter=".Drinks">Drinks</span></a>
<a href="#"><span data-filter=".Special">Special offers</span></a> <a href="#"><span class="filter" onclick="myFunction()" data-filter=".Deserts">Deserts</span></a>
<a href="#"><span class="filter" onclick="myFunction()" data-filter=".Drinks">Drinks</span></a>
<a href="#"><span class="filter" onclick="myFunction()" data-filter=".Special">Special offers</span></a>
</header> </header>
<div id="block-content"> <div id="block-content">
<?php foreach ($products as $key => $value): ?> <?php foreach ($products as $key => $value): ?>
<h1 class="grid-item Deserts" data-text-color="#000" data-image="https:"><?php echo $value['title']; ?></h1>
<?php <h1 class=" zoekbox grid-item Deserts" data-text-color="#000" ><?php echo $value['title']; ?></h1>
echo $value['description'];
<?php echo $value['description']; ?>
<?php echo $value['price']; ?>
<?php echo $value['photo']; ?>
<?php echo $value['category'] == 'All'; ?>
<?php endforeach ?>
?> <!-- <img src="localhost/ci/index.php/products/images/tortilla.jpg">
<?php endforeach ?>
<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 Deserts" data-text-color="#000" data-image="https:"><a href="https://codepen.io/evalasters/pen/bwYwgx">Nombre2</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>
...@@ -36,7 +47,7 @@ ...@@ -36,7 +47,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>
......
...@@ -67,23 +67,23 @@ ...@@ -67,23 +67,23 @@
<div id="ftco-loader" class="show fullscreen"><svg class="circular" width="48px" height="48px"><circle class="path-bg" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke="#eeeeee"/><circle class="path" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke-miterlimit="10" stroke="#F96D00"/></svg></div> <div id="ftco-loader" class="show fullscreen"><svg class="circular" width="48px" height="48px"><circle class="path-bg" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke="#eeeeee"/><circle class="path" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke-miterlimit="10" stroke="#F96D00"/></svg></div>
--> -->
<script src="js/jquery.min.js"></script> <script src="<?php echo base_url(); ?>assets/js/jquery.min.js"></script>
<script src="js/jquery-migrate-3.0.1.min.js"></script> <script src="<?php echo base_url(); ?>assets/js/jquery-migrate-3.0.1.min.js"></script>
<script src="js/popper.min.js"></script> <script src="<?php echo base_url(); ?>assets/js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script> <script src="<?php echo base_url(); ?>assets/js/bootstrap.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script> <script src="<?php echo base_url(); ?>assets/js/jquery.easing.1.3.js"></script>
<script src="js/jquery.waypoints.min.js"></script> <script src="<?php echo base_url(); ?>assets/js/jquery.waypoints.min.js"></script>
<script src="js/jquery.stellar.min.js"></script> <script src="<?php echo base_url(); ?>assets/js/jquery.stellar.min.js"></script>
<script src="js/owl.carousel.min.js"></script> <script src="<?php echo base_url(); ?>assets/js/owl.carousel.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script> <script src="<?php echo base_url(); ?>assets/js/jquery.magnific-popup.min.js"></script>
<script src="js/aos.js"></script> <script src="<?php echo base_url(); ?>assets/js/aos.js"></script>
<script src="js/jquery.animateNumber.min.js"></script> <script src="<?php echo base_url(); ?>assets/js/jquery.animateNumber.min.js"></script>
<script src="js/bootstrap-datepicker.js"></script> <script src="<?php echo base_url(); ?>assets/js/bootstrap-datepicker.js"></script>
<script src="js/jquery.timepicker.min.js"></script> <script src="<?php echo base_url(); ?>assets/js/jquery.timepicker.min.js"></script>
<script src="js/scrollax.min.js"></script> <script src="<?php echo base_url(); ?>assets/js/scrollax.min.js"></script>
<script src="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="js/google-map.js"></script> <script src="<?php echo base_url(); ?>assets/js/google-map.js"></script>
<script src="js/main.js"></script> <script src="<?php echo base_url(); ?>assets/js/main.js"></script>
</body> </body>
</html> </html>

131 KB | W: | H:

37.2 KB | W: | H:

ci/assets/images/tortilla.jpg
ci/assets/images/tortilla.jpg
ci/assets/images/tortilla.jpg
ci/assets/images/tortilla.jpg
  • 2-up
  • Swipe
  • Onion skin
...@@ -400,3 +400,18 @@ document.getElementsByClassName("zoekbox")[0].onkeyup = function() { ...@@ -400,3 +400,18 @@ document.getElementsByClassName("zoekbox")[0].onkeyup = function() {
iso.arrange({ filter: 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 ?>
"
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment