COAL / WEB / 01
JavaScript for teens
The language beneath App Lab.
Open the syllabusUnited States · Grades 8 to 12 · Code.org App Lab
App Lab is where a lot of American students build their first real app: a quiz, a pet poll, a game with a timer, often as part of AP Computer Science Principles. It is friendly, it runs in the browser, and it lets you switch between blocks and JavaScript text. It also has a few rules that are easy to miss, and when one is broken the app does not crash with a clear message. A button simply does nothing, a score stays stuck at 1, or a total of 10 plus 5 comes out as 105. Every one of these has an explanation in the official App Lab documentation, and this page walks through them with small examples of our own.
Live teaching since 2020 · 10,000+ students · JavaScript and AP CSP
In short
Most App Lab bugs break one of four documented rules: an onEvent must come after the element it listens to, with an id typed exactly; variables that must keep their value are created once with var at the top, never inside onEvent; getText returns text, so use getNumber for arithmetic; and data callbacks finish later, so never put them in a loop. Modern Age Coders teaches this live online for US students, in a batch or one to one, and the first class is free.
Learn it with a teacher
Each is taught live, starting from the app your student already has open.

COAL / 01
The exam, the big ideas and how to plan a Create task that is your own.
Open the syllabus →
COAL / 02
The language under App Lab’s blocks, for real websites and games.
Open the syllabus →
COAL / 03
The next step after App Lab: apps for real phones.
Open the syllabus →What App Lab is
Before fixing anything, it helps to know what App Lab is designed for and what it expects of the device you use. This is what its makers publish.
| Point | What the page says |
|---|---|
| What it is | App Lab “is a programming environment where you can make simple apps right in the browser.” |
| Language | JavaScript, written “with either blocks or text” |
| Ages listed | 13 to 18, level Beginner |
| Devices listed | Laptop, Chromebook, Tablet; all modern browsers |
| Device advice in the editor | “App Lab works best on a desktop or laptop computer with a mouse and keyboard.” |
| Courses that use it | Intro to App Lab (grades 8 to 12) and Computer Science Principles (grades 9 to 12) |
If the site looks different from what your teacher showed you, that is not your imagination. The footer of the App Lab page, read on 17 October 2026, says the organization is now CodeAI and that "Code.org" is a former trademark of CodeAI.
App Lab itself still lives at studio.code.org, your projects are where they were, and the documentation pages still carry the familiar function names. We use the name Code.org here because that is what students search for.
It is JavaScript. The blocks are a visual way of writing the same JavaScript, and you can switch between the two views. That is why the skills transfer: an onEvent block is the same idea as an event listener on any website.
It also explains some surprises. JavaScript happily adds text and numbers together by joining them, which is the cause of one of the commonest App Lab bugs, covered below.
Sources: App Lab tool page and App Lab documentation, read 17 October 2026. Code.org’s support site returned an access error to our request, so no help-desk article is quoted here. We are not connected with Code.org or CodeAI.
Find your symptom
App Lab rarely stops with a red error for these bugs. It just behaves strangely. Match the behavior to a row, then read the rule behind it.
| What you see | The rule the docs give | What to check |
|---|---|---|
| Clicking a button does nothing | The UI element must be defined in your code before the matching onEvent() event handler | The element exists first, and the id in onEvent matches it exactly |
| An id is rejected or never matches | An id must begin with a letter, contain no spaces, and may contain letters, digits, - and _ | Rename ids like my button or 2ndScreen |
| A score or counter stays at 1 | Create variables once, at the top, outside any function or onEvent | Remove var from inside the handler |
| 10 plus 5 shows 105 | getText returns a string; with a number, arithmetic will not be possible | Use getNumber for numeric input |
| A screen’s buttons do nothing after switching screens | Only one screen can be visible at a time, and each has its own elements | Call setScreen with the right screen id; the default is screen1 |
| A sound will not play | The sound URL requires the full http:// prefix | Use a complete URL, or upload the file and pick it with Choose |
| Data from a table arrives late or out of order | createRecord and readRecords have callbacks and will not finish immediately | Use the data inside the callback; never put these calls in a loop |
| A warning that event is defined but not called | The documentation says you can ignore it | Nothing to fix |
The onEvent documentation suggests an order for every program: screen elements at the top, event handlers in the middle, other code and functions at the end. Following it prevents the first two rows of the table almost by itself.
If you build the screen in Design Mode, the elements already exist when the code runs, and the id dropdown in the onEvent block lists them, which removes typing mistakes.
The createRecord documentation adds a detail that confuses students sharing projects: data is only accessible to the app that created the table. A second app, even one you made yourself, cannot read it. To look at what your app has stored, the docs point to the View data button.
Column names matter too. The docs say the object property names must match the table’s column names, and that both are case sensitive, so score and Score are different columns.
Sources: App Lab documentation for onEvent, getNumber, setScreen, playSound and createRecord, read 17 October 2026.
Variables and events
This is the App Lab bug teachers see most, and the documentation has a page devoted to it. Here is the bug in a few lines, then the fix.
// ours: a score that never climbs past 1
onEvent("addButton", "click", function() {
var score = 0; // a new local score, every click
score = score + 1;
setText("scoreLabel", score);
});
// our check, with stand-in functions in Node:
// click 1: scoreLabel shows 1
// click 2: scoreLabel shows 1
// click 3: scoreLabel shows 1Ours. We checked the logic in Node 22 with stand-in versions of onEvent and setText that behave as the documentation describes; this was not a run inside App Lab. Each click creates a brand-new local score set to 0, adds 1, and throws it away.
// ours: the counter pattern, variable created once
var score = 0; // global: created once, at the top
onEvent("addButton", "click", function() {
score = score + 1; // no var here
setText("scoreLabel", score);
});
// click 1: 1 click 2: 2 click 3: 3Ours, same check. This is the shape the documentation calls the counter pattern with an event: the variable gets its first value once, and each event updates it.
The App Lab concept page on variable scope gives three rules: use var only once, create your variables at the top of your program, and create them outside any function or onEvent block.
It describes the broken version exactly: although it looks like one variable, there are actually two, one local and one global, both named count, and changing one has no effect on the other.
The documentation’s updateScreen pattern helps here too: keep the app’s state in global variables, have every event handler change those variables, then call one function, updateScreen, that redraws everything from them.
Students who adopt that shape write handlers that are three lines long and almost never have this bug again.
// ours: the user types 10 into priceInput
var a = getText("priceInput") + 5; // "10" + 5
console.log(a); // 105
var b = getNumber("priceInput") + 5; // 10 + 5
console.log(b); // 15Ours, same check in Node. The getNumber documentation warns that getText can read a text input too, but a number will be converted to a string and arithmetic will not be possible with the result. The console.log page gives the same lesson: "5" + "3" displays 53.
Sources: App Lab concepts, Debugging Variable Scope: Functions, Counter Patterns with Event and The updateScreen() Pattern; console.log. All read 17 October 2026.
Debugging routine
Our order, built on the documentation’s rules. It moves from the cheapest checks to the ones that take longer.
| Rule | Breaks it | Follows it |
|---|---|---|
| Labels cannot include spaces | width of rectangle | widthOfRectangle |
| Labels cannot begin with a number | 2morrow | tomorrow2 |
| Labels are case-sensitive | size and Size used as one variable | size used everywhere |
| Be consistent | Mixing camelCase and underscores | One style throughout |
The same routine works in any language with events, which is why it is the first thing we teach in JavaScript basics. For a wider method that also covers languages without events, see how to debug code.
AP Computer Science Principles
Many AP Computer Science Principles classes build the Create performance task in App Lab. College Board’s rules for that task are strict, and every App Lab student in an AP class should know them.
| Point | What College Board says |
|---|---|
| Create task deadline | Fri, Apr 30, 2027, 11:59 PM ET, submitted as final in the AP Digital Portfolio |
| End-of-course exam | Fri, May 14, 2027, in the Bluebook app |
| Section I | 70 multiple-choice questions, 120 minutes, 70% of score |
| Section II | The Create task and two written responses, 30% of score; 9 hours of in-class time for the task |
| Errors on the exam | Written Response 2(b), Errors and Testing, includes CRD-2.I.a: Identify the error, and CRD-2.I.b: Correct the error |
| Plagiarism | Using code or media created by someone else or with generative AI tools, without acknowledgment, scores 0 on the Create task, including the written responses |
| Generative AI | Permitted as supplementary resources for understanding coding principles, assisting in code development, and debugging; the student must review, understand and be able to explain any such code |
On exam day, students answer written questions about the code in their own Personalized Project Reference, including identifying and correcting an error. A student who fixed their own App Lab bugs during the 9 hours can answer those from experience.
A student whose code was fixed by someone else has nothing to draw on. That is the practical reason, beyond the rules, to do your own debugging.
We never write, fix or review a student’s Create task code, and we do not provide answers to any graded App Lab assignment. In class we teach the concepts with separate examples of our own, like the ones on this page, so the work stays the student’s.
We also do not point under-18 students to general AI chatbots whose terms are for adults. If a school allows AI help under College Board’s policy, that is between the student, the teacher and the tool’s own age rules.
Sources: AP Computer Science Principles Exam and the AP CSP Course and Exam Description (Guidelines for Completing the Performance Task), read 17 October 2026. AP is a trademark of College Board, which is not connected with us. For course choices, see AP CSP or AP CSA first.
From blocks to builder
Where students usually are when they first get stuck, and where they can head next.
| Stage | What it looks like |
|---|---|
| 1. Designing | Places buttons and labels in Design Mode, little code yet |
| 2. Reacting | Writes onEvent handlers that change text on screen |
| 3. Remembering | Keeps state in global variables and updates the screen from them |
| 4. Structuring | Uses functions, lists and stored data, and debugs with console.log |
An app that misbehaves without an error message is genuinely harder to fix than one that crashes. Being stuck here is normal.
Ask your child what the app should do and what it does instead. That gap is where the bug is.
Put var at the top, once. It fixes more App Lab bugs than anything else.
Log first, guess later. One console.log line beats ten minutes of staring.
The catalogue
Live, with one regular teacher, and in a group or one to one: whichever suits the student.
COAL / WEB / 01
The language beneath App Lab.
Open the syllabusCOAL / WEB / 02
Real phone apps with React Native.
Open the syllabusCOAL / WEB / 03
Pages that look the way you designed.
Open the syllabusCOAL / AP / 01
The course App Lab often belongs to.
Open the syllabusCOAL / AP / 02
The Java AP course that follows.
Open the syllabusCOAL / AP / 03
A second text language.
Open the syllabusCOAL / KID / 01
Apps from blocks, before text.
Open the syllabusCOAL / KID / 02
Events and variables in games.
Open the syllabusCOAL / KID / 03
First websites, step by step.
Open the syllabusHow lessons run
Weekdays or weekends, flexible: choose your batch, or for a very personalised plan choose 1-on-1 at your convenience, weekend mornings or weekdays.
Weekdays
After-school slots across Eastern to Pacific time.
Weekends
For students who prefer a quiet weekly hour.
1-on-1
Planned around project and exam dates.
One person who knows your progress.
Your App Lab project, seen live.
We teach with examples of our own.
We never touch graded code.
From home, wherever you live.
Fifteen to twenty, or just one student.
Student work
Built by learners who began with buttons and events too. The student labs page has more.

AI and ML
An AI nutrition coach that reads what you eat and works you toward a target.

AI and ML
A chatbot that answers mathematics and programming questions, built and deployed by a student.

AI and ML
An assistant that helps a young person recognise unsafe situations online.

Web app
A weather forecasting site with live conditions for any location.
Fees
App Lab is free to use, and our lessons are a separate choice. Teaching is paid one month at a time, with the fee shown in US dollars, no term contract, and nothing to pay for stopping once a month is done.
Free first class
USD 0
no card required
Group batch
USD 100
a month, billed in US dollars
One to one
USD 150
a month, billed in US dollars
What families say
Families in their own words, exactly as posted on Google.
★★★★★
"The one step solution for my son. Modern Age Coders make learning coding so simple that kids love it. The teachers explain complex concepts clearly with practical exercises and interactive content."
Ria Mukherjee
Parent
★★★★★
"Modern Age Coders has been a game-changer for me. I struggled to grasp IT concepts and coding before joining, but their classes transformed everything. I can now confidently write complex programs with ease."
Samriddha Mondal
Student
★★★★★
"One of the most wonderful education centres out there. Education is not limited to school syllabus but focuses on skill development."
Vansh Agarwal
Student
★★★★★
"My child Dhairya is really enjoying the Modern Age Coders classes. This is his first online class and he eagerly looks forward to it. I can already see his improvement, and the teachers are very cooperative."
Sonam Oswal
Parent of Dhairya
★★★★★
"Modern Age Coders have wonderful teachers who teach in a clear, easy and practical way. The teacher boosts students' confidence and inspires them to learn without hesitation."
Sonu Goyal
Parent
★★★★★
"I highly recommend this computer coding class! The teachers are incredibly knowledgeable and passionate about coding."
Ritu Kedia
Parent
Questions from students
The App Lab documentation says the UI element must be defined in your code before its onEvent handler, and the id must match exactly. Check the id letter by letter against Design Mode, and make sure the handler comes after the element.
Usually because var score = 0 is inside the onEvent handler, which creates a new variable on every click. The App Lab documentation says to use var only once, at the top of the program, outside any function or onEvent.
getText returns text, so the plus sign joins the two values together. The documentation says arithmetic is not possible with that result. Use getNumber to read numbers from a text input or slider.
JavaScript. App Lab lets you write it with either blocks or text and switch between them, according to the App Lab tool page.
Use playSound with the address of an MP3 file. The documentation says the sound URL needs the full http:// prefix, or you can upload your own file and choose it, in which case the file name is enough.
Use setScreen with the id of the screen you want. The documentation says the default screen id is screen1, and that only one screen can be visible at a time.
The App Lab tool page lists laptop, Chromebook and tablet. The editor itself recommends a desktop or laptop computer with a mouse and keyboard for building apps.
The footer of the App Lab page, read on 17 October 2026, says the organization is CodeAI and that Code.org is a former trademark of CodeAI. App Lab is still at studio.code.org.
We teach the concepts the task needs with our own examples, but we never write, fix or review Create task code. College Board says plagiarism, including unacknowledged AI-generated code, scores 0 on the Create task.
Weekdays or weekends, flexible. Choose your batch, or for a very personalised plan choose 1-on-1 at your convenience, weekend mornings or weekdays.
The first lesson is free. After that, lessons are paid month by month, and the fees section on this page shows the amount in US dollars.
Elsewhere on this site
More for US students who build apps at school.
All of our pages for American students.
Live preparation for AP Computer Science Principles.
Which AP course to take first.
The language App Lab is built on.
A general method for any bug.
What to build after App Lab.
Java cannot find symbol, decoded: real javac output, eight causes, numbered fixes.
BlueJ not working? Official fixes for install, VM errors, output and frozen runs.
Eclipse for Java students: install, run, read errors, fix Java version and memory.
Start here
Tell us what your app should do and what it does instead. The teacher picks the idea behind the gap and teaches it with an example, so you can go back and fix your own app.
To find out what a lesson is like, read how we teach; you can also browse every course with its syllabus.
WhatsApp us · +91 91233 66161 · connect@modernagecoders.com
We are an online school with teachers in India, so every lesson is a live video class rather than a visit to a local center. WhatsApp is how US families usually reach us fastest.
A priority demo is a full class of about 45 to 60 minutes. After the class the mentor sends a written skill report and a personal learning roadmap on WhatsApp. If you enrol, the demo fee is adjusted against your first month's fee. Share your demo Order ID with us on WhatsApp and we take it off.
Book a priority demo