A blog for geeks and civilians: July 2015

Wednesday, 15 July 2015

How to get the maximum number from a series digits in Javascript

This is a simple function that returns the highest number in a series of numbers.


  function max_series(x)
  {
      h=0;
      for(i=0; i= h)
          {
              h=arguments[i];
          }
          
      }
      return h;
  }

A simple way to use the function would be:


  
var maximum = max_series(2,3,4,5,5.5);
alert(maximum); //alerts 5.5

Tuesday, 7 July 2015

A formula for drawing circular buttons with css

The button you see above is not an image. Its a simple html button that has been given a circular shape using CSS.
I want to share a simple formula I use personally for making these buttons and other html elements circular in shape.
The following code below creates the circular button:


<html>
<head>
<title>A circular button</title>

<style>

.circle_shape
{
border: solid 1px green;
width:150px;
height: 150px;
border-radius: 180px;
}

</style>

</head>

<body>

 <input type="button" class="circle_shape" value="I am a circular button"/>


</body>
</html>

An input element of type "button" is put in place. The class is set as "circle_shape" and it's value is given as "I am a circular button".



 <input type="button" class="circle_shape" value="I am a circular button"/>

Then we set the style.


.circle_shape
{

width:150px;
height: 150px;
border-radius: 180px;
}

The maths I use is easy.
i. Let the value of the width and height be the same.
ii. The border-radius value should be the value given to the width and height + 30.
Following the maths above, valid style for the circular shape are:


.circle_shape
{

width:250px;
height: 250px;
border-radius: 280px;
}


.circle_shape
{

width:30px;
height: 30px;
border-radius: 60px;
}

and so on...

Creating a bar chart in html without using the canvas element

Building a simple horizontal bar-chart using Table and Paragraph elements.

In this tutorial, we are going to build a horizontal bar chart without using complex canvas or svg manipulation codes. This will be great also for browsers that donnot support the canvas or svg element.
We create arrays to hold the data and then document.write the table. The code is short and self-explanatory. The javascript code:

   
    

var days= ['mon','tues','wed','thur','fri','sat','sun']; //Holds the
var  percent  =  [23,45,67,87,54,21,45,];                //  data 
     
document.write("<table>");  //display the table element...
     
for(i=0; i<days.length; i++)
{
document.write("<tr>");
document.write("<td>"+days[i]+"</td>");//show days in first cell
document.write("<td><p style=' height:10px; background-color:green; width:"+percent[i]+"px;' > </p></td>");
document.write("</tr>");
}

document.write("</table>");

Result:

How to make a boolean/toggle button with HTML and Javascript

Boolean Buttons

   Boolean means true or false. Yes or no. 0 or 1.  Its either it happens or not.
Javascript supports boolean- true or false. It can't be both true and false.
Its either true or false. 
   A toogle button is an example of a boolean button. Click it first, and its on. 
Click it again and its off. Html doesnt have any inbuilt toogle button, but the 
native button can be made to act as a toogle button.
  
   We first create the button element, set its id to BTN, and when clicked, run the  function TOOGLE.
   
<button id='BTN' Style='background-color:red;' onclick='TOOGLE()'> OFF </button>



  We then create the TOOGLE function that does the job.
  
 var bool=false;

function TOOGLE(){
 
var btn= document.getElementById('BTN');

if (!bool){
//if the bool (boolean) value is false when click, 
//change it to true therefore ON.

bool=true;
btn.innerHTML='ON ';
btn.style.background='green';
}


else{
//if the bool (boolean) value is true when click, 
//change it to false therefore OFF.

bool=false;
btn.innerHTML='OFF';
btn.style.background='red';
}



}

Result: