Showing posts with label ITeducation. Show all posts
Showing posts with label ITeducation. Show all posts

Friday, 19 August 2016

CREATE A TIMING EVENT IN HTML

  one of the most cooler things most programmer have thought of is how to create a simple timing event how to make ads appear at some interval in your page how to make a certain picture pop out after spending some time on a o page today am going to teach you how to create a timing event using javascript with a simple example

     The window object allows execution of code at specified time intervals.

These time intervals are called timing events.

The two key methods to use with JavaScript are:

setTimeout(function, milliseconds)
Executes a function, after waiting a specified number of milliseconds.
setInterval(function, milliseconds)
Same as setTimeout(), but repeats the execution of the function continuously.

below is a simple that displays a digital watch after 5seconds of page opening

<!DOCTYPE html>
<html>
<body>

<p>welcome</p>

<p id="demo"></p>

<script>
var myVar = setInterval(myTimer, 5000);

function myTimer() {
    var d = new Date();
    document.getElementById("demo").innerHTML = d.toLocaleTimeString();

Share:

JAVA SCRIPT OUTPUT

    Apart from the unquestionable ability of java-script to take input it has an even cooler way of outputting to ensure user friendliness no one would want to keep inputting and inputting without seeing an output or will you love that?
   Today we are going to be discussing the 4 major way of outputting using java-script .
  • Writing into an alert box, using window.alert(). or just alert()  an alert box is popup screen that displays an output it seizes all action on your browser until you have attended to the output screen this is implemented using the following syntax
      Window.alert("text goes here") or window.alert(calculation goes here).
      you can also decide to just use alert
        alert("text goes here") or alert(calculation goes here).

example
   <!DOCTYPE html>
<html>
<body>

<h1>My First java script example</h1>

<script>
alert("i love you");
</script>
Share:

CREATE A TABLE IN MYSQL DATABASE USING PHP

Before creating a table what do you need to know?

    A table is a self contained entity that consist of row(s) and column(s) what then is a row and what is a column 
    A row is a "horizontal" collection of item belonging to a certain category while 
     A column  is a "vertical" collection.

     If you are familiar with database you should know that each data has a specific data type which describe the nature of the data

   below is a list of some data type:

1. char: use for text of a short width
2. var char: use for text of a longer range
3. int: use for numbers
4. date:  use for time and date. etc.


 to accurately manipulate your database here are some terms you need to know about

 NOT NULL - Each row must contain a value for that column, null values are not allowed

DEFAULT value - Set a default value that is added when no other value is passed

UNSIGNED - Used for number types, limits the stored data to positive numbers and zero

AUTO INCREMENT - MySQL automatically increases the value of the field by 1 each time a new record is added
PRIMARY KEY - Used to uniquely identify the rows in a table. The column with PRIMARY KEY setting is often an ID number, and is often used with AUTO_INCREMENT\

                                                  now to our code

Share:

GREAT COMPUTER SCIENTIST WHO SHOCK THEIR WORLD

1.Dennis MacAlistair Ritchie

                      Dennis MacAlistair Ritchie was an American computer scientist who is credited for shaping and the founder of the c programming language that is used today in various software applications, embedded system development, operating systems.
                    Dennis also co-created the UNIX operating system. For his work, in 1983 he received the Turing Award from the ACM, the Hamming Medal in 1990 from the IEEE and in 1999 the National Medal of Technology from President Clinton. He was the head of Lucent Technologies System Software Research Department when he retired in 2007. He passed away on October 12, 2011 causing the Fedora 16 Linux distribution to be released in his memory.
                Ritchie was no doubt a wonderful man of great archievemnets he was wonderful and he worked more than all others of his time  whoose invention shaped the computer world of OOP(object oriented programming).


2. Bjarne Stroustrup

                 Bjarne Stroustrup is a Danish computer scientist who generally known for the creation and the evolvement of the and highly successful C++ programming language.
bjarne invented this programming language  all by himself, by writing its early definitions, producing its first implementation, formulating its design criteria, designing all its major facilities, processing extension proposals for standards committee and its standard textbook.
Bjarne is currently working as a Professor and holder of the College of Engineering Chair in Computer Science at Texas A&M University.

Share:

Wednesday, 17 August 2016

COMPUTER VIRUS



A computer virus is a malware or a program that when executed has the ability to replicate itself and affect other file or programs by modifying or changing their execution mode in the system it attacks
A virus performs different kind of modification on the  host computer it attacks modification ranging from

1. taken hard disk space
2. modification of system programs
3. power consumption
4.corrupting data
5. displaying unwanted message on the screen
and so many more depending on how the maker creates the virus .

there are several type of various below is the list of the ten most common virus and the most dangerous

Share:

HOW TO ADD A READ MORE TAG TO YOUR BLOG

I know that you might look at some blog and you will see the readmore tag this is real useful when you want to have more view you can check sophisticated sites like NAIRALAND 
LINDA IKEJI
you will see how nice it looks when you can have have multiple news on your homepage and adding a read more tag to it below is the simple step to add a read more tag in your blog(blogger.com)

STEP 1: login to blogger.com  then click on your blog on your blogger dash board


Share:

CREATE A SIMPLE BLOG(USING BLOGGER.COM)

have you ever wanted to make money or have you wanted to make yourself famous for your professions about your writings or about what you love guess what google just made it simple with BLOGGER.COM  here we will take you through the simple step of creating a blog
Image result for blogger.com registration

STEP 1:
             get connected online go to BLOGGER.COM  login if you have an existing  gmail account              or create a new one create a gmail account.
             

        STEP 2:
             follow the procedure given to you pick a template and a custom domain name and                       you can either choose from a blogger account or a google+ account for fresh guys like                   you i will suggest a google+ account
          
Share:

Tuesday, 16 August 2016

CREATE AN HORIZONTAL SCROLL MENU

Horizontal Scrollable Menu

Resize the browser window to see the effect.
below is the code for this simple scrollable menu

Share:

INTRODUCTION TO BOOTSTRAP

What is Bootstrap?

  • Bootstrap is a free front-end framework for faster and easier web development
  • Bootstrap also gives you the ability to easily create responsive designs

You need to download bootstrap to use it offline go to getbootstrap.com, and follow the instructions there

1. Add the HTML
Bootstrap require the  HTML5 doctype.
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"> 
  </head>
</html>
2. Bootstrap 3 is mobile-first
Bootstrap 3 is designed to be responsive to mobile devices. 
To ensure proper rendering and touch zooming, add the following <meta> tag inside the <head> element:
<meta name="viewport" content="width=device-width, initial-scale=1">
The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
The initial-scale=1 part sets the initial zoom level when the page is first loaded by the browser.
3. Containers
Bootstrap also requires a containing element to wrap site contents.
There are two container classes to choose from:
  1. The .container class provides a responsive fixed width container
  2. The .container-fluid class provides a full width container, spanning the entire width of the viewport
below is a simple bootstrap responsive page code
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
Share:

LATEST AIRTEL BROWSING CHEAT

HOW TO GET 5GB FROM AITEL

ACTIVATION

==> firstly make sure that your Sim is Eligible, Dial *474*1# if you get a  reply that your Balance is low then you are Eligible.

==> Now recharge your Line with Airtime N100 and dial *474*1# to subscribe for it.


NOW LETS INCREASE THE GB

Share:

CREATE A MODAL IMAGE

Image Modal

In this example, we use CSS to create a modal (dialog box) that is hidden by default.
We use JavaScript to trigger the modal and to display the current image inside the modal when it is clicked on. Also note that we use the value from the image's "alt" attribute as an image caption text inside the modal.
Trolltunga, Norway here is the code.

<!DOCTYPE html>
<html>
<head>
<style>
#myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
    margin: auto;
    display: block;
Share:

Thursday, 4 August 2016

CREATE A PROGRESS BAR USING HTML JAVASCRIPT AND CSS

Have you wanted to create a progress bar to show the load progress of your page here is a sample code for you feel free to ask questions and we will be more than glad to answer

<!DOCTYPE html>
<html>
<style>
#myProgress {
  position: relative;
  width: 100%;
  height: 30px;
  background-color:gray;
}

#myBar {
  position: absolute;
  width: 10%;
  height: 100%;
  background-color:skyblue;
}

#label {
  text-align: center;
  line-height: 30px;
  color: white;
}
</style>
<body>


<div id="myProgress">
  <div id="myBar">
    <div id="label">5%</div>
  </div>
</div>

<br>
<button onclick="move()">Click Me</button>

<script>
function move() {
  var elem = document.getElementById("myBar");
  var width = 5;
  var id = setInterval(frame, 10);
  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++;
      elem.style.width = width + '%';
      document.getElementById("label").innerHTML = width * 1  + '%';
    }
  }
}
</script>

</body>
</html>

click here to see what your result should look like
Share:

HOW TO CREATE A LOADER IN HTML

a loader is a graphically representation of current progress i.e when a page is currently loading or when your computer is working on something

here is a sample code for a simple loader

<!DOCTYPE html>
<html>
<head>
<style>
.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
</head>
<body>

<h2>A Loader</h2>


<div class="loader"></div>

</body>
</html>


how it works

The border property specifies the border size and the border color of the loader. The border-radius property transforms the loader into a circle.
The blue thing that spins around inside the border is specified with the border-top property. You can also include border-bottomborder-left and border-right 
The size of the loader is specified with the width and height properties.
At last, we add an animation that makes the blue thing spin forever with a 2 second animation speed.
Note: You should also include -webkit- and -ms- prefixes for browsers that do not support animation and transform properties.

click here to see what your result should look like



here is also a more advance loader using javascript
Share:

INVENTION IN TECHNOLOGY

check out our list of invention in technology in all field



1. AbioCor Artificial Heart



July 2001, a group of surgeons from Louisville, Kentucky implanted a new-generation artificial heart in a patient. Dubbed AbioCor, the device was implanted in a man who suffered from heart failure. The artificial heart was developed by Abiomed, Inc., a company with headquarters in Danvers, MA.
Although artificial hearts have been used in humans before, AvioCor proved to be more technically advanced than all of its predecessors. It is worth mentioning that previous artificial hearts required the user to be connected to a huge console through tubes and electrical power lines that passed through the person's skin. This meant that the patient had to be bedridden.
AbioCor is completely self-contained inside the body, having no tubes or lines running through the skin. Thus patients are not tied to a console, which means that they can perform routine functions. AbioCor has its battery located in an external battery pack that the patient can wear on the belt.


Share:

CREATE AN AUTOMATIC SLIDE SHOW HTML CSS AND JAVASCRIPT

have you ever wondered how a slide show in webpage is created relax and stay back am going to take you through the easiest way to create an automatic slide show using java-script( you dont have to be a guru to do it just open your heart)

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing:border-box}
body {font-family: Verdana,sans-serif;}

/* Slideshow container this is where your images are places  you can increase the max width if you like */


.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Caption text a caption is a text that appears or clearly defines what an image is saying or describing */

.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) this css styles a number text on your webpage  */

.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */

.dot {
  height: 13px;
  width: 13px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

/* this changes the background of the image currently being displayed */

.active {
  background-color: #717171;
}

/* Fading animation  here is where the sweet and unique effects works */

.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}
</style>

Share:

CREATE A MODAL FORM

WHAT IS A MODAL FORM
The Modal form is a dialog box/popup window of a form that is displayed on top of the current page:
 the sample code:

<!DOCTYPE html>
<html>
<style>
/* Full-width input fields */
input[type=text], input[type=password] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

/* Set a style for all buttons */
button {
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
}

/* Extra styles for the cancel button */
.cancelbtn {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer {
    text-align: center;
    margin: 24px 0 12px 0;
    position: relative;
}

img.avatar {
    width: 40%;
    border-radius: 50%;
}

.container {
    padding: 16px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    padding-top: 60px;
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button (x) */
.close {
    position: absolute;
    right: 25px;
    top: 0;
    color: #000;
    font-size: 35px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: red;
    cursor: pointer;
}

/* Add Zoom Animation */
.animate {
    -webkit-animation: animatezoom 0.6s;
    animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
    from {-webkit-transform: scale(0)}
    to {-webkit-transform: scale(1)}
}
    
@keyframes animatezoom {
    from {transform: scale(0)}
    to {transform: scale(1)}
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }
}
</style>

Share:

HOW TO CREATE AN ANIMATED SEARCH FORM

We all get to a time in our life when we need to start creating a cool animated forms and images for our webpages cause it attracts people more to your webpage
below is a sample code for a simple animated search form

<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
    width: 130px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background-color: white;
    background-image: url('searchicon.png');
    background-position: 10px 10px;
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}

input[type=text]:focus {
    width: 100%;
}
</style>
</head>
<body>

<p>Animated search form:</p>

<form>
  <input type="text" name="search" placeholder="Search..">
</form>

</body>

</html>

HOW IT WORKS:
  apart from the other css what does the major work from the css above is  -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
we need 2 different declaration to use an animation thats why we have two width above
input[type=text]:focus {
    width: 100%;
}
you can style more by changing the height dont stop with this one you can make it look cooler and more unique

click here to see what your search box should look like

Share:

LEARN HOW TO ADD GOOGLE MAP TO WEB PAGE

below is a sample code from w3schools properly explained in a simple way for easy comprehension

<!DOCTYPE html>
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js"></script>
</head>
<body>

<h1>My First Google Map</h1>

<div id="map" style="width:400px;height:400px"></div>

<script>
var mapCanvas = document.getElementById("map");
var mapOptions = {
    center: new google.maps.LatLng(51.5, -0.2), zoom: 10
}
var map = new google.maps.Map(mapCanvas, mapOptions);
</script>

</body>
</html>
HOW IT WORKS:

1. first to use a google map you need to first import the google API from google site or you can download the offline version
here
or just use it like this on your webpage:
<script src="https://maps.googleapis.com/maps/api/js"></script>

2.create a div and give it os unique id can be anything but for this tutorial we are using "map"
 <div id="map" style="width:400px;height:400px"></div>
add a bit of style to it(height and width can be of any pixel as you want)\

3.now to the javascript:
   create two variable of any name but for this tutorial we are using mapCanvas and mapOption

mapCanvas is the map's HTML element.mapOptions is the map's options.The center property gets the latitude and longitude (of London) by callinggoogle.maps.LatLng().The zoom property is set to 10. (try to experiment with the zoom)The google.maps.Map object is created with mapCanvas and mapOptions as parameters.

get the html element by id this is where our map will be displayed
var mapCanvas = document.getElementById("map");

set the map options  which includes the latitude and the longitude and the zoom level
var mapOptions = {
    center: new google.maps.LatLng(51.5, -0.2), zoom: 10
}

declare another variable to implement both our mapOption and mapCanvas(for this tutorial we are using map)
var map = new google.maps.Map(mapCanvas, mapOptions);


Share:

Wednesday, 3 August 2016

CREATE A DIGITAL CLOCK USING JAVASCRIPT HTML AND CSS

Here is a simple code for digital clock using html css and javascript.

The CSS and HTML and JAVASCRIPT
<html>
<head>
    <title>Digital Clock</title>

    <link href="http://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet" 
        type="text/css"/>

    <style>
        .tabBlock
        {
            background-color:#57574f;
            border:solid 0px #FFA54F;
            border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;
            max-width:200px;
            width:100%;
            overflow:hidden;
            display:block;
        }
        .clock
        {
            vertical-align:middle;
            font-family:Orbitron;
            font-size:40px;
            font-weight:normal;
            color:#FFF;
            padding:0 10px;
        }
        .clocklg 
        {
            vertical-align:middle; 
            font-family:Orbitron;
            font-size:20px;
            font-weight:normal;
            color:#FFF;
        }
    </style>
</head>

<!-- ON LOAD OF THE PAGE, THE CLOCK WILL START TICKING. -->
<body onload="digitized();">
    <div style="background-color:#F3F3F3;
        max-width:220px;width:100%;margin:0 auto;padding:20px;">

        <table class="tabBlock" align="center" cellspacing="0" cellpadding="0" border="0">
            <tr><td class="clock" id="dc"></td>  <!-- THE DIGITAL CLOCK. -->
                <td>
                    <table cellpadding="0" cellspacing="0" border="0">
                    
                        <!-- HOUR IN 'AM' AND 'PM'. -->
                        <tr><td class="clocklg" id="dc_hour"></td></tr>

                        <!-- SHOWING SECONDS. -->
                        <tr><td class="clocklg" id="dc_second"></td></tr>
                    </table>
                </td>
            </tr>
        </table>

    </div>
 //the javascript
<script>
    // OUR FUNCTION WHICH IS EXECUTED ON LOAD OF THE PAGE.
    function digitized() {
        var dt = new Date();    // DATE() CONSTRUCTOR FOR CURRENT SYSTEM DATE AND TIME.
        var hrs = dt.getHours();
        var min = dt.getMinutes();
        var sec = dt.getSeconds();

        min = Ticking(min);
        sec = Ticking(sec);

        document.getElementById('dc').innerHTML = hrs + ":" + min;
        document.getElementById('dc_second').innerHTML = sec;
        if (hrs > 12) { document.getElementById('dc_hour').innerHTML = 'PM'; }
        else { document.getElementById('dc_hour').innerHTML = 'AM'; }

        var time
                
        // CALL THE FUNCTION EVERY 1 SECOND (RECURSION).
        time = setInterval('digitized()', 1000);
    }

    function Ticking(ticVal) {
        if (ticVal < 10) {
            ticVal = "0" + ticVal;
        }
        return ticVal;
    }
</script>

 
 </body>
</html>
 

 
Share:

CREATE A SIMPLE HTML CALCULATOR(purely html and css no javascript)

CREATE THE CSS FOR THE FILE(cal.css)

.container ul
{
  width:50%;
  height: auto;
   float: left;
margin-left: 22%;
margin-top: 5%;
list-style-type: none
}

ul li input
{
 width:100px;
}

ul li 
{
padding: 1%;
float: left
}
input
{
  width:400px;
 margin-top: 8%;
margin-left: 30%;
height: 50px;
 }
 body
{
 background-color:black;
}


CREATING THE HTML FOR THE FILE(calculator.html)
<html>
 <head>
 <link href="cal.css" rel="stylesheet">
</head>
 <body>
<div class="container">
<form name="calculator">
<input type="textfield" name="ans" value="" align="center">
<ul>
<li><input type="button" value="1" onclick="document.calculator.ans.value+='1' "></li>
<li><input type="button" value="2" onclick="document.calculator.ans.value+='2' "></li>
<li><input type="button" value="3" onclick="document.calculator.ans.value+='3' "></li>
<li><input type="button" value="4" onclick="document.calculator.ans.value+='4' "></li>
<li><input type="button" value="5" onclick="document.calculator.ans.value+='5' "></li>
<li><input type="button" value="6" onclick="document.calculator.ans.value+='6' "></li>
<li><input type="button" value="7" onclick="document.calculator.ans.value+='7' "></li>
<li><input type="button" value="8" onclick="document.calculator.ans.value+='8' "></li>
<li><input type="button" value="9" onclick="document.calculator.ans.value+='9' "></li>
<li><input type="button" value="0" onclick="document.calculator.ans.value+='0' "></li>
<li><input type="button" value="-" onclick="document.calculator.ans.value+='-' "></li>
<li><input type="button" value="*" onclick="document.calculator.ans.value+='*' "></li>
<li><input type="button" value="/" onclick="document.calculator.ans.value+='/' "></li>
<li><input type="button" value="+" onclick="document.calculator.ans.value+='+' "></li>
<li><input type="button" value="=" onclick="document.calculator.ans.value=eval(document.calculator.ans.value)"></li>
</ul>
</form>
</div>
</html>


here is what your preview should look like if your code is correct
 
Share: