@ -0,0 +1,26 @@
|
||||
--- |
||||
name: ๐ Question / Potential Issue |
||||
about: Ask a question or report a potential issue that isn't clearly a bug or a feature request |
||||
title: "[QUESTION] " |
||||
labels: "๐ question" |
||||
assignees: "" |
||||
--- |
||||
|
||||
**Describe your question or potential issue** |
||||
A clear and concise description of your question or the potential issue you have encountered. |
||||
|
||||
**Context & Use Case** |
||||
Provide the context or the scenario in which this question or issue arises. Explain why this is important to understand or address. |
||||
|
||||
**Steps taken** |
||||
List any steps you have taken to try and resolve the issue or answer the question: |
||||
|
||||
1. Checked the documentation/readme... |
||||
2. Tried to reproduce the issue... |
||||
3. Searched for similar questions... |
||||
|
||||
**Attachments** |
||||
If applicable, add any screenshots, logs, or additional information that could help explain your question or potential issue. |
||||
|
||||
**Additional context** |
||||
Add any other details or context that might be relevant, including links to related issues or documentation. |
@ -0,0 +1,52 @@
|
||||
export const tests = [] |
||||
|
||||
tests.push(async ({ eq, page }) => { |
||||
// Check if the button with id 'arm-color' exists
|
||||
const buttonExists = await page.$('button#arm-color') |
||||
eq(!!buttonExists, true) |
||||
}) |
||||
|
||||
tests.push(async ({ eq, page }) => { |
||||
// Check if the left and right arms exist
|
||||
const leftArmExists = await page.$('#arm-left') |
||||
const rightArmExists = await page.$('#arm-right') |
||||
eq(!!leftArmExists && !!rightArmExists, true) |
||||
}) |
||||
|
||||
tests.push(async ({ eq, page }) => { |
||||
// Get the initial background colors of the arms
|
||||
const initialLeftArmColor = await page.$eval('#arm-left', node => getComputedStyle(node).backgroundColor) |
||||
const initialRightArmColor = await page.$eval('#arm-right', node => getComputedStyle(node).backgroundColor) |
||||
|
||||
// Click the 'arm-color' button
|
||||
const button = await page.$('button#arm-color') |
||||
await button.click() |
||||
|
||||
// Get the new background colors of the arms after clicking the button
|
||||
const newLeftArmColor = await page.$eval('#arm-left', node => getComputedStyle(node).backgroundColor) |
||||
const newRightArmColor = await page.$eval('#arm-right', node => getComputedStyle(node).backgroundColor) |
||||
|
||||
// Check if the colors have changed and are now different from the initial colors
|
||||
eq(initialLeftArmColor !== newLeftArmColor, true) |
||||
eq(initialRightArmColor !== newRightArmColor, true) |
||||
eq(newLeftArmColor, newRightArmColor) // Check if both arms have the same color
|
||||
}) |
||||
|
||||
tests.push(async ({ eq, page }) => { |
||||
// Click the 'arm-color' button multiple times to ensure the colors keep changing
|
||||
const button = await page.$('button#arm-color') |
||||
|
||||
const armColors = [] |
||||
for (let i = 0; i < 3; i++) { |
||||
await button.click() |
||||
const leftArmColor = await page.$eval('#arm-left', node => getComputedStyle(node).backgroundColor) |
||||
const rightArmColor = await page.$eval('#arm-right', node => getComputedStyle(node).backgroundColor) |
||||
armColors.push({ leftArmColor, rightArmColor }) |
||||
} |
||||
|
||||
// Check if the colors are different in each click
|
||||
eq(new Set(armColors.map(c => c.leftArmColor)).size, armColors.length) |
||||
eq(new Set(armColors.map(c => c.rightArmColor)).size, armColors.length) |
||||
// Check if the arms always have the same color after each click
|
||||
armColors.forEach(colorPair => eq(colorPair.leftArmColor, colorPair.rightArmColor)) |
||||
}) |
@ -0,0 +1,34 @@
|
||||
export const tests = [] |
||||
|
||||
tests.push(async ({ eq, page }) => { |
||||
// Click on the button to change the robot's leg colors
|
||||
const button = await page.$('button#leg-color') |
||||
await button.click() |
||||
|
||||
// Get the new colors of both legs
|
||||
const legLeftColor = await page.$eval('#leg-left', (node) => getComputedStyle(node).backgroundColor) |
||||
const legRightColor = await page.$eval('#leg-right', (node) => getComputedStyle(node).backgroundColor) |
||||
|
||||
// Check if both legs have been assigned the same new color
|
||||
eq(legLeftColor, legRightColor) |
||||
}) |
||||
|
||||
tests.push(async ({ eq, page }) => { |
||||
// Get the initial colors of the legs before clicking the button
|
||||
const initialLegLeftColor = await page.$eval('#leg-left', (node) => getComputedStyle(node).backgroundColor) |
||||
const initialLegRightColor = await page.$eval('#leg-right', (node) => getComputedStyle(node).backgroundColor) |
||||
|
||||
// Click on the button to change the robot's leg colors
|
||||
const button = await page.$('button#leg-color') |
||||
await button.click() |
||||
|
||||
// Get the new colors of both legs
|
||||
const newLegLeftColor = await page.$eval('#leg-left', (node) => getComputedStyle(node).backgroundColor) |
||||
const newLegRightColor = await page.$eval('#leg-right', (node) => getComputedStyle(node).backgroundColor) |
||||
|
||||
// Check if both legs have been assigned the same new color
|
||||
eq(newLegLeftColor, newLegRightColor) |
||||
|
||||
// Ensure the new color is different from the initial color
|
||||
eq(newLegLeftColor !== initialLegLeftColor, true, 'The color of the legs should be different from the initial color') |
||||
}) |
@ -0,0 +1,56 @@
|
||||
export const tests = [] |
||||
|
||||
tests.push(async ({ eq, page }) => { |
||||
// Check if the class 'words' has been added in the CSS
|
||||
await eq.css('.words', { textAlign: 'center', fontFamily: 'sans-serif' }) |
||||
}) |
||||
|
||||
tests.push(async ({ eq, page }) => { |
||||
// Check if the torso element is initially empty
|
||||
const isEmpty = await page.$eval('#torso', (node) => !node.children.length) |
||||
eq(isEmpty, true) |
||||
}) |
||||
|
||||
tests.push(async ({ eq, page }) => { |
||||
// Click on the button
|
||||
const button = await page.$('button#speak-button') |
||||
await button.click() |
||||
|
||||
// Check if a new text element is added in the torso
|
||||
const torsoChildren = await page.$eval('#torso', (node) => |
||||
[...node.children].map((child) => ({ |
||||
tag: child.tagName, |
||||
text: child.textContent, |
||||
class: child.className, |
||||
})), |
||||
) |
||||
eq(torsoChildren, [textNode]) |
||||
}) |
||||
|
||||
tests.push(async ({ eq, page }) => { |
||||
// Click a second time on the button
|
||||
const button = await page.$('button#speak-button') |
||||
await button.click() |
||||
|
||||
// Check if the text element is removed from the torso
|
||||
const isEmpty = await page.$eval('#torso', (node) => !node.children.length) |
||||
eq(isEmpty, true) |
||||
}) |
||||
|
||||
tests.push(async ({ eq, page }) => { |
||||
// Click the button once more to ensure the text is added again
|
||||
const button = await page.$('button#speak-button') |
||||
await button.click() |
||||
|
||||
// Check if a new text element is added in the torso
|
||||
const torsoChildren = await page.$eval('#torso', (node) => |
||||
[...node.children].map((child) => ({ |
||||
tag: child.tagName, |
||||
text: child.textContent, |
||||
class: child.className, |
||||
})), |
||||
) |
||||
eq(torsoChildren, [textNode]) |
||||
}) |
||||
|
||||
const textNode = { tag: 'DIV', text: 'Hello World', class: 'words' } |
@ -0,0 +1,40 @@
|
||||
export const tests = [] |
||||
|
||||
tests.push(async ({ eq, page }) => { |
||||
// check the JS script has a valid src
|
||||
const source = await page.$eval( |
||||
'script', |
||||
(node) => node.src.includes('.js') && node.src, |
||||
) |
||||
if (!source.length) throw Error('missing script src') |
||||
}) |
||||
|
||||
tests.push(async ({ eq, page }) => { |
||||
// check the class 'eye-closed' has been added in the CSS
|
||||
eq.css('.eye-closed', { |
||||
height: '4px', |
||||
padding: '0px 5px', |
||||
borderRadius: '10px', |
||||
}) |
||||
}) |
||||
|
||||
tests.push(async ({ eq, page }) => { |
||||
// check the class of left eye before the JS is loaded
|
||||
await page.setJavaScriptEnabled(false) |
||||
await page.reload() |
||||
await eq.$('p#eye-left', { className: 'eye' }) |
||||
}) |
||||
|
||||
tests.push(async ({ eq, page }) => { |
||||
// check the class of left eye has been updated after the JS is loaded
|
||||
await page.setJavaScriptEnabled(true) |
||||
await page.reload() |
||||
await eq.$('p#eye-left', { className: 'eye eye-closed' }) |
||||
|
||||
// check the background color of left eye has changed after the JS is loaded
|
||||
const eyeLeftBg = await page.$eval( |
||||
'#eye-left', |
||||
(node) => node.style.backgroundColor, |
||||
) |
||||
eq(eyeLeftBg, 'black') |
||||
}) |
@ -0,0 +1,45 @@
|
||||
export const tests = [] |
||||
|
||||
tests.push(async ({ eq, page }) => { |
||||
// check the initial class name of the eye left
|
||||
const eyeLeft = await page.$eval('#eye-left', (node) => node.className) |
||||
eq(eyeLeft, 'eye') |
||||
|
||||
// check that the text of the button says 'close'
|
||||
const buttonText = await page.$eval('button', (node) => node.textContent) |
||||
eq(buttonText, 'Click to close the left eye') |
||||
}) |
||||
|
||||
tests.push(async ({ eq, page }) => { |
||||
// click the button to close the left eye
|
||||
const button = await page.$('button') |
||||
button.click() |
||||
|
||||
// check that the class has been added
|
||||
await page.waitForSelector('#eye-left.eye.eye-closed', { timeout: 150 }) |
||||
|
||||
// check the background color has changed
|
||||
await eq.$('#eye-left.eye.eye-closed', { |
||||
style: { backgroundColor: 'black' }, |
||||
}) |
||||
|
||||
// check that the text of the button changed to 'open'
|
||||
await eq.$('button', { textContent: 'Click to open the left eye' }) |
||||
}) |
||||
|
||||
tests.push(async ({ eq, page }) => { |
||||
// click the button a second time to open the left eye
|
||||
const button = await page.$('button') |
||||
button.click() |
||||
|
||||
// check that the class has been removed
|
||||
await page.waitForSelector('#eye-left.eye:not(.eye-closed)', { timeout: 150 }) |
||||
|
||||
// check the background color has changed
|
||||
await eq.$('#eye-left.eye:not(.eye-closed)', { |
||||
style: { backgroundColor: 'red' }, |
||||
}) |
||||
|
||||
// check that the text of the button changed to 'close'
|
||||
await eq.$('button', { textContent: 'Click to close the left eye' }) |
||||
}) |
@ -0,0 +1,14 @@
|
||||
[ |
||||
{ |
||||
"description": "As a number, seven value is 7", |
||||
"code": "equal(Number(seven), 7)" |
||||
}, |
||||
{ |
||||
"description": "As a number, seventySeven value is 77", |
||||
"code": "equal(Number(seventySeven), 77)" |
||||
}, |
||||
{ |
||||
"description": "Somehow, the type of seven and seventySeven value must be strings", |
||||
"code": "equal(typeof seven, 'string')\nequal(typeof seventySeven, 'string')" |
||||
} |
||||
] |
@ -0,0 +1,22 @@
|
||||
[ |
||||
{ |
||||
"description": "ask is defined and is a function", |
||||
"code": "equal(typeof ask, 'function')" |
||||
}, |
||||
{ |
||||
"description": "reply is defined and is a function", |
||||
"code": "equal(typeof reply, 'function')" |
||||
}, |
||||
{ |
||||
"description": "ask works and is called", |
||||
"code": "const args = saveArguments(console, 'log')\n\n// Your code\n\nequal(args[0], ['What is my purpose ?'])" |
||||
}, |
||||
{ |
||||
"description": "reply works and is called too", |
||||
"code": "const args = saveArguments(console, 'log')\n\n// Your code\n\nequal(args, [['What is my purpose ?'], ['You pass butter.']])" |
||||
}, |
||||
{ |
||||
"description": "calling reply and ask again relog the text.", |
||||
"code": "const args = saveArguments(console, 'log')\n\n// Your code\n\nequal(args[1], ['You pass butter.'])" |
||||
} |
||||
] |
@ -0,0 +1,18 @@
|
||||
[ |
||||
{ |
||||
"description": "Log a number in the console", |
||||
"code": "// If you see this code, it means that you failed the first tests.\n// each tests have it's own code to be tested that will appear if\n// your solution doesn't pass it, it is not here to help you.\n// While sometimes it may clarify the instructions\n// this specific test is complex and will most likely confuse you.\n\n// This is to save all the values that you console.log'd\nconst args = saveArguments(console, 'log')\n\n// This comment below will be replaced by your code\n// Your code\n\n// This is where we check that the value are expected.\n// It's pretty advanced code, you don't have to understand it\n// Do not try to use it for the solution, it will not help you.\nconst typeOfLoggedValues = args.flat().map((v) => typeof v)\nif (!typeOfLoggedValues.includes('number')) {\n // this is where we create the error message you see:\n throw Error('you must log a number')\n // that's what you should focus on trying to understand\n // the message, not `throw` or `Error` don't worry about\n // that, worry about showing a number in the console !\n}" |
||||
}, |
||||
{ |
||||
"description": "Log a boolean in the console", |
||||
"code": "const args = saveArguments(console, 'log')\n\n// Your code\n\nconst typeOfLoggedValues = args.flat().map((v) => typeof v)\nif (!typeOfLoggedValues.includes('boolean')) {\n throw Error('you must log a boolean')\n}" |
||||
}, |
||||
{ |
||||
"description": "Log a string in the console", |
||||
"code": "const args = saveArguments(console, 'log')\n\n// Your code\n\nconst typeOfLoggedValues = args.flat().map((v) => typeof v)\nif (!typeOfLoggedValues.includes('string')) {\n throw Error('you must log a string')\n}" |
||||
}, |
||||
{ |
||||
"description": "Log the string Hello There! in the console", |
||||
"code": "const args = saveArguments(console, 'log')\n\n// Your code\n\nconst loggedValues = args.flat().join(' ')\nif (!loggedValues.includes('Hello There!')) {\n throw Error('you must log the text Hello There!')\n}" |
||||
} |
||||
] |
@ -0,0 +1,50 @@
|
||||
[ |
||||
{ |
||||
"description": "Should work on mixed case", |
||||
"code": "let message = 'YoU cAn CaLl Me YoUr MaJeStY!'\nlet kevin = { age: 14 }\nlet stephanie = { age: 25 }\nlet martin = { age: 32 }\nlet alphabet = 'abcdefghijklmnopqrstuvwxyz'\n\n// Your code\n\nequal(noCaps, 'you can call me your majesty!')\nequal(allCaps, 'YOU CAN CALL ME YOUR MAJESTY!')" |
||||
}, |
||||
{ |
||||
"description": "Should work on mixed case", |
||||
"code": "let message = `DoN'T tAlK aBoUt My MoMs, Yo`\nlet kevin = { age: 14 }\nlet stephanie = { age: 25 }\nlet martin = { age: 32 }\nlet alphabet = 'abcdefghijklmnopqrstuvwxyz'\n\n// Your code\n\nequal(noCaps, `don't talk about my moms, yo`)\nequal(allCaps, `DON'T TALK ABOUT MY MOMS, YO`)" |
||||
}, |
||||
{ |
||||
"description": "oldestAge is a number", |
||||
"code": "let kevin = { age: 14 }\nlet stephanie = { age: 25 }\nlet martin = { age: 32 }\nlet alphabet = 'abcdefghijklmnopqrstuvwxyz'\nlet message = 'YoU cAn CaLl Me YoUr MaJeStY!'\n\n// Your code\n\nequal(typeof oldestAge, 'number')" |
||||
}, |
||||
{ |
||||
"description": "oldestAge is the maximum value of the age property (martin)", |
||||
"code": "let kevin = { age: 14 }\nlet stephanie = { age: 25 }\nlet martin = { age: 32 }\nlet alphabet = 'abcdefghijklmnopqrstuvwxyz'\nlet message = 'YoU cAn CaLl Me YoUr MaJeStY!'\n\n// Your code\n\nequal(oldestAge, 32)" |
||||
}, |
||||
{ |
||||
"description": "oldestAge is still the maximum value of the age property (kevin)", |
||||
"code": "let kevin = { age: 67 }\nlet stephanie = { age: 25 }\nlet martin = { age: 32 }\nlet alphabet = 'abcdefghijklmnopqrstuvwxyz'\nlet message = 'YoU cAn CaLl Me YoUr MaJeStY!'\n\n// Your code\n\nequal(oldestAge, 67)" |
||||
}, |
||||
{ |
||||
"description": "oldestAge is still the maximum value of the age property (stephanie)", |
||||
"code": "let kevin = { age: 29 }\nlet stephanie = { age: 45 }\nlet martin = { age: 32 }\nlet alphabet = 'abcdefghijklmnopqrstuvwxyz'\nlet message = 'YoU cAn CaLl Me YoUr MaJeStY!'\n\n// Your code\n\nequal(oldestAge, 45)" |
||||
}, |
||||
{ |
||||
"description": "cutFirst from the latin alphabet", |
||||
"code": "let alphabet = 'abcdefghijklmnopqrstuvwxyz'\nlet kevin = { age: 14 }\nlet stephanie = { age: 25 }\nlet martin = { age: 32 }\nlet message = 'YoU cAn CaLl Me YoUr MaJeStY!'\n\n// Your code\n\nequal(cutFirst, 'klmnopqrstuvwxyz')" |
||||
}, |
||||
{ |
||||
"description": "cutFirst from the georgian alphabet", |
||||
"code": "let alphabet = 'แแแแแแแแแแแแแแแแแ แกแขแฃแคแฅแฆแงแจแฉแชแซแฌแญแฎแฏแฐ'\nlet kevin = { age: 14 }\nlet stephanie = { age: 25 }\nlet martin = { age: 32 }\nlet message = 'YoU cAn CaLl Me YoUr MaJeStY!'\n\n// Your code\n\nequal(cutFirst, 'แแแแแแแ แกแขแฃแคแฅแฆแงแจแฉแชแซแฌแญแฎแฏแฐ')" |
||||
}, |
||||
{ |
||||
"description": "cutLast from the latin alphabet", |
||||
"code": "let alphabet = 'abcdefghijklmnopqrstuvwxyz'\nlet kevin = { age: 14 }\nlet stephanie = { age: 25 }\nlet martin = { age: 32 }\nlet message = 'YoU cAn CaLl Me YoUr MaJeStY!'\n\n// Your code\n\nequal(cutLast, 'abcdefghijklmnopqrstuvw')" |
||||
}, |
||||
{ |
||||
"description": "cutLast from the greek alphabet", |
||||
"code": "let alphabet = 'ฮฑฮฒฮณฮดฮตฮถฮทฮธฮนฮบฮปฮผฮฝฮพฮฟฯฯฯฯฯ
ฯฯฯฯ'\nlet kevin = { age: 14 }\nlet stephanie = { age: 25 }\nlet martin = { age: 32 }\nlet message = 'YoU cAn CaLl Me YoUr MaJeStY!'\n\n// Your code\n\nequal(cutLast, 'ฮฑฮฒฮณฮดฮตฮถฮทฮธฮนฮบฮปฮผฮฝฮพฮฟฯฯฯฯฯ
ฯ')" |
||||
}, |
||||
{ |
||||
"description": "cutFirstLast from the latin alphabet", |
||||
"code": "let alphabet = 'abcdefghijklmnopqrstuvwxyz'\nlet kevin = { age: 14 }\nlet stephanie = { age: 25 }\nlet martin = { age: 32 }\nlet message = 'YoU cAn CaLl Me YoUr MaJeStY!'\n\n// Your code\n\nequal(cutFirstLast, 'fghijklmnopqrst')" |
||||
}, |
||||
{ |
||||
"description": "cutFirstLast from the armenian alphabet", |
||||
"code": "let alphabet = 'ีกีขีฃีคีฅีฆีงีจีฉีชีซีฌีญีฎีฏีฐีฑีฒีณีดีตีถีทีธีนีบีปีผีฝีพีฟึึึึึึ
ึีธึึ'\nlet kevin = { age: 14 }\nlet stephanie = { age: 25 }\nlet martin = { age: 32 }\nlet message = 'YoU cAn CaLl Me YoUr MaJeStY!'\n\n// Your code\n\nequal(cutFirstLast, 'ีฆีงีจีฉีชีซีฌีญีฎีฏีฐีฑีฒีณีดีตีถีทีธีนีบีปีผีฝีพีฟึึึึ')" |
||||
} |
||||
] |
@ -0,0 +1,66 @@
|
||||
[ |
||||
{ |
||||
"description": "battleCry is defined and is a function", |
||||
"code": "equal(typeof battleCry, 'function')" |
||||
}, |
||||
{ |
||||
"description": "secretOrders is defined and is a function", |
||||
"code": "equal(typeof secretOrders, 'function')" |
||||
}, |
||||
{ |
||||
"description": "battleCry has one and only one argument", |
||||
"code": "equal(battleCry.length, 1)" |
||||
}, |
||||
{ |
||||
"description": "secretOrders has one and only one argument", |
||||
"code": "equal(secretOrders.length, 1)" |
||||
}, |
||||
{ |
||||
"description": "battleCry shouts properly", |
||||
"code": "const args = saveArguments(console, 'log')\n// Your code\n\nbattleCry('attack')\nbattleCry('you shall not pass!')\n\nequal(args.flat(), ['ATTACK', 'YOU SHALL NOT PASS!'])" |
||||
}, |
||||
{ |
||||
"description": "secretOrders whispers properly", |
||||
"code": "const args = saveArguments(console, 'log')\n\n// Your code\n\nsecretOrders('ExEcutE Order 66')\nsecretOrders('SILENCE')\n\nequal(args.flat(), ['execute order 66', 'silence'])" |
||||
}, |
||||
{ |
||||
"description": "We can call both functions", |
||||
"code": "const args = saveArguments(console, 'log')\n\n// Your code\n\nsecretOrders('This Is The WAY')\nbattleCry('for the horde !')\n\nequal(args.flat(), ['this is the way', 'FOR THE HORDE !'])" |
||||
}, |
||||
{ |
||||
"description": "duos is defined and is a function", |
||||
"code": "equal(typeof duos, 'function')" |
||||
}, |
||||
{ |
||||
"description": "duos takes two arguments", |
||||
"code": "equal(duos.length, 2)" |
||||
}, |
||||
{ |
||||
"description": "duos logs the expected result", |
||||
"code": "const args = saveArguments(console, 'log')\n\n// Your code\n\nduos('Batman', 'Robin')\nduos('Pinky', 'The Brain')\nduos('Bonnie', 'Clyde')\nduos('Mr.', 'Mrs.Smith')\n\nequal(\n args.map((arg) => arg.join(' ')),\n [\n 'Batman and Robin!',\n 'Pinky and The Brain!',\n 'Bonnie and Clyde!',\n 'Mr. and Mrs.Smith!',\n ],\n)" |
||||
}, |
||||
{ |
||||
"description": "duosWork is defined and is a function", |
||||
"code": "equal(typeof duosWork, 'function')" |
||||
}, |
||||
{ |
||||
"description": "duosWork takes three arguments", |
||||
"code": "equal(duosWork.length, 3)" |
||||
}, |
||||
{ |
||||
"description": "duosWork logs the expected result", |
||||
"code": "const args = saveArguments(console, 'log')\n\n// Your code\n\nduosWork('Batman', 'Robin', 'protect Gotham')\nduosWork('Pinky', 'The Brain', 'want to conquer the world')\nduosWork('Bonnie', 'Clyde', 'escape the Police')\nduosWork('Mr.', 'Mrs.Smith', 'are the greatest spy couple')\n\nequal(\n args.map((arg) => arg.join(' ')),\n [\n 'Batman and Robin protect Gotham!',\n 'Pinky and The Brain want to conquer the world!',\n 'Bonnie and Clyde escape the Police!',\n 'Mr. and Mrs.Smith are the greatest spy couple!',\n ],\n)" |
||||
}, |
||||
{ |
||||
"description": "passButter is defined and is a function", |
||||
"code": "equal(typeof passButter, 'function')" |
||||
}, |
||||
{ |
||||
"description": "passButter returns The butter properly", |
||||
"code": "equal(passButter(), 'The butter')" |
||||
}, |
||||
{ |
||||
"description": "calling passButter mulitple time should always return the butter", |
||||
"code": "equal(\n [passButter(), passButter(), passButter()],\n ['The butter', 'The butter', 'The butter'],\n)" |
||||
} |
||||
] |
@ -0,0 +1,58 @@
|
||||
[ |
||||
{ |
||||
"description": "components variable must be an Array", |
||||
"code": "\n\nconst replaceComponents = ['sensor', 'battery', 'motor', 'brain']\nlet swapComponents = ['motor', 'battery']\nlet robotParts = [\n 'motor',\n 'sensor',\n 'camera',\n 'battery',\n // 'memory', ??\n]\n\n// Your code\nif (!Array.isArray(components)) {\n throw Error('Season must be an Array')\n}" |
||||
}, |
||||
{ |
||||
"description": "components first element must be motor", |
||||
"code": "\n\nconst replaceComponents = ['sensor', 'battery', 'motor', 'brain']\nlet swapComponents = ['motor', 'battery']\nlet robotParts = [\n 'motor',\n 'sensor',\n 'camera',\n 'battery',\n // 'memory', ??\n]\n// Your code\nequal(components[0].toLowerCase(), 'motor')\n" |
||||
}, |
||||
{ |
||||
"description": "components second element sensor", |
||||
"code": "\n\nconst replaceComponents = ['sensor', 'battery', 'motor', 'brain']\nlet swapComponents = ['motor', 'battery']\nlet robotParts = [\n 'motor',\n 'sensor',\n 'camera',\n 'battery',\n // 'memory', ??\n]\n// Your code\nequal(components[1].toLowerCase(), 'sensor')\n" |
||||
}, |
||||
{ |
||||
"description": "components third element battery", |
||||
"code": "\n\nconst replaceComponents = ['sensor', 'battery', 'motor', 'brain']\nlet swapComponents = ['motor', 'battery']\nlet robotParts = [\n 'motor',\n 'sensor',\n 'camera',\n 'battery',\n // 'memory', ??\n]\n// Your code\nequal(components[2].toLowerCase(), 'battery')\n" |
||||
}, |
||||
{ |
||||
"description": "components fourth element camera", |
||||
"code": "\n\nconst replaceComponents = ['sensor', 'battery', 'motor', 'brain']\nlet swapComponents = ['motor', 'battery']\nlet robotParts = [\n 'motor',\n 'sensor',\n 'camera',\n 'battery',\n // 'memory', ??\n]\n// Your code\nequal(components[3].toLowerCase(), 'camera')\n" |
||||
}, |
||||
{ |
||||
"description": "components we must not have a fifth element", |
||||
"code": "\n\nconst replaceComponents = ['sensor', 'battery', 'motor', 'brain']\nlet swapComponents = ['motor', 'battery']\nlet robotParts = [\n 'motor',\n 'sensor',\n 'camera',\n 'battery',\n // 'memory', ??\n]\n// Your code\nequal(components[4], undefined)\n" |
||||
}, |
||||
{ |
||||
"description": "firstPart is the value of the first element", |
||||
"code": "\n\nconst replaceComponents = ['sensor', 'battery', 'motor', 'brain']\nlet robotParts = [\n 'motor',\n 'sensor',\n 'battery',\n 'camera',\n // 'memory', ??\n]\nconst swapComponents = ['sensor', 'battery', 'motor']\n\n// Your code\n\nequal(firstPart, 'motor')\n" |
||||
}, |
||||
{ |
||||
"description": "firstPart is the value of the first element even if we change the list", |
||||
"code": "\n\nconst replaceComponents = ['sensor', 'battery', 'motor', 'brain']\nlet robotParts = [\n 'sensor',\n 'motor',\n 'camera',\n 'battery',\n // 'memory', ??\n]\nconst swapComponents = ['sensor', 'battery', 'motor']\n\n// Your code\n\nequal(firstPart, 'sensor')\n" |
||||
}, |
||||
{ |
||||
"description": "lastPart is the value of the last element", |
||||
"code": "\n\nconst replaceComponents = ['sensor', 'battery', 'motor', 'brain']\nlet robotParts = [\n 'motor',\n 'sensor',\n 'battery',\n 'camera',\n // 'memory', ??\n]\nconst swapComponents = ['sensor', 'battery', 'motor']\n\n// Your code\n\nequal(lastPart, 'camera')\n" |
||||
}, |
||||
{ |
||||
"description": "lastPart is the value of the last element even if we change the list", |
||||
"code": "\n\nconst replaceComponents = ['sensor', 'battery', 'motor', 'brain']\nlet robotParts = [\n 'sensor',\n 'motor',\n 'camera',\n 'battery',\n // 'memory', ??\n]\nconst swapComponents = ['sensor', 'battery', 'motor']\n\n// Your code\n\nequal(lastPart, 'battery')\n" |
||||
}, |
||||
{ |
||||
"description": "comboParts is an array of lastPart and firstPart", |
||||
"code": "\n\nconst replaceComponents = ['sensor', 'battery', 'motor', 'brain']\nlet robotParts = [\n 'motor',\n 'sensor',\n 'battery',\n 'camera',\n // 'memory', ??\n]\nconst swapComponents = ['sensor', 'battery', 'motor']\n\n// Your code\n\nequal(comboParts, ['camera', 'motor'])\n" |
||||
}, |
||||
{ |
||||
"description": "comboParts is an array of lastPart and firstPart even if we change the list", |
||||
"code": "\n\nconst replaceComponents = ['sensor', 'battery', 'motor', 'brain']\nlet robotParts = [\n 'sensor',\n 'motor',\n 'camera',\n 'battery',\n // 'memory', ??\n]\nconst swapComponents = ['sensor', 'battery', 'motor']\n\n// Your code\n\nequal(comboParts, ['battery', 'sensor'])\n" |
||||
}, |
||||
{ |
||||
"description": "replaceComponents third element is 'enhanced'", |
||||
"code": "\n\nlet robotParts = [\n 'motor',\n 'sensor',\n 'camera',\n 'battery',\n // 'memory', ??\n]\nconst swapComponents = ['sensor', 'battery', 'motor']\nconst replaceComponents = ['sensor', 'battery', 'motor', 'brain']\n\n// Your code\n\nequal(replaceComponents, ['sensor', 'battery', 'enhanced', 'brain'])\n" |
||||
}, |
||||
{ |
||||
"description": "1st and 2nd elements of swapComponents are swapped pif,paf,pom", |
||||
"code": "\n\nconst replaceComponents = ['sensor', 'battery', 'motor', 'brain']\nlet robotParts = [\n 'motor',\n 'sensor',\n 'camera',\n 'battery',\n // 'memory', ??\n]\nlet swapComponents = ['sensor', 'battery', 'motor']\n\n// Your code\n\nequal(swapComponents, ['battery', 'sensor', 'motor'])\n" |
||||
} |
||||
] |
@ -0,0 +1,26 @@
|
||||
[ |
||||
{ |
||||
"description": "variable myRobot is declared and of type object", |
||||
"code": "let robot = {\n name: 'Freddy',\n age: 27,\n hasEnergy: false,\n}\n\n// Your code\n\nequal(typeof myRobot, 'object')" |
||||
}, |
||||
{ |
||||
"description": "property name from myRobot is of type string", |
||||
"code": "let robot = {\n name: 'Freddy',\n age: 27,\n hasEnergy: false,\n}\n\n// Your code\n\nequal(typeof myRobot.name, 'string')" |
||||
}, |
||||
{ |
||||
"description": "property age from myRobot is of type number", |
||||
"code": "let robot = {\n name: 'Freddy',\n age: 27,\n hasEnergy: false,\n}\n\n// Your code\n\nequal(typeof myRobot.age, 'number')" |
||||
}, |
||||
{ |
||||
"description": "property hasEnergy from myRobot is of type boolean", |
||||
"code": "let robot = {\n name: 'Freddy',\n age: 27,\n hasEnergy: false,\n}\n\n// Your code\n\nequal(typeof myRobot.hasEnergy, 'boolean')" |
||||
}, |
||||
{ |
||||
"description": "all 3 variable should be defined and have the right values", |
||||
"code": "let robot = {\n name: 'Freddy',\n age: 27,\n hasEnergy: false,\n}\n\n// Your code\n\nequal({ name, age, hasEnergy }, robot)" |
||||
}, |
||||
{ |
||||
"description": "value should also work for Jean-Pierre", |
||||
"code": "let robot = {\n name: 'Jean-Pierre',\n age: 65,\n hasEnergy: true,\n}\n\n// Your code\n\nequal({ name, age, hasEnergy }, robot)" |
||||
} |
||||
] |
@ -0,0 +1,82 @@
|
||||
[ |
||||
{ |
||||
"description": "Test with the falsy value 0", |
||||
"code": "const args = saveArguments(console, 'log')\nlet truth = 0\nlet user = { activeMembership: true, age: 22 }\nlet customer = { cash: 20, hasVoucher: false }\nlet ticket = 'You cannot benefit from our special promotion'\nlet ticketSold = 3\n\n// Your code\n\nequal(args[0]?.[0], 'Lies !!!!')" |
||||
}, |
||||
{ |
||||
"description": "Test with the falsy value NaN", |
||||
"code": "const args = saveArguments(console, 'log')\nlet truth = NaN\nlet user = { activeMembership: true, age: 22 }\nlet customer = { cash: 20, hasVoucher: false }\nlet ticket = 'You cannot benefit from our special promotion'\nlet ticketSold = 3\n\n// Your code\n\nequal(args[0]?.[0], 'Lies !!!!')" |
||||
}, |
||||
{ |
||||
"description": "Test with the falsy value undefined", |
||||
"code": "const args = saveArguments(console, 'log')\nlet truth = undefined\nlet user = { activeMembership: true, age: 22 }\nlet customer = { cash: 20, hasVoucher: false }\nlet ticket = 'You cannot benefit from our special promotion'\nlet ticketSold = 3\n\n// Your code\n\nequal(args[0]?.[0], 'Lies !!!!')" |
||||
}, |
||||
{ |
||||
"description": "Test with the falsy value null", |
||||
"code": "const args = saveArguments(console, 'log')\nlet truth = null\nlet user = { activeMembership: true, age: 22 }\nlet customer = { cash: 20, hasVoucher: false }\nlet ticket = 'You cannot benefit from our special promotion'\nlet ticketSold = 3\n\n// Your code\n\nequal(args[0]?.[0], 'Lies !!!!')" |
||||
}, |
||||
{ |
||||
"description": "Test with the falsy value ''", |
||||
"code": "const args = saveArguments(console, 'log')\nlet truth = ''\nlet user = { activeMembership: true, age: 22 }\nlet customer = { cash: 20, hasVoucher: false }\nlet ticket = 'You cannot benefit from our special promotion'\nlet ticketSold = 3\n\n// Your code\n\nequal(args[0]?.[0], 'Lies !!!!')" |
||||
}, |
||||
{ |
||||
"description": "Test with the falsy value false", |
||||
"code": "const args = saveArguments(console, 'log')\nlet truth = false\nlet user = { activeMembership: true, age: 22 }\nlet customer = { cash: 20, hasVoucher: false }\nlet ticket = 'You cannot benefit from our special promotion'\nlet ticketSold = 3\n\n// Your code\n\nequal(args[0]?.[0], 'Lies !!!!')" |
||||
}, |
||||
{ |
||||
"description": "Test with the truthy value 'Sure'", |
||||
"code": "const args = saveArguments(console, 'log')\nlet truth = 'Sure'\nlet user = { activeMembership: true, age: 22 }\nlet customer = { cash: 20, hasVoucher: false }\nlet ticket = 'You cannot benefit from our special promotion'\nlet ticketSold = 3\n\n// Your code\n\nequal(args[0]?.[0], 'The truth was spoken.')" |
||||
}, |
||||
{ |
||||
"description": "Test with the truthy value []", |
||||
"code": "const args = saveArguments(console, 'log')\nlet truth = []\nlet user = { activeMembership: true, age: 22 }\nlet customer = { cash: 20, hasVoucher: false }\nlet ticket = 'You cannot benefit from our special promotion'\nlet ticketSold = 3\n\n// Your code\n\nequal(args[0]?.[0], 'The truth was spoken.')" |
||||
}, |
||||
{ |
||||
"description": "Test with the truthy value {}", |
||||
"code": "const args = saveArguments(console, 'log')\nlet truth = {}\nlet user = { activeMembership: true, age: 22 }\nlet customer = { cash: 20, hasVoucher: false }\nlet ticket = 'You cannot benefit from our special promotion'\nlet ticketSold = 3\n\n// Your code\n\nequal(args[0]?.[0], 'The truth was spoken.')" |
||||
}, |
||||
{ |
||||
"description": "Test with the truthy value true", |
||||
"code": "const args = saveArguments(console, 'log')\nlet truth = true\nlet user = { activeMembership: true, age: 22 }\nlet customer = { cash: 20, hasVoucher: false }\nlet ticket = 'You cannot benefit from our special promotion'\nlet ticketSold = 3\n\n// Your code\n\nequal(args[0]?.[0], 'The truth was spoken.')" |
||||
}, |
||||
{ |
||||
"description": "Test with the truthy value -0.1", |
||||
"code": "const args = saveArguments(console, 'log')\nlet truth = -0.1\nlet user = { activeMembership: true, age: 22 }\nlet customer = { cash: 20, hasVoucher: false }\nlet ticket = 'You cannot benefit from our special promotion'\nlet ticketSold = 3\n\n// Your code\n\nequal(args[0]?.[0], 'The truth was spoken.')" |
||||
}, |
||||
{ |
||||
"description": "Test with a user that can have the promotion", |
||||
"code": "const args = saveArguments(console, 'log')\nlet truth = 1\nlet user = { activeMembership: true, age: 22 }\nlet customer = { cash: 20, hasVoucher: false }\nlet ticket = 'You cannot benefit from our special promotion'\nlet ticketSold = 3\n\n// Your code\n\nequal(ticket, 'You can benefit from our special promotion')" |
||||
}, |
||||
{ |
||||
"description": "Test with a user that is too old", |
||||
"code": "const args = saveArguments(console, 'log')\nlet truth = 1\nlet user = { activeMembership: true, age: 33 }\nlet customer = { cash: 20, hasVoucher: false }\nlet ticket = 'You can benefit from our special promotion'\nlet ticketSold = 3\n\n// Your code\n\nequal(ticket, 'You cannot benefit from our special promotion')" |
||||
}, |
||||
{ |
||||
"description": "Test with a user that is too young", |
||||
"code": "const args = saveArguments(console, 'log')\nlet truth = 1\nlet user = { activeMembership: true, age: 12 }\nlet customer = { cash: 20, hasVoucher: false }\nlet ticket = 'You can benefit from our special promotion'\nlet ticketSold = 3\n\n// Your code\n\nequal(ticket, 'You cannot benefit from our special promotion')" |
||||
}, |
||||
{ |
||||
"description": "Test with a user that doesn't have an active membership", |
||||
"code": "const args = saveArguments(console, 'log')\nlet truth = 1\nlet user = { activeMembership: false, age: 21 }\nlet customer = { cash: 20, hasVoucher: false }\nlet ticket = 'You can benefit from our special promotion'\nlet ticketSold = 3\n\n// Your code\n\nequal(ticket, 'You cannot benefit from our special promotion')" |
||||
}, |
||||
{ |
||||
"description": "Test with a user that can have the promotion but is just at the limit", |
||||
"code": "const args = saveArguments(console, 'log')\nlet truth = 1\nlet user = { activeMembership: true, age: 25 }\nlet customer = { cash: 20, hasVoucher: false }\nlet ticket = 'You can benefit from our special promotion'\nlet ticketSold = 3\n\n// Your code\n\nequal(ticket, 'You can benefit from our special promotion')" |
||||
}, |
||||
{ |
||||
"description": "Test with a customer that has enough cash", |
||||
"code": "let truth = 0\nlet ticketSold = 8\nlet customer = { cash: 20, hasVoucher: false }\nlet user = { activeMembership: true, age: 22 }\nlet ticket = 'You cannot benefit from our special promotion'\n\n// Your code\n\nequal(ticketSold, 9)" |
||||
}, |
||||
{ |
||||
"description": "Test with a customer that has a voucher", |
||||
"code": "let truth = 0\nlet ticketSold = 5\nlet customer = { cash: 0, hasVoucher: true }\nlet user = { activeMembership: true, age: 22 }\nlet ticket = 'You cannot benefit from our special promotion'\n\n// Your code\n\nequal(ticketSold, 6)" |
||||
}, |
||||
{ |
||||
"description": "Test with a customer that has a voucher and cash", |
||||
"code": "let truth = 0\nlet ticketSold = 6\nlet customer = { cash: 42, hasVoucher: true }\nlet user = { activeMembership: true, age: 22 }\nlet ticket = 'You cannot benefit from our special promotion'\n\n// Your code\n\nequal(ticketSold, 7)" |
||||
}, |
||||
{ |
||||
"description": "Test with a customer that can not afford the ticket", |
||||
"code": "let truth = 0\nlet ticketSold = 3\nlet customer = { cash: 3, hasVoucher: false }\nlet user = { activeMembership: true, age: 22 }\nlet ticket = 'You cannot benefit from our special promotion'\n\n// Your code\n\nequal(ticketSold, 3)" |
||||
} |
||||
] |
@ -0,0 +1,22 @@
|
||||
[ |
||||
{ |
||||
"description": "escapeFromDelimiters is declared and includes a double-quote", |
||||
"code": "let power = 'under 9000'\n\n// Your code\nif (typeof escapeFromDelimiters === 'undefined') {\n throw Error(\n `You didn't even define the variable... we've been through this already !`,\n )\n}\n\nif (!escapeFromDelimiters.includes('\"')) {\n throw Error('escapeFromDelimiters must include a double-quote\"')\n}" |
||||
}, |
||||
{ |
||||
"description": "escapeFromDelimiters includes a single-quote", |
||||
"code": "let power = 'under 9000'\n\n// Your code\nif (!escapeFromDelimiters.includes(\"'\")) {\n throw Error(\"escapeFromDelimiters must include a single-quote'\")\n}" |
||||
}, |
||||
{ |
||||
"description": "escapeFromDelimiters includes a backtick", |
||||
"code": "let power = 'under 9000'\n\n// Your code\nif (!escapeFromDelimiters.includes('`')) {\n throw Error('escapeFromDelimiters must include a backtick `')\n}" |
||||
}, |
||||
{ |
||||
"description": "escapeTheEscape includes a backslash", |
||||
"code": "let power = 'under 9000'\n\n// Your code\nif (!new TextEncoder().encode(escapeTheEscape).includes(92)) {\n throw Error('escapeTheEscape must includes a backslash')\n}" |
||||
}, |
||||
{ |
||||
"description": "The value of power must have changed", |
||||
"code": "let power = 'under 9000'\n\n// Your code\n\nequal(power, 'levelMax')" |
||||
} |
||||
] |
@ -0,0 +1,6 @@
|
||||
[ |
||||
{ |
||||
"description": "Star-Forge", |
||||
"code": "// Your code\n\nequal(ready, 'Yes')" |
||||
} |
||||
] |
@ -0,0 +1,26 @@
|
||||
[ |
||||
{ |
||||
"description": "values of the variable are a result of the operations on the variable smooth ( 10 )", |
||||
"code": "let name = 'blank'\nlet age = 0\nlet smooth = 10\n\n// Your code\n\nequal(lessSmooth, 9)\nequal(semiSmooth, 5)\nequal(plus11, 21)" |
||||
}, |
||||
{ |
||||
"description": "values of the variable are a result of the operations on the variable smooth ( 27 )", |
||||
"code": "let name = 'blank'\nlet age = 0\nlet smooth = 27\n\n// Your code\nequal(lessSmooth, 26)\nequal(semiSmooth, 13.5)\nequal(plus11, 38)" |
||||
}, |
||||
{ |
||||
"description": "ultraSmooth should be the square of the value of smooth ( 10 )", |
||||
"code": "let name = 'blank'\nlet age = 0\nlet smooth = 10\n\n// Your code\n\nequal(ultraSmooth, 100)" |
||||
}, |
||||
{ |
||||
"description": "ultraSmooth should be the square of the value of smooth ( 27 )", |
||||
"code": "let name = 'blank'\nlet age = 0\nlet smooth = 27\n\n// Your code\n\nequal(ultraSmooth, 729)" |
||||
}, |
||||
{ |
||||
"description": "presentation value includes age and name .", |
||||
"code": "let name = 'Patrick'\nlet age = 48\nlet smooth = 0\n\n// Your code\nequal(presentation, `Hello, my name is Patrick and I'm 48 years old`)" |
||||
}, |
||||
{ |
||||
"description": "presentation value still includes age and name .", |
||||
"code": "let smooth = 0\nlet name = 'Jeremy'\nlet age = 27\n\n// Your code\nequal(presentation, `Hello, my name is Jeremy and I'm 27 years old`)" |
||||
} |
||||
] |
@ -0,0 +1,22 @@
|
||||
[ |
||||
{ |
||||
"description": "duplicate value should repeat 'I told you so'", |
||||
"code": "let robot = {}\nlet sentence = 'I told you so'\n// Your code\nequal(duplicate, 'I told you so, I told you so!')" |
||||
}, |
||||
{ |
||||
"description": "duplicate value should repeat 'Not again'", |
||||
"code": "let robot = {}\nlet sentence = 'Not again'\n// Your code\nequal(duplicate, 'Not again, Not again!')" |
||||
}, |
||||
{ |
||||
"description": "duplicate value should repeat 'I knew it'", |
||||
"code": "let robot = {}\nlet sentence = 'I knew it'\n// Your code\nequal(duplicate, 'I knew it, I knew it!')" |
||||
}, |
||||
{ |
||||
"description": "Altered object must match the expected result Nova", |
||||
"code": "let sentence = ''\nlet robot = {\n brand: 'Nova',\n batteryLevel: 247,\n}\n\n// Your code\n\nequal(robot, {\n brand: 'Nova',\n model: 'RX-78',\n batteryLevel: 257,\n fullName: 'Nova RX-78',\n})" |
||||
}, |
||||
{ |
||||
"description": "Altered object must match the expected result Ignite", |
||||
"code": "let sentence = ''\nlet robot = {\n brand: 'Ignite',\n batteryLevel: 123,\n}\n\n// Your code\n\nequal(robot, {\n brand: 'Ignite',\n model: 'RX-78',\n batteryLevel: 133,\n fullName: 'Ignite RX-78',\n})" |
||||
} |
||||
] |
@ -0,0 +1,94 @@
|
||||
## Colorful arms |
||||
|
||||
> JSPowered Mode |
||||
|
||||
### Context |
||||
|
||||
Your robot is already impressive, but you can make it even more eye-catching! Or at least, make it show off its colorful arms to the world! |
||||
|
||||
> Follow the instructions, ask your peers if you are stuck and stay motivated because you are close to the goal! |
||||
> Follow every hint you have in the subject! |
||||
> Continue on the code from last exercise, and change the file names! |
||||
|
||||
### Instructions |
||||
|
||||
After finishing these tasks, you will be able make your robot's arms change to beautiful colors! |
||||
|
||||
#### Task 1: |
||||
|
||||
Let's put a third button in the top right corner of the page with an id `arm-color`, that will change the arms color. Add it in the HTML structure: |
||||
|
||||
```html |
||||
<button id="arm-color">Change robot's arm colors</button> |
||||
``` |
||||
|
||||
Add the button style in the CSS file: |
||||
|
||||
```css |
||||
#arm-color { |
||||
position: fixed; |
||||
top: 170px; |
||||
right: 30px; |
||||
padding: 10px; |
||||
z-index: 2; |
||||
} |
||||
``` |
||||
|
||||
Also replace the ``button` element styles with this block: |
||||
|
||||
```css |
||||
button { |
||||
border-radius: 50px; |
||||
padding: 10px; |
||||
z-index: 1; |
||||
position: fixed; |
||||
top: 30px; |
||||
right: 30px; |
||||
} |
||||
``` |
||||
|
||||
Do you see how prettier the buttons turned to be? |
||||
|
||||
#### Task 2: |
||||
|
||||
In the JS file, like in the previous exercise, get the following elements: |
||||
|
||||
- The button with the ID `arm-color`. |
||||
- The left and right arm elements with the IDs `arm-left` and `arm-right`. |
||||
|
||||
#### Task 3: |
||||
|
||||
We provide you with the variable `randomColor`, that stores a random color in each different time we use it. |
||||
|
||||
- Apply the random color to both arms by changing their `backgroundColor`. |
||||
|
||||
### Code Example: |
||||
|
||||
```js |
||||
// Select the button with id 'arm-color' |
||||
//...Here |
||||
|
||||
// Select the left and right arm elements |
||||
//...Here |
||||
|
||||
// Your function that gets triggered when clicking the new button |
||||
|
||||
const handleChangeArmColor = (event) => { |
||||
// Generate a random color |
||||
const randomColor = `#${Math.floor(Math.random() * 16777215).toString(16)}`; |
||||
|
||||
// Apply the random color to both arms |
||||
//...Here |
||||
}; |
||||
|
||||
// Attach the handleChangeArmColor function to the 'arm-color' button |
||||
armColorButton.addEventListener("click", handleChangeArmColor); |
||||
``` |
||||
|
||||
### Expected result |
||||
|
||||
You can see an example of the expected result [here](https://youtu.be/KjTBuAmUnk4) |
||||
|
||||
**`Prompt Example:`** |
||||
|
||||
- "How do I change the background color of multiple elements in JavaScript?" |
@ -0,0 +1,54 @@
|
||||
## Colorful legs |
||||
|
||||
> JSPowered Mode |
||||
|
||||
### Context |
||||
|
||||
Your robot is cool! But you can make it even more striking! Or at least, make it show off its colorful legs to everyone! |
||||
|
||||
> Follow the instructions, ask your peers if you are stuck and stay motivated because you are close to the goal! |
||||
> Follow every hint you have in the subject! |
||||
> Continue on the code from last exercise, and change the file names! |
||||
|
||||
### Instructions |
||||
|
||||
Just like you turned your robot's arms special in the last exercise, you will do the same now with the legs! |
||||
|
||||
Follow the same |
||||
|
||||
#### Task 1: |
||||
|
||||
Let's put another button in the top right corner of the page with an id `leg-color`, that will change the legs color. Add it in the HTML structure: |
||||
|
||||
```html |
||||
<button id="leg-color">robot's leg colors</button> |
||||
``` |
||||
|
||||
Add the button style in the CSS file: |
||||
|
||||
```css |
||||
#leg-color { |
||||
position: fixed; |
||||
top: 240px; |
||||
right: 30px; |
||||
padding: 10px; |
||||
margin-bottom: 20px; |
||||
z-index: 2; |
||||
} |
||||
``` |
||||
|
||||
#### Task 2: |
||||
|
||||
In the JS file, like in the previous exercise, get the following elements: |
||||
|
||||
- The button with the ID `leg-color`. |
||||
- The left and right leg elements with the IDs `leg-left` and `leg-right`. |
||||
- Apply the random color to both legs by changing their `backgroundColor`. |
||||
|
||||
### Expected result |
||||
|
||||
You can see an example of the expected result [here](https://youtu.be/QQ0GKGuXgBw) |
||||
|
||||
**`Prompt Example:`** |
||||
|
||||
- "What mistakes should I prevent while changing the background color of multiple elements in JavaScript?" |
@ -0,0 +1,114 @@
|
||||
## Declare Everything |
||||
|
||||
> Mindful AI mode |
||||
|
||||
### Context |
||||
|
||||
In this second quest of our adventure, you are going to power up with JavaScript. And in this exercise you'll use variables to control and manage robots in various scenarios. Let's dive in and get started with the basics of variables in JavaScript! |
||||
|
||||
> Don't worry if you are learning many new concepts, just go with the flow! |
||||
|
||||
### AI-Powered Learning Techniques |
||||
|
||||
**Exploratory Questions Technique:** |
||||
|
||||
This type of prompt encourages the AI to provide various explanations and examples, helping you explore different aspects of a concept. |
||||
|
||||
> Find the examples across the subject ;) |
||||
|
||||
### Directions |
||||
|
||||
Values need a way to be identified, that's why we use variables. They add meaning to a value by pointing to it. It's like a **label**, a way to name things. |
||||
|
||||
If we say `20`, it doesn't carry much meaning, _`20` what?_ |
||||
|
||||
Imagine we are talking about robots. You have 20 robot parts. |
||||
|
||||
_Now that's a lot of parts!_ |
||||
|
||||
> We defined _what_ we have (robot parts) and its _value_ (20). |
||||
|
||||
## Concepts |
||||
|
||||
An `identifier` is used to define what it is, using this syntax: |
||||
|
||||
```js |
||||
let robotParts = 20; |
||||
``` |
||||
|
||||
> ๐ฑ Woa, what's all this?! |
||||
|
||||
Let's explain each part: |
||||
|
||||
### Keyword: `let` |
||||
|
||||
Firstly, a keyword, `let`. |
||||
|
||||
A keyword is a special word that JS knows about. It is used to tell the computer to perform a specific action. |
||||
|
||||
`let` indicates that the script is defining a new variable. |
||||
|
||||
### Identifier |
||||
|
||||
After that, it needs a valid identifier. |
||||
|
||||
In this case, it's `robotParts`. We choose something meaningful here. |
||||
|
||||
A few rules to apply to make sure an identifier is valid: |
||||
|
||||
- No space allowed (`robot parts` would be 3 distinct identifiers) |
||||
- Not starting with a number (that's reserved for number values) |
||||
- Not being a reserved keyword (for example, using `let`) |
||||
- No special characters |
||||
|
||||
As such, we use what's called `camelCase`. |
||||
|
||||
Note that in JS, it is a convention to not uppercase the first letter as this is reserved for special declarations. We won't go into details now. |
||||
|
||||
```js |
||||
let robot parts = 20 // invalid because of spaces |
||||
let robotParts = 20 // Just right |
||||
``` |
||||
|
||||
#### **`Prompt example`**: |
||||
|
||||
> "Explain how to use `let` to declare variables in JavaScript." |
||||
|
||||
### Operator: `=` |
||||
|
||||
The special character `=` is an **operator**, like in math, they are used to define specific operations. In this case, `=` defines the `assignment` operation. It means assigning a value to our variable. This is what **links** the chosen `identifier` with our `value`. |
||||
|
||||
#### **`Prompt example`**: |
||||
|
||||
"Why do we use camelCase for variable names in JavaScript?" |
||||
|
||||
### Value |
||||
|
||||
Lastly, a value, like the one you already know: `string`, `number`, and `boolean`.Full example with descriptive comments: |
||||
|
||||
```js |
||||
// โ keyword โ assignation operator |
||||
let comicBookTitle = "Tintin in Tibet"; |
||||
// โ identifier โ the value (here a string) |
||||
``` |
||||
|
||||
#### **`Prompt example`**: |
||||
|
||||
"As a beginner, what types of values can I assign to a variable in JavaScript?" |
||||
|
||||
### Instructions |
||||
|
||||
Declare two variables: |
||||
|
||||
- Use the identifier `seven` with the value being a string of the number 7 |
||||
- Use the identifier `seventySeven` with the value being a string of the number 77 |
||||
|
||||
```js |
||||
let seven = "7"; |
||||
let seventySeven = "77"; |
||||
``` |
||||
|
||||
--- |
||||
|
||||
> "When we first begin fighting for our dreams, we have no experience and make many mistakes. The secret of life, though, is to fall seven times and get up eight times." |
||||
> โ Paulo Coelho |
@ -0,0 +1,87 @@
|
||||
## First Function |
||||
|
||||
> Mindful AI mode |
||||
|
||||
### Context |
||||
|
||||
Your robot will need to start executing custom tasks, and to do that, you'll need to program its `functions`. Functions are like commands that tell robot exactly what to do. |
||||
|
||||
You can create your own functions to give your robot unique abilities and make it more efficient! |
||||
|
||||
### AI-Powered Learning Techniques |
||||
|
||||
**Reflective Practice Technique:** |
||||
This type of prompt encourages you to reflect on the concepts youโve just learned, reinforcing your understanding by applying the concepts in different contexts or scenarios. |
||||
|
||||
Find the examples across the subject ;) |
||||
|
||||
### Concepts |
||||
|
||||
Remember this example of function call ? |
||||
|
||||
```js |
||||
// โ identifier, like variables |
||||
console.log("Hello There !"); // <- function call happening here |
||||
// โ open paren + argument + close paren |
||||
``` |
||||
|
||||
There, we saw how to call and use "built-in" functions. |
||||
|
||||
Here, now, we are going to learn how to declare our owns. This will gives us even more freedom to build our own logic. |
||||
|
||||
### Declaring a function |
||||
|
||||
Here, weโll learn how to declare a function in a `variable`. This gives your robot more freedom to perform custom tasks. |
||||
|
||||
We'll use the `ArrowFunctionExpression` syntax to declare a function: |
||||
|
||||
```js |
||||
// โ normal variable โ beginning of the scope of the function |
||||
let myFirstFunction = () => { |
||||
// โ parens () for arguments and the arrow => for syntax |
||||
}; // <-end of the scope of the function |
||||
``` |
||||
|
||||
### Calling a Function |
||||
|
||||
Once declared, you can call the function using the parentheses `()`: |
||||
|
||||
```js |
||||
myFirstFunction(); // This will call the function, but nothing happens yet |
||||
``` |
||||
|
||||
### Adding Instructions |
||||
|
||||
Very much like an if statement a function has a scope. The scope in between the curly braces `{}` is where the action happens. Let's add something to the scope of our function: |
||||
|
||||
```js |
||||
let myFirstFunction = () => { |
||||
console.log("Robot is now active!"); |
||||
}; |
||||
``` |
||||
|
||||
Now, when you call `myFirstFunction()`, Robot will log a message in the console: |
||||
|
||||
```js |
||||
myFirstFunction(); // Output: "Robot is now active!" |
||||
``` |
||||
|
||||
> We actually declared, then called the function and gave it this single instruction, `console.log('Robot is now active!')`. |
||||
|
||||
#### **`Prompt Example`**: |
||||
|
||||
- "How do you call a function in JavaScript, and what happens if the function contains no instructions?" |
||||
|
||||
#### **`Video Resource`**: |
||||
|
||||
- [Functions in depth.](https://www.youtube.com/watch?v=0lp0d-Uxy4o) |
||||
|
||||
### Instructions |
||||
|
||||
#### Task 1: |
||||
|
||||
You are a robot made by a scientist called Rick and you want to know your purpose. |
||||
|
||||
- Declare a function named `ask` that `log` 'What is my purpose ?' in the console |
||||
- Declare a function named `reply` that `log` 'You pass butter.' in the console |
||||
Then first `call the ask` then `the reply` once, in that order. |
@ -0,0 +1,93 @@
|
||||
## First hello |
||||
|
||||
> JSPowered Mode |
||||
|
||||
### Context |
||||
|
||||
Your robot winked, but you can make it talk too! Or at least, make it say his first hello to the world! |
||||
|
||||
> Follow the instructions, ask your peers if you are stuck and stay motivated because you are close to your goal! |
||||
> Follow every hint you have in the subject! |
||||
> Continue on the code from last exercise, and change the file names! |
||||
|
||||
### Instructions |
||||
|
||||
Now that you know how to make your creation move, what about making it communicate its first words to the world? |
||||
|
||||
After finishing these tasks, you will be able to display and hide `Hello World` in the `torso` of your robot by clicking on a second button. |
||||
|
||||
#### Task 1: |
||||
|
||||
Let's put a second button in the top right corner of the page, that will add some text when clicked. Add it in the HTML structure: |
||||
|
||||
```html |
||||
<button id="speak-button">Click me to speak</button> |
||||
``` |
||||
|
||||
Add the button style in the CSS file: |
||||
|
||||
```css |
||||
button#speak-button { |
||||
top: 100px; |
||||
} |
||||
``` |
||||
|
||||
Also add this class to style the text we will add: |
||||
|
||||
```css |
||||
.words { |
||||
text-align: center; |
||||
font-family: sans-serif; |
||||
} |
||||
``` |
||||
|
||||
#### Task 2: |
||||
|
||||
In the JS file, like in the previous exercise, get the HTML `button` element with id `speak-button` and add an `event listener` on `click event`, triggering a `function` that will: |
||||
|
||||
- Select the torso element with id="torso". |
||||
- Check if a div with the class words already exists inside the torso element. |
||||
- If it exists, remove the existing div. |
||||
- Otherwise: |
||||
- Create a new HTML element of type div. |
||||
- Set its text content to "Hello World". |
||||
- Set its class name to words, as defined in the CSS. |
||||
- Use the append method to add the new div inside the torso element. |
||||
|
||||
### Code Example: |
||||
|
||||
```js |
||||
// Select the button with id 'speak-button' |
||||
|
||||
//...Here |
||||
|
||||
//Your function that gets triggered when clicking the new button |
||||
const handleSpeakClick = (event) => { |
||||
// Select the torso element where the text will be added or removed |
||||
const body = document.querySelector("#torso"); |
||||
|
||||
// Check if a div with the class 'words' already exists inside the torso |
||||
const existingDiv = document.querySelector("#torso .words"); |
||||
|
||||
if (existingDiv) { |
||||
// If the "Hello World" text exists, remove it from the torso |
||||
} else { |
||||
// If the "Hello World" text does not exist, create and append it |
||||
// Create a new div element |
||||
// Add the 'words' class to the div |
||||
// Set the text content to "Hello World!" |
||||
// Append the new div to the torso element |
||||
} |
||||
}; |
||||
|
||||
// Attach the handleSpeakClick function to the 'speak-button' button |
||||
//...Here |
||||
``` |
||||
|
||||
### Expected result |
||||
|
||||
You can see an example of the expected result [here](https://youtu.be/At4BhyzMxzw) |
||||
|
||||
**`Prompt Example:`** |
||||
|
||||
- "How can I add and remove text in an element with a button click in JavaScript?" |
@ -0,0 +1,108 @@
|
||||
## First move |
||||
|
||||
> Brainpower mode |
||||
|
||||
### Context |
||||
|
||||
Glad to see you here! It's impressive how far you've come today, and you are just one step away from seeing a simple yet impressive thing we can do with JavaScript. This will give you a glimpse of how JavaScript works with HTML and CSS to make your robot interesting! By using JavaScript, you will control and interact with your creation, adding dynamic abilities that make it come alive. |
||||
|
||||
So far, you haven't learned much about JavaScript (but you will soon, don't worry!), but we want you to see an example of how powerful JavaScript can be in modifying the robot. |
||||
|
||||
In these instructions, you will execute the steps to change your robot's eyes from open to closed using JavaScript! Does it seem simple? Yes, but you will later make your robot more dynamic by pushing a button to open and close that eye! Of course, that's for when you learn more about JavaScript (Again, a secret for you because you made it until here). |
||||
|
||||
This is more of a puzzle to use your brain to follow hints and make things work, even if it seems complex (it is not!). Isn't that your brain's superpower? |
||||
|
||||
> Follow the instructions, ask your peers if you are stuck and stay motivated because you are close to the Shape Crafting goal! |
||||
> Follow every hint you have in the subject! |
||||
|
||||
### Instructions |
||||
|
||||
- for the JavaScript (JS) files, when you have to link one, it's named like so: `name-of-the-exercise.js` |
||||
|
||||
Still there? Well done! But hold on, here begins the serious part... In order to control your creation, you're going to plug its brain: JavaScript. |
||||
|
||||
First, define this new class in `your CSS file`: |
||||
|
||||
```css |
||||
.eye-closed { |
||||
height: 4px; |
||||
padding: 0 5px; |
||||
border-radius: 10px; |
||||
} |
||||
``` |
||||
|
||||
#### Task 1 |
||||
|
||||
Second, [`Link a JS script`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script) to your HTML file. |
||||
|
||||
#### Task 2 |
||||
|
||||
Then in your Javascript file, you're going to close the left eye of your entity. To do so, you have to target the `eye-left` HTML element by its `id` using the [`getElementById`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById) method. |
||||
|
||||
#### Task 3 |
||||
|
||||
Then, [set the `style`](https://developer.mozilla.org/en-US/docs/Web/API/ElementCSSInlineStyle/style#setting_styles) of your `eye-left` to change its background color to "black". We also need to modify its shape; for that, we are going to add a new class to it. |
||||
|
||||
### Code examples |
||||
|
||||
#### Example 1 |
||||
|
||||
To target the `nose` HTML element by its `id` using getElementById: |
||||
|
||||
In HTML file: |
||||
|
||||
```html |
||||
<!-- HTML --> |
||||
<div id="nose"></div> |
||||
``` |
||||
|
||||
In the JS file: |
||||
|
||||
```js |
||||
const nose = document.getElementById("nose"); |
||||
``` |
||||
|
||||
#### Example 2 |
||||
|
||||
To change the color of the nose to red: |
||||
|
||||
```css |
||||
.nose-red { |
||||
width: 20px; |
||||
height: 20px; |
||||
background-color: red; |
||||
border-radius: 50%; |
||||
} |
||||
``` |
||||
|
||||
```js |
||||
nose.classList.add("nose-red"); |
||||
``` |
||||
|
||||
#### Example 3 |
||||
|
||||
To change the background color of nose to yellow: |
||||
|
||||
```css |
||||
nose.style.backgroundColor = 'yellow' |
||||
``` |
||||
|
||||
### Expected output |
||||
|
||||
> By the way, do you like your new background color chosen earlier? Me too. |
||||
> To personalize your robot even more, don't hesitate to change the inclination of its arms in a direction that reflects the personality you have chosen! |
||||
> I think [adding a rotation](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate) to the `arm class` is a good solution. |
||||
|
||||
This is what you should see in the browser: |
||||
[![personalize-bring-it-to-life-dom-example.png](https://i.postimg.cc/Df5pcWN1/personalize-bring-it-to-life-dom-example.png)](https://postimg.cc/pyhBWdRd) |
||||
|
||||
### Resources |
||||
|
||||
We provide you with some content to get started smoothly, check it out! |
||||
|
||||
- Video [Link a JS script to your HTML file](https://www.youtube.com/watch?v=jMvsQm-p1gM&list=PLHyAJ_GrRtf979iZZ1N3qYMfsPj9PCCrF&index=7) |
||||
- Video [JS variables explained](https://www.youtube.com/watch?v=XNjhAMhyVJo&list=PLDa5D3mQAy7Sj0s4J6R5HT2xsEXkYuYFL&index=3) |
||||
- Video [DOM JS - getElementById](https://www.youtube.com/watch?v=34kAR8yBtDM&list=PLHyAJ_GrRtf979iZZ1N3qYMfsPj9PCCrF&index=8) |
||||
- Video [DOM JS - Set an element's inline style](https://www.youtube.com/watch?v=pxlYKvju1z8&list=PLHyAJ_GrRtf979iZZ1N3qYMfsPj9PCCrF&index=15) |
||||
- Video [DOM JS - classList: add & remove](https://www.youtube.com/watch?v=uQEM-3_4vPA&list=PLHyAJ_GrRtf979iZZ1N3qYMfsPj9PCCrF&index=17) |
||||
- [Memo DOM JS](https://github.com/nan-academy/js-training/blob/gh-pages/examples/dom.js) |
@ -0,0 +1,117 @@
|
||||
## First wink |
||||
|
||||
> JSPowered Mode |
||||
|
||||
### Context |
||||
|
||||
You're making fantastic progress! You've reached a crucial stage in your journey where youโll learn how to make your robot alive using the power you gained, JavaScript basics. |
||||
|
||||
Don't worry if things feel a bit challengingโthat's part of the process! Just remember to take it step by step and never forget what you learned on using Generative AI along with your peers to seek clarifications, and you'll be amazed at how quickly you'll see results. |
||||
|
||||
> Let's use all your power of learning and searching to make your robot alive! |
||||
|
||||
#### Reminder: |
||||
|
||||
- Before you start coding, it's okay to take a moment to think about what you want to do. You can even write out a rough plan or "PseudoCode" to help organize your thoughts. It makes the coding part much easier! |
||||
|
||||
> We can mention thing you do not know; but by this time, you know what to do! Search for it, ask your peers and use clever prompts ;) |
||||
|
||||
- **You need to continue on the HTML, CSS, JS code you submitted for the exercise `first-move`, but with an empty JavaScript file and do not forget to change the name of the linked files to the name of this exercise!** |
||||
|
||||
### Resources |
||||
|
||||
We provide you with some content to get started smoothly, check it out! |
||||
|
||||
- [Video](https://www.youtube.com/watch?v=m34qd7aGMBo&list=PLHyAJ_GrRtf979iZZ1N3qYMfsPj9PCCrF&index=13) on `querySelector` |
||||
- [Video](https://www.youtube.com/watch?v=ydRv338Fl8Y) DOM JS - Add an `event listener` to an element |
||||
- [Video](https://www.youtube.com/watch?v=4O6zSVR0ufw&list=PLHyAJ_GrRtf979iZZ1N3qYMfsPj9PCCrF&index=15) DOM JS - Set an `element's properties` |
||||
- [Video](https://www.youtube.com/watch?v=amEBcoTYw0s&list=PLHyAJ_GrRtf979iZZ1N3qYMfsPj9PCCrF&index=21) DOM JS - `classList`: toggle, replace & contains |
||||
- [Video](https://www.youtube.com/watch?v=pxlYKvju1z8&list=PLHyAJ_GrRtf979iZZ1N3qYMfsPj9PCCrF&index=16) DOM JS - Set an element's `inline style` |
||||
- [Memo DOM JS](https://github.com/nan-academy/js-training/blob/gh-pages/examples/dom.js) |
||||
|
||||
### Instructions |
||||
|
||||
#### Task 1: |
||||
|
||||
Let's put a button on the top right corner of the page, that will toggle (close or open) the left eye when clicked. |
||||
|
||||
Add it in the HTML structure: |
||||
|
||||
```js |
||||
<button>Click to close the left eye</button> |
||||
``` |
||||
|
||||
And add the style in the CSS file: |
||||
|
||||
```css |
||||
button { |
||||
z-index: 1; |
||||
position: fixed; |
||||
top: 30px; |
||||
right: 30px; |
||||
padding: 20px; |
||||
} |
||||
``` |
||||
|
||||
#### Task 2: |
||||
|
||||
Select the button in your JavaScript file that will allow the user to control the robotโs left eye. |
||||
|
||||
```js |
||||
// Select the button element using its ID so we can interact with it in our JavaScript |
||||
|
||||
//Example of selecting a button called myButton |
||||
const myButton = document.querySelector("button"); |
||||
``` |
||||
|
||||
**`Prompt Example:`** |
||||
|
||||
- "How do I use `querySelector` to select an HTML element by its ID?" |
||||
|
||||
#### Task 3: |
||||
|
||||
Write a function that will be triggered when the button is clicked. |
||||
|
||||
This function will make the robot "wink" by toggling the `eye-closed` class on the left eye and change the `button` text based on the current state of the eye. |
||||
|
||||
- It changes the text content of the button: if the eye is open, write "Click to close the left eye", if the eye is closed, write "Click to open the left eye". |
||||
|
||||
- It toggles the class eye-closed in the `classList` of the eye-left HTML element. |
||||
|
||||
It changes the background color of the eye-left: if the eye is open, to "red", if the eye is closed, to "black" |
||||
|
||||
```js |
||||
const button = document.querySelector('button') |
||||
|
||||
const handleClick = (event) => { |
||||
|
||||
// Select the left eye element by its ID |
||||
const myDiv = ... |
||||
|
||||
// Check if the eye is currently closed by looking at its background color |
||||
if (...) { |
||||
// If the eye is closed, open it and update the button text |
||||
|
||||
} else { |
||||
// If the eye is open, close it and update the button text |
||||
} |
||||
// Toggle the 'eye-closed' class on the 'eye-left' div |
||||
}; |
||||
|
||||
// register the event: |
||||
button.addEventListener('click', handleClick) |
||||
// here we ask the button to call our `handleClick` function |
||||
// on the 'click' event, so every time it's clicked |
||||
``` |
||||
|
||||
### Expected result |
||||
|
||||
You can see an example of the expected result [here](https://youtu.be/wuYTorfBViE) |
||||
|
||||
**`Prompt Examples:`** |
||||
|
||||
- "As a beginner, explain to me what is `querySelector` in JavaScript, and how do I use it to select an HTML element by its ID or class?" |
||||
|
||||
- "As a beginner, explain to me how can I change the text content of an `HTML element` using JavaScript?" |
||||
|
||||
- "As a beginner, explain to me how do I use `addEventListener` to make a button respond to a click event in JavaScript?" |
@ -0,0 +1,110 @@
|
||||
## Good Recipe |
||||
|
||||
> Mindful AI mode |
||||
|
||||
### Context |
||||
|
||||
Welcome to this quest! I bet you are hungry after this long way gaining power! |
||||
|
||||
Are you ready to cook? But instead of cooking food, we'll be applying recipes to data through methods! In JavaScript, methods are special functions called from another value, allowing you to perform various operations. |
||||
|
||||
Let's find out more! |
||||
|
||||
### AI-Powered Learning Techniques |
||||
|
||||
**Guided Practice Technique:** |
||||
This type of prompt encourages the AI to guide learners through hands-on practice exercises, providing immediate feedback and helping them build confidence in their skills. |
||||
|
||||
Find the examples across the subject ;) |
||||
|
||||
### Concepts |
||||
|
||||
### Functions and Methods |
||||
|
||||
In JavaScript, functions are like recipes that perform a task. Methods are special functions associated with objects. We are focusing on methods now. |
||||
|
||||
### Example |
||||
|
||||
```js |
||||
console.log("Robot is mixing ingredients"); |
||||
``` |
||||
|
||||
### Multiple Arguments |
||||
|
||||
Functions can take multiple arguments, like adding ingredients to a recipe: |
||||
|
||||
```js |
||||
console.log("flour", 200); // both arguments will appear in your console |
||||
``` |
||||
|
||||
### Methods |
||||
|
||||
Methods are functions called from another value. For example, `toFixed` is a method that formats numbers: |
||||
|
||||
```js |
||||
let num = 10 / 3; |
||||
console.log(num.toFixed(2)); // -> '3.33' |
||||
``` |
||||
|
||||
### String Manipulation with Methods |
||||
|
||||
Using the `.slice` method to cut parts of a string: |
||||
|
||||
```js |
||||
let alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; |
||||
let cutFirst = alphabet.slice(10); // 'KLMNOPQRSTUVWXYZ' |
||||
let cutLast = alphabet.slice(0, -3); // 'ABCDEFGHIJKLMNOPQRSTU' |
||||
let cutFirstLast = alphabet.slice(5, -6); // 'FGHIJKLMNOPQRS |
||||
``` |
||||
|
||||
### Splitting Strings |
||||
|
||||
Splitting a string into an array of words using split: |
||||
|
||||
```js |
||||
let sentence = "Add flour, sugar, and eggs"; |
||||
let words = sentence.split(" "); // ['Add', 'flour,', 'sugar,', 'and', 'eggs'] |
||||
``` |
||||
|
||||
### Splitting text into lines: |
||||
|
||||
```js |
||||
let text = "Add flour\nMix well\nBake at 350ยฐF"; |
||||
let lines = text.split("\n"); // ['Add flour', 'Mix well', 'Bake at 350ยฐF'] |
||||
``` |
||||
|
||||
#### **`Prompt Example`**: |
||||
|
||||
- "Show me step-by-step how to use the `.split` method to break the sentence 'Learning JavaScript is fun' into an array of words." |
||||
|
||||
- "Show me how to use the `.toUpperCase` method to convert the string 'hello' to uppercase." |
||||
|
||||
- "Show me how to use `Math.max` to find the biggest number in an array." |
||||
|
||||
### Instructions |
||||
|
||||
#### Task 1: |
||||
|
||||
You need to find the oldest robot in the kitchen to determine the most experienced helper. |
||||
|
||||
We provide you with three robot objects assigned to their respective variables `martin`, `kevin`, and `stephanie`. Use the `Math.max` function on their `age` properties to find the oldest robot. |
||||
|
||||
Declare an `oldestAge` variable that uses `Math.max` on the `age` properties of `martin`, `kevin`, and `stephanie`. |
||||
|
||||
#### Task 2: |
||||
|
||||
You need to slice some virtual vegetables. Using the `.slice` method and the provided alphabet variable, which is a string of all the characters in the alphabet: |
||||
|
||||
- Declare a `cutFirst` variable that removes the first `10` characters of alphabet, simulating the removal of the first few slices. |
||||
- Declare a `cutLast` variable that removes the last `3` characters of alphabet, simulating the trimming of the last few slices. |
||||
- Declare a `cutFirstLast` variable that removes the first `5` characters and the last 6 characters of alphabet, simulating a precise cut in the middle. |
||||
|
||||
#### Task 3: |
||||
|
||||
You needs to prepare ingredients for a recipe, and part of the preparation involves transforming text. |
||||
|
||||
For this task, you will use the `toUpperCase` and `toLowerCase` methods on the provided variable message. |
||||
|
||||
- Create a `noCaps` variable with the value of message but in lower case to simulate finely chopped ingredients. |
||||
|
||||
- Create an `allCaps` variable with the value of message but in upper case to simulate ingredients being loudly announced. |
@ -0,0 +1,162 @@
|
||||
## I Win Arguments |
||||
|
||||
> Mindful AI mode |
||||
|
||||
### Context |
||||
|
||||
You made it to the last mission in getting your full power, to make your robot alive and fully functional! |
||||
|
||||
The final step involves mastering the use of `arguments` in functions. By learning how to use and manage these `arguments` effectively, you can unlock the full potential of your robot and make it later truly come alive. |
||||
|
||||
Let's find out more! |
||||
|
||||
### AI-Powered Learning Techniques |
||||
|
||||
**Code Chunking Technique:** |
||||
|
||||
This type of prompt encourages you to break down larger pieces of code into smaller, digestible chunks. |
||||
|
||||
Each chunk is explained individually, allowing you to understand the purpose and functionality of each part. |
||||
|
||||
Find the examples across the subject ;) |
||||
|
||||
### Concepts |
||||
|
||||
### One Argument |
||||
|
||||
We mentioned it before with methods, functions can take arguments. They are always in between parenthesis `()`. |
||||
|
||||
Let's use the same examples that we used for function calls: |
||||
|
||||
Remember this example of function call ? |
||||
|
||||
```js |
||||
// โ method |
||||
console.log("Hello There !"); //<- |
||||
// โ The String 'Hello There!' is |
||||
// the argument of console.log() |
||||
``` |
||||
|
||||
We are now going to adapt `myFirstFuntion` so that it takes one argument : `arg1`. |
||||
|
||||
```js |
||||
let myFirstFunction = (arg1) => { |
||||
//<-arg1 is inputed in between the parenthesis |
||||
console.log(arg1); // arg1 can be use inside the scope of the function |
||||
// โ arg1 is "transfered" to be the arg of console.log() |
||||
}; //<-end of the scope of the function |
||||
``` |
||||
|
||||
Now if the function is called, it displays the output of `console.log(arg1)`. |
||||
|
||||
```js |
||||
myFirstFunction("using my first arg"); // "using my first arg" |
||||
``` |
||||
|
||||
But let's say we want to change what the function logs. Now, instead of modifying `myFirstFunction` we just need to modify the `argument` in the `function call`. |
||||
|
||||
```js |
||||
myFirstFunction("another arg"); // "another arg" |
||||
myFirstFunction("and another one"); // "and another one" |
||||
myFirstFunction("and one more"); // "and one more" |
||||
``` |
||||
|
||||
### More Arguments |
||||
|
||||
Weโve seen how to add `one` argument to a function. Now, letโs learn how to add `two (or more)` arguments. |
||||
|
||||
All we need to do to add a second argument `arg2` is to add a comma `,` after `arg1` and then add `arg2`. |
||||
|
||||
```js |
||||
let myFirstFunction = (arg1, arg2) => { |
||||
//<-arg1 and arg2 are inputed in between the parenthesis |
||||
console.log(arg1, arg2); |
||||
// โ arg1 and arg2 are "transfered" to be the args of console.log() |
||||
}; |
||||
// Now we call the function |
||||
myFirstFunction("first arg", "second arg"); |
||||
// "first arg" |
||||
// "second arg" |
||||
``` |
||||
|
||||
For more args, you will need to simply repeat the same process! Comma `,` then the other argument and it goes on. |
||||
|
||||
> Please note that you can name your arguments however you please. Just make sure that you reuse the proper name inside the scope of your function. |
||||
|
||||
### Return value |
||||
|
||||
In addition to accepting arguments, functions can also `return` values. |
||||
|
||||
Return values are the `outputs` that a function provides after completing its task. |
||||
|
||||
We are now going to adapt `myFirstFunction` so that it `returns` a value instead of just `logging it`. |
||||
|
||||
```js |
||||
let myFirstFunction = (arg1) => { |
||||
return arg1; // the function now returns the value of arg1 |
||||
}; |
||||
``` |
||||
|
||||
Now if the function is called, it returns the value of `arg1`: |
||||
|
||||
```js |
||||
let result = myFirstFunction("using my first return"); |
||||
console.log(result); // "using my first return" |
||||
``` |
||||
|
||||
But let's say we want to change what the function `returns`. Now, instead of modifying `myFirstFunction`, we just need to modify `the argument` in `the function call`. |
||||
|
||||
```js |
||||
let anotherResult = myFirstFunction("another return"); |
||||
console.log(anotherResult); // "another return" |
||||
``` |
||||
|
||||
#### **`Prompt Example`**: |
||||
|
||||
- "Can you guide me through creating and using a JavaScript function that takes multiple arguments, starting from a basic function without arguments, then adding single and multiple arguments ?" |
||||
|
||||
### Instructions |
||||
|
||||
#### Task 1: |
||||
|
||||
You are the general's aide responsible for transmitting communications to the other `RoboGuards`. |
||||
|
||||
1- Create the `battleCry` Function: |
||||
|
||||
- This function should take `one argument` and display it in the `console`. |
||||
- The battlefield is vast, so ensure that `the argument is uppercased` before displaying it. |
||||
|
||||
2- Create the `secretOrders` Function: |
||||
|
||||
- Sometimes, communications need to be given quietly. |
||||
|
||||
- This function will do the `same` as `battleCry`, except `it will lowercase` the argument before sending it. |
||||
|
||||
> hint: you remember methods? |
||||
|
||||
#### Task 2: |
||||
|
||||
As the leader of the RoboGuard forces, you're not just preparing for battleโyou're also forming dynamic duos of robots to work together on special missions. |
||||
|
||||
1- Create the `duos` Function: |
||||
|
||||
- This function will take `two arguments`, representing the **names** of **two robots**. |
||||
- It will `log them` together with an **and** and an **exclamation mark**. |
||||
|
||||
> Output's example: "robotOne and robotTwo!" |
||||
|
||||
2- Create the `duosWork` Function: |
||||
|
||||
- This function will take `three arguments`: the **names** of two robots and the **task** they will perform together. |
||||
|
||||
- It will `log them` together in a sentence describing their task. |
||||
|
||||
> Output's example: "robotOne and robotTwo are saying hi! |
||||
|
||||
#### Task 3: |
||||
|
||||
Rick's robot, knows his purpose. (Remember ? 'He passes butter.') |
||||
|
||||
- Define the function `passButter` that returns the string 'The butter'. |
||||
|
||||
** "Your hard work is paying off. The only limit to your impact is your imagination and commitment." โ Tony Robbins** |
@ -0,0 +1,149 @@
|
||||
## Listed |
||||
|
||||
> Mindful AI mode |
||||
|
||||
### Context |
||||
|
||||
Sometimes we don't need a key, we just want a list of things, JS has a special type for that, called an array. |
||||
|
||||
In JavaScript, arrays are essential tools for handling these lists efficiently. |
||||
|
||||
Let's discover them together! |
||||
|
||||
### AI-Powered Learning Techniques |
||||
|
||||
**Example-Based Learning Technique:** |
||||
This type of prompt encourages the AI to provide concrete examples to illustrate concepts, making it easier to understand and apply them. |
||||
|
||||
Find the examples across the subject ;) |
||||
|
||||
### Concepts |
||||
|
||||
### Understanding Arrays |
||||
|
||||
Arrays are special types of objects in JavaScript used to store lists of items. Unlike objects, arrays don't have keys for each element, just a list of values. |
||||
|
||||
**Example of an Array** |
||||
|
||||
Let's see an example of an array: |
||||
|
||||
```js |
||||
let batteryLevels = [ |
||||
80, // <- no keys! |
||||
60, |
||||
90, |
||||
50, |
||||
]; |
||||
|
||||
// or for brevity, we often write them on a single line like so: |
||||
|
||||
let batteryLevels = [80, 60, 90, 50]; |
||||
``` |
||||
|
||||
### Indexes in Arrays |
||||
|
||||
The position of an element in an array is called its index, starting from 0. So, our `batteryLevels` array is roughly equivalent to writing this object: |
||||
|
||||
```js |
||||
let batteryLevelsObject = { |
||||
0: 80, |
||||
1: 60, |
||||
2: 90, |
||||
3: 50, |
||||
}; |
||||
``` |
||||
|
||||
### Accessing Array Values |
||||
|
||||
To access a value in an array, use the index inside square brackets: |
||||
|
||||
```js |
||||
let batteryLevels = [80, 60, 90, 50]; |
||||
console.log(batteryLevels[0]); // -> 80 |
||||
console.log(batteryLevels[3]); // -> 50 |
||||
console.log(batteryLevels[6]); // -> undefined |
||||
``` |
||||
|
||||
### Using the .length Property |
||||
|
||||
Arrays keep track of how many elements they contain using the `.length` property: |
||||
|
||||
```js |
||||
console.log([].length); // -> 0 |
||||
console.log([80].length); // -> 1 |
||||
console.log([80, 60, 90, 50].length); // -> 4 |
||||
``` |
||||
|
||||
### Replacing an Array Value |
||||
|
||||
You can replace an array value by accessing it via its index and assigning a new value: |
||||
|
||||
```js |
||||
let robotTasks = [ |
||||
"Charging", |
||||
"Cleaning", |
||||
"Maintenance", |
||||
"Patrolling", |
||||
"Greeting", |
||||
]; |
||||
|
||||
// Let's say I want to change 'Charging' to 'Upgrading' |
||||
robotTasks[0] = "Upgrading"; |
||||
|
||||
console.log(robotTasks); |
||||
``` |
||||
|
||||
Now, the array looks like this: |
||||
|
||||
```js |
||||
["Upgrading", "Cleaning", "Maintenance", "Patrolling", "Greeting"]; |
||||
``` |
||||
|
||||
#### **`Prompt Example`**: |
||||
|
||||
- "How does accessing an array element differ from accessing an object property?" |
||||
|
||||
- "Can you think of a scenario where using an array to store values would be more beneficial than using separate variables?" |
||||
|
||||
### Instructions |
||||
|
||||
#### Task 1: |
||||
|
||||
You must declare a variable `components` that contains 4 strings, one for each robot component. |
||||
|
||||
#### Task 2: |
||||
|
||||
We provide you a variable `robotParts` that contains some elements. You will have to access them and assign their values to variables: |
||||
|
||||
- A variable `firstPart` for the first element of the `robotParts` list |
||||
- A variable `lastPart` for the last element of the `robotParts` list |
||||
- A variable `comboParts` as an array of 2 elements, the last and the first element of the `robotParts` list, in that order. |
||||
Example: if `robotParts` is `[1, 2, 3]` |
||||
|
||||
-`firstPart` would be `1` |
||||
|
||||
-`lastPart` would be `3` |
||||
|
||||
-`comboParts` would be `[3, 1]` |
||||
|
||||
#### Task 3: |
||||
|
||||
You must replace the third element of the provided `replaceComponents` array with the string 'enhanced'. |
||||
|
||||
Example: |
||||
|
||||
```js |
||||
let replaceComponents = ["motor", "sensor", "battery"]; |
||||
// expect -> ['motor', 'sensor', 'enhanced'] |
||||
``` |
||||
|
||||
You must swap the first and second element of the provided `swapComponents` array. |
||||
|
||||
Example: |
||||
|
||||
```js |
||||
let swapComponents = ["motor", "sensor", "battery"]; |
||||
// expect -> ['sensor', 'motor', 'battery'] (last element is untouched) |
||||
``` |
||||
|
||||
> "Programming is like building a robot. You start with the basics, but the fun really begins when you start swapping parts and adding enhancements!" |
@ -0,0 +1,118 @@
|
||||
## Objects Around |
||||
|
||||
> Mindful AI mode |
||||
|
||||
### Context |
||||
|
||||
Think about all the objects around you: like your book or robot friend. Each of these objects has different properties that describe it. For example, a robot can have a type, weight, and operational status. In JavaScript, we use objects to group these related properties together, making it easy to manage and access this information. |
||||
|
||||
### AI-Powered Learning Techniques |
||||
|
||||
**Visualization Technique:** |
||||
This type of prompt encourages the AI to explain a concept using diagrams or visual representations to illustrate concepts. |
||||
|
||||
Find the examples across the subject ;) |
||||
|
||||
### Concepts |
||||
|
||||
### JavaScript Objects |
||||
|
||||
Objects in JavaScript are fundamental data structures used to group related values together. They are like a bag of values. |
||||
|
||||
### Example |
||||
|
||||
First, let's look at different types of variables: |
||||
|
||||
```js |
||||
let type = "Talkative"; |
||||
let weight = 120.5; |
||||
let isOperational = true; |
||||
``` |
||||
|
||||
Now, we can group them into an object. Objects are values too, so let's assign one to a robot variable: |
||||
|
||||
```js |
||||
let robot = { |
||||
type: "Talkative", |
||||
weight: 120.5, |
||||
isOperational: true, |
||||
}; |
||||
console.log(robot); // This will display the object 'robot' |
||||
``` |
||||
|
||||
Here, the robot variable is declared, and its value type is an object. |
||||
|
||||
### Object Literal Syntax: |
||||
|
||||
Objects are defined using curly brackets {}. |
||||
|
||||
```js |
||||
let emptyRobot = {}; // an empty object |
||||
``` |
||||
|
||||
### Properties |
||||
|
||||
Objects consist of properties, each having a key and a value: |
||||
|
||||
```js |
||||
let robot = { |
||||
type: "Talkative", // 'type' is the key, 'Talkative' is the value |
||||
weight: 120.5, |
||||
isOperational: true, |
||||
}; |
||||
``` |
||||
|
||||
Each property is separated by a comma ",". It's good practice to add a trailing comma to every property, though it's not required for the last one. |
||||
|
||||
### Accessing Values |
||||
|
||||
To access values in an object, use the dot notation. For example: |
||||
|
||||
```js |
||||
let robot = { |
||||
type: "Talkative", |
||||
weight: 120.5, |
||||
isOperational: true, |
||||
}; |
||||
|
||||
console.log(robot); // Logs the whole 'robot' object |
||||
console.log(robot.weight); // Logs the weight of the robot (120.5) |
||||
``` |
||||
|
||||
You can use the property values just like any other values: |
||||
|
||||
```js |
||||
let efficiency = 1.15; // Efficiency factor |
||||
let robot = { |
||||
type: "Talkative", |
||||
weight: 120.5, |
||||
isOperational: true, |
||||
}; |
||||
|
||||
const adjustedWeight = robot.weight * efficiency; |
||||
console.log(adjustedWeight); // Logs the adjusted weight |
||||
``` |
||||
|
||||
#### **`Prompt Example`**: |
||||
|
||||
- Can you help me visualize a JavaScript object with the following properties: `name`, `age`, `hasEnergy``? |
||||
|
||||
### Instructions |
||||
|
||||
#### Task 1: |
||||
|
||||
Let's declare a variable `myRobot` which has an object as its value with 3 properties. |
||||
|
||||
1. A `name` property of `myRobot`'s name as a String |
||||
2. An `age` property of `myRobot`'s age as a Number |
||||
3. A `hasEnergy` property as a Boolean indicating if `myRobot` has dangerous features |
||||
|
||||
#### Task 2: |
||||
|
||||
We will provide a `robot` variable of type object just like the one you did in the previous task. |
||||
|
||||
Your job will be to decompose each property into its own variable: |
||||
|
||||
- Define a `name` variable with the value of the `name` property of the `robot` variable. |
||||
- Same for `age`. |
||||
- And same for `hasEnergy`. |
@ -0,0 +1,139 @@
|
||||
## Only If |
||||
|
||||
> Mindful AI mode |
||||
|
||||
### Context |
||||
|
||||
You are close to getting the ultimate power! Are you ready to command your robot using conditions? In JavaScript, conditions allow you to control what your robots do based on different situations. |
||||
|
||||
Let's have some fun with it! |
||||
|
||||
### AI-Powered Learning Techniques |
||||
|
||||
**Interactive Learning Technique:** |
||||
This type of prompt engages you in active problem-solving by providing challenges or tasks that require applying concepts. This can work to compare your results with your peers! |
||||
|
||||
Find the examples across the subject ;) |
||||
|
||||
### Concepts |
||||
|
||||
### Conditions in JavaScript |
||||
|
||||
Conditions in JavaScript are like decision points, they allow you to execute different actions based on whether a condition is true or false. |
||||
|
||||
```js |
||||
if (condition) { |
||||
// Code to execute if the condition is true |
||||
} else { |
||||
// Code to execute if the condition is false |
||||
} |
||||
``` |
||||
|
||||
For example: |
||||
|
||||
```js |
||||
let batteryLevel = 75; |
||||
|
||||
if (batteryLevel > 50) { |
||||
console.log("Robot is ready to patrol!"); |
||||
} else { |
||||
console.log("Robot needs to recharge."); |
||||
} |
||||
``` |
||||
|
||||
### Truthy and Falsy |
||||
|
||||
In JavaScript, all the values are either `truthy` or `falsy`. Truthy values validate conditions, while falsy values do not. |
||||
|
||||
#### Falsy Values: |
||||
|
||||
- `undefined` and `null` |
||||
- Numbers: `0` and `NaN` |
||||
- Empty string: `''` |
||||
- Boolean: `false` |
||||
|
||||
**All other values are `truthy`!** |
||||
|
||||
### Logical Operators |
||||
|
||||
### AND Operator (&&) |
||||
|
||||
The AND operator groups conditions: |
||||
|
||||
```js |
||||
// Ex: let robot = { status: 'active', battery: 75, name: 'RoboGuard' }; |
||||
|
||||
if (robot.status === "active" && robot.battery > 50) { |
||||
console.log("Robot" + robot.name + "is active and has sufficient battery."); |
||||
} |
||||
|
||||
//Output : Robot RoboGuard is active and has sufficient battery. |
||||
``` |
||||
|
||||
### OR Operator (||) |
||||
|
||||
The OR operator groups conditions: |
||||
|
||||
```js |
||||
if (robot.type === "security" || robot.type === "assistant") { |
||||
console.log(robot.name + "is available for tasks."); |
||||
} |
||||
``` |
||||
|
||||
### `else if` Keyword |
||||
|
||||
Chain conditions using else if: |
||||
|
||||
```js |
||||
if (temperature < 8) { |
||||
console.log("Very cold!"); |
||||
} else if (temperature < 16) { |
||||
console.log("Still too cold..."); |
||||
} else if (temperature < 24) { |
||||
console.log("Getting warmer"); |
||||
} else if (temperature < 32) { |
||||
console.log("Nice :)"); |
||||
} else { |
||||
console.log("Too hot!!!"); |
||||
} |
||||
``` |
||||
|
||||
#### **`Prompt Example`**: |
||||
|
||||
- "Give me an easy coding challenge involving conditions in JavaScript, and provide feedback on my solution." |
||||
|
||||
### Instructions |
||||
|
||||
#### Task 1: |
||||
|
||||
Your Robot must always seek the truth. |
||||
|
||||
- Check if the value of the provided variable `truth` is truthy, log '`The truth was spoken.`' |
||||
- Otherwise, log '`Lies !!!!`' because the value of the provided variable truth is falsy. |
||||
|
||||
#### Task 2: |
||||
|
||||
Your `RoboGuard's traveling company` has a special promotion for robot members aged between 18 and 25. Write the if condition that will check if the robot user can benefit from the promotion: |
||||
|
||||
- `user.age` must be at least `18`. |
||||
- `user.age` must be less than or equal to `25`. |
||||
- `user.activeMembership` must be `true`. |
||||
|
||||
If `all` of these conditions are `true`, log the message '`You can benefit from our special promotion`'. |
||||
|
||||
> Hint : use AND Operator in your condition! |
||||
|
||||
#### Task 3: |
||||
|
||||
Your RoboGuard is selling plane tickets, each costing `9.99$`. The RoboGuard must confirm that the customer robot has the means to buy this ticket. |
||||
|
||||
The customer robot may have enough cash `or` a voucher. |
||||
|
||||
Check if the provided variable customer can afford the ticket: |
||||
|
||||
If the customer has enough `cash` (`customer.cash` property) |
||||
`or` If the customer has a `voucher` (`customer.hasVoucher` property is true) |
||||
|
||||
If so, `increment` the provided variable `ticketSold` value by `1`. |
||||
|
||||
> Hint : use OR Operator in your condition! |
@ -0,0 +1,93 @@
|
||||
## Play with variables |
||||
|
||||
> Mindful AI mode |
||||
|
||||
### Context |
||||
|
||||
Remember that if things get a little hectic at times, take the time to get closer to your peers so that you can think, share and move forward together. |
||||
|
||||
> Keep Going! |
||||
|
||||
### AI-Powered Learning Techniques |
||||
|
||||
**Clarification Technique:** |
||||
|
||||
This type of prompt encourages the AI to explain a concept in detail, helping you gain a deeper understanding. |
||||
|
||||
> Find the examples across the subject ;) |
||||
|
||||
## Concepts |
||||
|
||||
### Escape characters |
||||
|
||||
**Quote delimiters** can be one of the tricky things to deal with. |
||||
|
||||
Since they are used for delimiting text, they need a trick to include them in |
||||
our text. |
||||
|
||||
For example, we want a `'` _(single quote)_ in our text, but use them as |
||||
delimiters: |
||||
|
||||
```js |
||||
console.log('I keep trying , I can't give up! ') |
||||
// too bad a single quote, ruined the quote, get it ? |
||||
``` |
||||
|
||||
The `\` _(backslash)_ is used for that: |
||||
|
||||
Every time there is an _extra special_ character into your string, putting a `\` |
||||
in front of it will **escape** it and doing so will let JS understand you meant |
||||
the **literal** following character and not the delimiter, _or whatever else |
||||
the character normally means for a string_ |
||||
|
||||
```js |
||||
console.log("I keep trying , I can't give up! "); |
||||
|
||||
// Output: I keep trying, I can't give up! |
||||
``` |
||||
|
||||
#### **`Prompt Example`**: |
||||
|
||||
"As a beginner, how do I include special characters in a string in JavaScript? Give me simple examples too." |
||||
|
||||
### Assign re-assign |
||||
|
||||
Remember the `let` keyword is used to declare new variables. |
||||
|
||||
> Note that we can't have multiple variables with the same identifier otherwise JS wouldn't know which one is which. |
||||
|
||||
If you redeclare a variable, it will crash! |
||||
|
||||
But it is still possible to use the `=` (assignment operator) to change its value! |
||||
|
||||
> Note that sometimes you may find variable declared with `const`. This means that the assignation is constant and can never be re-assigned! |
||||
|
||||
> It is used to protect your code against errors, but you can always use `let` in its place.. |
||||
|
||||
> Also you may find online old code using var. We are trying to get rid of `var`s since 2015. It's ancient syntax and it was pretty problematic. Never use it! If you see code using it, try to find a more recent example. That one is outdated. |
||||
|
||||
#### **`Prompt Example`**: |
||||
|
||||
- "As a beginner, what is the difference between let and `const` in JavaScript?" |
||||
- "As a beginner, how do I reassign a value to an already declared variable in JavaScript?" |
||||
|
||||
### Instructions |
||||
|
||||
#### Task 1: |
||||
|
||||
- Create a `escapeFromDelimiters` variable that includes all 3 quotes _(`` ` ``, `"` and |
||||
`'`)_. |
||||
|
||||
- Create a `escapeTheEscape` variable that includes a backslash _(`\`)_. |
||||
|
||||
#### Task 2: |
||||
|
||||
- The variable `power` has been declared and will be used during the tests. |
||||
|
||||
- You must try to re-assign the power variable to the string value `levelMax`. But without re-declaring it! |
||||
|
||||
--- |
||||
|
||||
> โHow did I escape? With difficulty. How did I plan this moment? With |
||||
> pleasure.โ \ |
||||
> โ Alexandre Dumas, The Count of Monte Cristo |
@ -0,0 +1,421 @@
|
||||
## Robots Harmony |
||||
|
||||
> AI Synergy Mode |
||||
|
||||
## Context |
||||
|
||||
Welcome to your final milestone! After each of you has brought a robot to friend to life, it's time to reunite them together. |
||||
|
||||
Now, all those incredible robots need to be displayed in perfect harmony in our interactive and visually stunning Robots `Gallery`. |
||||
|
||||
As a team, your task is to combine your individual creations into a cohesive display. |
||||
|
||||
This gallery won't just be functional, it will be a fun and visually appealing experience that highlights the creativity and collaboration behind your robots. |
||||
|
||||
> You'll be working on this mission as a team, so effective communication and mutual support are key to bringing your robots together. |
||||
|
||||
> Separate tasks equally, it will make the results better! |
||||
|
||||
> Remember what you learned in asking AI for the precise explanation of concepts, while your team apply those concepts and do the actual fun work! |
||||
|
||||
Go ahead, and let the world see the amazing robots you've created together! |
||||
|
||||
## Setups: |
||||
|
||||
**1- Code Editor:** |
||||
|
||||
First , remember that you will not be using the platform's code editor. Instead, you can use this online [tool](https://jsfiddle.net/) to create and modify your code. |
||||
|
||||
> Feel free to play with the settings and familiarize yourself with the collaborative environment! |
||||
|
||||
> PS: Click on Run to see the result of your code! |
||||
|
||||
**2- How to submit your code:** |
||||
|
||||
Your project must be handed in by the group captain before the time runs out. This is done by publishing the code on the platform. |
||||
|
||||
To do so, go to **gitea** by clicking on the logo at the top right of your platform dashboard. (on the captain's account) |
||||
[![Capture-d-e-cran-2024-08-29-a-19-51-15.png](https://i.postimg.cc/zBRM6BMv/Capture-d-e-cran-2024-08-29-a-19-51-15.png)](https://postimg.cc/N9BprgQv) |
||||
|
||||
Sign in if you are not already logged in. |
||||
|
||||
You must create a repository to submit your work. |
||||
[![Capture-d-e-cran-2024-08-29-a-19-57-32.png](https://i.postimg.cc/59Bt8f3q/Capture-d-e-cran-2024-08-29-a-19-57-32.png)](https://postimg.cc/vDmMsFCc) |
||||
|
||||
Name it **robots-harmony** and check the box that says **Initialize Repository (Adds .gitignore, License and README).** |
||||
|
||||
You can now create all your project files to this repository, using the button New file and finalize this step by clicking Commit changes |
||||
[![Capture-d-e-cran-2024-08-29-a-20-00-08.png](https://i.postimg.cc/G2kqcB15/Capture-d-e-cran-2024-08-29-a-20-00-08.png)](https://postimg.cc/vgZWhZTr) |
||||
|
||||
**3- Expected files:** |
||||
|
||||
You need to submit the following files: |
||||
|
||||
- `robots-harmony.html` |
||||
- `robots-harmony.css` |
||||
- `robots-harmony.js` |
||||
|
||||
## Instructions |
||||
|
||||
Theses tasks are representing the mandatory part for this raid to be passed successfully. Bonus part is optional but highly encouraged for more fun! |
||||
|
||||
### Task 1: Set Up the Gallery Structure |
||||
|
||||
#### 1- Create a New HTML File: |
||||
|
||||
Inside your HTML file, set up the basic structure of the HTML document with a `<head>` and `<body>` inside an `<html>` tag. |
||||
|
||||
#### 2- Give a gallery title: |
||||
|
||||
- Inside your `<body>` , create an `<h1>` tag inside a `<div>` with an `id` of `title`. Then put the name of your gallery inside it ! |
||||
|
||||
```HTML |
||||
<div id="title"> |
||||
<h1>your favorite gallery name</h1> |
||||
</div> |
||||
``` |
||||
|
||||
#### 3- Put your robots inside the gallery: |
||||
|
||||
- Under the `title` div, create a div element with the `id` `gallery`. |
||||
|
||||
- This div will serve as the container for all the robot portraits. |
||||
|
||||
```html |
||||
<div id="gallery"></div> |
||||
``` |
||||
|
||||
- Each team member should copy their robot's HTML structure (the one you provided in the `first-move.html` exercise between the `<section>` `</section>` code) and paste it inside this `gallery` div. |
||||
|
||||
- Ensure each robot is placed inside its own div with the class `name-robot`, do not forget to change the `name` to be your name in the team, for example: |
||||
|
||||
```html |
||||
<div class="john-robot"> |
||||
<!-- Paste your robot's HTML structure here (face, upper-body, lowe-body)--> |
||||
</div> |
||||
<div class="sarah-robot"> |
||||
<!-- Paste your robot's HTML structure here (face, upper-body, lowe-body) --> |
||||
</div> |
||||
<div class="bob-robot"> |
||||
<!-- Paste your robot's HTML structure here (face, upper-body, lowe-body) --> |
||||
</div> |
||||
``` |
||||
|
||||
#### 4- Add Robot Information: |
||||
|
||||
Under each robot's `</section>` (that you copied from your robot's code in `first-move.html`), add an `<h3>` element for the robot's name and a `<p>` element for a short description of its power. |
||||
|
||||
```html |
||||
<h3>Your robot's name</h3> |
||||
<p>Your robot's description</p> |
||||
``` |
||||
|
||||
### Task 2: Style the Gallery |
||||
|
||||
#### 1- Update the CSS File: |
||||
|
||||
- In your HTML file, link your CSS file by pasting the following code in between the `<head></head>` tags: |
||||
|
||||
```html |
||||
<link rel="stylesheet" href="robots-harmony.css" /> |
||||
``` |
||||
|
||||
- In your CSS file, add these styles: |
||||
|
||||
```css |
||||
* { |
||||
margin: 0; |
||||
box-sizing: border-box; |
||||
opacity: 0.85; |
||||
} |
||||
|
||||
body { |
||||
height: 100vh; |
||||
} |
||||
|
||||
section { |
||||
padding: 20px; |
||||
width: 100%; |
||||
height: auto; |
||||
display: flex; |
||||
justify-content: center; |
||||
} |
||||
|
||||
div, |
||||
p { |
||||
border: solid 1px black; |
||||
padding: 10px; |
||||
margin: 0; |
||||
border-radius: 30px; |
||||
} |
||||
|
||||
#face { |
||||
align-items: center; |
||||
margin-bottom: 20px; |
||||
} |
||||
|
||||
#eyes { |
||||
display: flex; |
||||
background-color: yellow; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
border-radius: 50px; |
||||
width: 200px; |
||||
} |
||||
|
||||
#torso { |
||||
width: 150px; |
||||
height: 90%; |
||||
background-color: violet; |
||||
} |
||||
|
||||
.eye { |
||||
width: 60px; |
||||
height: 60px; |
||||
background-color: red; |
||||
border-radius: 50%; |
||||
} |
||||
|
||||
.arm { |
||||
background-color: aquamarine; |
||||
width: 50px; |
||||
height: 100px; |
||||
margin: 20px; |
||||
} |
||||
|
||||
.leg { |
||||
background-color: dodgerblue; |
||||
width: 50px; |
||||
height: 100px; |
||||
margin: 20px; |
||||
} |
||||
|
||||
.body-member { |
||||
width: 50px; |
||||
margin: 30px; |
||||
} |
||||
|
||||
h3 { |
||||
margin-bottom: 10px; |
||||
} |
||||
|
||||
#title { |
||||
text-align: center; |
||||
margin: 1rem; |
||||
background-color: #383086; |
||||
color: rgb(158, 235, 223); |
||||
} |
||||
``` |
||||
|
||||
> Trust the process! |
||||
|
||||
- Then add this gallery style block, and change the `background-color` of it based on your team's favorite color: |
||||
|
||||
```css |
||||
#gallery { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
justify-content: center; |
||||
gap: 100px; |
||||
padding: 100px; |
||||
/* Change this color to reflect the color of your gallery */ |
||||
background-color: #383086; |
||||
} |
||||
``` |
||||
|
||||
- Add the following block of style to all your class's of `name-robot`. To do so, we follow the rule: |
||||
|
||||
```css |
||||
.class-one, |
||||
.class-two, |
||||
.class-three { |
||||
/* block of style */ |
||||
} |
||||
``` |
||||
|
||||
- Name it with your `name-robot` for each member of the team, and put inside the block the following styles: |
||||
|
||||
```css |
||||
{ |
||||
border: 2px solid #333; |
||||
padding: 20px; |
||||
text-align: center; |
||||
background-color: #fff; |
||||
border-radius: 15px; |
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
||||
transition: transform 0.3s, box-shadow 0.3s; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: space-between; |
||||
min-height: 400px; |
||||
} |
||||
``` |
||||
|
||||
#### 2- Add Animations: |
||||
|
||||
- Add a subtle `hover` animation to the robot portraits to make the gallery more dynamic and engaging. |
||||
|
||||
```css |
||||
.class-one:hover, |
||||
.class-two:hover, |
||||
.class-three:hover { |
||||
transform: scale(1.05); |
||||
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15); |
||||
} |
||||
``` |
||||
|
||||
> Experiment by changing the colors of the box-shadow and the scale value! Be creative. |
||||
|
||||
- In your `#gallery` CSS rule, add some animated gradient color to the background! You can achieve it by combining CSS properties: `background`, `background-size`, `animation`, `box-shadow`. |
||||
|
||||
> Hint : Do not forget to replace the background property with the new value bellow! |
||||
|
||||
_For Example:_ |
||||
|
||||
```css |
||||
background: linear-gradient( |
||||
45deg, |
||||
/* Starting angle of the gradient */ red, |
||||
/* First color in the gradient */ blue, |
||||
/* Second color in the gradient */ green |
||||
); /* Optional third color in the gradient */ |
||||
background-size: 300% 300%; /* Increases the background size for smooth animation or effects */ |
||||
animation: gradientBackground 2s ease infinite; /* Animates the background to create a dynamic effect. */ |
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* Adds a shadow around the element. Adjust the offsets, blur radius, and opacity as needed */ |
||||
``` |
||||
|
||||
> You saw no change? well we did not specify yet what to do with all those colors, angles and timing yet! |
||||
|
||||
- Let's make it more exciting, by actually making the colors move! We can do that with `keyframes`! Under the `#gallery` css rule, put the `keyframes`` block and see the magic ! |
||||
|
||||
_For Example:_ |
||||
|
||||
```css |
||||
@keyframes gradientBackground { |
||||
0% { |
||||
background-position: 0% 50%; |
||||
} |
||||
50% { |
||||
background-position: 100% 50%; |
||||
} |
||||
100% { |
||||
background-position: 0% 50%; |
||||
} |
||||
} |
||||
``` |
||||
|
||||
> Play with the values and colors to get the best effect for your gallery! |
||||
|
||||
**`Prompt Example:`** |
||||
|
||||
- "How do I create a smooth gradient background with multiple colors in CSS?" |
||||
|
||||
- "Explain to me as a beginner these CSS properties: `background`, `background-size`, `animation`, `box-shadow`." |
||||
|
||||
### Task 3: Add Interactivity with JavaScript: |
||||
|
||||
#### 1- Add Color Change on Key Press: |
||||
|
||||
Inside your JavaScript file, write functions that change the colors of different parts of your robots when specific keys are pressed. |
||||
|
||||
Follow the following steps: |
||||
|
||||
- **Function to Change Arm Colors**: |
||||
|
||||
- Create a function named `changeArmColor`. |
||||
- This function should accept a parameter `robotClass` to identify which robot to modify. |
||||
- Inside the function, generate a random color using JavaScript, to both `left` and `right` arms. |
||||
|
||||
```js |
||||
const randomColor = `#${Math.floor(Math.random() * 16777215).toString(16)}`; |
||||
``` |
||||
|
||||
- Use `document.querySelector` to select the `left` and `right` arm elements of the robot. |
||||
- Apply the random color to both arm elements using `style.backgroundColor`. |
||||
- Here is an example, do the same for right arm: |
||||
|
||||
```js |
||||
const randomColor = `#${Math.floor(Math.random() * 16777215).toString(16)}`; |
||||
|
||||
document.querySelector(`.${robotClass} #arm-left`).style.backgroundColor = |
||||
randomColor; |
||||
|
||||
//do the same to right arm |
||||
``` |
||||
|
||||
- **Function to Change Legs Colors**: |
||||
|
||||
- Create a function named `changeLegColor`. |
||||
- Follow the same steps as the `changeArmColor` function but target the `legs`. |
||||
|
||||
- **Function to Change Eye Colors**: |
||||
|
||||
- Create a function named `changeEyeColor`. |
||||
- Follow the same steps as the `changeArmColor` function but target the `eye`. |
||||
|
||||
- **Function to Change Face Colors**: |
||||
|
||||
- Create a function named `changeFaceColor`. |
||||
- Follow the same steps as the `changeArmColor` function but target the `eyes` `id`. (Yes, pay attention, the `id` that changes the face color is called `eyes`!) |
||||
|
||||
#### 3- Adding Event Listeners for Keyboard Input: |
||||
|
||||
Next, you need to detect when specific keys are pressed and trigger the corresponding function. |
||||
|
||||
- Use `document.addEventListener` to listen for `keydown` events. |
||||
- Inside the event listener, use multiple `if` statements to check which `key` was `pressed`. |
||||
- Depending on the `key` pressed, call the appropriate `function` and pass the `robot's class` as an `argument`. |
||||
|
||||
_Code example:_ |
||||
|
||||
```js |
||||
document.addEventListener("keydown", function (event) { |
||||
if (event.key === "1") { |
||||
changeArmColor("john-robot"); |
||||
} |
||||
if (event.key === "2") { |
||||
changeLegColor("john-robot"); |
||||
} |
||||
if (event.key === "Q" || event.key === "q") { |
||||
changeEyeColor("john-robot"); |
||||
} |
||||
if (event.key === "A" || event.key === "a") { |
||||
changeFaceColor("john-robot"); |
||||
} |
||||
|
||||
// Add similar conditions for other robots choosing what keys will change the colors! |
||||
|
||||
//...Here |
||||
}); |
||||
``` |
||||
|
||||
- You should decide with your team mates the keys that will trigger each robot of yours! |
||||
|
||||
**`Prompt Example:`** |
||||
|
||||
- "What is `event.key` in JavaScript and how can it be used to detect keyboard inputs?" |
||||
- "How can I use `document.querySelector` to select multiple elements in JavaScript?" |
||||
|
||||
#### 4- Task 5: Final Touches: |
||||
|
||||
- Ensure that all robots are displayed correctly in the gallery. |
||||
|
||||
- Make sure all files (robots-harmony.html, robots-harmony.css, robots-harmony.js) are in the same folder submitted to your `Gitea`. |
||||
|
||||
- Double-check the code to ensure everything is clean and well-organized. |
||||
|
||||
### Expected Output |
||||
|
||||
Your project needs to check all the previous tasks, it will look something close to (and maybe better than) [this](https://youtu.be/pWD0tbyTyiI). |
||||
|
||||
### Bonus part |
||||
|
||||
If you would like to make your project even more creative, you can add more features to your `gallery` on top of the mandatory ones! |
||||
|
||||
It could be `music` to the `background`, `pop-out` information window or anything that makes your project `different`! |
||||
|
||||
> Remember to ensure that the mandatory part is working perfectly before adding more effects. |
||||
|
||||
Look at all of youโyou've made it to this point, working on uniting all your robot friends after bringing them to life. Now in this final step (or maybe the beginning), use your collaboration skills as much as you can! |
||||
|
||||
**"Alone, we can do so little; together, we can do so much." โ Helen Keller** |
@ -0,0 +1,55 @@
|
||||
#### General |
||||
|
||||
##### Check the Repository Content: |
||||
|
||||
Files that must be inside the repository: |
||||
|
||||
- robots-harmony.html |
||||
- robots-harmony.css |
||||
- robots-harmony.js |
||||
|
||||
###### Are the required files present in the repository? |
||||
|
||||
#### HTML Structure |
||||
|
||||
###### Verify that the HTML file contains a `<head>`, `<body>`, and `<html>` tag. |
||||
|
||||
###### Check if the `robots-harmony.html` file includes a `<div>` with the ID gallery. |
||||
|
||||
###### Verify that each robot is placed inside its own div with a class of `name-robot` (The name is the team member's name). |
||||
|
||||
###### Ensure that each robot's section has an `<h3>` for the robotโs name and a `<p>` for the robotโs description. |
||||
|
||||
###### Is the HTML structure properly set up according to the instructions? |
||||
|
||||
###### Does each robot have its unique div with appropriate classes and tags? |
||||
|
||||
#### CSS Styling: |
||||
|
||||
###### Verify that the `robots-harmony.css` file includes the required global styles, such as `*`, `body`, `section`, and others. |
||||
|
||||
###### Ensure that the `#gallery` ID has been styled with the required properties, including a customized `background-color`. |
||||
|
||||
###### Confirm that each `name-robot` class has been styled using the block provided in the instructions. |
||||
|
||||
###### Verify that a `hover animation` is applied to each robot's class. |
||||
|
||||
###### Verify that a `background` animation is applied. |
||||
|
||||
#### JavaScript Functionality |
||||
|
||||
###### Verify that `robots-harmony.js` is correctly linked to the HTML file. |
||||
|
||||
###### Check if the functions `changeArmColor`, `changeLegColor`, `changeEyeColor`, and `changeFaceColor` are implemented correctly. |
||||
|
||||
###### Ensure that the event listeners are set up to listen for `keydown` events and trigger the correct functions. |
||||
|
||||
###### Are the event listeners working as expected when keys are pressed? |
||||
|
||||
#### Functionality and Design |
||||
|
||||
###### Test the website to ensure that all robots are displayed correctly in the gallery. |
||||
|
||||
###### Verify that all mandatory interactive features (color changes on `keydown`, hover and background effects) function as intended. |
||||
|
||||
##### Bonus: If the team implemented further functionalities, ask for a quick presentation of what they added on their submission. |
@ -0,0 +1,62 @@
|
||||
## Star Forge |
||||
|
||||
> Mindful AI mode |
||||
|
||||
Just as the Star Forge is a legendary source of power and innovation in the Star Wars universe, Artificial Intelligence tools are the cutting-edge instruments for modern learners. Imagine harnessing AI in your learning journey, forging new paths of understanding and creating knowledge with precision. |
||||
|
||||
> Let's discover together the new subject section you will find from now on in the next subjects: |
||||
|
||||
### AI-Powered Learning Techniques |
||||
|
||||
As you dive into this quest, using AI tools can significantly boost your learning. |
||||
|
||||
A key skill is mastering how to `Speak AI`, which means knowing how to ask AI the right questions to get the answers you need while learning. |
||||
|
||||
You must understand these few easy concepts first: |
||||
|
||||
> **A prompt** is a question or instruction given to a generative AI to produce a specific response or action, helping users learn or achieve a desired outcome. |
||||
|
||||
> **Generative AI** is an exciting tool that helps you learn by generating new content, like texts and images, based on existing examples and your prompts, making the learning process more dynamic and engaging! |
||||
|
||||
**Suggested Free Generative AI Tools:** |
||||
|
||||
- [ChatGPT](https://chatgpt.com/) |
||||
- [Phind](https://www.phind.com/) |
||||
- [Gemini](https://gemini.google.com/) |
||||
|
||||
For example: |
||||
|
||||
### Metaphor Explanation Technique |
||||
|
||||
This type of prompt encourages the AI to explain complex concepts using simple metaphors, making them easier to understand. |
||||
|
||||
**`Prompt example`** |
||||
|
||||
- "Explain what a variable is in JavaScript using a metaphor." |
||||
|
||||
**How to Use It with ChatGPT:** |
||||
|
||||
1. **Open your favorite Generative AI (ChatGPT as an example)**: Go to [ChatGPT](https://chatgpt.com/) and start a new chat session. |
||||
2. **Enter the Prompt**: Type or paste your prompt into the chat. For example, "Explain what a variable is in JavaScript using a metaphor." |
||||
3. **Review the Response**: ChatGPT will provide a metaphorical explanation. For instance: |
||||
|
||||
> "A variable in JavaScript is like a labeled jar that you can store items in. You can put different things into the jar (like numbers, strings, or objects) and label it with a name so you can easily find and use the contents later. For example: `let myJar = 'Cookies';`." |
||||
|
||||
4. **Ask Follow-Up Questions and compare results with your peers**: If you need further clarification or more metaphors, you can ask follow-up questions! |
||||
|
||||
--- |
||||
|
||||
Similar to this technique , we will discover in each incoming exercise, a new way to learn with AI , helping you achieve your goals with your peers |
||||
|
||||
> Remember that we use AI as a tool to understand deeply the notions, and not to get ready answers! So collaborate with your peers ;) |
||||
|
||||
### Task: |
||||
|
||||
Write the following line of code in the code editor. Put `Yes` in between the quotes, then submit it: |
||||
|
||||
```js |
||||
let ready = ""; |
||||
``` |
||||
|
||||
You just declared a variable ! What does that mean ? Well, let's move to the next exercise where you will discover |
||||
to `declare everything`! |
@ -0,0 +1,114 @@
|
||||
## The Smooth Operator |
||||
|
||||
> Mindful AI mode |
||||
> Unlike the song, smooth operators in JavaScript help you perform various calculations and manipulations with ease. |
||||
|
||||
### AI-Powered Learning Techniques |
||||
|
||||
**Step-by-Step Instruction Technique:** |
||||
|
||||
This type of prompt encourages the AI to provide detailed, step-by-step instructions for learning new concepts. |
||||
|
||||
> Find the examples across the subject ;) |
||||
|
||||
## Concepts: |
||||
|
||||
### Math Operators |
||||
|
||||
In JavaScript, operators are symbols that perform operations on variables and values. Let's delve into the most common types of operators you'll encounter. |
||||
|
||||
There are other operators other than assignment, for now let's focus on the one you |
||||
probably already know: |
||||
|
||||
- `+` Addition |
||||
- `-` Subtraction |
||||
- `/` Division |
||||
- `*` Multiplication |
||||
|
||||
Those operators are used the same way we would write them in math: |
||||
|
||||
```js |
||||
console.log(5 + 7); // -> 12 |
||||
console.log(5 * 5); // -> 25 |
||||
console.log(7 - 5); // -> 2 |
||||
console.log(9 / 3); // -> 3 |
||||
``` |
||||
|
||||
Operators are evaluated using classic priority: |
||||
|
||||
```js |
||||
console.log(1 + 5 * 10); // -> 51 |
||||
``` |
||||
|
||||
you can use parentheses `()` to enforce priority: |
||||
|
||||
```js |
||||
console.log((1 + 5) * 10); // -> 60 |
||||
``` |
||||
|
||||
And they result in a value, so they can be assigned to variables: |
||||
|
||||
```js |
||||
let halfMyAge = 33 / 2; |
||||
let twiceMyAge = 33 * 2; |
||||
``` |
||||
|
||||
#### **`Prompt example`**: |
||||
|
||||
"Can you provide step-by-step examples of basic math operations in JavaScript?" |
||||
|
||||
### Placeholders |
||||
|
||||
JavaScript allows you to include expressions within strings using template literals. This is done using backticks ``(`)`` and the `${}` syntax to include expressions. |
||||
|
||||
#### Example |
||||
|
||||
```js |
||||
console.log(`5 + 10 = ${5 + 10} = 15`); // -> 5 + 10 = 15 = 15 |
||||
``` |
||||
|
||||
**Note that it only works using:** the `` ` `` backtick, not the `"` or `'` |
||||
quotes. |
||||
|
||||
#### **`Prompt example`**: |
||||
|
||||
"Can you provide a step-by-step guide on how to use template literals to create a string that includes variable values in JavaScript?" |
||||
|
||||
### Instructions |
||||
|
||||
#### Task 1: |
||||
|
||||
Your code must use the given variable `smooth` as our initial value |
||||
|
||||
> When in doubt, always test your code with console.log() and the Run button. |
||||
> But, when the platform gives you an already existing variable to manipulate, like the `smooth` variable here, if you want to use/display it, you have to do so with the submit button. |
||||
> You'll then see the result in the code editor console output, as this variable is not available in `Run` button mode, but only in `Submit` button mode. |
||||
|
||||
```js |
||||
console.log("smooth = ", smooth); |
||||
let lessSmooth = smooth - 5; |
||||
console.log("lessSmooth = ", lessSmooth); |
||||
``` |
||||
|
||||
You will declare a few variables: |
||||
|
||||
- `lessSmooth` that is just `1` less than `smooth` |
||||
- `semiSmooth` that is half the amount of `smooth` _(it's still pretty |
||||
smooth)_ |
||||
- `plus11` that is `smooth` plus `11` |
||||
- `ultraSmooth` that is the square of smooth _(now that's smooth !)_ |
||||
|
||||
#### Task 2: |
||||
|
||||
We will provide a variable `name` and `age`. They will be pre-declared by us. |
||||
|
||||
Declare your robot's `presentation` variable of the string: |
||||
|
||||
> `Hello, my name is` **name** `and I'm` **age** `years old` |
||||
> But use placeholders to build the string you will put inside the `presentation`. |
||||
> Put the values of the provided variables `age` and `name` inside those placeholders. |
||||
|
||||
--- |
||||
|
||||
> BGM: |
||||
> [Sade - Smooth Operator - Official - 1984](https://www.youtube.com/watch?v=4TYv2PhG89A) |
@ -0,0 +1,79 @@
|
||||
## Transform Objects |
||||
|
||||
> Mindful AI mode |
||||
|
||||
### Context |
||||
|
||||
Imagine your favorite robot friend with all its cool features: a type, weight, and operational status. |
||||
|
||||
In JavaScript, we use objects to group these properties together, making it easy to manage and tweak our robotโs settings. Letโs see how we can modify, add, or remove properties in a JavaScript object to make our robot even cooler! |
||||
|
||||
### AI-Powered Learning Techniques |
||||
|
||||
**Contextual Learning Technique:** |
||||
This strategy places learning within a real-world or practical context by having the AI relate concepts to scenarios you might encounter in everyday life or your work. It helps you understand the relevance of what youโre learning and how to apply it. |
||||
|
||||
Find the examples across the subject ;) |
||||
|
||||
### Concepts |
||||
|
||||
### Modifying Objects |
||||
|
||||
Let's start with a robot object: |
||||
|
||||
```js |
||||
const robot = { |
||||
points: 0, |
||||
code: "75lai78wn", |
||||
}; |
||||
``` |
||||
|
||||
### Adding a New Property |
||||
|
||||
Give your robot a name: |
||||
|
||||
```js |
||||
robot.name = "RoboMax"; |
||||
``` |
||||
|
||||
### Changing a Property Value |
||||
|
||||
Boost your robotโs points: |
||||
|
||||
```js |
||||
robot.points = 10; |
||||
``` |
||||
|
||||
### Removing a Property |
||||
|
||||
Remove a property: |
||||
|
||||
```js |
||||
robot.code = undefined; |
||||
``` |
||||
|
||||
#### **`Prompt Example`**: |
||||
|
||||
- "Think about your pet. How would you use an object to keep track of its name, age, and favorite food?" |
||||
|
||||
- "You have a collection of books. How could you use an object to remember the title, author, and how many pages each book has?" |
||||
|
||||
### Instructions |
||||
|
||||
#### Task 1: |
||||
|
||||
Modify the provided `robot` variable: |
||||
|
||||
- Add a `model` property with the string value 'RX-78'. |
||||
- Add a `fullName` property that is the joined value of the `brand` and the `model` with a space in between. |
||||
- Add `10` to its `batteryLevel` property. |
||||
|
||||
#### Task 2: |
||||
|
||||
Let's move away from objects a bit, and discover a notion we will use later. `Duplicating a String with Placeholders`! |
||||
|
||||
Declare a variable `duplicate` that repeats the provided variable `sentence`, separated by a comma, and adds an exclamation mark at the end. |
||||
|
||||
> For example, if `sentence` is "Hello there", we expect "Hello there, Hello there!". |
||||
|
||||
**What a good occasion to apply what you learned in using generative AI and documentations to understand duplicating a string with placeholders! Now you are capable to find the information everywhere;)** |
@ -0,0 +1,99 @@
|
||||
#### General |
||||
|
||||
##### Check the Repo Content |
||||
|
||||
Files that must be inside the repository: |
||||
|
||||
- Detailed documentation in the `README.md` file. |
||||
- Source code for the Image Inspector tool. |
||||
- Any required configuration files and scripts for running the tool. |
||||
|
||||
###### Are all the required files present? |
||||
|
||||
##### Play the Role of a Stakeholder |
||||
|
||||
Organize a simulated scenario where the student takes on the role of a Digital Forensics Expert and explains their solution and knowledge to a team or stakeholder. Evaluate their grasp of the concepts and technologies used in the project, their communication efficacy, and their critical thinking about their solution and the knowledge behind this project. |
||||
|
||||
Suggested role play questions include: |
||||
|
||||
- What is metadata in the context of digital images, and why is it important? |
||||
- How does steganography work, and what are its potential uses and risks? |
||||
- What challenges did you face while developing the Image Inspector tool, and how did you address them? |
||||
- How can this tool be used in real-life digital forensics or cybersecurity scenarios? |
||||
- What ethical considerations should be taken into account when analyzing images for hidden data? |
||||
|
||||
###### Were the students able to answer all the questions? |
||||
|
||||
###### Did the students demonstrate a thorough understanding of the concepts and technologies used in the project? |
||||
|
||||
###### Were the students able to communicate effectively and justify their decisions and explain the knowledge behind this project? |
||||
|
||||
###### Were the students able to evaluate the value of this project in real-life scenarios? |
||||
|
||||
###### Did the students demonstrate an understanding of ethical and legal considerations related to digital forensics? |
||||
|
||||
##### Check the Student Documentation in the `README.md` File |
||||
|
||||
###### Does the `README.md` file contain all the necessary information about the tool (prerequisites, setup, configuration, usage, ...)? |
||||
|
||||
###### Does the `README.md` file contain clear guidelines and warnings about the ethical and legal use of the tool? |
||||
|
||||
##### Review the Tool's Design and Implementation |
||||
|
||||
1. **Help Command:** |
||||
|
||||
```sh |
||||
$> image-inspector --help |
||||
``` |
||||
|
||||
###### Does the output include an explanation of how to use the tool, with all options clearly described? |
||||
|
||||
2. **Metadata Extraction Option:** |
||||
|
||||
```sh |
||||
$> image-inspector -m -o metadata.txt image-example1.jpeg |
||||
``` |
||||
|
||||
###### Does the output correctly extract and display metadata such as geolocation, device information, and date/time? |
||||
|
||||
###### Is the output stored in the file specified in the output parameter? |
||||
|
||||
3. **Steganography Detection Option:** |
||||
|
||||
```sh |
||||
$> image-inspector -s -o hidden_data.txt image-example1.jpeg |
||||
``` |
||||
|
||||
###### Does the output correctly detect and extract any hidden PGP keys or other concealed information within the image? |
||||
|
||||
###### Is the output stored in the file specified in the output parameter? |
||||
|
||||
##### Testing with Images |
||||
|
||||
**You will be provided with an example image to test the students tool. Feel free to test with other images.** |
||||
The example image attached: |
||||
[image-example1.jpeg](resources/image-example1.jpeg) |
||||
[image-example2.jpeg](resources/image-example2.jpeg) |
||||
[image-example3.jpeg](resources/image-example3.jpeg) |
||||
[image-example4.jpeg](resources/image-example4.jpeg) |
||||
|
||||
###### Test the tool with the provided example image and at least one other image to ensure the tool's robustness. |
||||
|
||||
###### Does the tool produce accurate and expected results for different images? |
||||
|
||||
##### Ensure that the student submission meets the project requirements: |
||||
|
||||
1. **Functionality:** Does the tool perform its intended functions accurately (metadata extraction and steganography detection)? |
||||
2. **Data Accuracy:** Is the retrieved information accurate and relevant? |
||||
3. **Ethical Considerations:** Are there clear guidelines and warnings about the ethical and legal use of the tool? |
||||
4. **Usability:** Is the tool user-friendly and well-documented? |
||||
|
||||
###### Did the tool design and implementation align with all the project requirements above? |
||||
|
||||
###### Were the students able to implement a functional and reliable tool that meets the project requirements? |
||||
|
||||
#### Bonus |
||||
|
||||
###### + Did the student implement additional valuable features (e.g., additional steganography methods, GUI, facial recognition)? |
||||
|
||||
###### + Is this project an outstanding project that exceeds the basic requirements? |
After Width: | Height: | Size: 47 KiB |
After Width: | Height: | Size: 195 KiB |
After Width: | Height: | Size: 2.2 MiB |
After Width: | Height: | Size: 2.8 KiB |
After Width: | Height: | Size: 244 KiB |
@ -0,0 +1,107 @@
|
||||
#### General |
||||
|
||||
##### Check the Repo content. |
||||
|
||||
Files that must be inside the repository: |
||||
|
||||
- Detailed documentation in the `README.md` file. |
||||
- Source code for the OSINT-Master tool. |
||||
- Any required configuration files and scripts for running the tool. |
||||
|
||||
###### Are all the required files present? |
||||
|
||||
##### Play the role of a stakeholder |
||||
|
||||
Organize a simulated scenario where the student take on the role of Cyber Security Experts and explain their solution and knowledge to a team or stakeholder. Evaluate their grasp of the concepts and technologies used in the project, their communication efficacy, and their critical thinking about their solution and knowledge behind this project. |
||||
Suggested role play questions include: |
||||
|
||||
- What is OSINT and why is it significant in cybersecurity? |
||||
- What types of information can be gathered using OSINT techniques? |
||||
- Explain what subdomain takeovers are, and how to protect against it? |
||||
- How does the OSINT-Master tool help identify sensitive information? |
||||
- What challenges did you face while developing the OSINT-Master tool and how did you address them? |
||||
- How can we protect our critical information from OSINT techniques? |
||||
- How can this tool help in a defensive approach? |
||||
|
||||
###### Were the student able to answer all the questions? |
||||
|
||||
###### Did the student demonstrate a thorough understanding of the concepts and technologies used in the project? |
||||
|
||||
###### Were the students able to communicate effectively and justify their decisions and explain the knowledge behind this project? |
||||
|
||||
###### Was the student able to evaluate the value of this project in real-life scenarios? |
||||
|
||||
###### Did the students demonstrate an understanding of ethical and legal considerations related to OSINT? |
||||
|
||||
##### Check the Student Documentation in the `README.md` File |
||||
|
||||
###### Does the `README.md` file contain all the necessary information about the tool (prerequisites, setup, configuration, usage, ...)? |
||||
|
||||
###### Does the `README.md` file contain clear guidelines and warnings about the ethical and legal use of the tool? |
||||
|
||||
##### Review the Tool's Design and Implementation |
||||
|
||||
1. **Help Command:** |
||||
|
||||
```sh |
||||
$> osintmaster --help |
||||
``` |
||||
|
||||
###### Does the output include explanation how to use the tool? |
||||
|
||||
2. **Full Name Option:** |
||||
|
||||
```sh |
||||
$> osintmaster -n "Full Name" -o filename |
||||
``` |
||||
|
||||
###### Does the output include accurate details such as phone numbers, addresses, and social media profiles? |
||||
|
||||
###### Does the output stored to the file specified in the output parameter? |
||||
|
||||
3. **IP Address Option:** |
||||
|
||||
```sh |
||||
$> osintmaster -i "IP Address" -o filename |
||||
``` |
||||
|
||||
###### Does the output include geolocation data, ISP details, and historical data? |
||||
|
||||
###### Does the output stored to the file specified in the output parameter? |
||||
|
||||
4. **Username Option:** |
||||
|
||||
```sh |
||||
$> osintmaster -u "Username" -o filename |
||||
``` |
||||
|
||||
###### Does the output check the presence of the username on multiple social networks and public repositories? |
||||
|
||||
###### Does the output stored to the file specified in the output parameter? |
||||
|
||||
5. **Domain Option:** |
||||
|
||||
```sh |
||||
$> osintmaster -d "Domain" -o filename |
||||
``` |
||||
|
||||
###### Does the output enumerate subdomains, gather relevant information, and identify potential subdomain takeover risks? |
||||
|
||||
###### Does the output stored to the file specified in the output parameter? |
||||
|
||||
##### Ensure that the student submission meets the project requirements: |
||||
|
||||
1. **Functionality:** Does the tool retrieve detailed information based on the given inputs (Full Name, IP Address, Username, and Domain)? |
||||
2. **Data Accuracy:** Is the retrieved information accurate and relevant? |
||||
3. **Ethical Considerations:** Are there clear guidelines and warnings about the ethical and legal use of the tool? |
||||
4. **Usability:** Is the tool user-friendly and well-documented? |
||||
|
||||
###### Did the tool design and implementation align with all the project requirements above? |
||||
|
||||
###### Were the students able to implement a functional and reliable tool that meets the project requirements? |
||||
|
||||
#### Bonus |
||||
|
||||
###### + Did the student implement additional valuable features? |
||||
|
||||
###### + Is this project an outstanding project that exceeds the basic requirements? |
After Width: | Height: | Size: 244 KiB |
@ -0,0 +1,114 @@
|
||||
#### General |
||||
|
||||
##### Check the Repo Content. |
||||
|
||||
Files that must be inside the repository: |
||||
|
||||
- Detailed documentation in the `README.md` file. |
||||
- Source code for the PentestKit tools. |
||||
- Any required configuration files and scripts for running the tools. |
||||
|
||||
###### Are all the required files present? |
||||
|
||||
##### Play the Role of a Stakeholder |
||||
|
||||
Organize a simulated scenario where the student takes on the role of Cyber Security Experts and explains their solution and knowledge to a team or stakeholder. Evaluate their grasp of the concepts and technologies used in the project, their communication efficacy, and their critical thinking about their solution and knowledge behind this project. |
||||
|
||||
Suggested role play questions include: |
||||
|
||||
- What is penetration testing and why is it important in cybersecurity? |
||||
- How do the penetration testing tools contribute to identifying vulnerabilities? |
||||
- What challenges did you face while developing the PentestKit tools, and how did you address them? |
||||
- How does the PentestKit help in conducting thorough security assessments? |
||||
- How can these tools be used in a real-life pentesting scenario? |
||||
- How do you ensure the ethical and legal use of these pentesting tools? |
||||
|
||||
###### Were the students able to answer all the questions? |
||||
|
||||
###### Did the students demonstrate a thorough understanding of the concepts and technologies used in the project? |
||||
|
||||
###### Were the students able to communicate effectively and justify their decisions and explain the knowledge behind this project? |
||||
|
||||
###### Were the students able to evaluate the value of this project in real-life scenarios? |
||||
|
||||
###### Did the students demonstrate an understanding of ethical and legal considerations related to pentesting? |
||||
|
||||
##### Check the Student Documentation in the `README.md` File |
||||
|
||||
###### Does the `README.md` file contain all the necessary information about the tools (prerequisites, setup, configuration, usage, ...)? |
||||
|
||||
###### Does the `README.md` file contain clear guidelines and warnings about the ethical and legal use of the tools? |
||||
|
||||
##### Review the Tools' Design and Implementation |
||||
|
||||
1. **Help Command:** |
||||
|
||||
```sh |
||||
$> pentestkit --help |
||||
``` |
||||
|
||||
###### Does the output include an explanation of how to use the tools? |
||||
|
||||
2. **TinyScanner (Port Scanning) Option:** |
||||
|
||||
```sh |
||||
$> pentestkit -t 192.168.1.1 -p 22,80,443 -o result1.txt |
||||
``` |
||||
|
||||
###### Does the output correctly show whether the ports are open or closed? |
||||
|
||||
###### Is the output stored in the file specified in the output parameter? |
||||
|
||||
3. **DirFinder (Directory Brute-forcing) Option:** |
||||
|
||||
```sh |
||||
$> pentestkit -d http://example.com -w /path/to/wordlist.txt -o result2.txt |
||||
``` |
||||
|
||||
###### Does the output correctly list the directories and their HTTP status codes? |
||||
|
||||
###### Is the output stored in the file specified in the output parameter? |
||||
|
||||
4. **HostMapper (Network Mapping) Option:** |
||||
|
||||
```sh |
||||
$> pentestkit -h 192.168.1.0/24 -o result3.txt |
||||
``` |
||||
|
||||
###### Does the output correctly identify live hosts on the subnet? |
||||
|
||||
###### Is the output stored in the file specified in the output parameter? |
||||
|
||||
4. **HeaderGrabber (HTTP Header Analysis) Option:** |
||||
|
||||
```sh |
||||
$> pentestkit -g http://example.com -o result4.txt |
||||
``` |
||||
|
||||
###### Does the output correctly retrieve and analyze HTTP headers? |
||||
|
||||
###### Is the output stored in the file specified in the output parameter? |
||||
|
||||
##### Ensure that the student submission meets the project requirements: |
||||
|
||||
1. **Functionality:** Do the tools perform their intended functions accurately (e.g., port scanning, directory brute-forcing, network mapping, HTTP header analysis)? |
||||
|
||||
2. **Data Accuracy:** Is the retrieved information accurate and relevant? |
||||
|
||||
3. **Ethical Considerations:** Are there clear guidelines and warnings about the ethical and legal use of the tools? |
||||
|
||||
4. **Usability:** Are the tools user-friendly and well-documented? |
||||
|
||||
> You can compare the results of the student's tool with another tool to to prove the output match with the expected one if needed! |
||||
|
||||
###### Are all the tools implemented from scratch? Can you confirm that no external CLI are called to perform the checks described in the subject? |
||||
|
||||
###### Did the tool design and implementation align with all the project requirements above? |
||||
|
||||
###### Were the students able to implement functional and reliable tools that meet the project requirements? |
||||
|
||||
#### Bonus |
||||
|
||||
###### + Did the student implement additional valuable features? |
||||
|
||||
###### + Is this project an outstanding project that exceeds the basic requirements? |
After Width: | Height: | Size: 465 KiB |
@ -1,82 +1,101 @@
|
||||
## stealth-boom |
||||
|
||||
In this project, you will have to create an entire stealth game using Unreal Engine. |
||||
A stealth game. |
||||
|
||||
<center> |
||||
<img src="./resources/mgsmeme.png?raw=true" style = "width: 700px !important; height: 464px !important;"/> |
||||
</center> |
||||
|
||||
### Objectives |
||||
|
||||
The idea of this project is to create a little 10 minutes gameplay game with missions, with stealth based gameplay and with an AI patrolling NPC. |
||||
The goal of this project is to create a playable gameplay loop around stealth mechanics. |
||||
|
||||
### Scenario |
||||
|
||||
You are an Unreal Engine developer tasked with creating a complete stealth game from scratch. You need to implement everything, including AI behavior trees, player animations, and gun mechanics. As you progress, you realize balancing these elementsโensuring the AI responds accurately to player movements while maintaining smooth gameplayโis more challenging than expected. Every feature, from the main menu to mission completion, must work seamlessly to deliver a polished and playable game within the given constraints. |
||||
|
||||
The basics assets you will need for this project can be found in the [Stealth-Boom.zip](https://assets.01-edu.org/Unreal-Engine-Projects/StealthBoom.zip) file. It contains the basic animations, character, enemies and props you will need for this project. |
||||
Good luck. and remember to have fun while making the game! |
||||
|
||||
### Instructions |
||||
|
||||
The following aspects should be fulfilled: |
||||
The following requirements should be fulfilled: |
||||
|
||||
#### Main Menu: |
||||
|
||||
- Option to start the game. |
||||
- Adjust the general sound of the game. |
||||
- Change graphics settings: |
||||
- When changing the resolution, a pop-up should appear in the middle of the screen, asking if the player wants to keep the newly applied graphics settings. If the player clicks "Yes" within 10 seconds, the settings are confirmed. If the 10 seconds pass or the player clicks "No," the settings revert to the previous ones. |
||||
- Change the mouse sensitivity. |
||||
- Option to invert the mouse vertical axis. |
||||
|
||||
#### Map/Level. |
||||
|
||||
- The map should include areas where the player can hide from enemies by `ducking` or taking cover `behind walls and props`. |
||||
- There should be pickable ammunition scattered throughout the map. |
||||
- Health packs should be placed around the map for the player to collect. |
||||
|
||||
#### Player: |
||||
|
||||
- The player should have animations for `walking`, `running`, `shooting`, `ducking`, and performing `melee attacks`. |
||||
- Blood particles should appear when the player is hit. |
||||
- A health bar should decrease whenever the player takes damage. |
||||
- Upon death, the player should have the option to quit the game, return to the main menu, or start over. |
||||
- The player's mission is flexible and can be any of the following: completing a task, eliminating all enemies without being detected, or collecting documents. Regardless of the mission, the player will encounter enemies that attempt to hinder their progress. |
||||
- When the player successfully completes their mission, a pop-up should appear stating that the mission is complete. |
||||
|
||||
- Create a map where the player can walk around. |
||||
#### Gun mechanics: |
||||
|
||||
- This map should contain places for the player to hide from enemies by crouching, hide behind walls, and all other props you may use to help it make a stealth game. |
||||
- Buildings with at least 2 floors. |
||||
- Pickable ammunition and weapons around the map. |
||||
- The player should be able to shoot. |
||||
- A widget should display the current number of bullets available to the player. |
||||
- When the bullet count reaches 0, the player should be unable to shoot. |
||||
- Shooting should trigger both a sound effect and a visual effect. |
||||
- Bullets should have a visual impact on walls. |
||||
|
||||
- For the player you should add: |
||||
#### Enemy: |
||||
|
||||
- Walk and run animations |
||||
- Reload animation |
||||
- Aim animation |
||||
- Shoot animation |
||||
- Crouch animation |
||||
- the player should be able to do the above six actions while crouching |
||||
- Melee attack animation |
||||
- Gun sound when firing |
||||
- Bullets visual impact on walls (see decals documentation) |
||||
- Blood particles when hit |
||||
- The game should feature at least two types of enemies: `Melee` and `Ranged`. |
||||
- Behavior trees should be used to implement enemy AI. |
||||
- Enemies should be able to patrol pre-defined paths around the map. |
||||
- Enemies should detect the player if the player enters their field of view. |
||||
- When the player enters the field of view of an enemy, the enemy enters into chasing mode and must start running after the player. |
||||
- `Ranged` enemies should take cover and shoot at the player. |
||||
- `melee` enemies should run close to the player and perform melee attacks. |
||||
- Enemies in chase mode alert nearby enemies making them enter chase mode as well. |
||||
- If the player leaves the field of view of all enemies for a specified duration, the enemies go back to patrol mode. |
||||
- Enemies should have sound effects whenever they change from chase to patrol mode,and vice versa. |
||||
- Enemies should have a visual indicator showing whether they are in patrol or chase mode |
||||
|
||||
- The game should contain a main menu where the player can: |
||||
#### Game loop |
||||
|
||||
- Start the game |
||||
- Adjust the general sound of the game |
||||
- Change the graphics settings |
||||
- When changing the resolution, a pop-up should appear in the middle of the screen asking if the player wants to keep the graphics setting he/she just applied. If `Yes` is clicked within 10 seconds, the settings are set, otherwise, if the 10 seconds delay is over or if the player clicks `No`, the settings go back to the old ones. |
||||
- Change the mouse sensitivity |
||||
- Invert the mouse vertical axis |
||||
- Pressing `Esc` pauses the game, bringing up a widget similar to the main menu. |
||||
- The player should be able to change the game graphics settings the same way as in the main menu. |
||||
- The game should last no longer than 6 minutes. After this time, the player is presented with the same choices as when they die: quit the game, return to the main menu, or start over. |
||||
|
||||
- You should have at least 3 types of enemies: `Guards` (who patrol around and are lookig for intruders), `Drones` (same as Guards but which can fly), and `Cameras` (stationary and looking for intruders). More enemies can be added if you want to. |
||||
### Bonus |
||||
|
||||
- Guards AI: |
||||
- Guards should be able to patrol around the map; |
||||
- A Guard is able to see the player, if the player crosses his field of view; |
||||
- When the player enters the field of view of a Guard, the Guard enters into chasing mode and must start running after the player, takes cover and shoots at the player. |
||||
- If the player leaves the field of view for a certain time, the Guard goes back to patrol mode. |
||||
- Drones AI: |
||||
- Drones should be able to patrol around the map; |
||||
- A light color should determine the state of the drone (Blue for patrolling, Red for chasing the player); |
||||
- Once the player crosses the drone camera, the drone light turns red and the drone enters chasing mode; |
||||
- When a drone is in chasing mode, all the guards on the area are alerted, and should enter chasing mode as well; |
||||
- When the player is out of the drone sight, the drone turns back to patrol mode; |
||||
- The sight radius should be inferior on the drones that on the guards. |
||||
- Camera AI: |
||||
- Cameras should be placed on walls; |
||||
- Cameras should have the same light sign as the drone, so when the player is in the camera sight, the camera light turns red and all Guards enter in chasing mode; |
||||
- Like the Drones, Cameras warn guards, whenever the player passes through the camera field of view; |
||||
- Some Cameras should lock access of certain areas of the map (for example, close doors) when the player is detected by that camera. |
||||
- Use your own assets to create a game in your own style by either searching online or creating them on your own. |
||||
|
||||
- Drones, Guards and Cameras should have sounds effect whenever they change from chase to patrol mode, as well as the other way around. |
||||
- Have more enemy types e.g. a turret that is stationary but inflicts significant damage, etc. |
||||
|
||||
- All AI should be implemented using Behavior Trees except for the Camera. |
||||
- Have areas in the game that are locked behind doors that require keys. which you can obtain from specific enemies. |
||||
|
||||
- The player mission is up to you, either it can be some task to fix, kill all guards without getting caught or collect documents... Whatever you choose, the player should have enemies on his way to divert him away from his objective. |
||||
- Have multiple different weapon types that you can pick up around the map and use to finish the mission. |
||||
|
||||
- When the player successfully completes his mission, a pop up should appear saying that the mission is completed. |
||||
### Resources |
||||
|
||||
- The player has a health bar that should go down whenever the player gets shot. When the player dies, he has the choice to either quit the game, go back to the main menu or start over. |
||||
Here are some resources to help you tackle potential project challenges: |
||||
|
||||
- If the player starts over, the level should not be reloaded. The player should spawn back to the starting point. |
||||
- [behavior-tree-in-unreal-engine](https://dev.epicgames.com/documentation/en-us/unreal-engine/behavior-tree-in-unreal-engine---quick-start-guide) |
||||
- [decal materials and decal actors](https://dev.epicgames.com/documentation/en-us/unreal-engine/decal-materials-in-unreal-engine?application_version=5.4) |
||||
- for inspiration look at games like metal gear solid 1/2/3. |
||||
|
||||
- When pressing `Esc` the game is set on paused and the main menu widget pops up. |
||||
- The basics assets you will need for this project can be found in the [StealthBoomAssets.zip](https://assets.01-edu.org/gamedev/stealth-boom-assets.zip) file. It contains the basic animations, character, enemies and props you will need for this project. |
||||
|
||||
- The player should be able to change the game graphics setting exactly like in the main menu. |
||||
> NOTE: The assets in the file are intended to help streamline the process of locating assets, not to eliminate it. |
||||
> TIP: Use [itch.io](https://www.itch.io) to get sound effects (not included in the assets file) or to find extra assets |
||||
|
||||
- A game should not last longer than 6 minutes. After that the same choices should appear as when the player dies. |
||||
### Submission |
||||
|
||||
> Do not forget to zip up the project compile and save everything for peer correction. |
||||
> If it is not possible to upload files to Gitea due to their size, use GitHub instead and have a look at [Git LSF](https://docs.github.com/en/repositories/working-with-files/managing-large-files/about-large-files-on-github) |
||||
|
@ -1,69 +1,89 @@
|
||||
> Due to file size reason, the solution might be uploaded on GitHub instead of Gitea! |
||||
|
||||
#### Functional |
||||
#### Main Menu |
||||
|
||||
###### Does the map contain places for the player to hide from enemies? |
||||
###### Is the main menu displayed on the screen with all five options visible? |
||||
|
||||
###### Does the map contain buildings, pickable ammunition and weapons placed around the map? |
||||
###### Can the general game sound be adjusted directly from the settings menu? |
||||
|
||||
###### Does the player have all the minimal animation required (walking, running, melee attacking, aiming, reloading, shooting, crouching, crouch walking, crouch aiming, crouch reloading, crouch shooting)? |
||||
###### When changing the resolution, does a confirmation pop-up appear in the center of the screen asking if the player wants to keep the new graphics settings? |
||||
|
||||
###### Is there a sound for the player shooting? |
||||
###### If the player presses 'No' on the graphics confirmation pop-up, or if the pop-up is not confirmed within 10 seconds, do the settings revert to the previous ones? |
||||
|
||||
###### Are there bullets impacts present when shooting at a wall? |
||||
###### Are the mouse settings (mouse sensitivity, invert mouse vertical axis) functioning according to their descriptions? |
||||
|
||||
#### Map / Level |
||||
|
||||
###### Does the map contain props/walls for the player to hide from enemies? |
||||
|
||||
###### Does the map contain pickable ammunition and health placed around? |
||||
|
||||
#### Player Mechanics |
||||
|
||||
###### Does the player have all the minimal animation required (walking, running, melee attacking, shooting, ducking)? |
||||
|
||||
###### Does the player have a health bar? |
||||
|
||||
###### Does the player health decreases when he gets damaged? |
||||
|
||||
###### When the player is hit, are there any blood particles? |
||||
|
||||
###### Is a main menu with the five options displayed on the screen? |
||||
###### When the player loses all his health (dies), does he get to choose whether to quit the game, go back to the main menu, or to start over? |
||||
|
||||
###### Can the general sound of the game be managed directly on the settings menu? |
||||
###### Does the player have a defined goal or mission? |
||||
|
||||
###### When changing the resolution, does a pop-up get displayed on the screen to confirm the changes we just set? |
||||
###### Whatever the goal or mission, can you confirm that the player had enemies on his way to divert him away from his objective? |
||||
|
||||
###### Does pressing โNoโ on the graphics confirmation pop-up, resets the settings to the old ones? |
||||
###### When the player successfully completes the goal or mission, does a pop-up appear indicating `mission completion`? |
||||
|
||||
###### Are the mouse settings (mouse sensitivity, invert mouse vertical axis) functioning according to their descriptions? |
||||
#### Gun Mechanics |
||||
|
||||
###### Do the guards and drones wander around the map? |
||||
###### Is the player able to shoot? |
||||
|
||||
###### When a player enters the field of view of a guard, does he switches to chasing mode, running and shooting towards the player while also taking cover? |
||||
###### Is there a sound for the guns shooting? |
||||
|
||||
###### Does the drone light switches between each state? Blue for patrolling and red for chase mode (when a player crosses its sight)? |
||||
###### Is a widget showing the remaining bullet count displayed? |
||||
|
||||
###### Whenever a drone turns to chasing mode, do all the guards in the area get alerted and switch to chasing mode as well? |
||||
###### Is the player unable to shoot when he has no bullets? |
||||
|
||||
###### Does the drone come back to patrol mode when the player is out of the drone sight? |
||||
###### Are there bullets impacts present when shooting at a wall? |
||||
|
||||
###### Is the sight radius of the drones smaller than the guards? |
||||
#### Enemies |
||||
|
||||
###### Are cameras attached to walls? |
||||
###### Does the game include at least two types of enemies: `Melee` and `Ranged`? |
||||
|
||||
###### Do cameras have similar light sign as the drones (red for alert mode and blue for patrol)? |
||||
###### Is enemy AI implemented using Behavior Trees? |
||||
|
||||
###### As the drones, do the cameras alert guards on the area, switching them to chasing mode? |
||||
###### Do the enemies wander around the map? |
||||
|
||||
###### Do Guards, Drones and Cameras play an alert sound when a player gets detected? |
||||
###### When a player enters an enemy's field of view, does the enemy switch to a chasing mode? |
||||
|
||||
###### Do some cameras lock access to certain areas of the map, when they detect a player? |
||||
###### Do melee enemies approach the player to perform melee attacks? |
||||
|
||||
###### Can the camera close some part of the map (thru closed doors, open traps and tries to kill the player etcโฆ) to the player when the player is being detected? |
||||
###### Do ranged enemies take cover and shoot at the player? |
||||
|
||||
###### Are Behavior Trees used to implement the AI of the Guards and Drones? |
||||
###### Do the enemies go back to patrol mode when the player is hidden from all field of views for a set amount of time? |
||||
|
||||
###### Does the player have a goal? |
||||
###### Do the enemies have a sound effect and visual effect when entering and exiting chase mode? |
||||
|
||||
###### When the goal of the player is successfully completed, does a pop up appear saying that the mission is completed? |
||||
###### Are enemies in chase mode alerting nearby enemies ? |
||||
|
||||
###### Does the player have a health bar? |
||||
#### Game loop |
||||
|
||||
###### Does the player health decreases when he gets shot by the guards? |
||||
###### When 'Esc' is pressed does the game pause and a widget similar to the main menu is displayed? |
||||
|
||||
###### When the player loses all his health (dies), does he get to choose whether to quit the game, go back to the main menu, or to start over? |
||||
###### Can the player perform all the actions that appear in the menu when the game is paused? |
||||
|
||||
###### If the player starts over does he spawn back at the starting point? |
||||
###### Does the game loop last no more than 6 minutes from start to finish? |
||||
|
||||
###### Is the lifespan of the game at least 6 minutes long from launch to mission completed? |
||||
###### Is a widget that shows the player's remaining time displayed? |
||||
|
||||
#### Bonus |
||||
|
||||
###### +Are there headshots implemented? |
||||
###### +Did the student use different assets than the ones provided in the subject? |
||||
|
||||
###### +Are there more enemy types than the basic melee and ranged enemies? |
||||
|
||||
###### +Are there areas in the game that require an item to access? |
||||
|
||||
###### +Are there different weapon types that you can pick up and use? |
||||
|
After Width: | Height: | Size: 459 KiB |
@ -0,0 +1,19 @@
|
||||
package main |
||||
|
||||
import ( |
||||
"fmt" |
||||
"piscine" |
||||
) |
||||
|
||||
func main() { |
||||
fmt.Println(piscine.ItoaBase(10, 2)) |
||||
fmt.Println(piscine.ItoaBase(255, 16)) |
||||
fmt.Println(piscine.ItoaBase(-42, 4)) |
||||
fmt.Println(piscine.ItoaBase(123, 10)) |
||||
fmt.Println(piscine.ItoaBase(0, 8)) |
||||
fmt.Println(piscine.ItoaBase(255, 2)) |
||||
fmt.Println(piscine.ItoaBase(-255, 16)) |
||||
fmt.Println(piscine.ItoaBase(15, 16)) |
||||
fmt.Println(piscine.ItoaBase(10, 4)) |
||||
fmt.Println(piscine.ItoaBase(255, 10)) |
||||
} |