Formula to calculate (coding) website html

HTML & CSS
1

3

Hello @lechiclady. We have temporarily unlisted your topic as your query is included in an image. Since this is inaccessible to search engines and Sitepoint relies a lot on search engines for traffic, can we ask that you enter your query as text?

1 Like
4

will do:

I need to code in html, to (embed in my webpage urgently), in a table form of some sort. my boss wants the clients to fill in the length and width of their swimming pool to get the square metres and then the square metres must be divided with 3.75 to get the total of solar panels needed for the specific measurements.

length x width = ___ / 3.75 = ___

Thank you so much in advance

6

Welcome to the forums, @lechiclady.

Are you just asking for help with the HTML/CSS to display this form, or are you also asking how to code it to carry out the calculation? If the latter then you would need to use some form of scripting, such as JavaScript or PHP.

7

Hi,
I am asking for help to code the html/css and to display the form, please, I’ve searched on the web, and came across sitepoint and you guys really seemed to be able to help.

tks

8

sorry and to carry out the calculation

9

Is your web site on-line? If yes, can you give us the URL?

10

Sure,

www.solnet.co.za

11

Hi there lechiclady,

here is an example for you to play with…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
body {
    background-color: #f0f0f0;
    font: 1em/150% verdana, arial, helvetica, sans-serif;
 }

h1 {
    font-size: 1em;
    color: #839C29;
    text-align: center;
 }

#calc {
    width: 16em;
    margin: auto;
    background-color: #fff;
    color: #839C29;
    box-shadow: 0.4em 0.4em 0.4em rgba( 0, 0, 0, 0.2 );
 }

#calc div {
    display: table;
    width: 100%;
 }

#calc div span {
    width: 50%;
    display: table-cell;
    border: 0.062em solid #a3c577;
    border-bottom: 0;
    box-sizing: border-box;
    vertical-align: middle;
    text-align: center;

 }
#calc div span:first-of-type, 
#calc div:first-of-type span:last-of-type{
    padding: 0.5em 0;

 }

#calc div span:last-of-type {
    border-left: 0;
 }

#calc div:last-of-type span{
    border-bottom: 0.062em solid #a3c577;
 }

#calc input{ 
    width: 100%;
    height: 4em;
    padding: 0; 
    margin: 0;
    border: 0;
    background-color: #fff;
    font-size: 1em;
    color: #839C29;
    text-align: center;
 }

#calc input[type="reset"] {
    border: 0.062em solid #a3c577;
    border-top: 0;
    box-shadow: inset 0 0 1em rgba( 163, 197, 119, 0.5);
 }
</style>

</head>
<body> 

 <h1>Calculator:</h1>

  <form id="calc" action="#">
   <div>
    <span>
     Pool Size
    </span><span>
     Length/Width Of Your Pool
    </span>
   </div><div>
    <span>
     <label for="length">Length</label>
    </span><span>
     <input id="length" type="text" placeholder="In Metres">
    </span>
   </div><div>
    <span>
     <label for="width">Width</label>
    </span><span>
     <input id="width" type="text" placeholder="In Metres">
    </span>
   </div><div>
    <span>
     <label for="m2">m<sup>2</sup></label>
    </span><span>
     <input id="m2" type="text"  disabled>
    </span>
   </div><div>
    <span>
     <label for="panels">Solar Panels Needed  For Pool</label>
    </span><span>
     <input id="panels" type="text"  disabled>
    </span>
   </div>
    <input type="reset" value="Clear Fields">
  </form>

<script>
(function( d ) {
   'use strict';

   var l = d.getElementById( 'length' );
   var w = d.getElementById( 'width' );

   l.addEventListener( 'keyup', calculate, false );
   w.addEventListener( 'keyup', calculate, false );
function calculate() {
   if ( ( isNaN( l.value ) || ( l.value =='' )) && 
        ( isNaN( w.value ) || ( w.value == '')) ) {
          return;
    }
   else {
          d.getElementById( 'm2' ).value = l.value * w.value;
          d.getElementById( 'panels' ).value = Math.ceil( l.value * w.value / 3.75 );
    }
 }
}(document));
</script>

</body>
</html>

coothead

1 Like
12

Wow, Coothead,

You are a lifesaver, I’ll work with that most deffinately. I am over the moon, many many thanks.

You guys are just awesome for helping out. Thank you ever so much again.

Have a great day

1 Like
13

 
 
     No problem you’re very welcome… :winky:
 
 
coothead

14

Hello again,
Just wanted to share with you (the code & formula that you gave me) I’ve coloured it in a bit for our website, you can have a look at it on the pool heating page.

Thank you once again for everybody that was willing to help a gal out.

Have a awesome day

15
16

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.