Skip to content

Commit 2bdf9b6

Browse files
Evavic44Evavic44
committed
complete settimeout and setinterval sections
1 parent 0d9feff commit 2bdf9b6

File tree

5 files changed

+222
-187
lines changed

5 files changed

+222
-187
lines changed

‎11_Working_with_Arrays/script.js‎

Lines changed: 0 additions & 123 deletions
Original file line numberDiff line numberDiff line change
@@ -467,126 +467,3 @@ console.log(convertTitleCase('this is a nice title'));
467467
console.log(convertTitleCase('this is a LONG title but not too long'));
468468
console.log(convertTitleCase('and here is another title with an EXAMPLE'));
469469
console.log(convertTitleCase('nothing TO sEE hErE ON sundaY wiTH ME'));
470-
471-
// 🔸Converting and Checking Numbers🔸
472-
console.log(23 === 23.0);
473-
474-
// Base 10 = 0 to 9. (1/10 = 0.1), (3/10 = 0.333333∞)
475-
// Base 2 = 0, 1
476-
477-
// Convert strings to numbers
478-
console.log(0.1 + 0.2 === 0.3);
479-
console.log(+'22');
480-
console.log('22' - 0);
481-
482-
// Parsing Integer => Numbers without decimals
483-
console.log(Number.parseInt('50px', 10));
484-
console.log(Number.parseInt('ae34', 10)); // won't work, value must start with a number
485-
486-
// Parsing Float => Numbers with decimals
487-
console.log(Number.parseInt('2.5rem')); // Will only return first number
488-
console.log(Number.parseFloat('2.5rem'));
489-
490-
// Are also global functions: Though not recommended
491-
console.log(parseFloat('22rem'));
492-
493-
// isNan: Check if value is NaN
494-
console.log(Number.isNaN(20));
495-
console.log(Number.isNaN('20'));
496-
console.log(Number.isNaN(+'20x'));
497-
console.log(Number.isNaN(23 / 0)); // infinity so won't work
498-
499-
// Checking if value is a number
500-
console.log(Number.isFinite(23));
501-
console.log(Number.isFinite(+'23px'));
502-
console.log(Number.isFinite(23 / 0));
503-
504-
console.log(Number.isInteger(23));
505-
console.log(Number.isInteger(23.0));
506-
console.log(Number.isInteger(23 / 0));
507-
508-
// 🔸Math and rounding🔸
509-
console.log(Math.sqrt(25)); // square root
510-
console.log(25 ** (1 / 2));
511-
console.log(8 ** (1 / 3)); // cubic root
512-
513-
// min and max numbers
514-
console.log(Math.max(5, 20, 93, 2, 18)); // Get maximum value
515-
console.log(Math.max(5, 20, '93', 2, 18)); // Also does type coercion
516-
console.log(Math.max(5, 20, '93ss', 2, 18)); // Does not do parsing
517-
518-
console.log(Math.min(5, 20, '93', 2, 18));
519-
520-
console.log(Math.PI * Number.parseFloat('10px') ** 2);
521-
522-
// random numbers
523-
console.log(Math.trunc(Math.random() * 6 + 1));
524-
// random numbers from a range of two integers
525-
const randomInt = (min, max) => Math.trunc(Math.random() * (max - min) + min);
526-
// console.log(randomInt(10, 20));
527-
528-
// rounding integers
529-
console.log(Math.trunc(16.5)); // return number without decimals
530-
console.log(Math.round(23.9)); // Round a number
531-
532-
console.log(Math.ceil(23.9)); // Round a number
533-
console.log(Math.floor(-23.9)); // Truncate integers including decimals
534-
535-
// rounding decimals(floating point numbers)
536-
console.log((2.7).toFixed(0));
537-
console.log((2.7).toFixed(3));
538-
console.log(+(2.345).toFixed(2));
539-
540-
// 🔸Remainder Operator🔸
541-
console.log(5 % 2);
542-
console.log(5 / 2);
543-
544-
console.log(6 % 2);
545-
console.log(6 % 3);
546-
547-
// checking if a number is even or odd
548-
const checkEvenOdd = num =>
549-
num % 2 === 0 ? console.log(`${num} is even`) : console.log(`${num} is odd`);
550-
checkEvenOdd(22);
551-
checkEvenOdd(16);
552-
checkEvenOdd(3);
553-
554-
labelBalance.addEventListener('click', function () {
555-
[...document.querySelectorAll('.movements__row')].forEach(function (
556-
row,
557-
index
558-
) {
559-
// 0, 2, 4, 6, ...
560-
if (index % 2 === 0) row.style.backgroundColor = 'orangered';
561-
// 0, 3, 6, 9, ...
562-
if (index % 3 === 0) row.style.backgroundColor = 'blue';
563-
});
564-
});
565-
566-
// 🔸Working with BigInt🔸
567-
console.log(2 ** 53 - 1);
568-
console.log(Number.MAX_SAFE_INTEGER);
569-
console.log(2 ** 53 + 2);
570-
571-
console.log(235972592735792702175273597235n); // the n keyword converts numbers >= 2^53 - 1 into BigInt
572-
console.log(BigInt(235972592)); // this conversion only works with smaller BigInt numbers
573-
console.log(BigInt(235972592));
574-
575-
// operations with bigint
576-
console.log(10000 + 10000);
577-
console.log(1000000000000000000000n * 45252332523n);
578-
579-
const huge = 57935737592739325723523n;
580-
const number = 23;
581-
// console.log(huge * number); // can't convert bigint to number
582-
console.log(huge * BigInt(number));
583-
584-
// exceptions
585-
console.log(20n > 15);
586-
console.log(20n === 20);
587-
console.log(typeof 20n);
588-
console.log(20n === '20');
589-
590-
console.log(huge + ' is Really big!');
591-
console.log(11n / 3n);
592-
console.log(12n / 3n);

‎12_Numbers_Dates_Timers_Bankist/buzz.mp3‎

3 KB
Binary file not shown.

‎12_Numbers_Dates_Timers_Bankist/script.js‎

Lines changed: 90 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -81,19 +81,28 @@ const inputClosePin = document.querySelector('.form__input--pin');
8181
/////////////////////////////////////////////////
8282
// Functions
8383

84-
const displayMovements = function (movements, sort = false) {
84+
const displayMovements = function (acc, sort = false) {
8585
containerMovements.innerHTML = '';
8686

87-
const movs = sort ? movements.slice().sort((a, b) => a - b) : movements;
87+
const movs = sort
88+
? acc.movements.slice().sort((a, b) => a - b)
89+
: acc.movements;
8890

8991
movs.forEach(function (mov, i) {
9092
const type = mov > 0 ? 'deposit' : 'withdrawal';
9193

94+
const date = new Date(acc.movementsDates[i]);
95+
const day = `${date.getDate()}`.padStart(2, 0);
96+
const month = `${date.getMonth() + 1}`.padStart(2, 0);
97+
const year = date.getFullYear();
98+
const displayDate = `${day}/${month}/${year}`;
99+
92100
const html = `
93101
<div class="movements__row">
94102
<div class="movements__type movements__type--${type}">${
95103
i + 1
96104
} ${type}</div>
105+
<div class="movements__date">${displayDate}</div>
97106
<div class="movements__value">${mov}€</div>
98107
</div>
99108
`;
@@ -142,7 +151,7 @@ createUsernames(accounts);
142151

143152
const updateUI = function (acc) {
144153
// Display movements
145-
displayMovements(acc.movements);
154+
displayMovements(acc);
146155

147156
// Display balance
148157
calcDisplayBalance(acc);
@@ -153,7 +162,31 @@ const updateUI = function (acc) {
153162

154163
///////////////////////////////////////
155164
// Event handlers
156-
let currentAccount;
165+
let currentAccount = account1;
166+
// FAKED LOGIN
167+
updateUI(currentAccount);
168+
containerApp.style.opacity = 100;
169+
170+
const today = new Date();
171+
const options = {
172+
hour: 'numeric',
173+
minute: 'numeric',
174+
day: 'numeric',
175+
month: 'long',
176+
year: '2-digit',
177+
weekday: 'long',
178+
};
179+
180+
const locale = navigator.language;
181+
console.log(locale);
182+
183+
const day = `${today.getDate()}`.padStart(2, 0);
184+
const month = `${today.getMonth() + 1}`.padStart(2, 0);
185+
const year = today.getFullYear();
186+
const hours = `${today.getHours()}`.padStart(2, 0);
187+
const minutes = `${today.getMinutes()}`.padStart(2, 0);
188+
// labelDate.textContent = `${day}/${month}/${year}, ${hours}:${minutes}`;
189+
labelDate.textContent = new Intl.DateTimeFormat(locale, options).format(today);
157190

158191
btnLogin.addEventListener('click', function (e) {
159192
// Prevent form from submitting
@@ -335,17 +368,17 @@ checkEvenOdd(22);
335368
checkEvenOdd(16);
336369
checkEvenOdd(3);
337370

338-
labelBalance.addEventListener('click', function () {
339-
[...document.querySelectorAll('.movements__row')].forEach(function (
340-
row,
341-
index
342-
) {
343-
// 0, 2, 4, 6, ...
344-
if (index % 2 === 0) row.style.backgroundColor = 'orangered';
345-
// 0, 3, 6, 9, ...
346-
if (index % 3 === 0) row.style.backgroundColor = 'blue';
347-
});
348-
});
371+
// labelBalance.addEventListener('click', function () {
372+
// [...document.querySelectorAll('.movements__row')].forEach(function (
373+
// row,
374+
// index
375+
// ) {
376+
// // 0, 2, 4, 6, ...
377+
// if (index % 2 === 0) row.style.backgroundColor = 'orangered';
378+
// // 0, 3, 6, 9, ...
379+
// if (index % 3 === 0) row.style.backgroundColor = 'blue';
380+
// });
381+
// });
349382

350383
// 🔸Working with BigInt🔸
351384
console.log(2 ** 53 - 1);
@@ -407,5 +440,46 @@ console.log(new Date(872173385000)); // get date based off timestamps
407440
console.log(Date.now());
408441

409442
// date set() methods
410-
future.setFullYear(2099);
443+
// future.setFullYear(2099);
411444
console.log(future);
445+
console.log(Number(future)); // convert date to timestamp(How many miliseconds that have passed since the invention of Unix time)
446+
console.log(+future);
447+
448+
const calcDaysPassed = (date1, date2) =>
449+
Math.abs((date2 - date1) / (24 * 60 * 60 * 1000));
450+
const days1 = calcDaysPassed(new Date(2022, 3, 14), new Date(2022, 3, 24));
451+
console.log(days1);
452+
453+
const option = {
454+
style: 'currency',
455+
unit: 'mile-per-hour',
456+
currency: 'EUR',
457+
// useGrouping: false,
458+
};
459+
460+
const numbs = 2323253;
461+
console.log('US:', new Intl.NumberFormat('en-US', option).format(numbs));
462+
console.log('Germany:', new Intl.NumberFormat('de-DE', option).format(numbs));
463+
console.log('Syria:', new Intl.NumberFormat('ar-SY', option).format(numbs));
464+
console.log(
465+
navigator.language,
466+
new Intl.NumberFormat(navigator.language).format(numbs)
467+
);
468+
469+
// 🔸Timers setTimeout and setInterval🔸
470+
// setTimeout
471+
const ingredients = ['olives', 'spinach'];
472+
const pizzaTimer = setTimeout(
473+
(ing1, ing2) => console.log(`Here is your pizza 🍕 with ${ing1} & ${ing2}`),
474+
3000,
475+
...ingredients
476+
);
477+
console.log('Waiting...');
478+
479+
if (ingredients.includes('spinach')) clearTimeout(pizzaTimer);
480+
481+
// setInterval
482+
setInterval(function () {
483+
const now = new Date();
484+
console.log(now);
485+
}, 1000);

0 commit comments

Comments
 (0)