+
+
+
+
+
+
+
+
diff --git a/Week1/homework/js-exercises/ex05-cat-walk/main.css b/Week1/homework/js-exercises/ex05-cat-walk/main.css
new file mode 100644
index 000000000..ebf08d991
--- /dev/null
+++ b/Week1/homework/js-exercises/ex05-cat-walk/main.css
@@ -0,0 +1,34 @@
+
+body {
+ margin: 0px 18px;
+ padding: 0px;
+ font-size: 150%;
+ font-family: sans-serif;
+ }
+
+.cls_text_align_left {
+ text-align: left;
+ }
+
+.cls_text_align_right {
+ text-align: right;
+ }
+
+.cls_text_align_center {
+ text-align: center;
+ }
+
+div {
+ padding: 12px 16px 8px 16px;
+ margin: 20px 0px;
+ }
+
+/* for visual validation:
+ enable following style (by deleting the dot) to see the image with a border */
+.img {
+ border-style: solid;
+ border-color: gold;
+ }
+
+;
+
diff --git a/Week1/homework/js-exercises/ex05-cat-walk/main.js b/Week1/homework/js-exercises/ex05-cat-walk/main.js
new file mode 100644
index 000000000..6e67dc5f9
--- /dev/null
+++ b/Week1/homework/js-exercises/ex05-cat-walk/main.js
@@ -0,0 +1,14 @@
+
+{
+ 'use strict';
+
+ let lmntRef=document.getElementById('id_page_header');
+ lmntRef.style.backgroundColor='gold';
+ document.getElementById('id_page_title').innerHTML=
+ lmntRef.innerHTML=`(Homework: Javascript 2 - week 1) - (Exercise 05: The cat walk)`;
+ lmntRef.style.borderRadius='12px';
+ document.body.style.backgroundColor='#25003e';
+};
+
+;
+
diff --git a/Week1/homework/js-exercises/project-random-quotes/index.html b/Week1/homework/js-exercises/project-random-quotes/index.html
new file mode 100644
index 000000000..de955a63e
--- /dev/null
+++ b/Week1/homework/js-exercises/project-random-quotes/index.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/Week2/homework/js-exercises/project-countdown-timer/main.css b/Week2/homework/js-exercises/project-countdown-timer/main.css
new file mode 100644
index 000000000..27afa81b6
--- /dev/null
+++ b/Week2/homework/js-exercises/project-countdown-timer/main.css
@@ -0,0 +1,85 @@
+
+body {
+ margin: 0px 18px;
+ padding: 0px;
+ font-size: 1.5em;
+ font-family: sans-serif;
+ }
+
+div, p {
+ margin: 0px;
+ padding: 0px;
+ }
+
+hr {
+ display: block;
+ margin: 12px auto 12px;
+ color: navy;
+ border-style: outset;
+ border-width: 2px;
+ }
+
+.cls_text_align_left {
+ text-align: left;
+ }
+
+.cls_text_align_right {
+ text-align: right;
+ }
+
+.cls_text_align_center {
+ text-align: center;
+ }
+
+.cls_unselectable {
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ }
+
+#id_page_header {
+ padding: 12px 16px 8px 16px;
+ margin: 20px 0px;
+ }
+
+#id_timer_background {
+ background-color: rgb(35,80,95);
+ color: wheat;
+ display: table;
+ margin: 0 auto;
+ border-radius: 50px 15px;
+ padding: 0px 30px 30px 30px;
+ }
+
+#id_timer_container {
+ border-style: outset;
+ border-color: navy;
+ border-radius: 60px;
+ border-width: 7px;
+ font-size: 1.6em;
+ padding: 30px 40px 20px 40px;
+ }
+
+#id_timer_element {
+ display: inline-block;
+ font-size: 2.8em;
+ margin: 0px 30px;
+ }
+
+#id_min_container, #id_sec_container {
+ display: inline-block;
+ }
+
+#id_timer_toggle {
+ background-color: #3b88c3;
+ display: table;
+ margin: 0 auto;
+ padding: 8px 20px;
+ border-radius: 20px;
+ }
+
+;
+
diff --git a/Week2/homework/js-exercises/project-countdown-timer/main.js b/Week2/homework/js-exercises/project-countdown-timer/main.js
new file mode 100644
index 000000000..44389cad1
--- /dev/null
+++ b/Week2/homework/js-exercises/project-countdown-timer/main.js
@@ -0,0 +1,57 @@
+
+{
+ 'use strict';
+
+ let lmntRef=document.getElementById('id_page_header');
+ lmntRef.style.backgroundColor='gold';
+ document.getElementById('id_page_title').innerHTML=lmntRef.innerHTML=
+ `(Homework: Javascript 2 - week 2) - (PROJECT: Countdown Timer)`;
+ lmntRef.style.borderRadius='12px';
+ document.body.style.backgroundColor='#25003e';
+
+ const timerStatusRef=document.getElementById('id_timer_status');
+ const timerDisplayRef=document.getElementById('id_timer_element');
+ const timerMinGrpRef=document.getElementById('id_min_container');
+ const timerSecGrpRef=document.getElementById('id_sec_container');
+ const timerMinIncRef=document.getElementById('id_min_increase');
+ const timerMinDecRef=document.getElementById('id_min_decrease');
+ const timerSecIncRef=document.getElementById('id_sec_increase');
+ const timerSecDecRef=document.getElementById('id_sec_decrease');
+ const timerToggleRef=document.getElementById('id_timer_toggle');
+ const maxTimerTime=3599;
+ let timerIsActive=true;
+ let timerCurrentValue;
+ let countdownTimer;
+ document.body.onloadend=initializePage();
+
+ function initializePage() {
+ setTimeValue(0);
+ timerStatusRef.innerHTML='Set countdown time';
+ timerToggleRef.addEventListener("click",()=>
+ {timerIsActive=!timerIsActive; setTimeValue(timerCurrentValue)});
+ timerMinIncRef.addEventListener("click",()=>setTimeValue(timerCurrentValue+60));
+ timerMinDecRef.addEventListener("click",()=>setTimeValue(timerCurrentValue-60));
+ timerSecIncRef.addEventListener("click",()=>setTimeValue(timerCurrentValue+1));
+ timerSecDecRef.addEventListener("click",()=>setTimeValue(timerCurrentValue-1));
+ };
+
+ function setTimeValue(newValue) {
+ timerCurrentValue=(newValue<1?0:newValue>maxTimerTime?maxTimerTime:newValue);
+ timerIsActive=timerIsActive&&(timerCurrentValue>0);
+ timerStatusRef.innerHTML=(timerCurrentValue==0?'Timer has expired'
+ :timerIsActive?'Countdown in progress':'Countdown is Paused');
+ timerDisplayRef.innerHTML=('0'+String(Math.floor(timerCurrentValue/60))).substr(-2)
+ +':'+('0'+String(timerCurrentValue%60)).substr(-2);
+ timerToggleRef.innerHTML=(timerIsActive?'Pause countdown':'Resume countdown');
+ timerToggleRef.style.display=(timerCurrentValue==0?'none':'block');
+ timerMinGrpRef.style.visibility=(timerIsActive?'hidden':'visible');
+ timerSecGrpRef.style.visibility=(timerIsActive?'hidden':'visible');
+ if ((countdownTimer)&&(!timerIsActive))
+ {clearInterval(countdownTimer);countdownTimer=undefined};
+ if ((timerIsActive)&&(!countdownTimer))
+ {countdownTimer=setInterval(()=>{setTimeValue(timerCurrentValue-1)},1000)};
+ };
+};
+
+;
+
diff --git a/Week3/homework/js-exercises/ex01-add-six-closure.js b/Week3/homework/js-exercises/ex01-add-six-closure.js
new file mode 100644
index 000000000..f11dfb4c5
--- /dev/null
+++ b/Week3/homework/js-exercises/ex01-add-six-closure.js
@@ -0,0 +1,38 @@
+
+{
+ 'use strict';
+
+ console.log("= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =");
+ console.log("JS-2 - week 3 - Exercise 01 - Add six");
+ console.log("Practice with closures");
+ console.log("- - - - - - - - - - - - - - - - - - - -");
+
+ // define the closure generator
+ function createBase(paramBaseValue) {
+ const baseValue=paramBaseValue;
+ return (paramValue)=>{return paramValue+=baseValue};
+ }
+
+ // define all required tests
+ const testingList={ // this works ( even tho addSix is undeclared yet )
+ test_1:()=>addSix(9), // because: the function only executes when evoked,
+ test_2:()=>addSix(18), // which happens much later in the code,
+ test_3:()=>addSix(30), // and by that point addSix has already been defined
+ };
+
+ // create a closure containing a base value of 6
+ const addSix=createBase(6);
+
+ // evoke all required tests - console.log() each with the result
+ Object.keys(testingList).forEach((pLmnt,pIdx)=>{console.log(`${
+ pLmnt.replace(/_+/g,' ')} : ${
+ String(Object.values(testingList)[pIdx]).substr(4)} result is ${
+ testingList[pLmnt]()}`)});
+
+ console.log("= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =");
+ console.log(" ");
+};
+
+
+;
+
diff --git a/Week3/homework/js-exercises/ex02-remove-duplicates.js b/Week3/homework/js-exercises/ex02-remove-duplicates.js
new file mode 100644
index 000000000..49de6f815
--- /dev/null
+++ b/Week3/homework/js-exercises/ex02-remove-duplicates.js
@@ -0,0 +1,52 @@
+
+{
+ 'use strict';
+
+ console.log("= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =");
+ console.log("JS-2 - week 3 - Exercise 02 - Take out the duplicates");
+ console.log("Practice with array manipulation");
+ console.log("- - - - - - - - - - - - - - - - - - - -");
+
+ const myNumberList=[4,6,4,5,6,3,4,7,2,5,8,4,1,9];
+ console.log(`my Number List [${joinQuoted(myNumberList)}]`);
+ console.log(`filter cloned (original array untouched) [${
+ joinQuoted(filterCloneUniqueArrayElements(myNumberList))}]`);
+ removeDuplicateArrayElements(myNumberList);
+ console.log(`uniquefied (applied on original array) [${joinQuoted(myNumberList)}]`);
+ console.log(` `);
+
+ const myCharList=['q','w','e','r','3','w','1','t','q','y',1];
+ console.log(`my Character List [${joinQuoted(myCharList)}]`);
+ console.log(`filter cloned (original array untouched) [${
+ joinQuoted(filterCloneUniqueArrayElements(myCharList))}]`);
+ removeDuplicateArrayElements(myCharList);
+ console.log(`uniquefied (applied on original array) [${joinQuoted(myCharList)}]`);
+
+ function joinQuoted (theArray,joinChar)
+ {return theArray.map(lmnt=>typeof(lmnt)=='string'
+ ?'"'+lmnt.replace(/\"/g,"'")+'"':lmnt).join(joinChar)};
+
+ function filterCloneUniqueArrayElements (theArray)
+ {return theArray.filter((pLmnt,pIdx,pArray)=>pIdx==pArray.indexOf(pLmnt))};
+
+ function objectifyCloneArrayElements (theArray) {
+ let unq={};
+ theArray.forEach(lmnt=>unq[lmnt]=1);
+ return Object.keys(unq);
+ };
+
+ function removeDuplicateArrayElements (theArray) {
+ let dupIndexList=[];
+ theArray.forEach((pLmnt,pIdx)=>pIdx==theArray.indexOf(pLmnt)?null:dupIndexList.unshift(pIdx));
+ //console.log(` indice of duplicate values [${dupIndexList}]`);
+ dupIndexList.forEach(pLmnt=>{theArray.splice(pLmnt,1)});
+ return theArray;
+ };
+
+ console.log("= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =");
+ console.log(" ");
+};
+
+
+;
+
diff --git a/Week3/homework/js-exercises/ex03-guess-output-1.js b/Week3/homework/js-exercises/ex03-guess-output-1.js
new file mode 100644
index 000000000..2f68885e2
--- /dev/null
+++ b/Week3/homework/js-exercises/ex03-guess-output-1.js
@@ -0,0 +1,36 @@
+
+{
+ 'use strict';
+
+ console.log("= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =");
+ console.log("JS-2 - week 3 - Exercise 03 - Guess the output");
+ console.log("Practice with closures");
+ console.log("- - - - - - - - - - - - - - - - - - - -");
+
+ let a = 10;
+ const x = (function() {
+ a = 12;
+ return function() {
+ alert(a);
+ };
+ })();
+
+ console.log(`"x" is a Closure,`);
+ console.log(` which is a function defined and returned (as a result)`);
+ console.log(` from within another function.`);
+ console.log(` `);
+ console.log(`Closures have access to the scope of their constructor`);
+ console.log(` so "a" in "alert(a)" holds the value "12"`);
+ console.log(` `);
+ console.log(`Therefore evoking the closure "x()"`);
+ console.log(` will produce a popup window with the message "12"`);
+
+ x();
+
+ console.log("= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =");
+ console.log(" ");
+};
+
+
+;
+
diff --git a/Week3/homework/js-exercises/ex04-guess-output-2.js b/Week3/homework/js-exercises/ex04-guess-output-2.js
new file mode 100644
index 000000000..6b9525078
--- /dev/null
+++ b/Week3/homework/js-exercises/ex04-guess-output-2.js
@@ -0,0 +1,59 @@
+
+{
+ 'use strict';
+
+ console.log("= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =");
+ console.log("JS-2 - week 3 - Exercise 04 - Guess more");
+ console.log("Practice with closures");
+ console.log("- - - - - - - - - - - - - - - - - - - -");
+
+ const x = 9;
+ function f1(val) {
+ val = val + 1;
+ return val;
+ }
+
+ const y = { x: 9 };
+ function f2(val) {
+ val.x = val.x + 1;
+ return val;
+ }
+
+ console.log(` `);
+ console.log(`"x" is a number, which is a primitive datatype. `);
+ console.log(` Function parameters of primitive type are passed by value `);
+ console.log(` meaning that any changes done inside the scope of "f1" `);
+ console.log(` is actually done to a local copy of the variable `);
+ console.log(` and will not affect the global variable. `);
+ console.log(` (even were it declared with "let" instead of "const")`);
+ console.log(` `);
+ console.log(`Therefore "console.log(f1(x))" would produce "10" `);
+ console.log(` which is the function's result `);
+ console.log(`Whereas "console.log(x)" would produces "9" `);
+ console.log(` both before and after calling "f1(x)" `);
+ console.log(` `);
+ console.log(`value of "x" before function = [${x}] `);
+ console.log(`value of function "f1(x)" = [${f1(x)}] `);
+ console.log(`value of "x" after function = [${x}] `);
+ console.log(` `);
+
+ console.log(` `);
+ console.log(`"y" in contrast, is an object datatype and "x" is a property of that onject. `);
+ console.log(` Value changes to properties of objects are not scope-specific `);
+ console.log(` regardless of the object declaration, either "const" or "let" `);
+ console.log(` `);
+ console.log(`Therefore "console.log(f2(y).x)" would produce "10" `);
+ console.log(` which is the value of the property "x" of the function's result `);
+ console.log(`Whereas "console.log(y.x)" would produce "9" before "f2(y)", but "10" after `);
+ console.log(` `);
+ console.log(`value of "y.x" before function = [${y.x}] `);
+ console.log(`value of function "f2(y).x" = [${f2(y).x}] `);
+ console.log(`value of "y.x" after function = [${y.x}] `);
+
+ console.log("= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =");
+ console.log(" ");
+};
+
+
+;
+
diff --git a/Week3/homework/js-exercises/ex05-the-lottery.js b/Week3/homework/js-exercises/ex05-the-lottery.js
new file mode 100644
index 000000000..cd849ee24
--- /dev/null
+++ b/Week3/homework/js-exercises/ex05-the-lottery.js
@@ -0,0 +1,43 @@
+
+{
+ 'use strict';
+
+ console.log("= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =");
+ console.log("JS-2 - week 3 - Exercise 05 - The lottery machine");
+ console.log("Practice with callbacks");
+ console.log("- - - - - - - - - - - - - - - - - - - -");
+
+ runBingo( 10,15);
+ runBingo(-15,15);
+
+ function runBingo (lowRange,highRange) {
+ console.log(`Checking for Bingo for 3 and 5 in the range ${lowRange} to ${highRange} `);
+ bingoThreeFive(lowRange,highRange,threeCallback,fiveCallback);
+ }
+
+ function bingoThreeFive (pNumFrom,pNumTo,pCallbackThree,pCallbackFive) {
+ const startNumber=!pNumFrom?0:pNumFrom;
+ const stopNumber=!pNumTo?startNumber:pNumToCountdown Timer
+
+
+
+ timer_status
++
+
+
+
+ ⏫
+ ⏬
+ element
+
+
+ ⏫
+ ⏬
+ timer_toggle
+
+
+
+
+
+
+
diff --git a/Week3/homework/js-exercises/project-tip-calculator/main.css b/Week3/homework/js-exercises/project-tip-calculator/main.css
new file mode 100644
index 000000000..b4dc8544e
--- /dev/null
+++ b/Week3/homework/js-exercises/project-tip-calculator/main.css
@@ -0,0 +1,235 @@
+
+body {
+ margin: 0px 18px;
+ padding: 0px;
+ font-size: 1.5em;
+ font-family: sans-serif;
+ }
+
+div, p {
+ margin: 0px;
+ padding: 0px;
+ }
+
+hr {
+ display: block;
+ margin: 12px auto 12px;
+ color: navy;
+ border-style: outset;
+ border-width: 2px;
+ }
+
+.cls_text_align_left {
+ text-align: left;
+ }
+
+.cls_text_align_right {
+ text-align: right;
+ }
+
+.cls_text_align_center {
+ text-align: center;
+ }
+
+.cls_unselectable {
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ }
+
+#id_page_header {
+ padding: 12px 16px 8px 16px;
+ margin: 20px 0px;
+ }
+
+
+
+#id_calc_background {
+ background-color: rgb(85,50,75);
+ color: black;
+ display: table;
+ margin: 0 auto;
+ border-radius: 15px;
+ padding: 20px 60px;
+ height: 100%;
+ font-size: .85em;
+ text-align: center;
+ }
+
+#id_calc_header {
+ background-color: black;
+ color: wheat;
+ padding: 20px 40px 12px;
+ border-radius: 30px 30px 0px 0px;
+ }
+
+#id_calc_container_amount,
+#id_calc_container_service,
+#id_calc_container_sharing {
+ background: linear-gradient(to bottom right, wheat, #f5f7fa);
+ margin: 0px;
+ padding: 15px 20px 15px;
+ }
+
+#id_calc_container_amount {
+ padding-top: 20px;
+ }
+
+#id_calc_container_sharing {
+ padding-bottom: 16px;
+ }
+
+#id_calc_container_footer {
+ background: linear-gradient(to bottom right, gold, orange);
+ font-size: 1.2em;
+ margin: 0px;
+ padding: 15px 20px 15px;
+ border-radius: 0px 0px 30px 30px;
+ }
+
+#id_service_quality_header,
+#id_people_total_header,
+#id_bill_total_header {
+ font-size: 1.2em;
+ text-align: left;
+ padding: 0px 0px 10px;
+ }
+
+#id_people_total_header {
+ padding-bottom: 16px;
+ }
+
+#id_bill_total_edit {
+ font-size: 1.3em;
+ width: 6em;
+ margin-left: 6px;
+ text-align: right;
+ }
+
+#id_service_quality_group {
+ margin-left: 25px;
+ text-align: left;
+ padding-right: 3px;
+ font-size: 1.2em;
+ }
+
+#id_service_quality_styling {
+ display: inline-block;
+ padding: 0px 8px 5px;
+ vertical-align: bottom;
+ }
+
+#id_service_quality_rating {
+ position: relative;
+ height: 1.4em;
+ width: 7em;
+ margin: 0;
+ padding: 0;
+ background: url("./resources/star_empty.bmp");
+ background-size: 1.4em 1.4em;
+ display: inline-block;
+ }
+
+.cls_service_quality_label {
+ position: absolute;
+ height: 100%;
+ background-size: 1.4em 1.4em;
+ }
+
+.cls_service_quality_radio {
+ margin: 0;
+ position: absolute;
+ height: 1px;
+ width: 1px;
+ overflow: hidden;
+ clip: rect(1px,1px,1px,1px);
+ }
+
+#id_service_quality_rating .cls_service_quality_label:nth-of-type(1) {
+ z-index: 5;
+ width: 20%;
+ }
+
+#id_service_quality_rating .cls_service_quality_label:nth-of-type(2) {
+ z-index: 4;
+ width: 40%;
+ }
+
+#id_service_quality_rating .cls_service_quality_label:nth-of-type(3) {
+ z-index: 3;
+ width: 60%;
+ }
+
+#id_service_quality_rating .cls_service_quality_label:nth-of-type(4) {
+ z-index: 2;
+ width: 80%;
+ }
+
+#id_service_quality_rating .cls_service_quality_label:nth-of-type(5) {
+ z-index: 1;
+ width: 100%;
+ }
+
+.cls_service_quality_radio:checked + .cls_service_quality_label,
+.cls_service_quality_radio:focus + .cls_service_quality_label
+ /* ,.cls_service_quality_label:hover */
+ {
+ background-image: url("./resources/star_filled.bmp");
+ }
+
+/*
+.cls_service_quality_label:hover ~ .cls_service_quality_label {
+ background-image: url("./resources/star_empty.bmp");
+ }
+*/
+.cls_service_quality_label:hover {
+ cursor: pointer;
+ }
+
+.cls_service_quality_radio:focus ~ .cls_service_quality_focus {
+ position: absolute;
+ top: -3px;
+ right: -3px;
+ bottom: -3px;
+ left: -3px;
+ outline: 1px solid blue;
+ }
+
+#id_service_quality_text {
+ display: inline-block;
+ padding: 0px 0px 9px 8px;
+ margin: 0px;
+ vertical-align: bottom;
+ }
+
+#id_service_quality_tip {
+ font-size: 0.66em;
+ text-align: right;
+ margin: 0px 0px 0px;
+ }
+
+#id_people_total_sub,
+#id_people_total_add {
+ border: 1px solid blue;
+ border-radius: 45%;
+ padding: 3px 3px 1px;
+ width: 1.8em;
+ background: lightblue;
+ cursor: pointer;
+ display: inline-block;
+ }
+#id_people_total_sub:hover,
+#id_people_total_add:hover {
+ background: gold;
+ }
+
+#id_people_total_text {
+ font-size: 1.2em;
+ width: 8em;
+ display: inline-block;
+ }
+
+;
diff --git a/Week3/homework/js-exercises/project-tip-calculator/main.js b/Week3/homework/js-exercises/project-tip-calculator/main.js
new file mode 100644
index 000000000..3552f3810
--- /dev/null
+++ b/Week3/homework/js-exercises/project-tip-calculator/main.js
@@ -0,0 +1,124 @@
+
+{
+ 'use strict';
+
+ let lmntRef=document.getElementById('id_page_header');
+ lmntRef.style.backgroundColor='gold';
+ document.getElementById('id_page_title').innerHTML=lmntRef.innerHTML=
+ `(Homework: Javascript 2 - week 3) - (PROJECT: The Tip Calculator)`;
+ lmntRef.style.borderRadius='12px';
+ document.body.style.backgroundColor='#25003e';
+
+ const symbolCurrencyEuro='€';
+ const symbolApostrophe='’';
+
+ const billTotalEditRef=document.getElementById("id_bill_total_edit");
+ const qualityRadioRef=document.getElementsByClassName('cls_service_quality_radio');
+ const billPeopleSubRef=document.getElementById("id_people_total_sub");
+ const billPeopleAddRef=document.getElementById("id_people_total_add");
+ const arrowLeft =37;
+ const arrowUp =38;
+ const arrowRight=39;
+ const arrowDown =40;
+
+ const setBillData=createBillData();
+ initializePageData(0,2,1);
+
+ function initializePageData(pAmount,pRating,pSharing) {
+ qualityRadioRef[pRating].checked=true;
+ billTotalEditRef.value=pAmount;
+ setBillData(pAmount,pRating,pSharing);
+ for (let i=0; i<5; i++) {
+ switch (i) {
+ case 0 : qualityRadioRef[i].onkeydown=function(event){
+ if ([arrowDown,arrowUp,arrowLeft].indexOf(event.keyCode)>=0)
+ {event.preventDefault()}};
+ break;
+ case 4 : qualityRadioRef[i].onkeydown=function(event){
+ if ([arrowDown,arrowUp,arrowRight].indexOf(event.keyCode)>=0)
+ {event.preventDefault()}};
+ break;
+ default: qualityRadioRef[i].onkeydown=function(event){
+ if ([arrowDown,arrowUp].indexOf(event.keyCode)>=0)
+ {event.preventDefault()}};
+ }
+ qualityRadioRef[i].onchange=function() {setBillData(undefined,Number(this.value))};
+ }
+ billTotalEditRef.oninput=function() {setBillData(this.value)};
+ billPeopleSubRef.onclick=function(event) {setBillData(undefined,undefined,-1)};
+ billPeopleAddRef.onclick=function(event) {setBillData(undefined,undefined,1)};
+ }
+
+ function createBillData() {
+ const qualityRatingTextRef=document.getElementById('id_service_quality_text');
+ const qualityPercentTipRef=document.getElementById("id_service_quality_tip");
+ const billPeopleTextRef=document.getElementById("id_people_total_text");
+ const calcTipHeaderRef=document.getElementById("id_calc_tip_header");
+ const calcTipAmountRef=document.getElementById("id_calc_tip_amount");
+ const calcTipEachRef=document.getElementById("id_calc_tip_each");
+ calcTipAmountRef.style.paddingTop='4px';
+ const qualityList = [
+ { ratingPercent: 5, ratingText:'Poor' },
+ { ratingPercent: 10, ratingText:'Fair' },
+ { ratingPercent: 15, ratingText:'Good' },
+ { ratingPercent: 20, ratingText:'Very good' },
+ { ratingPercent: 30, ratingText:'Excellent' } ];
+ const maxValue=9999.99;
+ let propAmount = -1;
+ let propRating = -1;
+ let propSharing= 0;
+ return (pAmount,pRating,pSharing)=>{
+ if ([setAmount(pAmount),setRating(pRating),setSharing(pSharing)].indexOf(true)>-1) {
+ if ((isNaN(propAmount))||(propAmount<=0)||(propAmount>maxValue)) {
+ calcTipHeaderRef.innerHTML='Enter a positive bill amount';
+ calcTipAmountRef.innerHTML='Accepted values range';
+ calcTipEachRef.innerHTML ='between 0.01 and '+maxValue;
+ calcTipAmountRef.style.fontSize='';
+ } else {
+ calcTipHeaderRef.innerHTML='Tip amount';
+ calcTipAmountRef.innerHTML=symbolCurrencyEuro+' '+getFormatedTipAmount();
+ calcTipEachRef.innerHTML =propSharing>1?'each':' ';
+ calcTipAmountRef.style.fontSize='1.5em';
+ };
+ qualityRatingTextRef.innerHTML=getSecureRatingText();
+ qualityPercentTipRef.innerHTML=
+ `( calculating a ${getSecureRatingPercent()}% tip )`;
+ billPeopleTextRef.innerHTML=propSharing>1?propSharing+' people':'one person';
+ };
+ };
+ function getFormatedTipAmount(){
+ return (Math.round(propAmount*getSecureRatingPercent()/getSecureSharing())/100)
+ .toLocaleString(undefined,{minimumIntegerDigits:1,minimumFractionDigits:2});
+ }
+ function setAmount(param) {
+ let newAmount=param==undefined?propAmount:Number(param);
+ if (propAmount!=newAmount) {
+ propAmount=newAmount;
+ return true;
+ };
+ };
+ function setRating(param) {
+ let newRating=param==undefined?propRating:param;
+ if (propRating!=newRating) {
+ propRating=newRating;
+ return true;
+ };
+ };
+ function setSharing(param) {
+ let newSharing=param==undefined?propSharing:(propSharing+param)<1?
+ propSharing:(propSharing+param)>99?propSharing:propSharing+param;
+ if (propSharing!=newSharing) {
+ propSharing=newSharing;
+ return true;
+ };
+ };
+ function getSecureRatingText()
+ {return propRating<0?'-':propRating>4?'-':qualityList[propRating].ratingText};
+ function getSecureRatingPercent()
+ {return propRating<0?1:propRating>4?1:qualityList[propRating].ratingPercent};
+ function getSecureSharing(){return propSharing<1?1:propSharing};
+ }
+};
+
+;
+
diff --git a/Week3/homework/js-exercises/project-tip-calculator/resources/star_empty.bmp b/Week3/homework/js-exercises/project-tip-calculator/resources/star_empty.bmp
new file mode 100644
index 000000000..84ed413e6
Binary files /dev/null and b/Week3/homework/js-exercises/project-tip-calculator/resources/star_empty.bmp differ
diff --git a/Week3/homework/js-exercises/project-tip-calculator/resources/star_filled.bmp b/Week3/homework/js-exercises/project-tip-calculator/resources/star_filled.bmp
new file mode 100644
index 000000000..c394e4ad9
Binary files /dev/null and b/Week3/homework/js-exercises/project-tip-calculator/resources/star_filled.bmp differ
TIP CALCULATOR
+
+
+ How much was your bill?
+
+ €
+
+
+
+
+ How was your service?
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ id_service_quality_text
+id_service_quality_tip
+
+
+
+ How many are sharing the bill?
+ ➖ + id_people_total_text + ➕ +