In this tutorial I cover how to generate HTML tables dynamically based on user input using just JavaScript. Along the way I also cover Array.from, Rest Parameters, Generating Custom Ranges, Arrow Operators, For In, Map, and Numerous ways to Manipulate HTML elements.
This video was made based off of recent comments, so feel free to tell me what you want to see. All the code follows below to help you learn.
This 25 minute video only contains one 5 second ad. Please consider not Ad Blocking it so that I can continue to make these videos available for free.
Code From the Video
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 |
Jstut4.html <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width = device-width, initial-scale = 1"> <title>JavaScript Tutorial</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" href="mainstyle.css"> </head> <body> <div class="container"> <h3>Compound Interest Rate Calculator</h3> <!-- input-group adds styling to form elements--> <!-- mb-3 sets margin bottom to 1rem or 16px--> <div class="input-group mb-3"> <!-- Add help text to front of input--> <div class="input-group-prepend"> <!-- Style the help text --> <span class="input-group-text">Interest 1</span> </div> <!-- Style the form element --> <input type="text" class="form-control" placeholder="0.0" id="rate1"> </div> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text">Interest 2</span> </div> <input type="text" class="form-control" placeholder="0.0" id="rate2"> </div> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text">Interest 3</span> </div> <input type="text" class="form-control" placeholder="0.0" id="rate3"> </div> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text">Interest 4</span> </div> <input type="text" class="form-control" placeholder="0.0" id="rate4"> <!-- Append a button to the input --> <div class="input-group-append"> <button class="btn btn-outline-secondary" type="button" onClick="getTable()">Calculate</button> </div> </div> <!-- Table we'll add the dynamic table to --> <div id="interest-tbl"></div> </div> <script src="jstut4.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </body> </html> ——- MAINSTYLE.CSS ——- body { padding: 1rem } ——- JSTUT4.JS ——- // You can create custom ranges with Array.from // Define how many items to generate and the arrow // function to pop out values from 0 to 4 let a1 = Array.from({length: 5}, (x,i) => i); console.log(a1); // This can be abbreviated // The rest parameter ... binds to the array // that will contain the numbers 0 - 4 // keys() returns the generated list let a2 = [...Array(5).keys()]; console.log(a2); // Create a custom array with start, stop and step const range = (start, stop, step) => Array.from({length: (stop - start) / step + 1}, (x,i) => start + (i * step)); // 50 - 10 / 10 + 1 = 5 length // 10 + 0, 10 + 10, ... let a3 = range(10, 50, 10); console.log(a3); // Use arrow operator to make 5 squares // The array is created with 5 spaces with the value // undefined represented by x // i has increasing values from 0 to 4 and we get // the square of each and then reassign to the array let a4 = Array.from({length: 5}, (x,i) => i * i); console.log(a4); // You can use for in to cycle through the array for(let i in a4){ console.log(i); } // ---------- PROBLEM : COMPOUNDING INTEREST ---------- // Each year their investment will increase by their // investment + their investment * the interest rate // This function returns the year end new value // depending on a changing interest rate // Account Value = Principle(1 + rate)^years function getAccountValue(principal, interestRate, afterYear) { return (principal*(Math.pow(1 + interestRate, afterYear))).toFixed(2); } function getTable(){ // Get the requested interest rates and convert to // percents for calculations let rate1 = document.getElementById("rate1").value * .01; let rate2 = document.getElementById("rate2").value * .01; let rate3 = document.getElementById("rate3").value * .01; let rate4 = document.getElementById("rate4").value * .01; // Calculate 5 years of returns for each rate let return1 = [...Array(5).keys()].map(x => getAccountValue(1, rate1, x)); let return2 = [...Array(5).keys()].map(x => getAccountValue(1, rate2, x)); let return3 = [...Array(5).keys()].map(x => getAccountValue(1, rate3, x)); let return4 = [...Array(5).keys()].map(x => getAccountValue(1, rate4, x)); // Get the div to put the table in var tablearea = document.getElementById('interest-tbl'); // Create a table element var investTable = document.createElement('table'); // Add class to table element investTable.setAttribute('class', 'table table-striped'); // Create header // <thead> // <tr> // <th> var thead = document.createElement('thead'); var theadTR = document.createElement('tr'); // Create th elements var th1 = theadTR.appendChild(document.createElement('th')); var th2 = theadTR.appendChild(document.createElement('th')); var th3 = theadTR.appendChild(document.createElement('th')); var th4 = theadTR.appendChild(document.createElement('th')); var th5 = theadTR.appendChild(document.createElement('th')); // Convert back to regular rate and place in th th1.innerHTML = 'Year'; th2.innerHTML = Math.floor((rate1 * 100)) + '%'; th3.innerHTML = Math.floor((rate2 * 100)) + '%'; th4.innerHTML = Math.floor((rate3 * 100)) + '%'; th5.innerHTML = Math.floor((rate4 * 100)) + '%'; // Add th elements to tr element theadTR.prepend(th1, th2, th3, th4, th5); // Add tr to thead thead.appendChild(theadTR); // <tbody> // <tr> // <th> var tbody = document.createElement('tbody'); for (var i = 1; i < 5; i++){ var tbodyTR = document.createElement('tr'); var tbodyth1 = tbodyTR.appendChild(document.createElement('th')); var tbodyth2 = tbodyTR.appendChild(document.createElement('th')); var tbodyth3 = tbodyTR.appendChild(document.createElement('th')); var tbodyth4 = tbodyTR.appendChild(document.createElement('th')); var tbodyth5 = tbodyTR.appendChild(document.createElement('th')); tbodyth1.innerHTML = i; tbodyth2.innerHTML = return1[i]; tbodyth3.innerHTML = return2[i]; tbodyth4.innerHTML = return3[i]; tbodyth5.innerHTML = return4[i]; tbodyTR.prepend(tbodyth1, tbodyth2, tbodyth3, tbodyth4, tbodyth5); tbody.appendChild(tbodyTR); } investTable.appendChild(thead); investTable.appendChild(tbody); var tableDiv = document.getElementById("interest-tbl");tableDiv.appendChild(investTable); } |
Leave a Reply