Why Sass is Awesome?

Why is sass awesome? It makes css work way easier and faster. You have to have ruby on rails installed and the sass gem installed. First install sass with this command (you only need to do it once) gem install sass Type in CLI first navigate to correct director with cd sass – watch .…

Hello World in React Js

This is hello word app created with react.js This is my first simple script. Yes, I know it’s easier to do this in html. But I wanted to do this in JSX to make thing more complicated.   <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Jsx</title> </head> <body> <! – container node – > <div…

This is Example Code of php Inheritance

This is example code of php inheritance parents and child. extend is the keyword to inherit from the parent class.   <?php abstract class Shape { protected $color; public function __construct($color = ‘blue’) { $this->color = $color; } public function getColor() { return $this->color; } abstract protected function getArea(); } class Square extends Shape {…

Building a Calculator With Angular Js

index.html Angular js Simple Calculator Example Code <!doctype html> <html lang=”en”> <head> <meta charset=”UTF-8″> <title>Example – example-example68-production</title> <script src=”//ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js”></script> </head> <body ng-app=””> First Num<input type=”number” ng-model=”number1″> Second Num<input type=”number” ng-model=”number2″> <button ng-click=”count = count + number1″ ng-init=”count=0″> Add </button> <button ng-click=”count = count – number2″ ng-init=”count=0″> Subtract </button> <button ng-click=”count = count * number2″ ng-init=”count=0″>…

Gulp To Create One Javascript File to Speed Up Your Production Server

First install node.js Type this in commandline npm install gulp npm install gulp-concat – save-dev npm install gulp-uglify – save-dev npm install gulp-rename – save-dev ‘use strick’; var gulp = require(‘gulp’), concat = require(‘gulp-concat’), uglify = require(‘gulp-uglify’), rename = require(‘gulp-rename’); gulp.task(“concatScripts”, function(){ //combine all these scripts gulp.src([ ‘js/jquery.js’, ‘js/sticky/jquery.stick.js’, ‘js/main.js’]) //create file .pipe(concat(“app.js”)) // put…

Sticky Navigation Bar Souce Code

Demo <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Stick Nav</title> <style> body { margin: 0 0 0 0 !important; padding: 0; } .header { padding: 20px 0; background-color: #333; } .nav { padding: 5px 0; background-color: slategrey; position: -webkit-sticky; top: 0px; z-index: 1; } ul { list-style: none; } li { display: inline; } .header,…

How to create a simple calculator program with javascript

This is a tutorial about how to create a simple calculator program with javascript, css, and html. First create index.html file <html> <head> <title>Dice Simulator 2015</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Calculator Example</h1> <p>Open the JavaScript developer console to interact.</p> <script src="calculator.js"></script> </body> </html> Then create style.css file * { font-family: Helvetica, Arial, sans-serif; text-align:…

Create a Dice with HTML, CSS, and Javascript

We are going to create a html, css, and javascript die with this code. For every block of code create the coodinating file extension be it .js .html .css and etc. It should work. Happy coding. First create index.html <html> <head> <title>Dice Simulator 2015</title> <link rel="stylesheet" href="style.css"> </head> <body> <p id="placeholder"> </p> <button id="button">Roll Dice</button>…