JSFiddle - React, Tailwind, and code Playground

by Gretchen Ward

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<body ng-app="testapp">
    <div class="container" ng-controller="TestController">
        <ul class="nav nav-tabs">
            <li ng-class="{active: activeTab=='inbox'}">
                <a ng-click="activeTab='inbox'">Inbox</a>
            </li>
            <li ng-class="{active: activeTab=='sent'}">
                <a ng-click="activeTab='sent'">Sent</a>
            </li>
        </ul>
        <br/>
        <table class="table table-bordered table-striped" ng-show="activeTab=='inbox'">
            <caption>No of Emails: {{getTotalEmails(emails)}}. Mailbox Size: {{getTotalSize(emails)}}</caption>
            <thead>
                <tr>
                    <th>From</th>
                    <th>Subject</th>
                    <th>Date</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="email in emails" ng-click="showPopUp(email)">
                    <td>{{email.from}}</td>
                    <td>{{email.subject}}</td>
                    <td>{{email.date}}</td>
                </tr>
            </tbody>
        </table>

        <table class="table table-bordered table-striped" ng-show="activeTab=='sent'">
            <caption>No of Emails: {{getTotalEmails(sentEmails)}}. Mailbox Size: {{getTotalSize(sentEmails)}}</caption>
            <thead>
            <tr>
                <th>To</th>
                <th>Subject</th>
                <th>Date</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="email in sentEmails" ng-click="showPopUp(email)">
                <td>{{email.to}}</td>
               ...

JavaScript

var app = angular.module('testapp',[]);
app.controller('TestController',function($scope){
    $scope.activeTab = 'inbox';
    $scope.isPopupVisible = false;

    $scope.emails = [
        {
            from: 'John',
            to: 'me',
            subject: 'I love angular',
            date: 'Jan 1',
            body: 'hello world!',
            size: 10
        },
        {
            from: 'Jack',
            to: 'me',
            subject: 'Angular and I are just friends',
            date: 'Feb 15',
            body: 'just kidding',
            size: 10
        },
        {
            from: 'Ember',
            to: 'me',
            subject: 'I hate you Angular!',
            date: 'Dec 8',
            body: 'wassup dude',
            size: 10
        }
    ];

    $scope.getTotalEmails = function(emailArr){
        return emailArr.length;
    };

    $scope.getTotalSize = function(emailArr){
        return emailArr.reduce(function(prev,current){
            return prev + current.size;
        },0);
    };

    $scope.sentEmails = [
        {
            from: 'John',
            to: 'me',
            subject: 'I love angular',
            date: 'Jan 1',
            body: 'hello world!',
            size: 10
        },
        {
            from: 'Jack',
            to: 'me',
            subject: 'Angular and I are just friends',
            date: 'Feb 15',
            body: 'just kidding',
            size: 10
        },
        {
            from: 'Ember',
            to: 'me',
            subject: 'I hate you Angular!',
            date: 'Dec 8',
            body: 'wassup dude',
            size: 10
        },
        {
            from: 'Ember',
            to: 'me',
            subject: 'I hate you Angular!',
            date: 'Dec 8',
            body: 'wassup dude',
            size: 10
        }
    ];

    $scope.showPopUp = function(email) {
        $scope.isPopupVisible = true;
        $scope.selectedEmail = email;
    };

    $scope.closePopup...