``````
<!DOCTYPE html>
<html>
<meta name="viewport" width="device-width"/>
<meta charset="UTF-8">
<body>
<h1>Percentage Change Calculator</h1>
<section class="intro">
<p>Forget how to calculate the <span class ="tooltip">percentage change<span class="tooltiptext">First, work out the decrease between the two numbers you are comparing. Next, divide that by the original number and multiply it by 100. If the answer is negative, it's a percentage increase.<br><br> Or just use this calculator.</span></span> between two numbers? Don't have a napkin for back-of-the-napkin math? Use this calculator instead to quickly find the percentage increase or decrease between any two numbers.</p>
</section>
<section>
<div class="calculator">
<form>
<div class ="field1">
<label>Before number:</label>
<input id="my-form" type="text">
</div>
<div class ="field2">
<label>After number:</label>
<input id="my-form2" type="text">
</div>
<div class ="submit-button">
<button id="do-math" type="button" onclick="handleClick()">Do the math!</button>
</div>
</form>
</div>
</section>
<section class="result">
<h3 id="output">Percent change:</h3>
<p id="data-output"></p>
</section>
</body>
<script src="/percentage-change-calculator/script.js" type="text/javascript"></script>
</html>``````
``````

body {
font-family: Lato;
background-color: white;
color: black;

}

font-size: 2rem;
text-align: center;
text-decoration: wavy blue underline 3px;
margin: 3rem;
}

.intro {
font-size: 1.4rem;
text-align: left;
line-height: 2.8rem;
width: 50%;
margin: 4rem auto;
}

.tooltip {
display: inline-block;
position: relative;
border-bottom: 0.1rem solid blue;
cursor: help;
}

.tooltip .tooltiptext {
visibility: hidden;
width: 15rem;
font-size: 0.7rem;
line-height: 1rem;
background-color: black;
color: white;
text-align: left;
position: absolute;
z-index: 1;
}

.tooltip:hover .tooltiptext {
visibility: visible;
}

form {
width: 30%;
margin: 0 auto;
}

.field1, .field2 {
color: black;
font-weight: bold;
margin: 2rem auto;
display: flex;

}
.calculator {
display: block;
margin: 0 auto;
float: none;
}

label {

font-size: 1.4rem;
letter-spacing: 0.04rem;
width: 11rem;
}

input {
font-size: 1.2rem;
border: 0.1rem black solid;
width: 11rem;
}

button {
display: block;
background-color: blue;
margin: 3rem auto;
font-family: "Lato";
font-weight: bold;
color: white;
font-size: 1.3rem;
}

button:hover {
background-color: #000080;
}

.result {
background-color: blue;
color: white;
text-align: center;
line-height: 3rem;
width: 100%;
}

#data-output {
display: block;
font-size: 1.5rem;
float: center;
margin: 1rem auto;

}

#output {
display: block;
margin: 1rem auto;
float: center;
font-size: 2rem;
}

.highlight {
background-color: yellow;
color: blue;
border: 4px black solid;
}

/*Make responsive on mobile*/

@media only screen and (max-width: 600px) {

body {
font-family: Lato;
background-color: white;
color: black;

}

font-size: 0.9rem;
margin-top: 1rem auto;
text-align: center;
text-decoration: wavy blue underline 3px;
margin: 3rem;

}

.intro {
font-size: 1rem;
line-height: 1.7rem;
margin: 2.3rem auto;
width: 80%;

}

.field1, .field2 {
margin: 1rem auto;

}

form {
width: 80%;
}

label {
font-size: 0.9rem;
width: 40%;
letter-spacing: 0;
}

input {
width: 60%;
}

button {
margin-top: 2rem;
margin-bottom: 1rem;
}

#output {
font-size: 1.5rem;
}

#data-output {
font-size: 1rem;
}

.result {
line-height: 2rem;
}

.tooltip .tooltiptext {
width: 120%;
margin: 1rem auto;
}

}
``````
``````// https://css-tricks.com/snippets/css/a-guide-to-flexbox/

const doMath = document.getElementById("do-math")
const myForm = document.getElementById("my-form");
const myForm2 = document.getElementById("my-form2");

const handleClick = (e) => {
let originalNumber = myForm.value;
let newNumber = myForm2.value;

//If there was an increase
if ((newNumber - originalNumber) > 0) {
difference = (newNumber - originalNumber);
percentIncrease = Math.round((newNumber - originalNumber) /         originalNumber * 100);
answer.innerHTML = `There was a <span class="highlight">\${percentIncrease}% increase</span> from \${originalNumber} to \${newNumber}. <br> That's a difference of \${difference}.`;

//If there was a decrease
}  else if ((newNumber - originalNumber) < 0) {
difference = (originalNumber - newNumber);
percentDecrease = Math.round((originalNumber - newNumber) / originalNumber * 100);
answer.innerHTML = `There was a <span class="highlight"> \${percentDecrease}% decrease</span> from \${originalNumber} to \${newNumber}. <br> That's a difference of \${difference}.`;

//If there was no change
} else if (newNumber === originalNumber) {
answer.innerText = `There was no change.`
console.log('There was no change.');
//If the inputs are invalid
} else {
answer.innerText = 'Something went wrong. Try again.';
console.log('Something went wrong. Try again.');
}
};

``````

### External JavaScript

This Pen doesn't use any external JavaScript resources.