Webcalculation, date&time, print web page.

1. 3 JS challenges
for ONE application
Roman Kryvun
February, 2018

2. First challenge
How
problems
appear

3. Invoice

4. Some Features Later

5. Invoice

7. Friday

8. Evening

9. User report

10. All is broken !!!!
I can’t create invoice!

12. Calculations

13. A lot intermediate decimals

14. Lost coin

15. How it happens
0.2 + 0.1 = 0.30000000000000004
0.7 + 0.1 = 0.7999999999999999
0.01 + 0.06 = 0.06999999999999999

16. Rounding
1. Round a number up Math.ceil()
1.01 => 2
1. Round a number down Math.floor()
1.99 => 1
1. Rounds to the nearest integer Math.round()
4.4 => 4 4.5 => 5

17. Number.toFixed(0-20)
var numObj = 12345.6789;
numObj.toFixed() // '12346'
numObj.toFixed(1) // '12346.7'
numObj.toFixed(2) // '12345.68'
numObj.toFixed(6) // '12345.678900'
(1.23e-10).toFixed(2) // '0.00'
(1.23e+20).toFixed(2) //
'123000000000000000000.00'
-2.34.toFixed(1) // -2.3
(-2.34).toFixed(1) // '-2.3'
Number.toFixed(0-20)
Round to 2 decimals
Number.toPrecision(1-21)
var numObj = 12345.6789;
numObj.toPrecision() //
'12345.6789'
numObj.toPrecision(1) // '1e+4'
numObj.toPrecision(2) // '1.2e+4'
numObj.toPrecision(6) // '12345.7'
(1.23e-10).toPrecision(2) // '1.2e-10'
(1.23e+20).toPrecision(2) // '1.2e+20'
Number.toPrecision(1-21)

18. Round to 2 decimals
parseFloat( Number(4.444).toFixed(2) ) = ?
parseFloat( Number(4.449).toFixed(2) ) = ?
4.44
4.45
parseFloat( Number(4.4449).toFixed(2) ) = ?4.44

19. parseInt(4.4449parseInt(4.4449 * 100, 10) / 100 = 4.44parseInt(4.4449 * 100, 10) / 100 = 4.44
Truncate to 2 decimals
parseInt(4.4449 * 100, 10) / 100 = 4.44parseInt(4.4449 * 100, 10) / 100 = 4.44

20. Problem with truncate
parseInt(4.4449 * 100, 10) / 100 = 4.44
parseInt(1234.12 * 100, 10) / 100 = 1234.11
1234.12 * 100 = 123411.99999999999
Math.round(1234.12 * 100) / 100 = 1234.12
Math.round(4.4449 * 100) / 100 = 4.44
Math.round(4.449 * 100) / 100 = 4.45

21. We can't use multiplying
We can't use decimals
but
We can use integers
We can't use rounding

22. function convertDecimalToInteger(number = 0, precision = 2) {
const value = number.toFixed(precision + 1)
const index = value.lastIndexOf('.') + precision;
const result = value.replace('.', '').substr(0, index);
return parseInt(result, 10);
}
Convert Decimal to Integer

23. Convert Decimal to Integer
function convertDecimalToInteger(number = 0, precision = 2) {
const value = number.toFixed(precision + 1);
const index = value.lastIndexOf('.') + precision;
const newIndex = index + precision;
const onlyNumbers = value.replace('.', '');
const result = onlyNumbers.substr(0, newIndex);
return parseInt(result, 10);
}
// 1234.12
// "1234.120" or "2.000"
// 4
// 6
// "1234120"
// "123412.0"
// 123412

24. One more question
10000000000000000 - 1 = ?10000000000000000
10000000000000000 === 9999999999999999 // true

25. Safe integer
number between (2^53 - 1) and -(2^53 - 1)
var biggestInt = 9007199254740991;
var smallestInt = -9007199254740991;

26. IEEE 754

27. Server-side calculations
BigDecimal

28. BigInt
https://github.com/tc39/proposal-bigint
Jan 22, 2017
Stage 3

29. Libraries
big.js

30. Second challenge

31. Date & Time

32. Browsers

33. Operating Systems

34. Custom Datetime pickers

35. new Date('2018-06-28')
Thu Jun 28 2018 02:00:00 GMT+0200 (EET)
Thu Jun 28 2018 03:00:00 GMT+0300 (EEET)
Thu Jun 28 2018 00:00:00 GMT

36. Moment.js
Parse, validate, manipulate, and display dates and times in JavaScript.

37. moment().format('MMMM Do YYYY, h:mm:ss a'); // February 27th 2018, 8:44:02 pm
moment().format('dddd'); // Tuesday
moment().format("MMM Do YY"); // Feb 27th 18
moment().format('YYYY [escaped] YYYY'); // 2018 escaped 2018
moment("20120620", "YYYYMMDD").fromNow(); // 6 years ago
moment().startOf('day').fromNow(); // 21 hours ago

38. Time zones

39. Get UTC time
new Date('2018-06-28').toISOString() = "2018-06-28T00:00:00.000Z"

40. Get Timezone Offset
new Date().getTimezoneOffset() = -120

41. Travels

42. Moment Timezone
Parse and display dates in any timezone.

43. Ask user about timezone

44. Everything is a String

45. Third challenge
Page Print

46. Print Media Query
<link href="/path/to/print.css" media="print" rel="stylesheet" />
@media print {
/* print styles*/
}
Browser Support

47. Preview

48. Google Chrome

49. Safari

50. Fire Fox

51. Detecting print requests
window.onbeforeprint() and window.onafterprint()

52. Print an external page

53. Printing multi pages

54. Printing changes from page 2
https://15104268797498972201.googlegroups.com/attach/85b893d02dd79a17/example%20of%20problem.jpg

55. page-break
page-break-after : auto | always | avoid | left | right
page-break-before : auto | always | avoid | left | right
page-break-inside : auto | avoid
Browser Support

56. Print Tables

58. HTML to PDF

59. Thank You

60. Q&A