Projects Inventory – Projects Inventory

Adding Form Fields Dynamically with PHP/MySQLi in AngularJS

Leave a Comment / Angular JS Projects / By Projects Inventory

Creating our Database First, we are going to create our database. Open phpMyAdmin. Click databases, create a database and name it as angular. After creating a database, click the SQL and paste the below codes.

CREATE TABLE `members` (
  `memid` int(11) NOT NULL AUTO_INCREMENT,
  `firstname` varchar(30) NOT NULL,
  `lastname` varchar(30) NOT NULL,
  `address` text NOT NULL,
PRIMARY KEY(`memid`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

CREATE TABLE `members` (

`memid` int(11) NOT NULL AUTO_INCREMENT,

`firstname` varchar(30) NOT NULL,

`lastname` varchar(30) NOT NULL,

`address` text NOT NULL,

PRIMARY KEY(`memid`)

) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Index.html Next, this is our index that contains out add form.

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="utf-8">
    <title>AngularJS Adding Form Fields Dynamically with PHP/MySQLi</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
</head>
<body ng-controller="memberdata" ng-init="fetch()">
<div class="container">
    <h1 class="page-header text-center">AngularJS Adding Form Fields Dynamically with PHP/MySQLi</h1>
    <div class="row">
                <div class="col-md-8 col-md-offset-2">
                        <div class="alert alert-success text-center" ng-show="success">
                                <button type="button" class="close" ng-click="clearMessage()"><span aria-hidden="true">&times;</span></button>
                                <i class="fa fa-check"></i> {{ successMessage }}
                        </div>
                        <div class="alert alert-danger text-center" ng-show="error">
                                <button type="button" class="close" ng-click="clearMessage()"><span aria-hidden="true">&times;</span></button>
                                <i class="fa fa-warning"></i> {{ errorMessage }}
                        </div>
                        <form name="addForm" novalidate>
                                <fieldset ng-repeat="memberfield in memberfields">
                                        <div class="panel panel-default">
                                                <div class="panel-body">
                                                        <div class="row">
                                                                <div class="col-md-3">
                                                                        <input type="text" placeholder="Firstname" class="form-control" ng-model="memberfield.firstname" required>
                                                                </div>
                                                                <div class="col-md-3">
                                                                        <input type="text" placeholder="Lastname" class="form-control" ng-model="memberfield.lastname" required>
                                                                </div>
                                                                <div class="col-md-5">
                                                                        <input type="text" placeholder="Address" class="form-control" ng-model="memberfield.address" required>
                                                                </div>
                                                                <button class="btn btn-danger btn-sm" ng-show="$last" ng-click="removeField()"><span class="glyphicon glyphicon-remove"></span></button>
                                                        </div>
                                                </div>
                                        </div>
                                </fieldset>
                                <button type="button" class="btn btn-primary" ng-click="newfield()"><span class="glyphicon glyphicon-plus"></span> Add</button>
                                <button type="button" class="btn btn-primary" ng-disabled="addForm.$invalid" ng-click="submitForm()"><span class="glyphicon glyphicon-floppy-disk"></span> Save</button>
                        </form>
                        <table class="table table-bordered table-striped" style="margin-top:10px;">
                                <thead>
                    <tr>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Address</th>
                    </tr>
                </thead>
                                <tbody>
                                        <tr ng-repeat="member in members">
                                                <td>{{ member.firstname }}</td>
                                                <td>{{ member.lastname }}</td>
                                                <td>{{ member.address }}</td>
                                        </tr>
                                </tbody>
                        </table>
                </div>
        </div>
</div>
<script src="angular.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>AngularJS Adding Form Fields Dynamically with PHP/MySQLi</title>

</head>

<h1 class="page-header text-center">AngularJS Adding Form Fields Dynamically with PHP/MySQLi</h1>

<i class="fa fa-check"></i> {{ successMessage }}

</div>

<i class="fa fa-warning"></i> {{ errorMessage }}

</div>

</div>

</div>

</div>

</div>

</fieldset>

</form>

<thead>

<tr>

<th>First Name</th>

<th>Address</th>

</tr>

</thead>

<tbody>

<td>{{ member.firstname }}</td>

<td>{{ member.lastname }}</td>

<td>{{ member.address }}</td>

</tr>

</tbody>

</table>

</div>

</body>

</html>

Angular.js This contains our angular js …

Adding Form Fields Dynamically with PHP/MySQLi in AngularJS Read More »

Delete Multiple Rows using PHP/MySQLi in AngularJS

Leave a Comment / Angular JS Projects / By Projects Inventory

Getting Started I’ve used CDN for Bootstrap and Angular JS so you need internet connection for them to work. Creating our Database First, we’re going to create our database and insert sample data that you can use in deleting. 1. Open phpMyAdmin. 2. Click databases, create a database and name it as angular. 3. After creating …

Delete Multiple Rows using PHP/MySQLi in AngularJS Read More »

Creating a Simple Upload File (AngularJS Progress Bar and PHP/MySQLi)

Leave a Comment / Angular JS Projects / By Projects Inventory

Getting Started Angular JS version = 1.5.7. Creating our Database First, we’re going to create our database. “Apache” and “MySQL” Servers are required too in this tutorial. In my case I am using XAMPP as my virtual server. Open PHPMyAdmin. Click databases, create a database and name it as angular. After creating a database, click the SQL and copy/paste the below codes.

CREATE TABLE `upload` (
  `uploadid` int(11) NOT NULL AUTO_INCREMENT,
  `original` varchar(150) NOT NULL,
  `new` varchar(150) NOT NULL,
  `type` varchar(10) NOT NULL,
PRIMARY KEY(`uploadid`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1

CREATE TABLE `upload` (

`uploadid` int(11) NOT NULL AUTO_INCREMENT,

`original` varchar(150) NOT NULL,

`new` varchar(150) NOT NULL,

`type` varchar(10) NOT NULL,

PRIMARY KEY(`uploadid`)

) ENGINE=InnoDB DEFAULT CHARSET=latin1

Creating the …

Creating a Simple Upload File (AngularJS Progress Bar and PHP/MySQLi) Read More »

Signup/Register using PHP/MySQLi in AngularJS

Leave a Comment / Angular JS Projects / By Projects Inventory

Creating our Database First, we’re going to create our database. 1. Open phpMyAdmin. 2. Click databases, create a database and name it as angular. 3. After creating a database, click the SQL and paste the below codes.

CREATE TABLE `members` (
  `memid` int(11) NOT NULL AUTO_INCREMENT,
  `username` varchar(30) NOT NULL,
  `password` varchar(30) NOT NULL,
  `firstname` varchar(30) NOT NULL,
  `lastname` varchar(30) NOT NULL,
  `address` text NOT NULL,
PRIMARY KEY(`memid`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

CREATE TABLE `members` (

`memid` int(11) NOT NULL AUTO_INCREMENT,

`username` varchar(30) NOT NULL,

`password` varchar(30) NOT NULL,

`firstname` varchar(30) NOT NULL,

`lastname` varchar(30) NOT NULL,

`address` text NOT NULL,

PRIMARY KEY(`memid`)

) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Updating our Main Page Next, we update index.html by adding the ff. javascript files for our registration.

<script src="js/controllers/signupCtrl.js"></script>
<script src="js/services/signupService.js"></script>

1 2	<script src="js/controllers/signupCtrl.js"></script> <script src="js/services/signupService.js"></script>

Creating the …

Signup/Register using PHP/MySQLi in AngularJS Read More »

Login with Session using PHP/MySQLi in Angular JS

Leave a Comment / Angular JS Projects / By Projects Inventory

To create a login page using Angular JS and set SESSION with PHP/MySQLi. Angular JS is a javascript framework maintained by Google and is capable of creating Single-Page Applications. In this tutorial, we’ll set up PHP Session to prevent users from going into our homepage if not authenticated. Getting Started I’ve have used CDN for …

Login with PHP/MySQLi in AngularJS

Leave a Comment / Angular JS Projects / By Projects Inventory

Creating our Database First, we are going to create our database and insert sample users to test our app. 1. Open phpMyAdmin. 2. Click databases, create a database and name it as angular. 3. After creating a database, click the SQL and paste the below codes

CREATE TABLE `members` (
  `memid` int(11) NOT NULL AUTO_INCREMENT,
  `username` varchar(30) NOT NULL,
  `password` varchar(30) NOT NULL,
PRIMARY KEY(`memid`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

CREATE TABLE `members` (

`memid` int(11) NOT NULL AUTO_INCREMENT,

`username` varchar(30) NOT NULL,

`password` varchar(30) NOT NULL,

PRIMARY KEY(`memid`)

) ENGINE=InnoDB DEFAULT CHARSET=latin1;

INSERT INTO `members` (`memid`, `username`, `password`) VALUES
(1, 'neovic', 'devierte'),
(2, 'julyn', 'divinagracia'),
(3, 'gemalyn', 'cepe');

INSERT INTO `members` (`memid`, `username`, `password`) VALUES

(1, 'neovic', 'devierte'),

(2, 'julyn', 'divinagracia'),

(3, 'gemalyn', 'cepe');

Index.html html

<!DOCTYPE html>
<html ng-app="app">
<head>
        <title>AngularJS Login with PHP/MySQLi</title>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
       
</head>
<body>
<div class="container">
  <h1 class="page-header text-center">AngularJS Login with PHP/MySQLi</h1>
  <div ng-view></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.min.js"></script>
<script src="js/angular.js"></script>
<script src="js/controllers/loginCtrl.js"></script>
<script src="js/services/loginService.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>AngularJS Login with PHP/MySQLi</title>

</head>

<body>

<h1 class="page-header text-center">AngularJS Login with PHP/MySQLi</h1>

</div>

</body>

</html>

<div class="col-md-4 col-md-offset-4">
    <div class="login-panel panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title"><span class="glyphicon glyphicon-lock"></span> Login
            </h3>
        </div>
        <div class="panel-body">
                <form role="form" name="logform">
                <fieldset>
                        <div class="form-group">
                        <input class="form-control" placeholder="Username" type="text" autofocus ng-model="user.username" required>
                        </div>
                        <div class="form-group">
                        <input class="form-control" placeholder="Password" type="password" ng-model="user.password" required>
                        </div>
                        <button type="button" id="loginbutton" class="btn btn-lg btn-primary btn-block" ng-disabled="logform.$invalid" ng-click="login(user)"><span class="glyphicon glyphicon-log-in"></span> <span id="logtext">Login</span></button>
                </fieldset>
                </form>
        </div>
    </div>
 
    <div class="alert alert-danger text-center" ng-show="errorLogin">
        <button type="button" class="close" ng-click="clearMsg()"><span aria-hidden="true">&times;</span></button>
        {{ errorMsg }}
    </div>
 
    <div class="alert alert-success text-center" ng-show="successLogin">
        <button type="button" class="close" ng-click="clearMsg()"><span aria-hidden="true">&times;</span></button>
        {{ successMsg }}
    </div>
</div>

<h3 class="panel-title"><span class="glyphicon glyphicon-lock"></span> Login

</h3>

</div>

</div>

</div>

<button type="button" id="loginbutton" class="btn btn-lg btn-primary btn-block" ng-disabled="logform.$invalid" ng-click="login(user)"><span class="glyphicon glyphicon-log-in"></span> <span id="logtext">Login</span></button>

</fieldset>

</form>

</div>

</div>

</div>

Angular.js JavaScript …

How to Create Routes in AngularJS

Leave a Comment / Angular JS Projects / By Projects Inventory

Creating our Main Page First this is our main page named index.html. In here, we’re gonna create a simple bootstrap navbar for navigation between routes. html

<!DOCTYPE html>
<html ng-app="app">
<head>
        <title>AngularJS How to Create Routes</title>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
        <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">AngularJS Route</a>
        </div>
 
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                        <li><a href="#/">Home</a></li>
                        <li><a href="#/about">About</a></li>
                        <li><a href="#/blog">Blog</a></li>
                </ul>
        </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
</nav>
<div ng-view></div>
<script src="angular.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>AngularJS How to Create Routes</title>

</head>

<body>

<span class="sr-only">Toggle navigation</span>

</button>

<a class="navbar-brand" href="#">AngularJS Route</a>

</div>

<li><a href="#/about">About</a></li>

</ul>

</div>

</div>

</nav>

</body>

</html>

Angular.js Lastly, this contains our Angular.js scripts and our router. Take note that in routing, we need to add the dependency ngRoute to our app for it to work. JavaScript

var app = angular.module('app', ['ngRoute']);
 
app.config(function($routeProvider){
        $routeProvider
        .when('/', {
                templateUrl: 'home.html'
        })
        .when('/about', {
                templateUrl: 'about.html'
        })
        .when('/blog', {
                templateUrl: 'blog.html'
        })
        .otherwise({
                redirectTo: '/'
        });
});

var app = angular.module('app', ['ngRoute']);

app.config(function($routeProvider){

$routeProvider

.when('/', {

templateUrl: 'home.html'

})

.when('/about', {

templateUrl: 'about.html'

})

.when('/blog', {

templateUrl: 'blog.html'

})

.otherwise({

redirectTo: '/'

});

…

How to Create Routes in AngularJS Read More »

File Preview before Upload in AngularJS

Leave a Comment / Angular JS Projects / By Projects Inventory

AngularJS (1.x) example that shows a file preview before upload (image preview, plus filename/size for any file), using CDN for Bootstrap and AngularJS. Creating our HTML html

<!DOCTYPE html>
<html >
<head>
        <title>AngularJS File Preview before Upload</title>
        <meta charset="utf-8">
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>  
</head>
<body ng-app="app" ng-controller="uploader">
<div class="container">
        <h1 class="page-header text-center">AngularJS File Preview before Upload</h1>
        <div class="row">
                <div class="col-md-3">
                        <h3 class="text-center">Upload File</h3>
                        <hr>
                        <label>File:</label>
                        <input type="file" file-input="files">
                </div>
                <div class="col-md-9">
                        <div ng-show="filepreview">
                        <img ng-src="{{filepreview}}" height="300px" width="300px">
                        <h4>Filename: {{ name }}</h4>
                        <h4>Size: {{ size }}</h4>
                        </div>
                </div>
        </div>
</div>
<script src="angular.js"></script>
</body>
</html>

<!DOCTYPE html>

<html >

<head>

<title>AngularJS File Preview before Upload</title>

</head>

<h1 class="page-header text-center">AngularJS File Preview before Upload</h1>

<h3 class="text-center">Upload File</h3>

<hr>

</div>

<h4>Filename: {{ name }}</h4>

</div>

</body>

</html>

Angular.js JavaScript

var app = angular.module('app', []);
app.directive('fileInput', ['$parse', function ($parse) {
        return {
      $scope: {
        fileinput: "=",
        filepreview: "="
      },
      link: function($scope, element, attributes) {
        element.bind("change", function(changeEvent) {
                $scope.fileinput = changeEvent.target.files[0];
                var reader = new FileReader();
                reader.onload = function(loadEvent) {
                $scope.$apply(function() {
                        $scope.filepreview = loadEvent.target.result;
                });
                }
                reader.readAsDataURL($scope.fileinput);
                $scope.name = $scope.fileinput.name;
                $scope.size = $scope.fileinput.size;
        });
      }
    }
}]);
app.controller('uploader', function($scope, $http){
 
});

var app = angular.module('app', []);

app.directive('fileInput', ['$parse', function ($parse) {

return {

$scope: {

fileinput: "=",

filepreview: "="

link: function($scope, element, attributes) {

element.bind("change", function(changeEvent) {

$scope.fileinput = changeEvent.target.files[0];

var reader = new FileReader();

reader.onload = function(loadEvent) {

$scope.$apply(function() {

$scope.filepreview = loadEvent.target.result;

});

}

reader.readAsDataURL($scope.fileinput);

$scope.name = $scope.fileinput.name;

$scope.size = $scope.fileinput.size;

});

}

}]);

app.controller('uploader', function($scope, $http){

});

Download Code of Angular Preview

How to Create a Loader in AngularJS

Leave a Comment / Angular JS Projects / By Projects Inventory

1. HTML (index.html) html

<!DOCTYPE html>
<html ng-app="loaderApp">
<head>
  <meta charset="utf-8" />
  <title>AngularJS Loader Example</title>
  <!-- CDN dependencies -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" integrity="..." crossorigin="anonymous">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="..." crossorigin="anonymous">
  <style>
    /* Simple overlay loader styling */
    .loader-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 0.75);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 9999;
      flex-direction: column;
    }
    .loader-text {
      margin-top: 10px;
      font-weight: bold;
    }
  </style>
</head>
<body ng-controller="MainCtrl as vm">

  <div class="container mt-5">
    <h3>AngularJS Loader Demo</h3>
    <button class="btn btn-primary" ng-click="vm.doManualAction()">Manual Action (spinner)</button>
    <button class="btn btn-success" ng-click="vm.doHttpAction()">HTTP Action (interceptor)</button>

    <div class="mt-3">
      <p><strong>Note:</strong> The loader shows automatically during the simulated HTTP call; the manual one uses explicit toggling.</p>
    </div>
  </div>

  <!-- Loader overlay: shows when vm.loading is true -->
  <div class="loader-overlay" ng-show="vm.loading">
    <!-- Font Awesome spinner -->
    <i class="fa-solid fa-spinner fa-spin fa-3x"></i>
    <div class="loader-text">Loading, please wait...</div>
    <!-- Or optionally a GIF -->
    <!-- <img src="https://i.gifer.com/ZZ5H.gif" alt="loader gif" width="80" /> -->
  </div>

  <!-- AngularJS & app script -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.3/angular.min.js"></script>
  <script src="angular.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>AngularJS Loader Example</title>

<style>

/* Simple overlay loader styling */

.loader-overlay {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: rgba(255, 255, 255, 0.75);

display: flex;

align-items: center;

justify-content: center;

z-index: 9999;

flex-direction: column;

}

.loader-text {

margin-top: 10px;

font-weight: bold;

}

</style>

</head>

<h3>AngularJS Loader Demo</h3>

<button class="btn btn-primary" ng-click="vm.doManualAction()">Manual Action (spinner)</button>

<button class="btn btn-success" ng-click="vm.doHttpAction()">HTTP Action (interceptor)</button>

<p><strong>Note:</strong> The loader shows automatically during the simulated HTTP call; the manual one uses explicit toggling.</p>

</div>

<div class="loader-text">Loading, please wait...</div>

</div>

</body>

</html>

2. AngularJS Logic (angular.js) javascript

(function () {
  angular.module('loaderApp', [])
    // HTTP interceptor to auto-toggle loader during $http requests
    .factory('loaderInterceptor', ['$q', 'LoaderService', function($q, LoaderService) {
      return {
        request: function(config) {
          LoaderService.show();
          return config;
        },
        response: function(response) {
          LoaderService.hide();
          return response;
        },
        responseError: function(rejection) {
          LoaderService.hide();
          return $q.reject(rejection);
        }
      };
    }])
    .config(['$httpProvider', function($httpProvider) {
      $httpProvider.interceptors.push('loaderInterceptor');
    }])
    .service('LoaderService', ['$timeout', function($timeout) {
      var _visible = false;
      return {
        show: function() {
          _visible = true;
        },
        hide: function() {
          // optional small delay to avoid flicker
          $timeout(function() {
            _visible = false;
          }, 100);
        },
        isVisible: function() {
          return _visible;
        }
      };
    }])
    .controller('MainCtrl', ['$timeout', '$http', 'LoaderService', function($timeout, $http, LoaderService) {
      var vm = this;
      vm.loading = false;

      // Watch the service's visibility
      vm._syncLoader = function() {
        vm.loading = LoaderService.isVisible();
      };

      // Poll sync (could also use $scope.$watch with a getter)
      setInterval(vm._syncLoader, 100);

      // Manual toggle example
      vm.doManualAction = function() {
        vm.loading = true;
        // simulate some async work
        $timeout(function() {
          vm.loading = false;
        }, 1500);
      };

      // HTTP call example (interceptor manages loader)
      vm.doHttpAction = function() {
        // Example: simulate HTTP call (you can replace with real endpoint)
        $http.get('https://jsonplaceholder.typicode.com/posts/1')
          .then(function(resp) {
            console.log('HTTP success', resp.data);
          })
          .catch(function() {
            console.log('HTTP error');
          });
      };
    }]);
})();

(function () {

angular.module('loaderApp', [])

// HTTP interceptor to auto-toggle loader during $http requests

.factory('loaderInterceptor', ['$q', 'LoaderService', function($q, LoaderService) {

return {

request: function(config) {

LoaderService.show();

return config;

response: function(response) {

LoaderService.hide();

return response;

responseError: function(rejection) {

LoaderService.hide();

return $q.reject(rejection);

}

};

}])

.config(['$httpProvider', function($httpProvider) {

$httpProvider.interceptors.push('loaderInterceptor');

}])

.service('LoaderService', ['$timeout', function($timeout) {

var _visible = false;

return {

show: function() {

_visible = true;

hide: function() {

// optional small delay to avoid flicker

$timeout(function() {

_visible = false;

}, 100);

isVisible: function() {

return _visible;

}

};

}])

.controller('MainCtrl', ['$timeout', '$http', 'LoaderService', function($timeout, $http, LoaderService) {

var vm = this;

vm.loading = false;

// Watch the service's visibility

vm._syncLoader = function() {

vm.loading = LoaderService.isVisible();

};

// Poll sync (could also use $scope.$watch with a getter)

setInterval(vm._syncLoader, 100);

// Manual toggle example

vm.doManualAction = function() {

vm.loading = true;

// simulate some async work

$timeout(function() {

vm.loading = false;

}, 1500);

};

// HTTP call example (interceptor manages loader)

vm.doHttpAction = function() {

// Example: simulate HTTP call (you can replace with real endpoint)

$http.get('https://jsonplaceholder.typicode.com/posts/1')

.then(function(resp) {

console.log('HTTP success', resp.data);

})

.catch(function() {

console.log('HTTP error');

});

};

}]);

})();

3. Explanation & Best Practices ng-show=”vm.loading”: Toggles the loader overlay. You can switch to ng-if if you want DOM removal instead of visibility toggling. Interceptor (loaderInterceptor): Automatically shows the loader on every $http request and hides it when the response returns or errors. This …

How to Create a Loader in AngularJS Read More »

Simple Calculator Project Using Bootstrap and JavaScript in HTML/CSS

Leave a Comment / HTML/CSS / By Projects Inventory

Key features Bootstrap 5 responsive layout Vanilla JavaScript with safe evaluation (basic sanitization) Keyboard support Clear, backspace, percentage, decimals Accessible buttons (ARIA labels & focus states) Mobile-friendly html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Simple Calculator</title>
  <!-- Bootstrap 5 CDN -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-..." crossorigin="anonymous">
  <style>
    body {
      background: #f0f2f5;
      min-height: 100vh;
      display: flex;
      align-items: center;
      padding: 1rem;
    }
    .calc {
      max-width: 380px;
      margin: 0 auto;
    }
    .display {
      font-size: 1.75rem;
      text-align: right;
      padding: 0.75rem;
      background: #ffffff;
      border-radius: 0.5rem;
      box-shadow: inset 0 0 4px rgba(0,0,0,0.08);
      min-height: 3.2rem;
      word-wrap: break-word;
      letter-spacing: 0.5px;
    }
    .btn-calculator {
      font-size: 1.1rem;
      padding: 0.75rem 0.5rem;
      border-radius: 0.5rem;
      min-width: 0;
    }
    .btn-operator {
      background-color: #ffb400;
      color: #fff;
    }
    .btn-equals {
      background-color: #28a745;
      color: #fff;
    }
    .btn-secondary-custom {
      background-color: #6c757d;
      color: white;
    }
    .visually-hidden-focus:focus {
      outline: 3px solid #0d6efd;
      outline-offset: 2px;
    }
  </style>
</head>
<body>
  <div class="calc card shadow-sm">
    <div class="card-body">
      <div class="mb-3">
        <div id="display" class="display" role="textbox" aria-label="Calculator display" aria-live="polite">0</div>
      </div>
      <div class="gx-1 gy-1 row row-cols-4">
        <!-- First row -->
        <div class="col mb-1">
          <button class="btn btn-secondary btn-calculator w-100 visually-hidden-focus" data-action="clear" aria-label="Clear">C</button>
        </div>
        <div class="col mb-1">
          <button class="btn btn-secondary btn-calculator w-100 visually-hidden-focus" data-action="back" aria-label="Backspace">←</button>
        </div>
        <div class="col mb-1">
          <button class="btn btn-secondary btn-calculator w-100 visually-hidden-focus" data-value="%" aria-label="Percent">%</button>
        </div>
        <div class="col mb-1">
          <button class="btn btn-operator btn-calculator w-100 visually-hidden-focus" data-value="/" aria-label="Divide">÷</button>
        </div>
        <!-- Second row -->
        <div class="col mb-1">
          <button class="btn btn-light btn-calculator w-100 visually-hidden-focus" data-value="7" aria-label="7">7</button>
        </div>
        <div class="col mb-1">
          <button class="btn btn-light btn-calculator w-100 visually-hidden-focus" data-value="8" aria-label="8">8</button>
        </div>
        <div class="col mb-1">
          <button class="btn btn-light btn-calculator w-100 visually-hidden-focus" data-value="9" aria-label="9">9</button>
        </div>
        <div class="col mb-1">
          <button class="btn btn-operator btn-calculator w-100 visually-hidden-focus" data-value="*" aria-label="Multiply">×</button>
        </div>
        <!-- Third row -->
        <div class="col mb-1">
          <button class="btn btn-light btn-calculator w-100 visually-hidden-focus" data-value="4" aria-label="4">4</button>
        </div>
        <div class="col mb-1">
          <button class="btn btn-light btn-calculator w-100 visually-hidden-focus" data-value="5" aria-label="5">5</button>
        </div>
        <div class="col mb-1">
          <button class="btn btn-light btn-calculator w-100 visually-hidden-focus" data-value="6" aria-label="6">6</button>
        </div>
        <div class="col mb-1">
          <button class="btn btn-operator btn-calculator w-100 visually-hidden-focus" data-value="-" aria-label="Subtract">−</button>
        </div>
        <!-- Fourth row -->
        <div class="col mb-1">
          <button class="btn btn-light btn-calculator w-100 visually-hidden-focus" data-value="1" aria-label="1">1</button>
        </div>
        <div class="col mb-1">
          <button class="btn btn-light btn-calculator w-100 visually-hidden-focus" data-value="2" aria-label="2">2</button>
        </div>
        <div class="col mb-1">
          <button class="btn btn-light btn-calculator w-100 visually-hidden-focus" data-value="3" aria-label="3">3</button>
        </div>
        <div class="col mb-1">
          <button class="btn btn-operator btn-calculator w-100 visually-hidden-focus" data-value="+" aria-label="Add">+</button>
        </div>
        <!-- Fifth row -->
        <div class="col-6 mb-1">
          <button class="btn btn-light btn-calculator w-100 visually-hidden-focus" data-value="0" aria-label="0">0</button>
        </div>
        <div class="col mb-1">
          <button class="btn btn-light btn-calculator w-100 visually-hidden-focus" data-value="." aria-label="Decimal point">.</button>
        </div>
        <div class="col mb-1">
          <button class="btn btn-equals btn-calculator w-100 visually-hidden-focus" data-action="equals" aria-label="Equals">=</button>
        </div>
      </div>
    </div>
    <div class="card-footer text-muted small">
      MIT Licensed — original by Rhalp Darren Cabrera. Keep attribution when redistributing.
    </div>
  </div>

  <script>
    (() => {
      const displayEl = document.getElementById('display');
      let expr = '';

      function updateDisplay(text) {
        displayEl.textContent = text || '0';
      }

      function sanitize(input) {
        // Allow digits, operators, dot, parentheses, percent, spaces
        return /^[0-9+\-*/%.() ]*$/.test(input);
      }

      function evaluateExpression(input) {
        if (!sanitize(input)) return 'Error';
        try {
          // Convert percentages like 25% to (25/100)
          const replaced = input.replace(/(\d+(\.\d+)?)%/g, '($1/100)');
          // eslint-disable-next-line no-eval
          let result = eval(replaced);
          if (typeof result === 'number') {
            if (!isFinite(result)) return 'Error';
            // Trim floating point artifacts
            result = Math.round((result + Number.EPSILON) * 1e12) / 1e12;
            return result;
          }
          return 'Error';
        } catch {
          return 'Error';
        }
      }

      function appendValue(v) {
        // Prevent two operators in a row (simple)
        if (/[\+\-*/%.]$/.test(expr) && /[\+\-*/%.]/.test(v)) {
          expr = expr.slice(0, -1) + v;
        } else {
          expr += v;
        }
      }

      document.querySelectorAll('button').forEach(btn => {
        btn.addEventListener('click', () => {
          const val = btn.getAttribute('data-value');
          const action = btn.getAttribute('data-action');
          if (action === 'clear') {
            expr = '';
          } else if (action === 'back') {
            expr = expr.slice(0, -1);
          } else if (action === 'equals') {
            const res = evaluateExpression(expr);
            expr = (res === 'Error') ? '' : String(res);
          } else if (val !== null) {
            appendValue(val);
          }
          updateDisplay(expr);
        });
      });

      // Keyboard support
      document.addEventListener('keydown', e => {
        const key = e.key;
        if (/[\d.+\-*/%()]/.test(key)) {
          appendValue(key);
        } else if (key === 'Enter' || key === '=') {
          const res = evaluateExpression(expr);
          expr = (res === 'Error') ? '' : String(res);
        } else if (key === 'Backspace') {
          expr = expr.slice(0, -1);
        } else if (key.toLowerCase() === 'c') {
          expr = '';
        } else {
          return;
        }
        e.preventDefault();
        updateDisplay(expr);
      });

      updateDisplay(expr);
    })();
  </script>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

<!DOCTYPE html>

<head>

<title>Simple Calculator</title>

<style>

body {

background: #f0f2f5;

min-height: 100vh;

display: flex;

align-items: center;

padding: 1rem;

}

.calc {

max-width: 380px;

margin: 0 auto;

}

.display {

font-size: 1.75rem;

text-align: right;

padding: 0.75rem;

background: #ffffff;

border-radius: 0.5rem;

box-shadow: inset 0 0 4px rgba(0,0,0,0.08);

min-height: 3.2rem;

word-wrap: break-word;

letter-spacing: 0.5px;

}

.btn-calculator {

font-size: 1.1rem;

padding: 0.75rem 0.5rem;

border-radius: 0.5rem;

min-width: 0;

}

.btn-operator {

background-color: #ffb400;

color: #fff;

}

.btn-equals {

background-color: #28a745;

color: #fff;

}

.btn-secondary-custom {

background-color: #6c757d;

color: white;

}

.visually-hidden-focus:focus {

outline: 3px solid #0d6efd;

outline-offset: 2px;

}

</style>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

MIT Licensed — original by Rhalp Darren Cabrera. Keep attribution when redistributing.

</div>

(() => {

const displayEl = document.getElementById('display');

let expr = '';

function updateDisplay(text) {

displayEl.textContent = text || '0';

}

function sanitize(input) {

// Allow digits, operators, dot, parentheses, percent, spaces

return /^[0-9+\-*/%.() ]*$/.test(input);

}

function evaluateExpression(input) {

if (!sanitize(input)) return 'Error';

try {

// Convert percentages like 25% to (25/100)

const replaced = input.replace(/(\d+(\.\d+)?)%/g, '($1/100)');

// eslint-disable-next-line no-eval

let result = eval(replaced);

if (typeof result === 'number') {

if (!isFinite(result)) return 'Error';

// Trim floating point artifacts

result = Math.round((result + Number.EPSILON) * 1e12) / 1e12;

return result;

}

return 'Error';

} catch {

return 'Error';

}

function appendValue(v) {

// Prevent two operators in a row (simple)

if (/[\+\-*/%.]$/.test(expr) && /[\+\-*/%.]/.test(v)) {

expr = expr.slice(0, -1) + v;

} else {

expr += v;

}

document.querySelectorAll('button').forEach(btn => {

btn.addEventListener('click', () => {

const val = btn.getAttribute('data-value');

const action = btn.getAttribute('data-action');

if (action === 'clear') {

expr = '';

} else if (action === 'back') {

expr = expr.slice(0, -1);

} else if (action === 'equals') {

const res = evaluateExpression(expr);

expr = (res === 'Error') ? '' : String(res);

} else if (val !== null) {

appendValue(val);

}

updateDisplay(expr);

});

// Keyboard support

document.addEventListener('keydown', e => {

const key = e.key;

if (/[\d.+\-*/%()]/.test(key)) {

appendValue(key);

} else if (key === 'Enter' || key === '=') {

const res = evaluateExpression(expr);

expr = (res === 'Error') ? '' : String(res);

} else if (key === 'Backspace') {

expr = expr.slice(0, -1);

} else if (key.toLowerCase() === 'c') {

expr = '';

} else {

return;

}

e.preventDefault();

updateDisplay(expr);

});

updateDisplay(expr);

})();

</script>

</body>

</html>

What to do with it Use as-is: Save above as calculator.html and open in a browser. Extend: Add memory buttons (M+, MR), scientific functions, theme toggles. …

Simple Calculator Project Using Bootstrap and JavaScript in HTML/CSS Read More »

Author name: Projects Inventory