JavaScript Practice Exams
Culture Digitale - Chapitre 3
Contents
1 Exam 1: Interactive Counter 1
1.1 Objective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1.2 Requirements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1.3 Starter Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
2 Exam 2: Form Validation 3
2.1 Objective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2.2 Requirements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2.3 Starter Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
3 Exam 3: Shopping Cart (Advanced Data Structures) 4
3.1 Objective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
3.2 Requirements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
3.3 Starter Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
3.4 Data Structure Hint . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1 Exam 1: Interactive Counter
Duration: 1 hour
1.1 Objective
Create an interactive counter with:
• Increment (+), Decrement (-), and Reset buttons
• Visual feedback (color changes for positive/negative values)
• Display of current count
1.2 Requirements
1. Use getElementById for DOM selection
2. Implement event listeners with addEventListener
3. Change text color to:
• Green when count ¿ 0
• Red when count ¡ 0
• Black when count = 0
1
1.3 Starter Code
<! DOCTYPE html >
< html >
< head >
< title > Counter Exam </ title >
< style >
# counter {
font - size : 2 em ;
margin : 20 px ;
}
</ style >
</ head >
< body >
< div id = " counter " >0 </ div >
< button id = " increment " >+ </ button >
< button id = " decrement " > - </ button >
< button id = " reset " > Reset </ button >
<! -- Your JavaScript Here -- >
</ body >
</ html >
2
2 Exam 2: Form Validation
Duration: 1.5 hours
2.1 Objective
Create a registration form with validation for:
• Name (minimum 3 characters)
• Email (must contain @ and a domain)
• Password (minimum 8 characters)
2.2 Requirements
1. Display error messages below each field
2. Use querySelectorAll for form controls
3. Validate on form submission
4. Prevent submission if validation fails
2.3 Starter Code
<! DOCTYPE html >
< html >
< head >
< title > Form Validation Exam </ title >
< style >
. error {
color : red ;
font - size : 0.8 em ;
}
</ style >
</ head >
< body >
< form id = " registration " >
< div >
< label > Name : </ label >
< input type = " text " id = " name " >
< div class = " error " id = " name - error " > </ div >
</ div >
<! -- Add Email and Password fields similarly -- >
< button type = " submit " > Register </ button >
</ form >
<! -- Your JavaScript Here -- >
</ body >
</ html >
3
3 Exam 3: Shopping Cart (Advanced Data Structures)
Duration: 1.5 hours
3.1 Objective
Implement a shopping cart system using:
• Arrays to store products
• Objects for product details
• Array methods (push, filter, find, reduce)
3.2 Requirements
1. Add products (name, price, quantity)
2. Remove products by name
3. Update quantities
4. Calculate and display total
5. Use innerHTML to display cart contents
3.3 Starter Code
<! DOCTYPE html >
< html >
< head >
< title > Shopping Cart Exam </ title >
< style >
. cart - item {
margin : 10 px ;
padding : 10 px ;
border : 1 px solid # ddd ;
}
</ style >
</ head >
< body >
< h1 > Shopping Cart </ h1 >
< div id = " add - product " >
< input type = " text " id = " product - name " placeholder = " Product " >
<! -- Add price and quantity inputs -- >
< button id = " add - btn " > Add to Cart </ button >
</ div >
< div id = " cart - display " >
<! -- Cart items will appear here -- >
</ div >
< div id = " total " > Total : $0 .00 </ div >
<! -- Your JavaScript Here -- >
</ body >
</ html >
4
3.4 Data Structure Hint
// Example product structure
const products = [
{ name : " Laptop " , price : 999 , quantity : 1 } ,
{ name : " Mouse " , price : 25 , quantity : 2 }
];