<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="/percentage-change-calculator/style.css">
    <meta name="viewport" width="device-width"/>
    <meta charset="UTF-8">
  </head>
<body>
  <header>
  <h1>Percentage Change Calculator</h1>
  </header>
  <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;
  
}

header {
 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;
  padding: 5px 10px;
  border-radius: 5px;
  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;
  padding: 0.8rem 3rem;
  color: white;
  font-size: 1.3rem;
  box-shadow: 3px 3px black;
}

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

.result {
 background-color: blue;
 color: white;
 padding: 2rem 1rem 8rem;
 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;
  padding-top: 3rem;
}

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


/*Make responsive on mobile*/

@media only screen and (max-width: 600px) {
 
  body {
  font-family: Lato;
  background-color: white;
  color: black;
  
}


  
  header {
    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;
    padding: 0.5rem 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 answer = document.getElementById("data-output");

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 CSS

  1. https://codepen.io/braveenk/pen/dyXbBme.css

External JavaScript

This Pen doesn't use any external JavaScript resources.