Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Follow
Facebook Twitter Instagram Youtube
Contact

Adding CSS content property after '<div id="name">' simultaneously on a rectangle

byMR
March 8, 2022

I am creating a picture framing calculator. When the calculator solves the user input – it displays the answer on a rectangle. The problem I’m running into is that the unit of measurement, ", is displaying on the rectangle before the answer is calculated. The answer and inches symbol should display simultaneously. Here’s my code:

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

#height::after {
  content: "\0022";
}

#width::after {
  content: "\0022";
}
<!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" type="text/css" href="styles.css" />

    </head>

<body>
 
        
<section>
    
    <form id="frm1" action="/index.html" method="post">

<fieldset>

<legend>

I Was Framed Calculator

</legend>



<label for="frameWidth">Frame Width:</label><input type="number" title="numbers should be in inches" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" step="any" min="0" name="frameWidth" id="frameWidth"><select name="frameWidthFraction" id="frameWidthFraction">
    <option value="0">0</option>
        <option value="0.0625">1/16</option>
            <option value="0.0125">1/8</option>
                <option value="0.1875">3/16</option>
                <option value="0.25">1/4</option>
                <option value="0.3125">5/16</option>
                <option value="0.375">3/8</option>
                <option value="0.4375">7/16</option>
                <option value="0.50">1/2</option>
                <option value="0.5625">9/16</option>
                <option value="0.625">5/8</option>
                <option value="0.6875">11/16</option>
                <option value="0.75">3/4</option>
                <option value="0.8125">3/16</option>
                <option value="0.875">7/8</option> 
                <option value="0.9375">15/16</option>
</select>

<label for="frameHeight">Frame Height:</label><input type="number" title="numbers should be in inches" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" step="any" min="0" name="frameHeight" id="frameHeight"><select name="frameHeightFraction" id="frameHeightFraction">
    
    <option value="0">0</option>
        <option value="0.0625">1/16</option>
            <option value="0.0125">1/8</option>
                <option value="0.1875">3/16</option>
                <option value="0.25">1/4</option>
                <option value="0.3125">5/16</option>
                <option value="0.375">3/8</option>
                <option value="0.4375">7/16</option>
                <option value="0.50">1/2</option>
                <option value="0.5625">9/16</option>
                <option value="0.625">5/8</option>
                <option value="0.6875">11/16</option>
                <option value="0.75">3/4</option>
                <option value="0.8125">3/16</option>
                <option value="0.875">7/8</option>
                <option value="0.9375">15/16</option>
</select>



<label for="pictureWidth">Picture Width:</label><input type="number" title="numbers should be in inches" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" step="any" min="0" name="pictureWidth" id="pictureWidth"><select name="pictureWidthFraction" id="pictureWidthFraction">
    
    <option value="0">0</option>
        <option value="0.0625">1/16</option>
            <option value="0.0125">1/8</option>
                <option value="0.1875">3/16</option>
                <option value="0.25">1/4</option>
                <option value="0.3125">5/16</option>
                <option value="0.375">3/8</option>
                <option value="0.4375">7/16</option>
                <option value="0.50">1/2</option>
                <option value="0.5625">9/16</option>
                <option value="0.625">5/8</option>
                <option value="0.6875">11/16</option>
                <option value="0.75">3/4</option>
                <option value="0.8125">3/16</option>
                <option value="0.875">7/8</option>
                <option value="0.9375">15/16</option>
</select>

<label for="pictureHeight">Picture Height:</label><input type="number" title="numbers should be in inches" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" step="any" min="0" name="pictureHeight" id="pictureHeight">


<select name="pictureHeightFraction" id="pictureHeightFraction">
   
    <option value="0">0</option>
        <option value="0.0625">1/16</option>
            <option value="0.0125">1/8</option>
                <option value="0.1875">3/16</option>
                <option value="0.25">1/4</option>
                <option value="0.3125">5/16</option>
                <option value="0.375">3/8</option>
                <option value="0.4375">7/16</option>
                <option value="0.50">1/2</option>
                <option value="0.5625">9/16</option>
                <option value="0.625">5/8</option>
                <option value="0.6875">11/16</option>
                <option value="0.75">3/4</option>
                <option value="0.8125">3/16</option>
                <option value="0.875">7/8</option>
                <option value="0.9375">15/16</option>
</select><br>

<label for="matOverlap">Mat Overlap:</label><input type="number" title="numbers should be in inches" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" step="any" min="0" name="matOverlap" id="matOverlap"><select name="matOverlapFraction" id="matOverlapFraction">
    
    <option value="0">0</option>
        <option value="0.0625">1/16</option>
            <option value="0.0125">1/8</option>
                <option value="0.1875">3/16</option>
                <option value="0.25">1/4</option>
                <option value="0.3125">5/16</option>
                <option value="0.375">3/8</option>
                <option value="0.4375">7/16</option>
                <option value="0.50">1/2</option>
                <option value="0.5625">9/16</option>
                <option value="0.625">5/8</option>
                <option value="0.6875">11/16</option>
                <option value="0.75">3/4</option>
                <option value="0.8125">3/16</option>
                <option value="0.875">7/8</option>
                <option value="0.9375">15/16</option>
</select>

    <br>


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

</fieldset>

</form>

</section>

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

<script>

function calc()

{

    var frameWidth = document.getElementById('frameWidth').value
    frameWidth = parseInt(frameWidth)
    
    var frameWidthFraction = document.getElementById('frameWidthFraction').value
    frameWidthFraction = parseFloat(frameWidthFraction)
        
    var frameHeight = document.getElementById('frameHeight').value
    frameHeight = parseInt(frameHeight)

    var frameHeightFraction = document.getElementById('frameHeightFraction').value
    frameHeightFraction = parseFloat(frameHeightFraction)
    
    var pictureWidth = document.getElementById('pictureWidth').value
    pictureWidth = parseInt(pictureWidth)

    var pictureWidthFraction = document.getElementById('pictureWidthFraction').value
    pictureWidthFraction = parseFloat(pictureWidthFraction)

    var pictureHeight = document.getElementById('pictureHeight').value
    pictureHeight = parseInt(pictureHeight)

    var pictureHeightFraction = document.getElementById('pictureHeightFraction').value
    pictureHeightFraction = parseFloat(pictureHeightFraction)

    var matOverlap = document.getElementById('matOverlap').value
    matOverlap = parseInt(matOverlap)

    var matOverlapFraction = document.getElementById('matOverlapFraction').value
    matOverlapFraction = parseFloat(matOverlapFraction)

    if (isNaN(frameWidth) || isNaN(frameHeight) || isNaN(pictureWidth) || isNaN(pictureHeight) || isNaN(matOverlap)) {
    alert('All fields are required!')
    return
}

   var width = (1/2)*((frameHeight+frameHeightFraction)-(pictureHeight+pictureHeightFraction)+(matOverlap+matOverlapFraction));
   var height = (1/2)*((frameWidth+frameWidthFraction)-(pictureWidth+pictureWidthFraction)+(matOverlap+matOverlapFraction));

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

   document.getElementById('rectangle').scrollIntoView({ behavior: 'smooth'})

}

</script>
        

    <div style="margin:0 auto;text-align:center;width:400px;height:50px;border:5px solid #000; margin-top: 20px; margin-bottom: 50px;padding-bottom:75%;background-color:gray" id="rectangle">
        <center>
            <div id="width"></div>
        </center>
    
        <div id="height"></div>
    </div>

</body>

</html>

As you can see on the rectangle – the " at the width and height locations are already present before the calculation is done.

This is the CSS code I’ve tried:

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel 

#height::after {
  content: "\0022";
}

#width::after {
  content: "\0022";
}

Can I get some guidance on how to make the calculator output and the " symbol appear simultaneously?

>Solution :

It’s exactly what you’ve tried with the pseudo elements that is causing problems. That psuedo element will be there as long as #height and #width are on the DOM.

Two solutions:

  1. Create a special style rule like .ticks or something. Add that class to width and height after calculating the value.
.ticks::after {
  content: "\0022";
}

document.getElementById('width').classList.add("ticks");
document.getElementById('height').classList.add("ticks");
  1. Simply add the " symbol to the end of the string being shown in the frame after calculating.
document.getElementById('width').innerHTML = new Fraction(width).toString() + '"';
document.getElementById('height').innerHTML = new Fraction(height).toString() + '"';
byMR
Published
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Read more

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading