JSFiddle - React, Tailwind, and code Playground

by Aravind23

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/jquery-ui.min.js"></script>
        <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.3/angular-material.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-aria.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-messages.min.js"></script>

        <!-- Angular Material Library -->
        <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.8/angular-material.min.js"></script>
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    </head>

    <body ng-app="myApp" ng-cloak>
        <div ng-controller="zetaCtrl">
            <md-toolbar class="md-padding">
                <div class="md-toolbar-tools">
                    <md-button class="md-icon-button" ng-if="showingDetail" ng-click="goBack()">
                        <i class="material-icons">keyboard_backspace</i>
                    </md-button>
                    <h3>
                        <span>Best Food App</span>
                    </h3>
                </div>
            </md-toolbar>
            <md-content class="md-padding" layout-xs="column" layout="column" ng-if="!showingDetail">
                <div layout="row" flex>
                    <div flex="90">
                        <h4 class="fav-header">Favourites</h4>
                        <p class="fav-subheader">Enjoy what you have been ordering</p>
      ...

CSS

.fav-header {
    margin: 0px;
}

body {
    font-size: 0.7em;
}

.cat-name {
    white-space: nowrap;
}

.md-errors-spacer {
    display: none;
}

i {
    vertical-align: middle;
}

JavaScript

var app = angular.module('myApp', ['ngMaterial']);
app.controller('zetaCtrl', function($scope, $q, $timeout, $http) {
    $http.get('http://temp.dash.zeta.in/food.php').then( function(res){
        $scope.response = res.data;
        $scope.response.count = 0;
        $scope.filteredRecipes = res.data.recipes;
        $scope.favourites = res.data.recipes.filter(function(obj){
            return obj.isFavourite;
        });
    }, function(err) {
    	// dummy response in case of api failure.
    	$scope.response = response;
    }) ;
    $scope.itemSelected = function(item) {
        item.selected = !item.selected;
        item.count = 1;
        if (item.selected) {
            $scope.response.count++;
        } else {
            $scope.response.count--;
        }
        console.log($scope.cart.count);

    }

    $scope.filterCategory = function(cat) {
        $scope.filteredRecipes = $scope.response.recipes.filter(function(obj) {
            return (obj.category == cat);
        });
    }

    $scope.searchItem = function(se) {
        $scope.filteredRecipes = $scope.response.recipes.filter(function(obj) {
            return (obj.name.indexOf(se) >= 0);
        });
    }

    $scope.showDetail = function(event, itemName) {
        if (event.target.type != "button" && event.target.className.indexOf('material-icons') < 0) {
            $scope.showingDetail = true;
            $scope.details = $scope.response.recipes.filter(function(obj) {
                return (obj.name == itemName);
            })[0];
        }

    }

    $scope.goBack = function() {
        $scope.showingDetail = false;
    }

    $scope.removeItem = function(item) {
        item.count--;
        if (item.count == 0) {
            item.selected = false;
            $scope.response.count--;
        }
    }
    $scope.addItem = function(item) {
        item.count++;
    }
    var response = {
  "categories": [
    {
      "name": "Dessert",
      "image":...