Wednesday 3 February 2016

Temperature Conversion Webpage | Centigrade to Fahrenheit & Fahrenheit to Centigrade | Convert F to C and Convert C to F

Temperature Conversion Webpage | Centigrade to Fahrenheit & Fahrenheit to Centigrade | Convert F to C and Convert C to F


Preview

Preview of Temperature Conversion Webpage



Download Temperature Conversion Webpage


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

Recent Posts