Learn JavaScript from Scratch

HTML, CSS and JavaScript roles

Think of a quiz card: HTML creates the card, CSS makes it look polished and JavaScript calculates the result.

<button id="checkBtn">Check readiness</button>

Real-life example: A button shows a score message only after a learner clicks it.

Why this matters: It helps you make the Interactive Readiness Quiz Card respond to the user.

How to understand this example: Read it from top to bottom. First notice the key word, then notice the value, element or result it controls.

Real browser interactions

JavaScript can change text, add classes, read input values, open menus and save simple browser-side data.

console.log("Readiness quiz loaded");

Why this matters: It helps you make the Interactive Readiness Quiz Card respond to the user.

How to understand this example: Read it from top to bottom. First notice the key word, then notice the value, element or result it controls.

let and const

Use const for values that should not be reassigned and let for values that can change. Beginners should avoid var while learning modern JavaScript.

const quizTitle = "Career readiness quick check";
let score = 0;

Real-life example: A quiz title stays the same, but the score changes as answers are checked.

Why this matters: It helps you make the Interactive Readiness Quiz Card respond to the user.

How to understand this example: Read it from top to bottom. First notice the key word, then notice the value, element or result it controls.

Strings, numbers, booleans, null and undefined

JavaScript values can be text, numbers, true/false values or empty placeholders.

const learnerName = "Aisha";
const totalQuestions = 5;
const hasFinished = false;
let savedResult = null;

Why this matters: It helps you make the Interactive Readiness Quiz Card respond to the user.

How to understand this example: Read it from top to bottom. First notice the key word, then notice the value, element or result it controls.

Arithmetic, comparison and logical operators

Use arithmetic for scores, comparisons for checks and logical operators when more than one condition matters.

const correctAnswers = 4;
const totalQuestions = 5;
const percentage = (correctAnswers / totalQuestions) * 100;
const passedPractice = percentage >= 60;

Real-life example: A readiness card calculates a percentage and checks whether it meets a practice threshold.

Why this matters: It helps you make the Interactive Readiness Quiz Card respond to the user.

How to understand this example: Read it from top to bottom. First notice the key word, then notice the value, element or result it controls.

Template literals

Template literals help place variables inside readable messages.

const message = `${learnerName}, your readiness score is ${percentage}%`;

Why this matters: It helps you make the Interactive Readiness Quiz Card respond to the user.

How to understand this example: Read it from top to bottom. First notice the key word, then notice the value, element or result it controls.

if, else if and else

Use bands to convert a number into a clear readiness message.

let status = "";

if (percentage >= 80) {
  status = "Ready to practise";
} else if (percentage >= 50) {
  status = "Building";
} else {
  status = "Beginner";
}

Real-life example: A learner sees "Beginner", "Building" or "Ready to practise" after checking answers.

Why this matters: It helps you make the Interactive Readiness Quiz Card respond to the user.

How to understand this example: Read it from top to bottom. First notice the key word, then notice the value, element or result it controls.

for and for...of loops

A for loop can use an index. A for...of loop reads each item directly.

const answerScores = [1, 0, 1, 1, 0];
let correct = 0;

for (const answerScore of answerScores) {
  correct += answerScore;
}

Why this matters: It helps you make the Interactive Readiness Quiz Card respond to the user.

How to understand this example: Read it from top to bottom. First notice the key word, then notice the value, element or result it controls.

while loops and infinite-loop warning

A while loop repeats while a condition is true. Make sure something changes inside the loop so it can stop.

let attempts = 0;

while (attempts < 3) {
  attempts += 1;
}

Why this matters: It helps you make the Interactive Readiness Quiz Card respond to the user.

How to understand this example: Read it from top to bottom. First notice the key word, then notice the value, element or result it controls.

Question lists and index positions

Arrays start at index 0. Use arrays for quiz questions, answer scores and selected skills.

const questions = [
  "What does JavaScript add to a page?",
  "Which keyword creates a value that should not change?"
];

Why this matters: It helps you make the Interactive Readiness Quiz Card respond to the user.

How to understand this example: Read it from top to bottom. First notice the key word, then notice the value, element or result it controls.

push, length, includes, forEach and map

Array methods help add items, count items and process values.

questions.push("What does querySelector do?");
console.log(questions.length);
questions.forEach((question) => console.log(question));

Why this matters: It helps you make the Interactive Readiness Quiz Card respond to the user.

How to understand this example: Read it from top to bottom. First notice the key word, then notice the value, element or result it controls.

Function declarations, parameters and return values

A parameter receives input. A return value sends the result back.

function getReadinessFeedback(percentage) {
  if (percentage >= 80) return "Ready to practise";
  if (percentage >= 50) return "Building";
  return "Beginner";
}

Real-life example: The same function can be reused whenever a quiz result changes.

Why this matters: It helps you make the Interactive Readiness Quiz Card respond to the user.

How to understand this example: Read it from top to bottom. First notice the key word, then notice the value, element or result it controls.

Learner profiles and quiz result objects

An object groups related values so the result is easier to pass around.

const quizResult = {
  learner: "Aisha",
  percentage: 80,
  status: "Ready to practise"
};

Why this matters: It helps you make the Interactive Readiness Quiz Card respond to the user.

How to understand this example: Read it from top to bottom. First notice the key word, then notice the value, element or result it controls.

DOM basics

The DOM means the browser's live map of the HTML page. JavaScript uses that map to find elements, read values and update what the learner sees.

Use querySelector, textContent, classList and input values to update the page.

const resultText = document.querySelector("#resultText");
resultText.textContent = "Ready to practise";

Why this matters: It helps you make the Interactive Readiness Quiz Card respond to the user.

How to understand this example: Read it from top to bottom. First notice the key word, then notice the value, element or result it controls.

Events

An event means something the user or browser does, such as a click, key press or input change. Events let JavaScript respond at the right time.

const checkButton = document.querySelector("#checkButton");

checkButton.addEventListener("click", function () {
  resultText.textContent = "Result calculated";
});

Why this matters: It helps you make the Interactive Readiness Quiz Card respond to the user.

How to understand this example: Read it from top to bottom. First notice the key word, then notice the value, element or result it controls.

localStorage basics

localStorage saves small browser-side values. It is not an account, backend or database.

localStorage.setItem("latestQuizResult", JSON.stringify(quizResult));

const saved = localStorage.getItem("latestQuizResult");
const parsedResult = JSON.parse(saved);

Why this matters: It helps you make the Interactive Readiness Quiz Card respond to the user.

How to understand this example: Read it from top to bottom. First notice the key word, then notice the value, element or result it controls.