3.1 → 3.6, 3.8 · DOM & EVENTS
01. DOM Message Workshop
onclick, alert, variables, concatenation, DOM update, create heading, hide/show සහ text input.
Hello World!
JavaScript is ...
Your safe text preview appears here.
MTBT / Web Craftsmanship / Course Overview
BEGINNER → PROJECT
Complete interactive course • Sinhala + English
Learn JavaScript.
Learn JavaScript.
Build one complete page.
HTML + CSS + JavaScript examples 19 original files වලින් එකම integrated interactive webpage එකකට. Concepts එකින් එක ඉගෙනගෙන, live demo test කර, අවසානයේ MTBT College assessment එක complete කරන්න.
19
Original files preserved
19
Sinhala + English chapters
8+
Working JavaScript interactions
100
Assessment marks
Course learning path
Original file order එක අනුව modules හතරක්
01
Getting Started
3.1–3.2 · Inline onclick, alert(), script tag, page-load execution.
02
DOM Essentials
3.3–3.7 · HTML elements, events, innerHTML, styling, interactive circles.
03
Data & Decisions
3.8–3.11 · User input, variables, arrays, if/else, random numbers.
04
Loops, Functions & Final Project
3.12–3.16 + external files · Loops, functions, random color/shape timer, code organization.
Your course progress
Lesson quiz එක correct නම් chapter complete වෙයි
0 / 19 lessons0%
සෑම lesson එකකම theory, annotated code, full original source, quick quiz සහ mini challenge තියෙනවා. Quiz pass වීමෙන් progress එක track කරනවා.
Build together — one webpage
Live JavaScript Interaction Studio
Original snippets එකතු කරලා buttons, DOM text, shapes, array feed, input checks, guessing games සහ reaction timer දැනටමත් ක්‍රියාත්මක කර තිබෙනවා.
Chapter-by-chapter lessons
Theory කියවන්න → demo run කරන්න → full original code බලන්න → quick quiz එක complete කරන්න → mini task එක කරන්න.
Interactive JavaScript Webpage
මේ integrated webpage එක original file වල සියලුම meaningful behavior demonstrations එක තැනක එකතු කරනවා. Buttons click කර source concepts අත්හදා බලන්න. පහළින් code editor එකත් තියෙනවා.
3.7 · CSS + EVENTS
02. Disappearing Circles
Each colored circle click කර hide කරන්න. CSS selectors, border-radius, display property සහ shared event handler demonstration.
Click any circle to hide it.
3.10 · if / else
03. Magic Word Validator
Secret learning word: abracadabra (demo only; not real authentication).
Enter the word and press Check.
3.9 + 3.12 · ARRAYS & FOR LOOP
04. Dynamic Activity Feed
push(), splice(), console.log(), loops සහ rendering. Add/replace actions කරන්න.
Feed will render via for loop.
3.11, 3.13, 3.14 · RANDOM / WHILE / FUNCTION
05. Random Guessing Games
First user guesses random 0–5. Then computer uses a reusable function + while loop to guess your number.
Ready to play.
3.15 + 3.16 + style.css + script.js · CAPSTONE MINI PROJECT
06. Reaction Timer — random shapes
Random HEX colors, circle/square, size/position, Date.getTime(), setTimeout(), elapsed seconds සහ best score.
Press Start and click the shape as soon as it appears.
HANDS-ON · CODE EDITOR
07. HTML + CSS + JavaScript Live Code Lab
Code edit කර “Run code” click කරන්න. Sandboxed preview එකක result දකින්න. No internet or backend required.
Security note: preview runs inside a sandboxed iframe. Live code is student-authored and independent from the main page.
Original Source Code Archive
Uploaded files 19ම original content unchanged ලෙස මේ viewer එකේ තියෙනවා. එකක් select කර code කියවන්න, copy කරන්න. Annotated examples lessons තුළ තිබෙනවා; මෙහි original sources කිසිවක් rewrite කරලා නැහැ.
Selected source file
3.1.html
HTMLOriginal • Unchanged
Final Student Assessment
MTBT College · Web Craftsmanship Programme · HTML, CSS & JavaScript Unit. මේ lesson එකේ සියලුම key concepts apply කර independent practical webpage එකක් design & develop කළ යුතුයි.
Individual practical assessment • 100 marks
Build “My Interactive Student Hub”
ඔබේම modern responsive website එකක් හදන්න. එය ඔබේ student profile, dynamic activities, games, reaction timer සහ form validation එකක් ඇතුළත් full interactive web page එකක් විය යුතුයි. Provided sample project එක copy කිරීම වෙනුවට තමන්ගේම branding, UI සහ implementation පෙන්වන්න.
Deliverable: working websiteHTML + CSS + JavaScript100 Marks
Mandatory requirements
0 / 12 checked
Assessment rubric — 100 marks
| Criteria | Marks |
|---|---|
| Semantic HTML structure + accessible user interface | 10 |
| Responsive CSS, color, shape, layout and visual quality | 15 |
| DOM manipulation + event-driven interactions | 15 |
| Input validation, variables and if/else logic | 10 |
| Arrays, push(), splice(), list rendering and for loop | 15 |
| Math.random(), Math.floor(), while loop and reusable function | 10 |
| Reaction timer: random shapes, colors, delays and timing | 15 |
| Code organization, readability, testing and documentation | 10 |
| Total | 100 |
Submission instructions
Files to submit
index.html — page structure.
style.css — design and responsive styling.
script.js — functionality.
README.md — student details, features, run steps and testing notes.
All components must work in a regular browser without paid services or backend. External libraries optional, but must be disclosed in README.
Testing & viva
Student browser එකෙන් live demo කළ යුතුයි. Teacher විසින් DOM, arrays, conditional logic, loops, functions සහ timer calculation ගැන ප්‍රශ්න අසනු ලැබේ. Code copy කිරීමෙන් පමණක් marks ලැබෙන්නේ නැහැ.
Recommended time: 4–6 hours development + 10 minutes demonstration. මෙය teaching recommendation එකක්; official deadline එක college එකෙන් ලබාදිය යුතුයි.
Example acceptance tests
Mobile screen එකේ horizontal overflow නොවිය යුතුයි; typed HTML text execute නොවිය යුතුයි; empty input errors පෙන්විය යුතුයි; arrays UI refresh විය යුතුයි; guessing game 0–5 range එකේ තිබිය යුතුයි; reaction timer “Start → shape appears → click → measured time → next round” ලෙස ක්‍රියා කළ යුතුයි; stop/reset state මගින් pending timers cancel කළ යුතුයි.