Preview
Web Page (HTML+CSS+JS)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>HaZa CS | www.hazacs.com</title>
<script type="text/javascript">
function ConvertCtoF() {
valueinC = document.getElementById('cgValue').value;
valueinF = (9 / 5) * valueinC + 32;
document.getElementById('txtConFar').value = valueinF
}
function ConvertFtoC() {
valueinF = document.getElementById('fhValue').value;
valueinC = (valueinF - 32) * 5 / 9;
document.getElementById('txtConCenti').value = valueinC;
}
function Reset() {
document.getElementById('cgValue').value = "";
document.getElementById('txtConFar').value = "";
document.getElementById('fhValue').value = "";
document.getElementById('txtConCenti').value = "";
}
</script>
<style>
.txtCSS {
background: white;
border: 1px solid #ffa853;
border-radius: 5px;
box-shadow: 0 0 5px 3px #ffa853;
color: #666;
width: 165px;
outline: none;
}
#txtConFar, #txtConCenti {
background: white;
border: 1px double #DDD;
border-radius: 5px;
box-shadow: 0 0 5px #333;
color: #666;
width: 165px;
outline: none;
}
.btnCSS {
padding: 5px;
background-color: #529ECC;
border: 1px solid #ffa853;
box-shadow: 0 0 5px 3px #FFF;
border-radius: 5px;
border: 1px solid #666;
color: #FFF;
width: 295px;
height: 32px;
text-decoration: none;
margin-left: 0.2%;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div style="margin: 9% 0 0 38%">
<h1>Conversion Website </h1>
<br />
Value in Centigrade:
<asp:TextBox ID="cgValue" CssClass="txtCSS" runat="server"></asp:TextBox>
<br />
<br />
<asp:Button ID="CGtoFH" class="btnCSS" runat="server" OnClientClick="javascript:ConvertCtoF()" Text="Convert Centigrade to
Fahrenheit"
/>
<br />
<br />
Value in Fahrenheit:
<asp:TextBox ID="txtConFar" runat="server"></asp:TextBox>
<br />
<br />
<br />
<br />
Value in Fahrenheit:
<asp:TextBox ID="fhValue" CssClass="txtCSS" runat="server"></asp:TextBox>
<br />
<br />
<asp:Button ID="FHtoCG" class="btnCSS" runat="server" OnClientClick="javascript:ConvertFtoC()" Text="Convert Fahrenheit to
Centigrade"
/>
<br />
<br />
Value in Centigrade:
<asp:TextBox ID="txtConCenti" runat="server"></asp:TextBox>
<br />
<br />
<br />
<asp:Button ID="reset" class="btnCSS" runat="server" OnClientClick="Reset()" Text="Reset" Style="background-color: coral" />
</div>
</form>
</body>
</html>
No comments
Post a Comment