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/[email protected]/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:
#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?
CodePudding user response：
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:
- Create a special style rule like
.ticksor 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");
- 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() '"';