Solve the problem, then learn the tool.شوف المشكلة الأول، وبعدها اتعلم الأداة اللي هتحلها.
Generate two random numbers and print five calculations.ولّد رقمين عشوائيين واطبع خمس عمليات حسابية.
Numbers can be formatted and inspected in different ways.الأرقام في JavaScript ليها طرق مختلفة للعرض والتنسيق والفحص.
Format
Locale
Number object
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);
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()
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);
Now solve the Number Machine.دلوقتي حل مهمة الـNumber Machine.
Your rules
x from 1–100 and y from 1–50, then print sum, difference, product, quotient and remainder.اعمل x عشوائي من 1 لـ100 وy من 1 لـ50، وبعدها اطبع الجمع والطرح والضرب والقسمة والباقي.Turn the current date into readable output.حوّل التاريخ الحالي لشكل واضح ومقروء.
JavaScript can create dates, timestamps, and dates from strings.JavaScript تقدر تنشئ Dates وTimestamps وتواريخ من Strings.
Create
Timestamp
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);
Extract and format the parts of a Date.استخرج أجزاء التاريخ واعرضها بالتنسيق المناسب.
Intl.DateTimeFormat separates the moment itself from how a user sees it.Intl.DateTimeFormat بيفصل بين قيمة الوقت نفسها وبين الشكل اللي المستخدم بيشوفه.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);
Store and transform collections of values.خزّن مجموعات من القيم وعدّل عليها باستخدام Arrays.
Arrays let one variable hold an ordered collection of values.الـArray بتخلي متغير واحد يشيل مجموعة قيم مترتبة.
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);
Array methods add, remove, search, copy, and transform values.دوال الـArray بتضيف وتحذف وتبحث وتنسخ وتغيّر القيم.
Ends
push · pop · shift · unshift
Inspect
includes · indexOf
Extract
slice · splice
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 can be nested, combined, spread, and flattened.تقدر تعمل Nested Arrays وتدمج Arrays باستخدام concat وspread وflat.
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);
Use what you learned to complete the Array Challenges.استخدم اللي اتعلمته عشان تحل تحديات الـArrays.
Challenge 1
Challenge 2
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.
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 عشان تعمل تقرير لتنظيم ليلة أفلام.
D4NGER Movie Night PlannerD4NGER Movie Night Planner
Create one JavaScript file that prepares a complete movie-night plan using strings, numbers, Math, dates, and arrays. Do not use Objects, Loops, Conditions, or Functions yet.
اعمل ملف JavaScript واحد يجهز خطة كاملة لليلة أفلام باستخدام Strings وNumbers وMath وDates وArrays. ممنوع Objects أو Loops أو Conditions أو Functions لأننا لسه ماخدناهمش.
1 · Planner Identity1 · بيانات المنظّم
- Store your first and last name in lowercase and capitalize them with string methods.اكتب اسمك الأول واسم العيلة lowercase وبعدها اعملهم Capitalize باستخدام String Methods.
- Create a random 4-digit night code using Math.ولّد Night Code عشوائي من 4 أرقام باستخدام Math.
- Create the movie-night date and display it in a readable format.اعمل تاريخ ليلة الأفلام واعرضه بشكل واضح باستخدام Date formatting.
2 · Build the Watchlist2 · ابنِ الـWatchlist
const myMovies = ['inception', 'interstellar', 'coco'];
const friendMovies = ['joker', 'up', 'avatar'];
- Combine both lists using spread or concat.ادمج القايمتين باستخدام spread أو concat.
- Add one movie at the beginning and another at the end.ضيف فيلم في البداية وفيلم في النهاية.
- Remove or replace one movie using splice.شيل أو بدّل فيلم باستخدام splice.
- Use includes and indexOf and print the results.استخدم includes وindexOf واطبع النتيجة.
3 · Runtimes & Type Conversion3 · مدة الأفلام وType Conversion
const runtimes = ['148', '169', '105'];
- Convert the string runtimes to numbers before calculations.حوّل مدد الأفلام من Strings لأرقام قبل الحساب.
- Calculate the total runtime using array indexes.احسب إجمالي المدة باستخدام Array Indexes.
- Convert the total minutes into hours and remaining minutes using arithmetic operators.حوّل إجمالي الدقايق لساعات ودقايق متبقية باستخدام Operators.
4 · Snacks as Nested Arrays4 · السناكس كـNested Arrays
const snacks = [
['popcorn', '2'],
['cola', '3'],
['chips', '2']
];
- Read at least three values using nested indexes.اقرأ 3 قيم على الأقل باستخدام Nested Indexes.
- Convert quantities to numbers and calculate the total snack items.حوّل الكميات لأرقام واحسب إجمالي عدد السناكس.
- Create an extras array and combine it with snack names using concat or spread.اعمل Extras Array وادمجها مع أسماء السناكس باستخدام concat أو spread.
5 · Random First Movie5 · اختار أول فيلم عشوائي
- Use Math.random, Math.floor and the watchlist length to produce a valid random array index.استخدم Math.random وMath.floor مع length عشان تطلع Index عشوائي صحيح.
- Print the selected movie as the opening movie.اطبع الفيلم اللي اتختار كأول فيلم في الليلة.
6 · Final Console Report6 · التقرير النهائي في Console
Use a template literal to print a clean final report. Your exact movies and numbers should be your own.
استخدم Template Literal عشان تطبع تقرير منظم، وخلي الأفلام والأرقام من اختيارك أنت.
================================
D4NGER MOVIE NIGHT
================================
Planner: YOUR NAME
Night Code: 4821
Date: Saturday, ...
--------------------------------
Watchlist: ...
Opening Movie: ...
Movies Planned: ...
Total Runtime: ...h ...m
Snack Items: ...
--------------------------------
READY FOR MOVIE NIGHT 🎬
================================
Rulesالقواعد
- Use only concepts covered from Lecture 01 through Lecture 03.استخدم فقط اللي أخدناه من Lecture 01 لحد Lecture 03.
- Do not use Objects, Functions, Loops, or Conditions.ممنوع Objects وFunctions وLoops وConditions.
- Do not copy the sample values exactly.ما تنسخش أمثلة القيم زي ما هي؛ اعمل بياناتك أنت.
- Your explanation is part of the submission.الشرح جزء أساسي من التسليم.
How to submitطريقة التسليم
Show code and output and explain what you wrote with your voice.ورّي الكود والـOutput واشرح بصوتك إنت كتبت إيه وليه.
Send clear screenshots of code and output plus a voice explanation.ابعت Screenshots واضحة للكود والـOutput ومعاها تسجيل صوتي للشرح.
If you attend offline on Saturday, open the project and explain it directly.لو هتحضر في الفرع السبت، افتح المشروع وورّيه واشرحه بنفسك.
