D4NGER DIPLOMALecture 03 · Student Study Edition
LECTURE 3 · NUMBERS → DATES → ARRAYS

Solve the problem, then learn the tool.شوف المشكلة الأول، وبعدها اتعلم الأداة اللي هتحلها.

This study version covers Numbers, Math, Dates, and Arrays — ending before Objects.نسخة المذاكرة دي بتغطي Numbers وMath وDates وArrays، وبتقف قبل الـObjects.
🎯 Mission
→
🤔 Predict
→
🧠 Learn
→
🔓 Solve
→
⚡ Level Up
The question is not “What does this method do?” The question is “What problem does this method help us solve?”
MISSION 01 · NUMBER MACHINE

Generate two random numbers and print five calculations.ولّد رقمين عشوائيين واطبع خمس عمليات حسابية.

The two numbers must change every time the program runs.الرقمين لازم يتغيروا كل مرة البرنامج يشتغل.
31 + 15 = 46 31 - 15 = 16 31 * 15 = 465 31 / 15 = 2.066666666666667 31 % 15 = 1
Random valuesIntegersArithmeticFormatted output
Pause & Predict: We already know arithmetic operators. What are we missing to make the numbers random integers?وقّف وفكّر: إحنا عارفين الـArithmetic Operators. إيه الأداة الناقصة عشان نطلع أرقام صحيحة وعشوائية؟
11 · WORKING WITH NUMBERS

Numbers can be formatted and inspected in different ways.الأرقام في JavaScript ليها طرق مختلفة للعرض والتنسيق والفحص.

Format

Turn numbers into strings with controlled precision.نحوّل الأرقام لنصوص مع التحكم في عدد الخانات والدقة.

Locale

Represent a number using locale-aware formatting.نعرض الرقم بتنسيق مناسب للـlocale أو المنطقة.

Number object

JavaScript exposes number properties and methods through Number.JavaScript بتوفر خصائص وMethods مرتبطة بالأرقام من خلال Number.
11-numbers / script.jsOfficial Traversy source · script.js
let x;

const num = new Number(5);

// toString() - returns a string representation of the number
x = num.toString();
// To get the length
x = num.toString().length;

// toFixed() - returns a string representation of the number with a specified number of decimals
x = num.toFixed(2);

// toPrecision() - returns a number with the specified length
x = num.toPrecision(3);

// toExponential() -  convert a number to exponential notation and return its value as a string
x = num.toExponential(2);
// toLocaleString() - returns a string representation of the number, using the current locale
x = num.toLocaleString('en-US');

// valueOf - Get value
x = num.valueOf();

// The Number object itself has some properties and methods

// Largest and smallest possible number
x = Number.MAX_VALUE;
x = Number.MIN_VALUE;

console.log(x);
12 · THE MATH OBJECT

Math gives us common mathematical operations and random values.Math بيدينا عمليات رياضية جاهزة وكمان أرقام عشوائية.

Math gives us common mathematical operations without writing them from scratch.Math بتدينا عمليات رياضية جاهزة بدل ما نكتبها من الصفر.

Round

round · ceil · floor

Compare

min · max

Randomize

Math.random()

12-math-object / script.jsOfficial Traversy source · script.js
let x;

// Square root
x = Math.sqrt(9);

// Absolute value
x = Math.abs(-5);

// Round
x = Math.round(4.2);

// Round up
x = Math.ceil(4.2);

// Round down
x = Math.floor(4.9);

// Exponent
x = Math.pow(2, 3);

// Minimum number
x = Math.min(4, 5, 3);

// Maximum number
x = Math.max(4, 5, 3);

// Get a random number/decimal between 0 and 1
x = Math.random();

// Get a random number between 1 and 100
x = Math.floor(Math.random() * 100 + 1);

console.log(x);
🔓 RETURN TO MISSION 01

Now solve the Number Machine.دلوقتي حل مهمة الـNumber Machine.

Your rules

Create x from 1–100 and y from 1–50, then print sum, difference, product, quotient and remainder.اعمل x عشوائي من 1 لـ100 وy من 1 لـ50، وبعدها اطبع الجمع والطرح والضرب والقسمة والباقي.
Try it before revealing the source solution.
⚡ Level Up: change the ranges without changing the rest of the program.
MISSION 02 · DATE DISPLAY

Turn the current date into readable output.حوّل التاريخ الحالي لشكل واضح ومقروء.

US: 8/25/2026 UK: 25/08/2026 Month: August Full: Tuesday, August 25, 2026, 9:12 PM
How can one Date value produce different representations?إزاي قيمة Date واحدة تقدر تطلع بأشكال مختلفة حسب التنسيق والـlocale؟
14 · DATES & TIMES

JavaScript can create dates, timestamps, and dates from strings.JavaScript تقدر تنشئ Dates وTimestamps وتواريخ من Strings.

Create

Current date, specific date, date string, or timestamp.نقدر نعمل Date للتاريخ الحالي أو تاريخ محدد أو String أو Timestamp.

Timestamp

A numeric representation lets us store and compare moments in time.الـTimestamp تمثيل رقمي للوقت بيساعدنا نخزن ونقارن لحظات زمنية.
14-dates-and-times / script.jsOfficial Traversy source · script.js
let d;

// Get today's date and time
d = new Date();

// Set to a string
d = d.toString();

// Get a specific date
// Important: the month is 0-based, so 0 is January and 11 is December
d = new Date(2021, 0, 10, 12, 30, 0);

// Pass in a string
d = new Date('2021-07-10T12:30:00');
d = new Date('07/10/2021 12:30:00');
d = new Date('2022-07-10');
d = new Date('07-10-2022');

// https://stackoverflow.com/questions/7556591/is-the-javascript-date-object-always-one-day-off
// Get current timestamp
d = Date.now();

// Get the timestamp of a specific date
d = new Date();
d = d.getTime();
d = d.valueOf();

// Create a date from a timestamp
d = new Date(1666962049745);

// Convert from milliseconds to seconds
d = Math.floor(Date.now() / 1000);

console.log(d);
15 · DATE METHODS & INTL

Extract and format the parts of a Date.استخرج أجزاء التاريخ واعرضها بالتنسيق المناسب.

Intl.DateTimeFormat separates the moment itself from how a user sees it.Intl.DateTimeFormat بيفصل بين قيمة الوقت نفسها وبين الشكل اللي المستخدم بيشوفه.
15-date-object-methods / script.jsOfficial Traversy source · script.js
let x;
let d = new Date();

// Date methods

x = d.toString();

x = d.getTime();
x = d.valueOf();

x = d.getFullYear();

x = d.getMonth();
x = d.getMonth() + 1;

x = d.getDate();

x = d.getDay();

x = d.getHours();

x = d.getMinutes();

x = d.getSeconds();

x = d.getMilliseconds();

x = `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`;
// Intl.DateTimeFormat API (locale specific)
x = Intl.DateTimeFormat('en-US').format(d);
x = Intl.DateTimeFormat('en-GB').format(d);
x = Intl.DateTimeFormat('default').format(d);

x = Intl.DateTimeFormat('default', { month: 'long' }).format(d);

x = d.toLocaleString('default', { month: 'short' });

x = d.toLocaleString('default', {
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric',
  second: 'numeric',
  timeZone: 'America/New_York',
});
console.log(x);
🔓 Mission solved: the same Date can be displayed differently without changing the underlying moment.
MISSION 03 · ARRAY TRANSFORMATION

Store and transform collections of values.خزّن مجموعات من القيم وعدّل عليها باستخدام Arrays.

Start: [1, 2, 3, 4, 5] Target 1: [6, 5, 4, 3, 2, 1, 0] arr1: [1, 2, 3, 4, 5] arr2: [5, 6, 7, 8, 9, 10] Target 2: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
Before methods, these transformations are awkward. The challenge gives the methods a reason to exist.قبل ما نعرف الـArray Methods، التحويلات دي هتبقى صعبة. التحدي بيدينا سبب حقيقي نتعلم الأدوات دي.
ARRAYS · 01

Arrays let one variable hold an ordered collection of values.الـArray بتخلي متغير واحد يشيل مجموعة قيم مترتبة.

Arrays give values positions called indexes, starting from zero.الـArray بتدي كل قيمة مكان اسمه Index، والعد بيبدأ من صفر.
01-array-basics / script.jsOfficial Traversy source · script.js
let x;

// Array Literal
const numbers = [12, 45, 33, 29, 39, 102];
const mixed = [12, 'Hello', true, null];

// Array Constructor
const fruits = new Array('apple', 'grape', 'orange');

// Get value by index
x = numbers[0];

x = numbers[0] + numbers[3];

x = `My favorite fruit is an ${fruits[2]}`;

x = numbers.length;

fruits[2] = 'pear';

// length is not read-only
// fruits.length = 2;

fruits[3] = 'strawberry';
// Using the length as the index will always add on the the end
fruits[fruits.length] = 'blueberry';
fruits[fruits.length] = 'peach';

x = fruits;

console.log(x);
ARRAYS · 02

Array methods add, remove, search, copy, and transform values.دوال الـArray بتضيف وتحذف وتبحث وتنسخ وتغيّر القيم.

Ends

push · pop · shift · unshift

Inspect

includes · indexOf

Extract

slice · splice

02-array-methods / script.jsOfficial Traversy source · script.js
let x;

const arr = [28, 38, 44, 29, 109];

// push() - Push a value on to the end of the array
arr.push(100);

// pop() - Take the last value off
arr.pop();

// unshift() - Add a value to the beginning of the array
arr.unshift(99);

// shift() - Remove first value
arr.shift();

// reverse() - Reverse an array
arr.reverse();

// includes() - Check to see if something is in the array
x = arr.includes(445);

// indexOf() - Return the index of the first match
x = arr.indexOf(28);
// Return array as a string
x = arr.toString();
x = arr.join();

// slice() returns selected elements in an array, as a new array. Slice takes in the index of the first element and the index of the last element to be included in the new array.
x = arr.slice(1, 4);

// splice() works like slice() except it takes the index of the first element and the number of elements after that as a second argument. it also mutates the original array where slice() does not
x = arr.splice(1, 4);
// Remove a single element/value - The following will mutate the original array by taking out the element with the index of 4. x will be equal to a new array with that plucked out value.
x = arr.splice(4, 1);

// Chaining methods - Some methods can be chained depending on the return value.
x = arr.slice(1, 4).reverse().toString().charAt(0);

console.log(x);
ARRAYS · 03

Arrays can be nested, combined, spread, and flattened.تقدر تعمل Nested Arrays وتدمج Arrays باستخدام concat وspread وflat.

Collections can contain collections, and separate arrays can become one.الـArrays ممكن تحتوي Arrays تانية، وممكن ندمج أكتر من Array في واحدة.
03-array-nesting-concat-spread / script.jsOfficial Traversy source · script.js
let x;

const fruits = ['apple', 'pear', 'orange'];
const berries = ['strawberry', 'blueberry', 'rasberry'];

// Nesting arrays

// Nesting berries inside of fruits
fruits.push(berries);

// Now we can access 'blueberry' with the following
x = fruits[3][1];

// Create a new variable and nest both arrays
const allFruits = [fruits, berries];

x = allFruits[1][2];

// concat() - Concatenate arrays
x = fruits.concat(berries);

// spread operator (...) - Concatenate with
x = [...fruits, ...berries];
// flat() - Flatten an array
const arr = [1, 2, [3, 4, 5], 6, [7, 8]];
x = arr.flat();

// Static methods of Array object

// isArray() - Check is is an array
x = Array.isArray(fruits);

// from() - Create an array from an array like value
x = Array.from('12345');

// of() - Create an array from a set of values
const a = 1;
const b = 2;
const c = 3;

x = Array.of(a, b, c);

console.log(x);
🔓 RETURN TO MISSION 03

Use what you learned to complete the Array Challenges.استخدم اللي اتعلمته عشان تحل تحديات الـArrays.

Challenge 1

[1, 2, 3, 4, 5] ↓ [6, 5, 4, 3, 2, 1, 0]

Challenge 2

[1,2,3,4,5] + [5,6,7,8,9,10] ↓ [1,2,3,4,5,6,7,8,9,10]
Solve both before opening the official source solution.
⚡ Level Up: explain which operations mutate an existing array and which create a new one.
STUDY CHECKPOINTمراجعة قبل الواجب

Before the assignment, make sure you can do these without copying.قبل الواجب اتأكد إنك تقدر تعمل الحاجات دي من غير نسخ.

Numbers & Math

Format a number, generate a random integer, and use Math methods such as floor, round, min, and max.

تنظّم شكل رقم، وتولّد رقم صحيح عشوائي، وتستخدم Math زي floor وround وmin وmax.

Dates

Create a Date, read parts of it, and format it using Intl.DateTimeFormat or toLocaleString.

تنشئ Date، وتقرأ أجزائها، وتنسقها باستخدام Intl.DateTimeFormat أو toLocaleString.

Arrays

Read by index, change values, use length, and use methods such as push, pop, shift, unshift, includes, indexOf, slice, and splice.

تقرأ بالـindex، وتغيّر قيم، وتستخدم length وpush وpop وshift وunshift وincludes وindexOf وslice وsplice.

Combining Data

Work with nested arrays and combine data using concat, spread, flat, Array.isArray, Array.from, and Array.of.

تتعامل مع Nested Arrays وتدمج البيانات باستخدام concat وspread وflat وArray.isArray وArray.from وArray.of.

🎯 CUMULATIVE ASSIGNMENTواجب تراكمي

Weekend Movie Night Plannerمنظّم ليلة أفلام الويك إند

A completely new scenario: use everything you learned from the start of JavaScript through Arrays to build a movie-night planning report.

فكرة جديدة تمامًا: استخدم كل اللي اتعلمته من بداية JavaScript لحد Arrays عشان تعمل تقرير لتنظيم ليلة أفلام.

⏰
LECTURE 02 + 03 ASSIGNMENTS ARE DUEواجب المحاضرة 2 و3 موعدهمSaturday, 29 August 2026السبت 29 أغسطس 2026