Is there a way to showcase the output of the <div id="height"> on the height of the rectangle?

Question

Is there a way to showcase the output of the <div id="height"> on the height of the rectangle?

My Current Project

Currently, I am in the process of developing a picture framing calculator using a combination of HTML, CSS, and JavaScript.

Functionality of the Calculator

For this calculator, users will input values such as:

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

The equations utilized in the functionality are as follows:

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

The Styling Code

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

/* Additional CSS Code Here... */

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

<head>
  <meta charset="UTF-8>
  <link rel="stylesheet" href="style.css">
  <title>Framing Calculator</title>

  <!-- HTML & JavaScript Code Here -->

Current Issue & Attempts

Although I have successfully displayed the Width value in the rectangle, I am encountering difficulties with displaying the Height value. This snippet of code is where the issue lies:

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

My Inquiry

How can I properly showcase the
```
<div id="height">
```
as illustrated in this image? In the image, the calculated value of 1.625 is correctly displayed in the <div id="width">.

javascript html jquery css

Answer 1

Answer №1

After much deliberation, I have finally cracked the code to the following query:

How can I showcase the design as illustrated in the image here, including the placement of Cut Height and Cut Width?

To achieve this, I inserted a div with the id of height into 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>

Subsequently, I applied the following CSS:

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

To start, I aligned the text to the left side of the rectangle.
Then, I shifted the rectangle downwards by 130 pixels, approximately half of the 300px tall box (instead of using 150px, exactly half, to prevent the text from being centered at the top of the box).
Lastly, I added a 4px left margin to create some distance between the text and the left edge for a less cramped appearance.

Furthermore, I have introduced calculated values displayed in the width and height sections of the shape on a rectangle, based on the input from a picture framing calculator. You can view the results here.

Decimal to Fraction - Optional

UPDATE: Upon conducting further research, I stumbled upon a method to showcase the output in fraction form rather than decimal.

First Amendment for Fractions

To implement this in the initial HTML code:

Locate:

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

Insert After:

<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="107662717364797f7e717c50213e203e20">[email protected]</a>/index.js"></script>

I stumbled upon a library called fraction.js. You can load fraction.js via the unpkg.com platform.

Second Amendment for Fractions

Locate:

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();

Instead of simply using width, I opted for new Fraction(width).toString() as advised in the documentation of the library to convert decimals into fractions.

Answer 2

After much deliberation, I have finally cracked the code to the following query:

How can I showcase the design as illustrated in the image here, including the placement of Cut Height and Cut Width?

To achieve this, I inserted a div with the id of height into 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>

Subsequently, I applied the following CSS:

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

To start, I aligned the text to the left side of the rectangle.
Then, I shifted the rectangle downwards by 130 pixels, approximately half of the 300px tall box (instead of using 150px, exactly half, to prevent the text from being centered at the top of the box).
Lastly, I added a 4px left margin to create some distance between the text and the left edge for a less cramped appearance.

Furthermore, I have introduced calculated values displayed in the width and height sections of the shape on a rectangle, based on the input from a picture framing calculator. You can view the results here.

Decimal to Fraction - Optional

UPDATE: Upon conducting further research, I stumbled upon a method to showcase the output in fraction form rather than decimal.

First Amendment for Fractions

To implement this in the initial HTML code:

Locate:

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

Insert After:

<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="107662717364797f7e717c50213e203e20">[email protected]</a>/index.js"></script>

I stumbled upon a library called fraction.js. You can load fraction.js via the unpkg.com platform.

Second Amendment for Fractions

Locate:

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();

Instead of simply using width, I opted for new Fraction(width).toString() as advised in the documentation of the library to convert decimals into fractions.

Is there a way to showcase the output of the <div id="height"> on the height of the rectangle?

My Current Project

Functionality of the Calculator

The Styling Code

Current Issue & Attempts

My Inquiry

Answer №1

Decimal to Fraction - Optional

First Amendment for Fractions

Second Amendment for Fractions

Similar questions

My JavaScript/jQuery code isn't functioning properly - is there a restriction on the number of api calls that can be made on

Restrict the quantity of items retrieved from an AJAX response

Navigate directly to a specific section on a webpage

Issue with displaying the file-field in Django admin after upgrading from Django 2.1 to version 3

What is the best way to create subpages within a survey?

Enhance the reusability of this function using Jquery

Displaying Image from Jquery Ajax Response

Receiving a JSON object in response after sending data to a server using JavaScript

What is the best method for transferring data from an Excel spreadsheet into an HTML table?

Navigation for GitHub pages

JQuery anonymous function fails to execute

What is the best way to sort an array of objects based on their properties?

Issue with displaying parsed data using JSON and jQuery

Variations in the module pattern in JavaScript

What steps do I need to take in order to generate a legitimate link annotation within Adobe Acrobat by utilizing Acrobat

Adjusting the transparency of the background without impacting the text itself

Unable to convert JavaScript object to C# through deserialization

How can we increase the accuracy of numerical values in PHP?

What is the method to combine multiple style values in vue.js?

UV mapping with Plane BufferGeometry in Three.js