CODEWITHSUNDEEP
javascripthtmlcss
Curtis
Curtis

Reputation: 21

Percentage circle help + more please

I'm making a Mortgage Calculator & I can't figure out how to display the % of (property price / deposit) I can only display the value of what I enter into property price.

It's at the bottom. Everything else works fine. I need an alternative to getElementByID for this instance. I've tried setting a variable (as you can see)

could also use a fix for the "NaN" display on output (i've also tried fixing this but couldn't)

var percent = pp / dp

and replacing document.getElementById('pp') with that variable just before the event listener.

could also use a fix for the "NaN" display on output (i've also tried fixing this but couldn't)

EDIT: just also realised the circle seems to be blocking some of the input field of "Repayment period" and I have no idea why :\

$(".input").on('input',function(){

    var pp = document.getElementById ('pp').value;
    var dp = document.getElementById ('dp').value;
    var ai = document.getElementById ('ai').value;
    var rp = document.getElementById ('rp').value;


    
    var monthly = rp * 12
    var value = pp - dp
    var interest = (value *(ai * 0.138)) / monthly;
    var result = (value / monthly) + interest;
    var percent = pp / dp

    document.getElementById('result').innerHTML = result.toFixed(2);
 



    document.getElementById('pp').addEventListener('change', ({ target }) => {
        let { value: pp }= target;
        if (pp > 100) {
          pp = 100;
        }
        let successValue = (pp/100)*660;
        document.getElementById('circle-percentage').innerHTML= `${pp}%`;
        document.getElementById('success-value').setAttribute('stroke-dasharray', `${successValue}, 660`);
      });
    });

form {
  margin: 0 auto;
  width: 500px;
  height: 600px;
  padding: 1em;
  border: 3px solid #CCC;
  border-radius: 1em;
  background-color: #e6e6e6;
}

h2{
  text-align: center;
  color: #BA992F
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  padding:10px;
  border-radius:10px;
  box-shadow:3px
}

form li + li {
  margin-top: 1em;
}


/* Input field borders */

#pp, #dp, #ai, #rp{
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  border-width: thin;
  box-sizing: border-box;
}


/* Property Price CSS */

label[for="pp"] {
  display: block;
}

#pp {
  width: 100%;
}
#input pp:before{
  content: "£";
}

#pp:focus {
  border: 1px solid #BA992F;
  color:#000000;
 } 


/* Deposit CSS */

label[for="dp"] {
  display: block;
  text-align: left;
}

#dp{
  width: 50%;
}

.form-group2 {
  float:left;
  width: 90%;
  position:relative;
  text-align: left;
}

#dp:focus {
  border: 1px solid #BA992F;
  color:#000000;
 }
 


/* Annual Interest CSS */

#form-group3{
  float:left;
  position:relative;
}

label[for="ai"] {
  position: relative;
  display: block;
  float: left;
  width: 20em;
  top: 15px;
}

#ai{
  position: relative;
  width:45%;
  top: 15px;
}

#ai:focus {
  border: 1px solid #BA992F;
  color:#000000;
 }
 

/* Repayment Period CSS */



#form-group4{
  float:right;
  width: 45%;
  position:relative;
  text-align: right;
}

label[for="rp"] {
  text-align:right;
}


#rp{
  float: right;
  position: relative;
  top: -60px;
  width: 45%;
}

#rp:focus {
  border: 1px solid #BA992F;
  color:#000000;
 }
 
.rp1{
  position:absolute;
  right:816px; top: 277px;
}


/* Result */

.form-group5{
  position:absolute;
  text-align:center;
  bottom:0;
  width:40%;
  left:30%;
  height: 550px;

}

#result{
  font-size: 30px;
}

label[for="n/a"]{
  font-size: 25px;
}

label[for="result"]{
  color: #686868;
}


input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#circle {
  width: 100%;
  height: 100%;
  size: 10px;
  transform: rotate(135deg);
  height: 200px;
}
#circle-percentage {
  color: #444;
  position:relative;
  top: -122px;
  left: 213px;
  font-size: 2em;
}

#circle-percentage2 {
  color: #444;
  position:relative;
  top: -122px;
  left: 213px;
  font-size: 5em;
}

'''

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="Chrome">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    

    <link rel="stylesheet" href="/css/style.css">
    <script src = "/js/jquery-3.6.0.min.js"></script>
    <style>
      input:focus{
          outline: none;
      }
  </style>
</head>
<body>
    
    <div class="container">
        <div class="row">
            <div class="col-md-4 offset-md-4">
                <form>
                    <header>
                        <h2 class="number-center"> Mortgage Calculator</h2>
                      </header>
                    
                    <div class="form-group">
                        <label for="pp">Property price</label>
                        <input type="number" id="pp" class="input pp" 
                        pattern="^\£\d{1,3}(,\d{3})*(\.\d+)?£" value="" data-type="currency">
                    </div>  
                    <br>

                    <div class="form-group2">
                        <label for="dp">Deposit</label>
                        <input type="number" id="dp" class="input dp" 
                        pattern="^\£\d{1,3}(,\d{3})*(\.\d+)?£" value="" data-type="currency">
                    </div>   
                    <br>

                    <div class="form-group3">
                      <label for="ai">Annual interest</label>
                      <input type="number" id="ai" class="input ai">
                  </div>   
                  <br>

                  <div class="form-group4">
                    <label for="rp" class="rp1">Repayment period</label>
                    <input type="number" id="rp" class="input rp">
                </div>   
                <br>
                    <div class="form-group5">
                        <label for="result">Monthly Repayments:</label>
                        <br>
                        <label for="n/a">£</label>
                        <output type="number" id="result" class="result">
                    </div>
                    <svg id="circle">
                        <circle r="50" cx="50%" cy="50%" stroke="gray" fill="none" stroke-width="10" stroke-linecap="round" stroke-dasharray="660, 660">
                        </circle>
                        <circle id="success-value" r="50" cx="50%" cy="50%" stroke="#BA992F" fill="none" stroke-width="10" stroke-linecap="round" stroke-dasharray="660, 660">
                        </circle>
                      </svg>
                      <div style="position: relative;">
                        <div id="circle-percentage"></div>
                        </div>
                      </div>




                

                    <script src="/js/script.js" charset="UTF-8"> </script>
                </form>
            </div>
        </div>
    </div>
 </div>
 </body>
</ul>





</body>
</html>

Upvotes: 1

Views: 108

Answers (1)

vanowm
vanowm

Reputation: 10201

Will this do?

$(".input").on('input',function(){

    var pp = document.getElementById ('pp').value;
    var dp = document.getElementById ('dp').value;
    var ai = document.getElementById ('ai').value;
    var rp = document.getElementById ('rp').value;
    if (!pp || !dp || !ai || !rp)
      return;

    
    var monthly = rp * 12
    var value = pp - dp
    var interest = (value *(ai * 0.138)) / monthly;
    var result = (value / monthly) + interest;
    var percent = (dp / pp * 100).toFixed(3); //round result to 3 decimal places
    document.getElementById('result').innerHTML = result.toFixed(2);

    if (pp > 100) {
      pp = 100;
    }
    let successValue = (pp/100)*660;
    document.getElementById('circle-percentage').innerHTML= `${percent}%`;
    document.getElementById('success-value').setAttribute('stroke-dasharray', `${successValue}, 660`);
});
form {
  margin: 0 auto;
  width: 500px;
  height: 600px;
  padding: 1em;
  border: 3px solid #CCC;
  border-radius: 1em;
  background-color: #e6e6e6;
}

h2{
  text-align: center;
  color: #BA992F
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  padding:10px;
  border-radius:10px;
  box-shadow:3px
}

form li + li {
  margin-top: 1em;
}


/* Input field borders */

#pp, #dp, #ai, #rp{
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  border-width: thin;
  box-sizing: border-box;
}


/* Property Price CSS */

label[for="pp"] {
  display: block;
}

#pp {
  width: 100%;
}
#input pp:before{
  content: "£";
}

#pp:focus {
  border: 1px solid #BA992F;
  color:#000000;
 } 


/* Deposit CSS */

label[for="dp"] {
  display: block;
  text-align: left;
}

#dp{
  width: 50%;
}

.form-group2 {
  float:left;
  width: 90%;
  position:relative;
  text-align: left;
}

#dp:focus {
  border: 1px solid #BA992F;
  color:#000000;
 }
 


/* Annual Interest CSS */

#form-group3{
  float:left;
  position:relative;
}

label[for="ai"] {
  position: relative;
  display: block;
  float: left;
  width: 20em;
  top: 15px;
}

#ai{
  position: relative;
  width:45%;
  top: 15px;
}

#ai:focus {
  border: 1px solid #BA992F;
  color:#000000;
 }
 

/* Repayment Period CSS */



#form-group4{
  float:right;
  width: 45%;
  position:relative;
  text-align: right;
}

label[for="rp"] {
  text-align:right;
}


#rp{
  float: right;
  position: relative;
  top: -60px;
  width: 45%;
}

#rp:focus {
  border: 1px solid #BA992F;
  color:#000000;
 }
 
.rp1{
  position:absolute;
  right:816px; top: 277px;
}


/* Result */

.form-group5{
  position:absolute;
  text-align:center;
  bottom:0;
  width:40%;
  left:30%;
  height: 550px;

}

#result{
  font-size: 30px;
}

label[for="n/a"]{
  font-size: 25px;
}

label[for="result"]{
  color: #686868;
}


input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#circle {
  width: 100%;
  height: 100%;
  size: 10px;
  transform: rotate(135deg);
  height: 200px;
}
#circle-percentage {
  color: #444;
  position:relative;
  top: -122px;
  left: 213px;
  font-size: 2em;
}

#circle-percentage2 {
  color: #444;
  position:relative;
  top: -122px;
  left: 213px;
  font-size: 5em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="Chrome">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    

    <link rel="stylesheet" href="/css/style.css">
    <script src = "/js/jquery-3.6.0.min.js"></script>
    <style>
      input:focus{
          outline: none;
      }
  </style>
</head>
<body>
    
    <div class="container">
        <div class="row">
            <div class="col-md-4 offset-md-4">
                <form>
                    <header>
                        <h2 class="number-center"> Mortgage Calculator</h2>
                      </header>
                    
                    <div class="form-group">
                        <label for="pp">Property price</label>
                        <input type="number" id="pp" class="input pp" 
                        pattern="^\£\d{1,3}(,\d{3})*(\.\d+)?£" value="" data-type="currency">
                    </div>  
                    <br>

                    <div class="form-group2">
                        <label for="dp">Deposit</label>
                        <input type="number" id="dp" class="input dp" 
                        pattern="^\£\d{1,3}(,\d{3})*(\.\d+)?£" value="" data-type="currency">
                    </div>   
                    <br>

                    <div class="form-group3">
                      <label for="ai">Annual interest</label>
                      <input type="number" id="ai" class="input ai">
                  </div>   
                  <br>

                  <div class="form-group4">
                    <label for="rp" class="rp1">Repayment period</label>
                    <input type="number" id="rp" class="input rp">
                </div>   
                <br>
                    <div class="form-group5">
                        <label for="result">Monthly Repayments:</label>
                        <br>
                        <label for="n/a">£</label>
                        <output type="number" id="result" class="result">
                    </div>
                    <svg id="circle">
                        <circle r="50" cx="50%" cy="50%" stroke="gray" fill="none" stroke-width="10" stroke-linecap="round" stroke-dasharray="660, 660">
                        </circle>
                        <circle id="success-value" r="50" cx="50%" cy="50%" stroke="#BA992F" fill="none" stroke-width="10" stroke-linecap="round" stroke-dasharray="660, 660">
                        </circle>
                      </svg>
                      <div style="position: relative;">
                        <div id="circle-percentage"></div>
                        </div>
                      </div>
                    <script src="/js/script.js" charset="UTF-8"> </script>
                </form>
            </div>
        </div>
    </div>
 </div>
 </body>
</ul>
</body>
</html>

Upvotes: 1

Related Questions