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: center;
}

create calculator.js file



var calculator = {
  sum: 0,
  add: function(value) {
    this.sum += value;
  },
  subtract: function(value) {
  this.sum = this.sum - value;
  },
  multiply: function(value) {
  this.sum = this.sum * value;
  },
  divide: function(value) {
  this.sum = this.sum / value;
  },
  clear: function() {
    this.sum = 0;
  }, 
  equals: function() {
    return this.sum;
  }
}

After open javascript console
Type in commands example
calculator.add(1)
calculator.add(1)
calculator.equals() // 3

August 6, 2015August 10, 2015

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>
  <script src="dice.js"></script>
  <script src="ui.js"></script>
</body>
</html>

Second we are going to create style.css



* {
  font-family: Helvetica, Arial, sans-serif;
  text-align: center;
}
button {
  background-color: rgb(82, 186, 179);
  border-radius: 6px;
  border: none;
  color: rgb(255, 255, 255);
  padding: 10px;
  text-transform: uppercase;
  width: 200px;
  cursor: pointer;
}
#placeholder {
  height: 100px;
  width: 100px;
  padding: 50px;
  margin: 50px auto;
  border: 1px solid gray;
  border-radius: 10px;  
  font-size:80px;
}

3rd we are going to create the ui.js



function printNumber(number) {
  var placeholder = document.getElementById("placeholder");
  placeholder.innerHTML = number;
}

var button = document.getElementById("button");

button.onclick = function() {
  var result = dice.roll();
  printNumber(result);
};

Finally create the object lateral of the javascript file dice.js



var dice = {
sides: 6,
roll: function () {
  var sides = 6;
  var randomNumber = Math.floor(Math.random() * this.sides) + 1;
  return (randomNumber);
}
}

refactored for dice.js using prototype



function Dice(sides) {
  this.sides = sides;
}
Dice.prototype.roll = function diceRoll () {
  var randomNumber = Math.floor(Math.random() * this.sides) + 1;
    return randomNumber;
  }
var dice = new Dice(6);

In conclusion, I hope you learned something from my source code.

July 25, 2015August 26, 2015

How to Setup Real Cron job on WordPress on your Shared Hosting Account

Why use Real Cron job vs the scripted one?

I’m writing this because I realized the dates on my posts were not updating. This scripted cronjob was not working, instead I would use a real linxu command line cron job. Cron jobs keep your linux machine clean, because they clear cache and freeup memory. The error logs get bigger and bigger. By using cron job one can clean their linux servers hard drive. Less reading for the linux server. Hence faster run website.

First open wp-config.php using ftp or file manager.

type in this line of code in the file:
define( 'DISABLE_WP_CRON', true );
Save and your done with this part. Next.

Log into Cpanel
Under Advanced, click on Cron Jobs
Under Add New Cron Job, choose “Once an hour” for Common Settings
Enter this command [replace yoursite with your own domain name]
wget -q -O – http://yourwebsite.com/wp-cron.php?doing_wp_cron >/dev/null 2>&1
click Add New Cron Job

This part you may or may not have cron job email you if the cron job is successful or fails. I would recommend you put it one for a day. If it’s all fine and dandy. I would just turn it off because cron jobs are automatic.

Conclusion:

Be careful of using cron job less than 15 minute intervals your webhost might be against it. So read the rules before you do too quick of cron jobs. Plus cron job are scheduled automatic tasks.

July 19, 2015July 19, 2015

My Website is Updated to Cloudflare

I updated this website to cloudflare, it was very easy to set up. Now, my website is running way faster than being on shared hosting. I know I know, what am I thinking? Should I upgrade to cloudflare? Well, yes for security purposes. This is a win. By doing so my spam has been down by a lot. It blocks a lot of bad IP ranges. This keeps the good guys in and all the bad guys out.

Cloudflare is awesome it offers SSL protection too if you need it but you can get a cheap ssl certificate from outside vendor which I recommend because you don’t want your information scene by man in the middle attack. Firesheep. But most modern website have ssl. Make sure when your buying something or logging into a website you see https. Https is very important. This will encrypt your log in session. You do not want the bad guys to see you.

With cloudflare now, it automatically makes your website way faster? How may you ask? It has cdn hosts, minifier, and caching. Basically, if your webhost is down they cached your website so it’s still browse-able. That is amazing feature that cloudflare is offering.

Cloudflare has 6 main features:

CDN
DNS
Optimization
Security
Analytics
Apps

I made the right choice and my load times on this website went from 5 seconds to 3 seconds. That is a huge difference. Now, you guys can browse my website faster. There should be zero hiccups. For everyone else is wondering if they should cloudflare? Get it, if it’s offered on your cpanel it’s just a click to install. If you don’t then just follow their steps at cloudflare and they will have it up within 24 hours.

Anyways, thanks for reading my quick rant about cloudflare.

July 10, 2015July 19, 2015

Create Tooltips with CSS

This is helper tooltip made entirely of css. The example is below on code pin. The other way of doing it is using jquery, but this uses span tags data-tip

http://codepen.io/davidicus/pen/yyxoXW

July 9, 2015July 15, 2015

How to Install Composer on Xampp Windows 8

Prior to this please install xampp first.

Recently, I started to learn Laravel and I wanted to install package handler for windows. Composer is package handler for php. It’s basically it grabs scripts from using command line. Also known as CMD. It’s an alternative to another way of doing which is to installing virtual machine with virtualbox and vagrant.

I have provided my settings for php.ini

Unzip and place all the files in

C:\xampp\php

Then install composer.

Download composer

Click next -> next, you should get this screen.

C:\xampp\php\php.exe install composer in that directory.

Then win + r type in “cmd” without quotes. Basically, launch cmd.

Then when in cmd type in composer -v

If you see this screen you have successfully installed composer. Use command line to get into xampp htdocs to create the script in that directory. Command cd.. [go back]

type in cd xampp

type in cd htdocs

alt+space to paste in

composer create-project laravel/laravel --prefer-dist [foldername]

You may follow the install documentation from here

In the xampp control panel turn on apache and mysql

Navigate to public folder in your browser laravel/public/

In other words:

Type that in the web browser address bar

http://localhost/laravel/public/

Laravel 4.2 Script Download

July 4, 2015July 6, 2015

.htaccess is a Double Edged Sword

What’s .htaccess it’s a file that creates permissions for websites in a server. This prevents from who can and who can not view your website.

‘.htaccess’ is the filename in full, it isn’t a file extension. As an illustration, you would not create a file known as, ‘file.htaccess’, it is merely referred to as, ‘.htaccess’. This file will take affect when positioned in any itemizing which is then in flip loaded by way of the Apache Internet Server software program program. The file will take impression over your full itemizing it is positioned in and all info and subdirectories inside the required itemizing.

You’ll create a .htaccess file using any good textual content material editor going back to sublimetext, code, atom and associated (you cannot use Microsoft NotePad).

Here is an example of code a .htaccess file. Be very careful when typing .htaccess you type and you will block everyone from this website.

RewriteEngine on
RewriteCond %{HTTP_HOST} ^example.com [NC,OR]
RewriteCond %{HTTP_HOST} ^www.example.com [NC]
RewriteRule ^(.*)$ http://example.com/$1 [L,R=301,NC]

This could be a fairly superior occasion: it permits password security on the itemizing; it offers redirection to a custom-made error internet web page if an individual fails to login appropriately; and it permits SSI (server aspect accommodates) for use with ‘.html’ records data. Please don’t delay, it’s fairly easy if you obtain a basic understanding and this textual content presents examples which can be capable of go – merely copy, paste and customize. Examples are outlined line by line so it is clear exactly what each line does and why you need it.

Upon getting created a .htaccess file, which may look identical to the one confirmed above (or may merely embrace one line), it is best to add it. This must be achieved using a FTP (file change protocol) program. You must already have one which you need to have used so as to add your web site on-line content material materials. If not, many might be discovered free of price from internet pages equivalent to ‘Get hold of.com’ and we’re in a position to advocate ‘cyberduck’ and ‘winscp’.

When importing your .htaccess records data, this can be very important you add the file in ‘ASCII’ mode. ‘ASCII’ and ‘BINARY’ are fully completely different methods of transferring information and it is necessary .htaccess data are transferred in ‘ASCII’ mode and by no means ‘BINARY’. It is likely your FTP software program program will default to ‘BINARY’ so seek for a ‘Swap Mode’ or ‘Swap Kind’ risk throughout the menus.

Add the .htaccess file to the itemizing you need to it to take affect over. Now go to this itemizing using your web browser as you’d for each different doc in your web site on-line and check it has labored appropriately.

Remember, in case you add your .htaccess file it may not appear throughout the itemizing listings for info in your web site on-line. Don’t fret; this means your server or FTP software program is hiding them which should not be an issue.

A attainable purpose behind error is that if the file permissions on the .htaccess file is not going to be set appropriately. This solely occurs on positive servers, nevertheless it is attainable you will like to change the permissions on the file to ‘755’ or ‘executable’. You’ll be able to do that alongside together with your FTP software program program, seek for a ‘File Permissions’ or ‘CHMOD’ risk, and enter ‘0755’.

In case your .htaccess file would not work, it is advisable contact your system administrator or web site internet hosting agency and assure they’ve enabled .htaccess inside your account. Some web site internet hosting companies do not allow use with out permission. If errors persist, search the recommendation of this textual content for suggestion, or contact your system administrator for suggestion.

In conclusion, the best way to handle broken website is to delete the .htaccess file in general. In addition, learn how to write it to improve ones security.