| D:\Sam\InterviewsMaterial\SiteWorx\SiteWorxTest\web\jsp\browserSideCalculation.jsp |
1 <%-- 2 Document : browserSideCalculation 3 Created on : Oct 8, 2013, 2:37:22 PM 4 Author : sameldin 5 --%> 6 <%@ page import="java.util.ArrayList"%> 7 <%@ page import="java.io.*"%> 8 <%@ page import="constants.*"%> 9 <%@ page import="utils.*"%> 10 11 <%@page contentType="text/html" pageEncoding="UTF-8"%> 12 <!DOCTYPE html> 13 <script language="JavaScript" type="text/javascript"> 14 function addRow(tableID) 15 { 16 var locaCountNode = document.getElementById('countUpTo5DigitsField'); 17 var localCount = locaCountNode.value; 18 if(localCount >= 5) 19 { 20 alert('===> Only Five entries are allowed'); 21 document.getElementById('enterDigit').value = ""; 22 return; 23 } 24 var digitFieldNode = document.getElementById('enterDigit'); 25 var localIntegerEntered = digitFieldNode.value; 26 localIntegerEntered = localIntegerEntered.replace(/\s/g,""); 27 if(localIntegerEntered=="") 28 { 29 alert('===> Digit Number Entered: Please enter a didgit with the value between 1 to 99,999'); 30 document.getElementById('enterDigit').value = ""; 31 digitFieldNode.focus(); 32 return; 33 } 34 if(isNaN(localIntegerEntered)) 35 { 36 alert('===> Digit Number Entered: ' + localIntegerEntered + ' <=== ' + ' Value entered is not a number '); 37 document.getElementById('enterDigit').value = ""; 38 digitFieldNode.focus(); 39 return; 40 } 41 if( (localIntegerEntered < 1) || (localIntegerEntered > 99999)) 42 { 43 alert('===> Digit Number Entered: ' + localIntegerEntered + ' Please enter a didgit with the value between 1 to 99,999'); 44 document.getElementById('enterDigit').value = ""; 45 digitFieldNode.focus(); 46 return; 47 } 48 49 var table = document.getElementById(tableID); 50 51 var rowCount = table.rows.length; 52 var row = table.insertRow(rowCount); 53 54 var cell1 = row.insertCell(0); 55 var element1 = document.createElement("input"); 56 element1.type = "checkbox"; 57 cell1.appendChild(element1); 58 var cell2 = row.insertCell(1); 59 var element2 = document.createElement("input"); 60 element2.type = "text"; 61 //================================= 62 element2.value=digitFieldNode.value; 63 //================================== 64 var localTotal = Number(document.getElementById('sumOfDigitsField').value); 65 localTotal += Number(digitFieldNode.value); 66 document.getElementById('sumOfDigitsField').value = localTotal; 67 //================================== 68 element2.readOnly = true; 69 digitFieldNode.value =""; 70 //================================== 71 cell2.appendChild(element2); 72 //================================== 73 var localColumnCount = Number(document.getElementById('countUpTo5DigitsField').value); 74 localColumnCount += 1; 75 document.getElementById('countUpTo5DigitsField').value = localColumnCount; 76 //================================== 77 var localAverage = Number(localTotal/localColumnCount); 78 document.getElementById('averageField').value = localAverage; 79 //================================== 80 lowHigh(); 81 } 82 //================================ 83 function deleteRow(tableID) { 84 try { 85 var table = document.getElementById(tableID); 86 var rowCount = table.rows.length; 87 88 for(var i=0; i<rowCount; i++) 89 { 90 var row = table.rows[i]; 91 var chkbox = row.cells[0].childNodes[0]; 92 if(null != chkbox && true == chkbox.checked) 93 { 94 var inputFieldDigits = row.cells[1].childNodes[0].value; 95 var tempSum = Number(document.getElementById('sumOfDigitsField').value - inputFieldDigits) 96 document.getElementById('sumOfDigitsField').value = tempSum; 97 //======================================= 98 table.deleteRow(i); 99 rowCount--; 100 i--; 101 //======================================= 102 var localColumnCount = Number(document.getElementById('countUpTo5DigitsField').value); 103 localColumnCount -= 1; 104 if(localColumnCount < 0) 105 localColumnCount=0; 106 document.getElementById('countUpTo5DigitsField').value = localColumnCount; 107 if(localColumnCount > 1) 108 { 109 document.getElementById('averageField').value = Number(tempSum /localColumnCount ); 110 } 111 else 112 { 113 document.getElementById('averageField').value = Number(tempSum ); 114 } 115 } 116 } 117 }catch(e) 118 { 119 alert(e); 120 } 121 //================================== 122 lowHigh(); 123 } 124 //================================ 125 function addValues(passedValue) 126 { 127 document.fiveDigitNumbersForm.digitNumber_1 = passedValue; 128 document.getElementById('sumOfDigitsField').value = passedValue; 129 130 131 } 132 //================================ 133 function lowHigh() 134 { 135 var table = document.getElementById('dataTable'); 136 var rowCount = table.rows.length; 137 var highDigit = 1; 138 if(parseInt(rowCount,10)<parseInt(highDigit,10)) 139 { 140 document.getElementById('highestField').value = 0; 141 document.getElementById('lowestField').value = 0; 142 document.getElementById('medianField').value = 0; 143 return; 144 } 145 //======================================== 146 function sortNumber(num1, num2) 147 { 148 return num1 - num2; 149 } 150 //======================================== 151 var lowDigit = 99999; 152 var stringOfDigits = ""; 153 for(var i=0; i<rowCount; i++) 154 { 155 var row = table.rows[i]; 156 var inputFieldDigits = row.cells[1].childNodes[0].value; 157 stringOfDigits += inputFieldDigits + ";"; 158 if(parseInt(inputFieldDigits,10)>parseInt(highDigit,10)) 159 { 160 highDigit = inputFieldDigits; 161 } 162 if(parseInt(inputFieldDigits,10)< parseInt(lowDigit,10)) 163 { 164 lowDigit = inputFieldDigits; 165 } 166 } 167 document.getElementById('highestField').value = highDigit; 168 document.getElementById('lowestField').value = lowDigit; 169 switch(rowCount) 170 { 171 case 1: 172 document.getElementById('medianField').value = lowDigit; 173 break; 174 case 2: 175 var firstDigit = Number(lowDigit); 176 var secondDigit = Number(highDigit); 177 var total = Number(firstDigit + secondDigit); 178 document.getElementById('medianField').value = Number(total/2); 179 break; 180 case 3: 181 var ThreeDigitsArray = stringOfDigits.split(';'); 182 if( (ThreeDigitsArray[0] != lowDigit) && (ThreeDigitsArray[0] != highDigit)) 183 { 184 document.getElementById('medianField').value = ThreeDigitsArray[0]; 185 } 186 else 187 if( (ThreeDigitsArray[1] != lowDigit) && (ThreeDigitsArray[1] != highDigit)) 188 { 189 document.getElementById('medianField').value = ThreeDigitsArray[1]; 190 } 191 else 192 document.getElementById('medianField').value = ThreeDigitsArray[2]; 193 break; 194 case 4: 195 var fourDigitsArray = stringOfDigits.split(';'); 196 var sortedArray = fourDigitsArray.sort(sortNumber); 197 var firstDigit = Number(sortedArray[2]); 198 var secondDigit = Number(sortedArray[3]); 199 var total = Number(firstDigit + secondDigit); 200 document.getElementById('medianField').value = Number(total/2); 201 break; 202 case 5: 203 var fiveDigitsArray = stringOfDigits.split(';'); 204 var sortedArray = fiveDigitsArray.sort(sortNumber); 205 document.getElementById('medianField').value = sortedArray[3]; 206 break; 207 default: 208 document.getElementById('medianField').value = 0; 209 } 210 } 211 //================================ 212 function submitDigits() 213 { 214 // alert("Due to Hosting issue, our Forms are not working at this point and please accept our apologies."); 215 // return; 216 var parameterString = "<%=Constants.INPUT_DIGIT_FLAG_STRING%>=" 217 + "-1" 218 + "&" 219 + "<%=Constants.USER_ID_NUMBER_STRING%>=" 220 + document.getElementById('<%=Constants.USER_ID_NUMBER_STRING%>').value 221 + "&" 222 + "<%=Constants.USER_FIRST_NAME_STRING%>=" 223 + document.getElementById('<%=Constants.USER_FIRST_NAME_STRING%>').value 224 + "&" 225 + "<%=Constants.USER_LAST_NAME_STRING%>=" 226 + document.getElementById('<%=Constants.USER_LAST_NAME_STRING%>').value 227 + "&" 228 + "<%=Constants.USER_EMAIL_ADDRESS_STRING%>=" 229 + document.getElementById('<%=Constants.USER_EMAIL_ADDRESS_STRING%>').value 230 + "&" 231 + "<%=Constants.TOTAL_COUNT_STRING%>=" 232 + document.getElementById('countUpTo5DigitsField').value 233 + "&" 234 + "<%=Constants.SUM_VALUE_STRING%>=" 235 + document.getElementById('sumOfDigitsField').value 236 + "&" 237 + "<%=Constants.AVERAGE_VALUE_STRING%>=" 238 + document.getElementById('averageField').value 239 + "&" 240 + "<%=Constants.MEDIAN_VALUE_STRING%>=" 241 + document.getElementById('medianField').value 242 + "&" 243 + "<%=Constants.HIGHTEST_VALUE_STRING%>=" 244 + document.getElementById('highestField').value 245 + "&" 246 + "<%= Constants.LOWEST_VALUE_STRING%>=" 247 + document.getElementById('lowestField').value; 248 249 alert("==> " + parameterString); 250 // 251 document.fiveDigitNumbersForm.action="/SiteWorxTest/SiteWorxFormServlet?" + parameterString; 252 document.fiveDigitNumbersForm.submit(); 253 } 254 //========================================== 255 </script> 256 257 <html> 258 <head> 259 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 260 <title>JSP Page</title> 261 </head> 262 <body> 263 <FORM name="fiveDigitNumbersForm" id="fiveDigitNumbersForm" action="" method="post" enctype="text/plain"> 264 <input type="hidden" name="<%=Constants.INPUT_DIGIT_FLAG_STRING%>" value="-1"> 265 <input type="hidden" name="<%=Constants.DIGIT_NUMBER_1_STRING%>" value="0"> 266 <input type="hidden" name="<%=Constants.DIGIT_NUMBER_2_STRING%>" value="0"> 267 <input type="hidden" name="<%=Constants.DIGIT_NUMBER_3_STRING%>" value="0"> 268 <input type="hidden" name="<%=Constants.DIGIT_NUMBER_4_STRING%>" value="0"> 269 <input type="hidden" name="<%=Constants.DIGIT_NUMBER_2_STRING%>" value="0"> 270 <!-- ************************** --> 271 <input type="hidden" name="<%=Constants.TOTAL_COUNT_STRING%>" value="0"> 272 <input type="hidden" name="<%=Constants.SUM_VALUE_STRING%>" value="0"> 273 <input type="hidden" name="<%=Constants.AVERAGE_VALUE_STRING%>" value="0"> 274 <input type="hidden" name="<%=Constants.MEDIAN_VALUE_STRING%>" value="0"> 275 <input type="hidden" name="<%=Constants.HIGHTEST_VALUE_STRING%>" value="0"> 276 <input type="hidden" name="<%=Constants.LOWEST_VALUE_STRING%>" value="0"> 277 <!-- ************************** --> 278 <TABLE bgcolor="black" WIDTH="50%" ALIGN=LEFT BORDER=0 style="clear: left;"> 279 </TR> 280 <TH> 281 <img 282 border="0" 283 src="../images/TechnicalAssessment2.bmp" 284 width="120" 285 height="10" 286 ALT="Technical Assessment" 287 ALIGN="LEFT" 288 > 289 </TH> 290 </TR> 291 </TABLE> 292 <!-- ************************** --> 293 <BR> 294 <h2>Technical Assessment Test (Series of 5 Digit Numbers)</h2> 295 <h3>This JSP is designed for the following:</h3> 296 <TABLE WIDTH="50%" BORDER=0 > 297 <TR> 298 <TH ALIGN=RIGHT VALIGN=TOP WIDTH=20 style="font-size: 10pt; font-weight: normal; color: black"> 299 <Font size=4 face=helvetica> 300 • 301 </font> 302 </TH> 303 <TH ALIGN=LEFT VALIGN=TOP style="font-size: 10pt; font-weight: normal; color: black"> 304 Take up to give 5 digits entries between 1 and 99,999 305 </TH> 306 </TR> 307 <TR> 308 <TH ALIGN=RIGHT VALIGN=TOP WIDTH=20 style="font-size: 10pt; font-weight: normal; color: black"> 309 <Font size=4 face=helvetica> 310 • 311 </font> 312 </TH> 313 <TH ALIGN=LEFT VALIGN=TOP style="font-size: 10pt; font-weight: normal; color: black"> 314 Calculate: Sum, Average, Median, Highest and Lowest Numbers of the User's Input 315 </TH> 316 </TR> 317 <TR> 318 <TH ALIGN=RIGHT VALIGN=TOP WIDTH=20 style="font-size: 10pt; font-weight: normal; color: black"> 319 <Font size=4 face=helvetica> 320 • 321 </font> 322 </TH> 323 <TH ALIGN=LEFT VALIGN=TOP style="font-size: 10pt; font-weight: normal; color: black"> 324 It also demo doing the calculation on the browser side and not the server side. 325 </TH> 326 </TR> 327 <TR> 328 <TH ALIGN=RIGHT VALIGN=TOP WIDTH=20 style="font-size: 10pt; font-weight: normal; color: black"> 329 <Font size=4 face=helvetica> 330 • 331 </font> 332 </TH> 333 <TH ALIGN=LEFT VALIGN=TOP style="font-size: 10pt; font-weight: normal; color: black"> 334 The values are uploaded to server for server side tasks (Submit). 335 </TH> 336 </TR> 337 </TABLE> 338 <!-- ************************** --> 339 <TABLE WIDTH="600" BORDER="0" CELLPADDING="0"> 340 <TR> 341 <TH WIDTH="100" ALIGN=LEFT VALIGN=TOP sans-serif; style="font-size: 10pt; font-weight: normal; color: #000000"> 342 First Name: 343 </TH> 344 <TH ALIGN=LEFT WIDTH="200" sans-serif; style="font-size: 10pt; font-weight: normal; color: #000000"> 345 <input type="input" id="<%=Constants.USER_FIRST_NAME_STRING%>" name="<%=Constants.USER_FIRST_NAME_STRING%>" value="Sam" style="font-size: 8pt; font-weight: normal; color: #000000;" width:180;height:15" disabled="disabled"> 346 </TH> 347 <TH WIDTH="100" ALIGN=LEFT VALIGN=TOP sans-serif; style="font-size: 10pt; font-weight: normal; color: #000000"> 348 Last Name: 349 </TH> 350 <TH ALIGN=LEFT WIDTH="200" sans-serif; style="font-size: 10pt; font-weight: normal; color: #000000"> 351 <input type="input" id="<%=Constants.USER_LAST_NAME_STRING%>" name="<%=Constants.USER_LAST_NAME_STRING%>" value="Eldin" style="font-size: 8pt; font-weight: normal; color: #000000;" width:180;height:15" disabled="disabled"> 352 </TH> 353 </TR> 354 <TR> 355 <TH WIDTH="100" ALIGN=LEFT VALIGN=TOP sans-serif; style="font-size: 10pt; font-weight: normal; color: #000000"> 356 User ID: 357 </TH> 358 <TH ALIGN=LEFT WIDTH="200" sans-serif; style="font-size: 10pt; font-weight: normal; color: #000000"> 359 <input type="input" id="<%=Constants.USER_ID_NUMBER_STRING%>" name="<%=Constants.USER_ID_NUMBER_STRING%>" value="123" style="font-size: 8pt; font-weight: normal; color: #000000;" width:180;height:15" disabled="disabled"> 360 </TH> 361 <TH WIDTH="100" ALIGN=LEFT VALIGN=TOP sans-serif; style="font-size: 10pt; font-weight: normal; color: #000000"> 362 Email: 363 </TH> 364 <TH ALIGN=LEFT WIDTH="200" sans-serif; style="font-size: 10pt; font-weight: normal; color: #000000"> 365 <input type="input" id="<%=Constants.USER_EMAIL_ADDRESS_STRING%>" name="<%=Constants.USER_EMAIL_ADDRESS_STRING%>" value="Sam@SamEldin.com" style="font-size: 8pt; font-weight: normal; color: #000000;" width:180;height:15" disabled="disabled"> 366 </TH> 367 </TR> 368 </TABLE> 369 370 <BR> 371 372 <!-- ************************** --> 373 <TABLE WIDTH="50%" bgcolor="white" ALIGN=LEFT BORDER=0 style="clear: left;"> 374 <TR> 375 <TH BGCOLOR="#006699" ALIGN=Center VALIGN=TOP sans-serif; style="font-size: 10pt; font-weight: normal; color: #000000"> 376 <font color=white size=3 face="TimesRoman"> 377 Totals 378 </font> 379 </TH> 380 </TR> 381 <TR> 382 <TH BGCOLOR="#006699" ALIGN=Center VALIGN=TOP sans-serif; style="font-size: 10pt; font-weight: normal; color: #000000"> 383 </TH> 384 </TR> 385 </TABLE> 386 <table id="totalTable" name="totalTable" align="LEFT" border="2" cellpadding="0" cellspacing="0" style="clear: left;"> 387 <thead> 388 <tr> 389 <th>Total Count</th> 390 <th>Sum</th> 391 <th>Average</th> 392 <th>Median</th> 393 <th>Highest</th> 394 <th>Lowest </th> 395 </tr> 396 </thead> 397 <tbody> 398 <tr> 399 <td><input id="countUpTo5DigitsField" name="countUpTo5DigitsField" type="text" disabled="disabled" value="0"/></td> 400 <td><input id="sumOfDigitsField" name="sumOfDigitsField" type="text" disabled="disabled" value="0"/></td> 401 <td><input id="averageField" name="averageField" type="text" disabled="disabled" value="0"/></td> 402 <td><input id="medianField" name="medianField" type="text" disabled="disabled" value="0"/></td> 403 <td><input id="highestField" name="highestField" type="text" disabled="disabled" value="0"/></td> 404 <td><input id="lowestField" name="lowestField" type="text" disabled="disabled" value="0"/></td> 405 </tr> 406 </tbody> 407 </table> 408 <BR> 409 <BR> 410 <BR> 411 <BR> 412 <!-- ************** 413 <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" /> 414 ********** --> 415 <BR> 416 <h3>To Delete Row: select the Check-Box and click on "Delete" Button.</h3> 417 <BR> 418 <INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" style="clear: left;"> 419 <BR> 420 <BR> 421 <TABLE id="dataTable" width="350px" border="1"> 422 <!-- ************** 423 <TR> 424 <TD><INPUT type="checkbox" name="chk"/></TD> 425 <TD> 1 </TD> 426 <TD> <INPUT type="text" /> </TD> 427 </TR> 428 ********** --> 429 </TABLE> 430 431 <BR> 432 <TABLE bgcolor="white" ALIGN=LEFT BORDER=0 style="clear: left;"> 433 </TR> 434 <TH WIDTH="230" ALIGN=LEFT VALIGN=TOP sans-serif; style="font-size: 14pt; font-weight: normal; color: #000000"> 435 <B><U>Enter Digit (1 to 99,999)</U></B>: 436 <BR> 437 <font size="3" face="TimesRoman"> 438 (May use Enter or Add Button) 439 </font> 440 </TH> 441 <TH ALIGN=LEFT sans-serif; style="font-size: 12pt; font-weight: normal; color: #000000"> 442 <input type="input" id="enterDigit" name="enterDigit" style="font-size: 15pt; font-weight: normal; color: #000000; width:180;" 443 onchange="addRow('dataTable');"> 444 </TH> 445 <TR> 446 </TR> 447 <TH WIDTH="230" ALIGN=LEFT VALIGN=TOP sans-serif; style="font-size: 14pt; font-weight: normal; color: #000000"> 448 449 </TH> 450 <TH ALIGN=LEFT sans-serif; style="font-size: 12pt; font-weight: normal; color: #000000"> 451 <button style="font-size: 12pt; font-weight: normal; color: #006699; width:120;" onClick="addColumn();">Add Input Value</button> 452 <button style="font-size: 12pt; font-weight: normal; color: #006699; width:120;" onClick="reset();">Reset</button> 453 <button style="font-size: 12pt; font-weight: normal; color: #006699; width:120;" onClick="submitDigits();">Submit</button> 454 </TH> 455 <TR> 456 </TABLE> 457 458 459 </FORM> 460 <script src="http://www.google.com/jsapi" type="text/javascript"></script> 461 <script type="text/javascript"> google.load("jquery", "1.3.2");</script> 462 <script> 463 $(document).ready(function(){ 464 465 $('#enterDigit').keydown(function (e) { 466 var keyCode = e.keyCode || e.which; 467 468 if (keyCode == 13) { 469 addRow('dataTable'); 470 return false; 471 } 472 }); 473 }); 474 </script> 475 476 </body> 477 </html>