Saturday

How do I display the <div id="height"> output onto the height of the rectangle?

10:33 AM css, html, javascript, jquery No comments

Issue

What I'm Doing

I am creating a picture framing calculator using HTML, CSS, and JavaScript.

What the Calculator Solves

The following are example user inputs:

    Frame Width (wf):  16
    Frame Height (hf):  20 
    Picture Width (wp): 11 
    Picture Height (hp): 17
    Mat Overlap (o): .25

The equations for my calculator are:

Width = (1 / 2) * (hf - hp + o) = 1.625 which equates to the <div id="width">
Height = (1 / 2) * (wf - wp + o) = 2.625 which equates to the <div id="height">

The Code

* {
  margin: 0;
  padding: 0;
  font-family: 'Lato', sans-serif;
}


/*Fieldset and legend */

fieldset {
  margin: 2em 0;
  padding: 1em 2em;
  border: solid 1px #ccc;
  border-radius: 6px;
  min-width: P 200px;
}

legend {
  font-size: 1.25em;
  padding: 0 .25em;
  color: #999;
}


/* Labels */

label {
  display: block;
  margin-top: 1em;
}

.checks label {
  margin-top: 0;
}

label:first-of-type {
  margin-top: 0;
}


/* Inputs and textarea */

input {
  padding: .5em;
  border: solid 1px #999;
  background-color: #D3D3D3
}

input[type="number"],
input[type="text"] {
  width: 15em;
  background-color: #D3D3D3
}

textarea {
  min-height: 8em;
  min-width: 100%;
  padding: .5em;
  border: solid 1px #999;
  background-color: #D3D3D3
}


/* radio buttons and checkboxes */

.checks {
  margin-bottom: 1em;
}

.checks p {
  margin-bottom: 0;
}

input[type="checkbox"]+label,
input[type="radio"]+label {
  display: inline-block;
  padding-top: 0;
  margin-top: 0;
}

input[type="radio"] {
  margin-left: 1.5em;
  margin-right: 0;
}

input[type="radio"]:first-of-type {
  margin-left: 0;
}

#dvemail {
  display: none;
}

#chkYes:checked~#dvemail {
  display: block;
}


/* Submit Button */

input[type="button"] {
  padding: .5em 1em;
  border-radius: 6px;
  background-color: #333;
  color: #fff;
  font-family: 'Lato', sans-serif;
  font-size: .8em;
}


/* Large screen rules */

@media screen and (min-width: 430px) {
  legend {
    font-size: 1.75em;
  }
  fieldset {
    width: 40%;
    min-width: 320px;
    margin: auto;
  }
  .checks label {
    display: inline-block;
    padding-top: .5em;
    margin-top: 0;
    margin-right: .5em;
  }
}

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

<head>
  <meta charset="UTF-8">
  <meta name "viewport" content="width=device-width,
        initial-scale=1.0">
  <title>I Was Framed - Calculator</title>
  <link href="https://fonts.googleapis.com/css?family=Lato:300,400,400i,700,900&display=swap" rel="stylesheet">

  <link rel="stylesheet" href="style.css">

</head>

<body>
  <section>
    <form id="frm1" action="form_action.asp">
      <fieldset>
        <legend>
          I Was Framed Calculator
        </legend>
        <label for="frameWidth">Frame Width:</label><input type="number" step="any" min="0" name="wf" id="wf">
        <label for="frameHeight">Frame Height:</label><input type="number" step="any" min="0" name="hf" id="hf"><br>
        <label for="pictureWidth">Picture Width:</label><input type="number" step="any" min="0" name="wp" id="wp">
        <label for="pictureHeight">Picture Height:</label><input type="number" step="any" min="0" name="hp" id="hp"><br>
        <label for="matOverlap">Mat Overlap:</label><input type="number" min="0" step="any" name="o" id="o"><br>
        
        <input type="button" onclick="calc()" value="Calculate" name="cmdCalc" />
      </fieldset>
    </form>
  </section>
  <script>
    function calc()

    {
      var wf = document.getElementById('wf').value

      var hf = document.getElementById('hf').value

      var wp = document.getElementById('wp').value

      var hp = document.getElementById('hp').value

      var o = document.getElementById('o').value

      var width = (1 / 2) * (hf - hp + o);
      var height = (1 / 2) * (wf - wp + o);

      document.getElementById('width').innerHTML = width;
      document.getElementById('height').innerHTML = height;

    }
  </script>

  <center>
    <div style="width:300px;height:300px;border:1px solid #000;">
      <center>
        <div id="width"><div id="height"></div></div>
      </center>
    </div>
  </center>

</body>

</html>

The Problem & What I've Tried

My code is able to display the Width which is <div id="width"> on the resulting rectangle. However, I cannot display the Height which is <div id="height">. Here is the portion of the code in question:

<center><div style="width:300px;height:400px;border:1px solid #000;"><center><div id="width"><div id="height"></div></center></div></center>

My Question

How do I display <div id="height"> as shown in the image here: placement of height? In the image, the 1.625 is the calculation and correct placement of <div id="width">.

Solution

I have finally figured out a solution for the following question:

How do I display as shown in the image here, placement of Cut Height, Cut Width is already included.

I added a div with the id of height to the rectangle:

<center>
  <div style="width:200px;height:300px;border:1px solid #000;">
    <center>
      <div id="width"></div>
    </center>
    <div id="height"></div>
  </div>
</center>

And then this accompanying CSS:

  #height {
  text-align: left;
  margin-top: 130px;
  margin-left: 4px;
}

First, I aligned the text to the left of the rectangle.
Then, I moved the rectangle down by 130 pixels, about half of the 300px tall box (I didn’t put 150px, exactly half, because adding margin on top adds space above the text. If the top of the box was 150px down from the top, it wouldn’t look centered, since the top of the text would be centered. It’s more about eyeballing that 130px until it looks right).
Lastly, I added 4px of margin on the left so the text isn’t so close to the left edge and looks less cramped.

* {
  margin: 0;
  padding: 0;
  font-family: 'Lato', sans-serif;
}


/*Fieldset and legend */

fieldset {
  margin: 2em 0;
  padding: 1em 2em;
  border: solid 1px #ccc;
  border-radius: 6px;
  min-width: P 200px;
}

legend {
  font-size: 1.25em;
  padding: 0 .25em;
  color: #999;
}


/* Labels */

label {
  display: block;
  margin-top: 1em;
}

.checks label {
  margin-top: 0;
}

label:first-of-type {
  margin-top: 0;
}


/* Inputs and textarea */

input {
  padding: .5em;
  border: solid 1px #999;
  background-color: #D3D3D3
}

input[type="number"],
input[type="text"] {
  width: 15em;
  background-color: #D3D3D3
}

textarea {
  min-height: 8em;
  min-width: 100%;
  padding: .5em;
  border: solid 1px #999;
  background-color: #D3D3D3
}


/* radio buttons and checkboxes */

.checks {
  margin-bottom: 1em;
}

.checks p {
  margin-bottom: 0;
}

input[type="checkbox"]+label,
input[type="radio"]+label {
  display: inline-block;
  padding-top: 0;
  margin-top: 0;
}

input[type="radio"] {
  margin-left: 1.5em;
  margin-right: 0;
}

input[type="radio"]:first-of-type {
  margin-left: 0;
}

#height {
  text-align: left;
  margin-top: 150px;
  margin-left: 4px;
}


/* Submit Button */

input[type="button"] {
  padding: .5em 1em;
  border-radius: 6px;
  background-color: #333;
  color: #fff;
  font-family: 'Lato', sans-serif;
  font-size: .8em;
}


/* Large screen rules */

@media screen and (min-width: 430px) {
  legend {
    font-size: 1.75em;
  }
  fieldset {
    width: 40%;
    min-width: 320px;
    margin: auto;
  }
  .checks label {
    display: inline-block;
    padding-top: .5em;
    margin-top: 0;
    margin-right: .5em;
  }
}

<!DOCTYPE html>

<html lang="en">

    <head>
    
        <meta charset="UTF-8">

        <meta name "viewport" content="width=device-width,

        initial-scale=1.0">

        <title>I Was Framed - Calculator</title>



        <link href="https://fonts.googleapis.com/css?family=Lato:300,400,400i,700,900&display=swap" rel="stylesheet">

        <link rel="stylesheet" href="style.css">

    </head>

<body>

<section>

<form id="frm1" action="form_action.asp">

<fieldset>

<legend>

I Was Framed Calculator

</legend>



<label for="frameWidth">Frame Width:</label><input type="number" step="any" min="0" name="wf" id="wf">

<label for="frameHeight">Frame Height:</label><input type="number" step="any" min="0" name="hf" id="hf"><br>

<label for="pictureWidth">Picture Width:</label><input type="number" step="any" min="0" name="wp" id="wp">

<label for="pictureHeight">Picture Height:</label><input type="number" step="any" min="0" name="hp" id="hp"><br>

<label for="matOverlap">Mat Overlap:</label><input type="number" min="0" step="any" name="o" id="o"><br>


<br>
<input type="button" onclick="calc()" value="Calculate" name="cmdCalc"/>

</fieldset>

</form>

</section>

<script>

function calc()

{

    var wf = document.getElementById('wf').value
    
    var hf = document.getElementById('hf').value
    
    var wp = document.getElementById('wp').value
    
    var hp = document.getElementById('hp').value
    
    var o = document.getElementById('o').value
    
   var width = (1/2)*(hf-hp+o);
   var height = (1/2)*(wf-wp+o);

   document.getElementById('width').innerHTML = width;
   document.getElementById('height').innerHTML = height;


}

</script>


<center>
    <div style="width:400px;height:500px;border:2px solid #000; margin-top: 30px; margin-bottom: 30px;">
        <center>
            <div id="width"></div>
        </center>
    
        <div id="height"></div>
    </div>
</center>


</body>

</html>

Now there are calculated numbers which display on a rectangle in the width and height portions of the shape: based on the input of a picture framing calculator.

Decimal to Fraction - Optional

EDIT: I conducted some more research, so I hope you find this valuable. I discovered a way to display the output in fraction form as opposed to decimal.

First Edit for Fractions

To accomplish this in the HTML code above:

Find:

<input type="button" onclick="calc()" value="Calculate" name="cmdCalc"/>
</fieldset>
</form>
</section>

Add After:

<script src="https://unpkg.com/fractional@1.0.0/index.js"></script>

I found this library called fraction.js. So you can load fraction.js through the unpkg.com website.

Second Edit for Fractions

Find:

document.getElementById('width').innerHTML = width;
document.getElementById('height').innerHTML = height;

Replace With:

document.getElementById('width').innerHTML = new Fraction(width).toString();
document.getElementById('height').innerHTML = new Fraction(height).toString();

You’ll notice that, instead of width, I wrote new Fraction(width).toString(). That’s what the documentation of the library told me to do, in order to use their library (which converts decimals into fractions).

Answered By - Sanders

This Answer collected from stackoverflow and tested by AngularFix community admins, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0