css
Showing posts with label css. Show all posts
Showing posts with label css. Show all posts

Sunday, December 4, 2022

Simple Login Form Using HTML and CSS

11:31:00 PM No Comments
Beautiful login form using html and css with black background .Free html css code for login form for your website login panel with beautiful colors.

Download Full Code From Here

HTML Code:
<div class="login"><form>
<h1 style="text-align:center;color:wheat;">Welcome</h1>
<input type="text" placeholder="Email">
<input type="Password" placeholder="Password">
<input type="submit" value="Login">
<a href="#" >Forget Password?</a>
</form></div>

<h2 style="color:yellow;bottom:0;text-align:center;">
Simple Login Form Using HTML CSS By Usman Siddique</h2>
CSS Code:

<style>
body{background-color:#000d33;}
.login{width: 35%;margin: 15% auto;}
a,input{display: block;padding: 2%;width: 80%;margin: 25px auto;box-shadow: 13px 13px 300px whitesmoke;border-radius: 10px;font-weight:  bold; }
input[type=submit]{background-color: orange;border: 0px;}
a{text-align: center;text-decoration: none;border-top: 1px solid white;width: 75%;border-radius: 0px;border-bottom: 1px solid wheat; }

</style>

Thursday, December 1, 2022

Simple Portfolio example for web sites using HTML and CSS

7:07:00 AM No Comments

Usman Siddique

Programming SeekerzzZ

Taxila,Cantt
PcpHunt

Experience

Have three year of experinece

Areas of Experience

PHP, HTML, C#, ASP>Net, C++, JS
Code here :

<html>
<style>
.behind h3{text-align: center;margin: 10px;}
.img1{height: 40%;width:40%;border-radius:100%;margin-left:27%;margin-top:10%;box-shadow:5px 3px 145px blue;}
.front h3,p{text-align:center;padding: 10px;}
h3,p{padding:0px;margin:0px;}
.main{margin:auto;width:20%;box-shadow: 2px 2px 25px green;}
.behind,.front{width: 100%;height: 40%;}
.behind{display: none;border: 2px solid skyblue;background-color: lightblue;}
.main:hover .front{display: none;}
.main:hover .behind{display: block;}

</style>
<div class="main">
<div class="front"> <img class="img1" src="b.jpg"><br><h3>Usman Siddique</h3><p>Programming SeekerzzZ</p><br><img src="as.jpg" >Taxila,Cantt<br><img src="as.jpg">PcpHunt</div>



<div class="behind"><h3>Experience</h3>Have three year of experinece<h3>Areas of Experience</h3>PHP, HTML, C#, ASP>Net, C++, JS</div>

</div>

Monday, November 28, 2022

Simple Count Down using Java-script - - HTML,CSS

9:24:00 AM No Comments
Simple counter in java script 

Time Counter


-------------------------------------------

HTML Code:
<div class="counter">
<h4>Time Counter</h4>

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

JavaScript Code:

<script type="text/javascript">
var dely=15;
var i = 0, howManyTimes = 16;
function f() {
if(dely>9){document.getElementById("demo").innerHTML=("00:"+dely--);}
else{document.getElementById("demo").innerHTML=("00:0"+dely--);}
i++;
    if( i < howManyTimes ){
        setTimeout( f, 1000 );
    }else{}
}
f();

</script>

CSS Code:

Thursday, November 24, 2022

Simple Search Box Example HTML 5 ,CSS 3

7:40:00 AM No Comments
Many Frinds Ask me about a think how to put button inside a textbox so thats we see on many site search box like that .. thats not actully a button inside textbox its a div which contain both button and textbox and we hide their actul color :
Here is a simple example :


<div class="wrapper">
    <input type="text" />
    <button>GO</button>
</div>
<h3>Simple search Box Example</h3>
<h2>Programming Seekerz</h2>


<style>
.wrapper {
    border:1px solid #000;
    display:inline-block;
    position:relative;

}

input,
button {
    background-color:transparent;
    border:0;
}

button {
    position:absolute;
    right:0;
    top:0;
}

input {
    padding-right:30px; /* button padding */
}
</style>

Sunday, November 13, 2022

Tuesday, November 8, 2022

HTML -Marquee Animation style with CSS

9:00:00 AM No Comments
Marquee Style
<html>
<head>
<title>Marquee Style</title>
<style>
#wrapper {
  width: 100%;
  background-color: white;
  position: relative;
  height: 110px;
  line-height: 20px;
  margin: 1em auto;
  overflow: hidden;
}

div.marquee {
  position: absolute;
  text-align: center;
  animation-name: marquee;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}


@keyframes marquee {  from {    left: 60%;  }
to {    left: -5em; } }
img{height:100px;width:100px;border:2px solid black;float:right;}
</style>
<head>
<div id="wrapper">
 <div class="marquee">
<table><tr><td><img src=" " alt=" "></td>
<td><img src=" " alt=" "></td>
<td><img src=" " alt=" "></td>
<td><img src=" " alt=" "></td>
<td><img src=" " alt=" "></td>
<td><img src=" " alt=" "></td></tr></table>
 </div>
</div>
<html>

Monday, November 7, 2022

Pop-up Login Form using Java-Script and CSS.

8:32:00 AM No Comments
Simple Pop-up Login Form On Mouse Over using Java-Script CSS and HTML. Programming Seekerz :)

Download Full Code From This Link


HTML:
<div class="btn" onmouseover="fun()">

<h1> Take Mouse Over Me And the Pop-Up Appers</h1></div>

<div class="pic" id="pic1">
<input type="button" onclick="yoyo()" value="X" class="cn"/>

<form class="myform" action="abc.html" method="post">
<input type="text" class="items" placeholder="User Name"/>
<input type="Password" class="items" placeholder="Password"/>
<input type="submit" class="btn1" value="LOG-IN"/>
</form>


</div>
CSS:

<style>
.cn{color:red;background-color:white;border:2px solid;border-radius:50px;float:right;}

.btn{color: red;font-size: 22px;border:1px solid;text-align:center;}

.pic{width: 25%;height: 27%;display:none;bottom:40%;right:40%;position:fixed;
box-shadow: 3px -3px 59px 42px rgba(46,54,43,0.40);
}

.myform{
  margin: auto;
  padding: 0px;
  height: 100%;
  width: 100%;
  background: hotpink;
  }
.items{
  border: 5px solid;
  border-radius: 10px;
  font-size: 18px;
  width: 80%;
  padding: 10px;
  margin: 10px;
}
.btn1{
  background: skyblue;
  border: 5px solid black;
  border-radius: 20px;
  padding: 10px;
  float:right;
  margin: 2%;
  color: black;
  font-size:14px;
  font-weight: bold;
  }


</style>

Sunday, November 6, 2022

Divide Content on multiple pages in PHP : Paging in PHP

8:19:00 AM No Comments
Some time we have a lot of data like 600000 records and we want to show them but not all at a time so we use paging to divide them on separate pages in this post i will define how to use paging in PHP.
First we have to create a Database.


Database Name:Paging
Table:


CREATE TABLE `record` (
 
`Id` int(9) NOT NULL,

`Name` varchar(100) NOT NULL,

`Mobno` int(18) NOT NULL,

`Address` varchar(100) NOT NULL

) ;

And We put Dummy data on 100 records in it .
Now Retrieve that data.i use limit property in my query like
SELECT id,name,mobno,address from record limit 0,6

 it will limit data in only 6 rows.
Now by using String Query's i create a hyper links containing page no and then on page load get them and use in limit value .
Formula: ( page_no - 1 ) * 6

Query String: <a href='usman.php?page=".$s1."'>".$s1."</a>"

Get Request:if (isset($_GET["page"])) { $page  = $_GET["page"]; } else { $page=1; }; 

Total Records:
$sql1 = "SELECT COUNT(id) FROM record"; 
$result1 = $conn->query($sql1); 
$getresult = $result1->fetch_assoc(); 
$total = $getresult["COUNT(id)"];
$s=$total/6;


CSS Code For Style:

<style>
  span{padding:10px;margin:10px;
  bottom: 5%;position: fixed;}
  span a{margin: 20px;border: 1px solid green;padding: 10px;}
body{background-color: #eae;}
div{margin:5px auto;width: 50%;border: 5px solid;
background-color: skyblue; padding: 10px;}
div table{margin: auto;}
div table td{border: 5px solid green;}
</style>

PHP Full Code:

<?php
include "conn.php";
echo '<h1 style="text-align:center;">Pagging in PHP</h1>';
if (isset($_GET["page"])) { $page  = $_GET["page"]; } else { $page=1; }; 
$first = ($page-1) * 6;

$sql = "SELECT id,name,mobno,address from record limit $first,6" ;

$result = $conn->query($sql);

if ($result->num_rows > 0) {
while($row = $result->fetch_assoc())
 { 
echo "<div><table border=\"1\">";
echo    "<tr><th colspan=\"2\"width=200> Dummay Data For ".$row["id"]. "</th>";
echo    "<th rowspan=\"2\">";
echo    " Mobile No : ".$row["mobno"]."</th></tr>";
echo " <td>My Name: "  .$row["name"]. "</td>";
echo " <td>Yes My Name "  .$row["address"]. "</td></table></div>";
}} 

$sql1 = "SELECT COUNT(id) FROM record"; 
$result1 = $conn->query($sql1); 
$getresult = $result1->fetch_assoc(); 
$total = $getresult["COUNT(id)"];
$s=$total/6;
?>
<span>
<?php
for($s1=1;$s1<=$s;$s1++){
echo "<a href='usman.php?page=".$s1."'>".$s1."</a>";
}?>
</span>
<?php
$conn->close();
?>
 

Thursday, November 3, 2022

Stylish Search bar example using jQuery

4:52:00 AM No Comments
Stylish Search bar example using jQuery html and CSS it use jQueary online CDN for including jquery and use simple hide and show functions.

Download Code

Test here:



HTML Code:

<div class="main">
<img src="logo.png" id="display" />
<div class="search_bar" id="search">
<div class="box"><input type="text" placeholder="Search..." ></div>
<div class="btn"><input type="image" src="logo.png" alt="submit"></div>
</div>
</div>

JQuery Code:

<script>
$(document).ready(function(){
$("#display").click(function(){
$(this).hide();
$("#search").show();
});
$("#search").click(function(){
$(this).hide();
$("#display").show();
});
});
</script>

CSS code:

<style>
body{background-color:#eee;}
#display{height: 50px;width: 50px;border: 1px solid blue;border-radius: 10px;box-shadow: 2px 2px 10px skyblue;cursor:pointer;}
#search{padding: 10px;display: none;}
#search .box{float: left;}
#search input{height: 50px;box-shadow: 2px 2px 10px blue;}
#search input[type=image]{height: 42px;background-color: skyblue;border: 4px;border-style: solid;border-color: black;border-left: 0px;}
#search input[type=text]{padding: 12px;border: 4px;border-style: solid;border-color: black;border-right: 0px;}
.main{width:30%;margin:10% auto ;height:10%;box-shadow: 2px 2px 10px skyblue;padding:20px;background-color:#aaa;}
</style>

Tuesday, November 1, 2022

Registration Form Using Div Elements in Html CSS

8:13:00 AM No Comments
Read Also:  


CSS Code:

.heading{width: 30%;margin: auto;font-size:20px;font-family:arial;color:blue;}
input{padding: 1%;}
.main{border: 2px solid burlywood;width: 40%;margin: auto;padding: 2%;border-radius: 20px; }
.titles{float: left;width:50%;padding:3%;padding-left: 10%;font-size: 17px;}
.inputs{padding: 3%;}
.btn{margin: auto;width: 20%;padding: 3%;}
.botn{background-color: lightsteelblue;padding: 6%;border: 2px solid;border-radius: 10px;font-weight: bold;color: black;width:80%;}
body{background-color: #ddd;}


HTML Code:



<form action=" " method="get">

<div class="main">
<div class="heading">Registration Form</div>
<div class="titles"> First Name:  </div>
<div class="inputs"> <input type="text" >  </div>
<div class="titles"> Last Name:  </div>
<div class="inputs"> <input type="text" >  </div>
<div class="titles"> Father Name:  </div>
<div class="inputs"> <input type="text" >  </div>
<div class="titles"> Qualification:  </div>
<div class="inputs">  
           <select>
            <option>BSE</option><option>BSS</option><option>MSC</option>
            </select> 
       </div>
<div class="titles">  Gender: </div>
<div class="inputs"> 
<input type="radio" name="gnd" checked/>Male
<input type="radio" name="gnd"/>Female 
 </div>
<div class="titles"> Job Title:  </div>
<div class="inputs"> <input type="text" value="Android Develper" readonly/>  </div>
<div class="btn">  <input type="submit" value="Submit" class="botn"/> </div>
</div>

</form>

Thursday, April 28, 2016

Simple web page layouts examples

10:18:00 AM No Comments
in this i share three types of very simple web page layouts you can donwload them from my facebook group the .html was uploaded here.

Download File from following Links:

Web Layout No 1.


Web Layout No 2

Web Layout No 3




<style>
h1,h2,p{text-align: center;color:#eee;}
.top h1{font-size: 800%;}
table{margin:3% auto;}
.top .top_left table td{padding: 20px;background-color: #b3b3b3;}
*{margin:0px;padding:0px;}
body{background-color: #f2ccff;}
.top{border: 2px solid;width: 95%;margin: auto;height: 45%;}
.top .top_left{border: 0px solid;width: 25%;height: 100%;float: left;background-color: #404040}
.top .top_right{border: 1px solid;width: 75%;height: 100%;margin: 0% 25%;background-color: #4f404f;}
.top .top_left .logo{width: 40%;margin:3% auto;height: 50%;border-radius: 100%;background-color:#b3b3b3;}

.menu{border: 2px solid;width: 95%;margin: auto;height: 8%;border-radius: 0px 0px 20px  20px; background-color: #737373;}

.mid{width: 95%;margin: auto;}
.mid .link_item{border: 2px solid olive;width: 25%;height: 100%;margin: 1% 1% 0% 0%;float: left;position: relative;background-color: #eee;border-radius: 10px; }
.mid .main_body{border: 2px solid olive;width:50%;margin: 1% 0%;height: 100%;float:left; position: relative;background-color: #eee;border-radius: 10px;}
.mid .right_links{border: 2px solid olive;width: 22%;height: 100%;margin: 1% 0% 0% 1%;position: relative;float: left;background-color: #eee;border-radius: 10px;}
.footer{width: 95%;margin: auto;height: 10%;float:left;margin-left: 2.5%;background-color: skyblue;}

</style>



<div class="top">
<div class="top_left">
<div class="logo">
</div>
<h2>Beginners Heap</h2><p>Some info about site</p>
<table><tr><td></td><td></td><td></td></tr></table>
</div>
<div class="top_right">
<h1>Slider here</h1>
</div>

</div>

<div class="menu">
</div>

<div class="mid">
<div class="link_item">
</div>
<div class="main_body">
</div>
<div class="right_links">
</div>

</div>


<div class="footer">




</div>

Saturday, April 9, 2016

View Details On Mouse Click Using Java-Script and HTML

4:43:00 AM No Comments
If You Click on the element then it will show its description.



This is First Option
here
is some 
description
This is Second Option
here
is some 
description
This is Third Option
here
is some
 description
This is Fourth Option
here
is some
 description
This is Fifth Option
here
is some
 description

Download Complete Code From Here


HTML Code:
<body>
<div class="main">
<p class="option" onclick="foo(this)" id="1">This is First Option<img src="http://www.clipartbest.com/cliparts/dT6/xXE/dT6xXEpT9.png"></p>
<div class="dec" id="a1"><pre>here
is some 
description</pre></div>
</div>

<div class="main">
<p class="option" onclick="foo(this)" id="2">This is Second Option<img src="http://www.clipartbest.com/cliparts/dT6/xXE/dT6xXEpT9.png"></p>
<div class="dec" id="a2"><pre>here
is some 
description</pre></div>
</div>

<div class="main">
<p class="option" onclick="foo(this)" id="3">This is Third Option<img src="http://www.clipartbest.com/cliparts/dT6/xXE/dT6xXEpT9.png"></p>
<div class="dec" id="a3"><pre>here
is some
 description</pre></div>
</div>

<div class="main">
<p class="option" onclick="foo(this)" id="4">This is Fourth Option<img src="http://www.clipartbest.com/cliparts/dT6/xXE/dT6xXEpT9.png"></p>
<div class="dec" id="a4"><pre>here
is some
 description</pre></div>
</div>

<div class="main">
<p class="option" onclick="foo(this)" id="5">This is Fifth Option<img src="http://www.clipartbest.com/cliparts/dT6/xXE/dT6xXEpT9.png"></p>
<div class="dec" id="a5"><pre>here
is some
 description</pre></div>
</div>
<h1 style="text-align:center;text-shadow:10px 10px 10px red;">""Click on Option to View its Discription""<br><span style="color:blue">Develper:Usman Siddique</span></h1>
</body>

Java-Script Code:

<script>
function foo(getid){
var x = document.getElementById('a'+(getid.id));
if(x.style.display=="block")
{
x.style.display="none";}
else{x.style.display="block";}
}
</script>

CSS Code:
<style>
.main p img{height: 3%;float: left;width: 10%;}
body{background-color:wheat;}
.main{border: 2px solid;width: 20%;margin: auto;background-color:skyblue;box-shadow: 2px 2px 50px hotpink;padding: 10px;}
.option{border: 2px solid wheat;padding:5px;text-align:center;margin: 0px;cursor:pointer}
.dec{background-color: whitesmoke;padding: 5px;display: none; }
</style>

Show Details On Mouse Hover Using CSS HTML

4:29:00 AM No Comments

This will show details of an option when the mouse pointer is on that specific option.
Display Discription
This is First Option
here
is some 
description
This is Second Option
here
is some 
description
This is Third Option
here
is some
 description
This is Fourth Option
here
is some
 description
This is Fifth Option
here
is some
 description

Download The Complete Code From here


 The HTML Code is:
<body>
<div class="main">
<p class="option" onclick="foo()">This is First Option</p>
<div class="dec"><pre>here
is some
description</pre></div>
</div>

<div class="main">
<p class="option" onclick="foo()">This is Second Option</p>
<div class="dec"><pre>here
is some
description</pre></div>
</div>

<div class="main">
<p class="option" onclick="foo()">This is Third Option</p>
<div class="dec"><pre>here
is some
 description</pre></div>
</div>

<div class="main">
<p class="option" onclick="foo()">This is Fourth Option</p>
<div class="dec"><pre>here
is some
 description</pre></div>
</div>

<div class="main">
<p class="option" onclick="foo()">This is Fifth Option</p>
<div class="dec"><pre>here
is some
 description</pre></div>
</div>
<h1 style="text-align:center;text-shadow:10px 10px 10px red;">""Take Pointer on Option to View its Discription""<br><span style="color:blue">Develper:Usman Siddique</span></h1>


</body>

CSS Code:
<style>
body{background-color:wheat;}
.main{border: 2px solid;width: 20%;margin: auto;background-color:skyblue;box-shadow: 2px 2px 50px hotpink;padding: 10px;}
.option{border: 2px solid wheat;padding:5px;text-align:center;margin: 0px;cursor:pointer}
.dec{background-color: whitesmoke;padding: 5px;display: none; }
.option:hover + .dec{display: block;}
.dec:hover{display: block;}
</style>

Saturday, March 26, 2016

Thursday, February 25, 2016

Simple CV Using HTML and CSS .... About Me Example

2:08:00 AM No Comments

HTML:-

<div class="bod">
          <div class="pro">
                 <img src="a.jpg" class="img1">
          </div>
<div class="intro">
   <p class="p1">Hafiz Muhammad Usman Siddique</p>
    <p class="p2">"I am usman.A little boy with big attributes.An empty pocketed with big                ideas in mind.A courage to do big thing but did'nt do any thing yet .lol"</p>

</div>
<div class="second">

<table class="he"  align="center" cellspacing="31px">
<tr><th colspan="3">Skills<hr></th></tr>
<tr>
<td>CSS</td>
<td>HTML</td>
<td>PHP</td></tr>
</table>

<table border="1" align="center" >
<tr><th colspan="2">EDUCATION</th><th colspan="2">INTERNSHIP</th><th colspan="2">PROJECTS</th><th colspan="2">CONTACT</th></tr>
<tr><th rowspan="2">School:</th><td>F G Public School</td>
<th rowspan="2">Ptcl:</th><td>F G Public School</td>
<th rowspan="2">Web:</th><td>F G Public School</td>
<th rowspan="2">Email:</th><td>m7u786@gmail.com</td></tr>
<tr><td>2001-2010</td><td>2001-2010</td></tr>
<tr><th rowspan="2">Collage:</th><td>HITEC Collage For Boys</td>
<th rowspan="2">Lrims:</th><td>F G Public School</td>
<th rowspan="2">Android:</th><td>F G Public School</td>
<th rowspan="2">Mob No:</th><td>03075230948</td></tr>
<tr><td>2011-2012</td></tr>
<tr><th rowspan="2">University:</th><td>Comsats Wah Campus</td>
<th rowspan="2">Codingboths:</th><td>F G Public School</td>
<th rowspan="2">Desktop:</th><td>F G Public School</td>
<th rowspan="2">Address:</th><td>HIT Taxila Cantt,Rawalpindi</td></tr>
<tr><td>2013-2017</td></tr>
<tr><th colspan="2"></th><th colspan="2">Description</th><th colspan="2">Description</th><th colspan="2">Description</th></tr>
<tr><th colspan="2"><pre>i
e-resizee
e</pre></th><th colspan="2"></th><th colspan="2"></th><th colspan="2">.</th></tr>

</div>
</div>


CSS:-

<style>
.he td{border-radius:100px;width:100px;height:100px;text-align:center;border:1px solid ;}
.he {padding:15px;}
.p1{font-weight:bold;font-size:20px;text-align:center;}
.pro{padding-left:43%;padding-top:5%;background-color: #aff;}
.intro{background-color:#eee;}
.second{background-color:#ee9;}
.img1{width: 200px;border-radius: 100px;height: 200px; }
.p2{text-align:center;}body{background-color:whitesmoke;}
.bod{background-color:#eee}
</style>




Tuesday, February 9, 2016

XML - Display XML in browser in Graphical Form Using CSS

8:46:00 AM No Comments
XML stands for EXtensible Markup Language.
XML was designed to store and transport data.
XML was designed to be both human- and machine-readable.






XML Document:-

<?xml-stylesheet type="text/css" href="xmlstyle.css"?>
<personal_info>
Thats My Personal Information:- 
<self_intro>
It Show Only Self introduction:-
<name>Name: Hafiz Muhammad Usman Siddique</name>
<mob_no>Mob No: 03075230948</mob_no>
</self_intro>
<education>
It show some Educational introduction:-
<reg_no>Reg No: FA13-BSE-080</reg_no>
<university>University : Comsats Wah Campus</university>
</education>

</personal_info>
CSS File:-

personal_info{color:red;font-weight: bold;border: 1px solid black;width: 24%;padding: 20px;margin: 20px;text-decoration: underline;
}
self_intro{color:green;display: block;padding: 10px;text-decoration: none;
}
name{color:blue;display: block;padding-left: 20px;
}
mob_no{color:orange;display: block;padding-left: 20px;
}
education{color:brown;display: block;padding: 10px;
}
reg_no{color:pink;display: block;padding-left: 20px;
}
university{color:black;padding-left: 20px;
}

Sunday, June 28, 2015

Calculator using PHP and Css 3 ,html 5

2:04:00 AM No Comments
Calculator Using PHP...

<title>Calculator</title>
<style>
span{
background-color: lightgreen;
border: 2px solid black;
textcolor: red;
}
div input{
    background-color: lightgrey;
    width: 320px;
    padding: 5px;
    border: 1px solid navy;
    margin: 25px;
}
div button{
    background-color: #FFFFF0;
    width: 360px;
    height: 40px;
    padding: 5px;
    border: 2px solid green;
 
}
div td{
    background-color:#FFEBFF;
    width: 200px;
    height: 10px;
    padding: 5px;
    border: 2px solid navy;
    }
div th{
    background-color: #FFD6D6;
    width: 200px;
    height: 10px;
    padding: 5px;
    border: 2px solid navy;
 
}
 p{
    background-color: #FFF5FF;
    width: 420px;
    height: 25px;
    padding: 5px;
    border: 3px solid black;

}
</style>


<form action=" " method="POST">
<div><table border=2"><tr><th color="red" width="59">
Value 1:<br><input type="text" name="a" ></th><th>
Value 2:<br><input type="text" name="b" ></th></tr><tr><td>
<input type="radio" name="s" value="+">Additon<br></td><td>
<input type="radio" name="s" value="-">Subtraction<br></td></tr><tr><td>
<input type="radio" name="s" value="*">Multiplication<br></td><td>
<input type="radio" name="s" value="/">Division<br></td></tr><tr><td>
<input type="radio" name="s" value="sin">Sin<br></td><td>
<input type="radio" name="s" value="cos">Cos<br></td></tr><tr><td>
<input type="radio" name="s" value="tan">Tan<br></td><td>
<input type="radio" name="s" value="decbin">Decimal to Binary<br></td></tr><tr><td>
<input type="radio" name="s" value="bindec">Binary to Decimal<br></td><td>
<input type="radio" name="s" value="dechex">Decimal to Hexa<br></td></tr><tr><td>
<input type="radio" name="s" value="hexdec">Hexa to Decimal<br></td><td>

</div>
<button value="Submit" name="submit" type="Submit">Submit</button></td></tr>
</form>

<tr>
<?php
$ans=0;
$a=$_POST['a'];
$b=$_POST['b'];
$q=$_POST['s'];
switch($q)
{
case "+":
$ans=$a+$b;
echo "Sum= ".$ans;
break;
case "-":
$sub=$a-$b;
echo "Sub= ".$sub;
break;
case "*":
$mul=$a*$b;
echo "Mul= ".$mul;
break;
case "/":
$div=$a / $b;
echo "DIV= ".$div;
break;
case cos:
 $ans = cos($a);
  break;
  case sin:
 $ans = sin($a);
  break;
  case tan:
 $ans = tan($a);
  break;
  case decbin:
 $ans = decbin($a);
  break;
  case bindec:
 $ans = bindec($a);
  break;
  case dechex:
 $ans = dechex($a);
  break;
  case hexdec:
 $ans = hexdec($a);
  break;
  case deg2rad:
 $and = deg2rad($a);
  break;
  case rad2deg:
 $ans = rad2deg($a);
  break;
}
echo "<p><i><b> Answer =<b><i> ".$ans."</p>";
//echo "<input type=/"text/" value='".$ans."'>";


?></tr></table>

<center><span>Copyright @ Programming SeekerzzZ </span></center>




Value 1:
Value 2:
AdditonSubtraction
MultiplicationDivision
SinCos
TanDecimal to Binary
Binary to DecimalDecimal to Hexa
Hexa to Decimal
Answer = ".$ans.""; ?>
Copyright @ Programming SeekerzzZ

Saturday, February 7, 2015

Calculator using Java script and HTML /CSS 3

2:43:00 AM No Comments
Calculator
Welcome Calculator by JavaScript






By. Usman Siddique

<html>
<head>
<title> Calculator </title>
<style>
form{background-color:green;
text-align:center;
width:300px;
height:409px;margin:0 auto;
border:2px solid yellow;
}
form input{background-color:red;
width:60px;
height:60px;
margin:5px 5px;
font-size:14pt;
border-radius:50px;}
</style>

</head>
<body>
<form name="f">
<i>Welcome Calculator by JavaScript</i>
<br/>

<input type="text" name="result"  id="result" style="width:280px;
height:40px;text-indent:10px;"  >
<br/>
<input type="text" name="display"  id="display"style="width:140px;
height:25px;background-color:darkgray;font-size:10pt;text-indent:10px;" >

<input type="button" onClick="Sign()" name="sign" value="+/-" style="margin:0px 1px;width:60px;
height:25px;font-size:10pt" >

<input type="button" onClick="Clear()" value="C"  style="margin:1px 1px;width:60px;
height:25px;font-size:10pt"/>
<br/>

<input type="button" onClick="num1Perform()" name="num1" value="1" >
<input type="button" onClick="num2Perform()" name="num2" value="2" >
<input type="button" onClick="num3Perform()" name="num3" value="3" >
<input type="button" onClick="Addition()" value="+" >
<br/>
<input type="button" onClick="num4Perform()" name="num4" value="4" >
<input type="button" onClick="num5Perform()" name="num5" value="5" >
<input type="button" onClick="num6Perform()" name="num6" value="6" >
<input type="button" onClick="SubStract()" value="-" />
<br/>
<input type="button" onClick="num7Perform()" name="num7" value="7" >
<input type="button" onClick="num8Perform()" name="num8" value="8" >
<input type="button" onClick="num9Perform()" name="num9" value="9" >
<input type="button" onClick="Muliply()" value="*" />
<br/>
<input type="button" onClick="num0Perform()" name="num0" value="0" >
<input type="button" onClick="Decimal()" name="decimal" value="." />
<input type="button" onClick="Equal()" value="=" />
<input type="button" onClick="Divison()" value="/" />
<br/>
By. Usman Siddique

</form>
<script type="text/JavaScript">
var firstNum;
    var secondNum;
    var total;
    var plusminus;
    var plusClick;
    var minusClick;
    var multiplyClick;
    var devideClick;
var decimalClick;
 

function Clear() {                                
        // Clear
        document.f.result.value="";
document.f.display.value="";

    }
function num0Perform() {                                
        // Zero
document.f.display.value +=" 0";
        document.f.result.value += document.f.num0.value;
    }
function num1Perform() {                                
        // NO1
document.f.display.value +=" 1";
        document.f.result.value += document.f.num1.value;
    }
function num2Perform() {                                
        // NO2
document.f.display.value +=" 2";
        document.f.result.value += document.f.num2.value;
    }
function num3Perform() {                                
        // NO3
document.f.display.value +=" 3";
        document.f.result.value += document.f.num3.value;
    }
function num4Perform() {                                
        // NO4
document.f.display.value +=" 4";
        document.f.result.value += document.f.num4.value;
    }
function num5Perform() {                                
        // NO5
document.f.display.value +=" 5";
        document.f.result.value += document.f.num5.value;
    }
function num6Perform() {                                
        // NO6
        document.f.display.value +=" 6";
document.f.result.value += document.f.num6.value;
    }
function num7Perform() {                                
        // NO7
document.f.display.value +=" 7";
        document.f.result.value += document.f.num7.value;
    }
function num8Perform() {                                
        // NO8
document.f.display.value +=" 8";
        document.f.result.value += document.f.num8.value;
    }
function num9Perform() {                                
        // NO9
document.f.display.value +=" 9";
        document.f.result.value += document.f.num9.value;
    }
function Sign(){
document.f.display.value="-"+(document.f.result.value);
document.f.result.value="-"+(document.f.result.value);
}
function Addition(){
firstNum = (parseFloat(document.f.result.value));
document.f.display.value=(document.f.result.value)+" +";
document.f.result.value="";
plusClick = 1;
decimalClick=0

}
function SubStract(){
firstNum = (parseFloat(document.f.result.value));
document.f.display.value=(document.f.result.value)+" -";
document.f.result.value="";
minusClick=1;
decimalClick=0
}
function Muliply(){
firstNum = (parseFloat(document.f.result.value));
document.f.display.value=(document.f.result.value)+" *";
document.f.result.value="";
multiplyClick=1;
decimalClick=0
}
function Divison(){
firstNum = (parseFloat(document.f.result.value));
document.f.display.value=(document.f.result.value)+" /";
document.f.result.value="";
devideClick=1;
decimalClick=0
}
function Decimal(){
document.f.display.value=(document.f.result.value)+".";
document.f.result.value=(document.f.result.value+".");
}

function Equal(){
secondNum = (parseFloat(document.f.result.value));
if (plusClick > 0) {
total = firstNum + secondNum;
document.f.result.value=total;
document.f.display.value=firstNum +" + "+secondNum+" = "+total;
firstNum = 0;
secondNum = 0;
plusClick = 0;
}


if(minusClick>0){
total = firstNum - secondNum;
document.f.result.value=total;
document.f.display.value=firstNum +" - "+ secondNum+" = "+total;
firstNum = 0;
secondNum = 0;
minusClick = 0;

}                                    
 if(multiplyClick>0){
total = firstNum * secondNum;
document.f.result.value=total;
document.f.display.value=firstNum +" * "+ secondNum+" = "+total;
firstNum = 0;
secondNum = 0;
multiplyClick = 0;

}

if(devideClick>0){
total = firstNum / secondNum;
document.f.result.value=total;
document.f.display.value=firstNum +" / "+ secondNum+" = "+total;
firstNum = 0;
secondNum = 0;
devideClick = 0;
}
}
</script>

</body>
</html>


Subscribe to: Posts (Atom)