Priorities

In this example below you will see how to do a Priorities with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by iamdavidobrien, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright iamdavidobrien ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Priorities</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <form action="#">
  <fieldset class="priorities">
    <legend>Your business priorities</legend>
    <label for="r1">Priority 1</label>
    <input type="range" min="0" max="100" id ="r1" name="r1" value="0" step="1" />
    <label for="r1">Priority 2</label>
    <input type="range" min="0" max="100" id ="r2" name="r2" value="0" step="1" />
    <label for="r1">Priority 3</label>
    <input type="range" min="0" max="100" id ="r3" name="r3" value="0" step="1" />
    <label for="r1">Priority 4</label>
    <input type="range" min="0" max="100" id ="r4" name="r4" value="0" step="1" />
    <label for="r1">Priority 5</label>
    <input type="range" min="0" max="100" id ="r5" name="r5" value="0" step="1" />
  </fieldset>
  <fieldset class="output">
  </fieldset>
</form>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/iamdavidobrien/priorities-EwrVqX */
form {
  margin: 20px;
  paddding: 20px;
  width: 600px;
}

label, input {
  display: block;
  width: 100%;
}

/*Downloaded from https://www.codeseek.co/iamdavidobrien/priorities-EwrVqX */
$( document ).ready(function() {

  var r1val, r2val, r3val, r4val, r5val, total = 0;

  $('#r1').change(function(r1val) {
    r1val = $(this).val();
    alert( 'R1 value is ' +  r1val );
    total = total + r1val;
  });

  $('#r2').change(function() {
     r2val = $(this).val();
    alert( 'R2 value is ' +  r2val );
  });

  $('#r3').change(function() {
     r3val = $(this).val();
    alert( 'R3 value is ' +  r3val );
  });

  $('#r4').change(function() {
     r4val = $(this).val();
    alert( 'R4 value is ' +  r4val );
  });

  $('#r5').change(function() {
    r5val = $(this).val();
    alert( 'R5 value is ' +  r5val );
  });

  $('.output').text(total);
  
});

Comments