By the end of this chapter, you will be able to:
Mastering these skills will help you create dynamic, user-friendly websites that stand out in the real world of web development.
A JavaScript library is a collection of pre-written, tested JavaScript code that provides ready-made functions for common tasks, such as selecting page elements, handling events, animating content, making server requests or drawing charts. Instead of writing the same code from scratch on every project, a developer includes the library and calls its functions. Libraries save time, reduce errors and smooth over differences between browsers.
Example: the web developer for a hardware shop in Sotik used a chart library to show monthly cement and iron sheet sales on the owner's dashboard instead of coding the drawing logic by hand.
| Feature | Library | Framework |
|---|---|---|
| Control | Your code calls the library when needed | The framework calls your code (inversion of control) |
| Scope | Solves specific tasks | Provides the whole structure of an application |
| Flexibility | High, use only what you need | Follows the framework's rules |
| Examples | jQuery, Lodash, Chart.js, D3.js | Angular, Vue, Next.js |
React is usually described as a library for building user interfaces, although it is often used like a framework.
Create a free account to open more of this chapter.
Free: practical guides, quick cards, workplace scenarios and more.
Create a free accountType: Individual
| Tools & Equipment | Materials |
|---|---|
| Computer with text editor and browser | Plain paper |
| Internet access for jQuery CDN |
| S/N | Item | Quantity |
|---|---|---|
| 1 | Computer with text editor and browser | 1 Pc per Candidate |
| 2 | Internet access for jQuery CDN | 1 connection per Candidate |
| 3 | Plain paper | 1 Sheet per Candidate |
| Items to be Evaluated | Marks Available | Marks Obtained | Comments |
|---|---|---|---|
| TASK 1: Setup and HTML form creation | |||
| Launched text editor and created student_info.html file (Award 2 marks for correct file creation and launch) | 2 | ||
| Added HTML form with input fields: Student Number, Mathematics, Biology, Chemistry, Physics (Award 1 mark per correctly implemented input field or zero) | 6 | ||
| Included input validation for numeric marks fields to reject non-numeric entries (Award 1 mark each for validation on Mathematics, Biology, Chemistry, Physics) | 4 | ||
| Sub-Total | 12 | ||
| TASK 2: jQuery implementation for calculations and DOM manipulation | |||
| Imported jQuery library via CDN correctly (Award 2 marks for correct inclusion of jQuery script tag) | 2 | ||
| Implemented jQuery script to calculate sum of marks upon button click (Award 2 marks for correct sum calculation logic) | 2 | ||
| Implemented jQuery script to calculate average of marks correctly (Award 2 marks for correct average calculation logic) | 2 | ||
| Determined and displayed grade based on average using jQuery DOM manipulation (Award 1 mark for correct grade logic, 1 mark for displaying grade) | 2 | ||
| Displayed all entered and calculated data dynamically on the web page using jQuery (Award 4 marks for correct dynamic display of data) | 4 | ||
| Sub-Total | 12 | ||
| TASK 3: User interface and styling | |||
| Added a descriptive heading to the web page (Award 1 mark for appropriate heading) | 1 | ||
| Implemented a reset button to clear form and displayed data (Award 2 marks for correct reset button functionality) | 2 | ||
| Applied basic CSS styling for center alignment and readability (Award 3 marks for appropriate styling) | 3 | ||
| Sub-Total | 6 | ||
| PRODUCT CHECKLIST | |||
| Web page file student_info.html exists and loads without errors (Award 2 marks for file existence and error-free loading) | 2 | ||
| Form accepts and rejects inputs correctly (numeric validation enforced) (Award 3 marks for input validation correctness) | 3 | ||
| Sum and average calculations are accurate with correct grade determination (Award 5 marks for calculation accuracy and grade correctness) | 5 | ||
| Dynamic display updates correctly on input and button actions (Award 3 marks for proper DOM manipulation and display) | 3 | ||
| User interface is neat, readable, and form resets properly (Award 3 marks for UI neatness and reset functionality) | 3 | ||
| Sub-Total | 16 | ||
| GRAND TOTAL | 46 | ||
Type: Individual
| Tools & Equipment | Materials |
|---|---|
| Functional Computer with Node.js and React.js Installed | React.js library |
| Code Editor (e.g., VS Code) | JavaScript ES6+ |
| Internet Access for React.js Documentation | HTML5 |
| CSS3 |
| S/N | Item | Quantity |
|---|---|---|
| 1 | Functional Computer with Node.js and React.js Installed | 1 Pc per Candidate |
| 2 | Code Editor (e.g., VS Code) | 1 Pc per Candidate |
| 3 | Internet Access for React.js Documentation | 1 Pc per Candidate |
| Items to be Evaluated | Marks Available | Marks Obtained | Comments |
|---|---|---|---|
| TASK 1: Setup React.js Project Environment | |||
| Launched code editor and initialized React project using create-react-app (Award 3 marks for successful project setup or zero) | 3 | ||
| Created two functional components: ToDoInput and ToDoList (Award 2 marks each component created or zero) | 4 | ||
| Implemented state management using React useState hook (Award 4 marks for correct use of useState or zero) | 4 | ||
| Sub-Total | 11 | ||
| TASK 2: Implement Interactive Features | |||
| Implemented add new to-do item functionality with input validation (Award 5 marks for working add function or zero) | 5 | ||
| Implemented delete to-do item functionality with button click (Award 5 marks for working delete function or zero) | 5 | ||
| Implemented toggle complete status with visual indication (e.g., strike-through) (Award 5 marks for correct toggle and styling or zero) | 5 | ||
| Sub-Total | 15 | ||
| TASK 3: User Interface and Styling | |||
| Applied CSS styling to center the application within an 800px wide container (Award 3 marks for correct container styling or zero) | 3 | ||
| Added heading 'My To-Do List' with appropriate font size and alignment (Award 2 marks for heading styling or zero) | 2 | ||
| Styled to-do items with clear visual cues for completed vs pending tasks (Award 4 marks for distinct styling or zero) | 4 | ||
| Sub-Total | 9 | ||
| PRODUCT CHECKLIST | |||
| To-do list application runs without errors and displays on a webpage approximately 800px wide (Award 4 marks for functional application or zero) | 4 | ||
| Add, delete, and toggle complete features work correctly and update UI dynamically (Award 6 marks for full feature functionality or zero) | 6 | ||
| UI is neatly styled with centered layout, heading, and item status clearly visible (Award 5 marks for polished UI or zero) | 5 | ||
| Sub-Total | 15 | ||
| GRAND TOTAL | 50 | ||
At the start of this chapter we promised you would be able to:
Tick each one you can genuinely do.
So, are you there yet?
You're competent when you can confidently do 50% or more of what this chapter promised.
Sign in to record how you're doing.