CodeBlanks Logo Icon CodeBlanks
Login Register

Summary - Modules

Build a simple two-file calculator module using named and default export/import.

Summary - Calculator module

In this summary you will build a two-file calculator module: calc.js exports the operations, main.js imports and uses them.

Inside calc.js the functions add and subtract are named exports and calculate is the default export. main.js pulls them in one import line and shows the result with console.log.

This mirrors how real projects wire files together.

Practice Write the calc.js module

Write a calc.js module: export add and subtract as named exports, and calculate as the default export. calculate takes an op and two numbers.

Starter code

script.js
// calc.js — calculator module

Sample solution

script.js
export function add(a, b) {
  return a + b;
}
export function subtract(a, b) {
  return a - b;
}
export default function calculate(op, a, b) {
  if (op === "+") return add(a, b);
  if (op === "-") return subtract(a, b);
  return 0;
}

main.js imports

The main.js file imports values from calc.js. You can combine named and default imports in one line.

import calculate, { add, subtract } from './calc.js';

Then you call calculate and log the result:

console.log(calculate("+", 5, 3));

This shows how modules find and use each other.

Practice Write the main.js import

In main.js, import add and subtract as named and calculate as default from ./calc.js. Then log the result of calculate("+", 5, 3) with console.log.

Starter code

script.js
// main.js — import from calc.js

Sample solution

script.js
import calculate, { add, subtract } from './calc.js';
console.log(calculate("+", 5, 3));

Questions and answers

Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.

1 Can a module have both named and default exports?

  • No, only one type
  • Yes, both together Correct answer
  • Only named
  • Only default

Explanation: A module can have both named and default exports.

2 Match the export/import types

Term Meaning
named export by name
default export one per module
named import with { }
default import no name needed

All lessons in Intermediate

1 Arrow functions

  1. Arrow function syntax
  2. Single-line and block body
  3. Parameters with arrows
  4. The this context
  5. Arrow vs function
  6. Summary - Arrow functions

2 Scope

  1. Global scope
  2. Function scope
  3. Block scope
  4. Variable shadowing
  5. Hoisting
  6. Summary - Scope

3 Closures

  1. What is a closure?
  2. Factory functions
  3. Immediately Invoked Function Expressions
  4. The module pattern
  5. Closure pitfalls
  6. Summary - Closures

4 DOM basics

  1. What is the DOM?
  2. getElementById
  3. querySelector
  4. querySelectorAll
  5. textContent and innerText
  6. Summary - DOM basics

5 DOM manipulation

  1. Creating elements with createElement
  2. appendChild and removeChild
  3. The classList API
  4. setAttribute and removeAttribute
  5. innerHTML and insertAdjacentHTML
  6. Summary - DOM manipulation

6 Events

  1. addEventListener basics
  2. Click events
  3. Mouse events
  4. Keyboard events
  5. The event object
  6. Summary - Events

7 Event handling

  1. Event bubbling
  2. stopPropagation
  3. Event delegation
  4. preventDefault
  5. once and passive options
  6. Summary - Event handling

8 Local storage

  1. localStorage basics
  2. sessionStorage
  3. Storing data with JSON
  4. Clearing storage
  5. Storage events
  6. Summary - Local storage

9 Project: To-do app

  1. Project: To-do app
  2. UI skeleton
  3. Adding a task
  4. Completing and deleting a task - DOM
  5. Project final - To-do DOM

10 Forms

  1. Accessing form elements
  2. Reading input values
  3. The form submit event
  4. Basic validation
  5. Checkbox and radio
  6. Summary - Forms

11 Timers

  1. setTimeout
  2. setInterval
  3. Stopping with clearInterval
  4. requestAnimationFrame
  5. Timer cleanup
  6. Summary - Timers

12 Callbacks

  1. Callback functions
  2. Asynchronous callbacks
  3. Error-first callbacks
  4. Callback hell
  5. Managing callbacks
  6. Summary - Callbacks

13 Promises

  1. What is a promise?
  2. Catching success with then
  3. Catching errors with catch
  4. Cleanup with finally
  5. Promise.all and Promise.race
  6. Summary - Promises

14 async/await

  1. async functions
  2. The await operator
  3. Async error handling
  4. Parallel await
  5. await expressions
  6. Summary - async/await

15 Fetch API

  1. fetch basics
  2. Reading JSON
  3. HTTP headers
  4. POST requests
  5. HTTP error handling
  6. Summary - Fetch API

16 Project: Weather panel

  1. Project: Weather panel
  2. UI and city input
  3. Fetching data with fetch
  4. Rendering data to the DOM
  5. Project final - Weather panel

17 Project: Gallery app

  1. Project: Gallery app
  2. Fetching the image list
  3. Building the gallery grid
  4. Large image view
  5. Project final - Gallery

18 Error handling

  1. Custom error classes
  2. Error propagation
  3. Multiple catch patterns
  4. Async error strategies
  5. Global error handling
  6. Summary - Error handling

19 JSON

  1. The JSON format
  2. JSON.parse
  3. JSON.stringify
  4. structuredClone
  5. JSON limitations
  6. Summary - JSON

20 Date and time

  1. Creating Date objects
  2. Reading date components
  3. Formatting dates
  4. Intl.DateTimeFormat
  5. Date arithmetic
  6. Summary - Date and time

21 RegExp basics

  1. RegExp syntax
  2. Character classes
  3. Quantifiers
  4. test and match
  5. replace and split with regex
  6. Summary - RegExp basics

22 Modules

  1. What is a module?
  2. Named export
  3. Default export
  4. The import statement
  5. Module vs script
  6. Summary - Modules

23 Intermediate final

  1. Challenge - DOM app
  2. Challenge - Async flow
  3. Challenge - Form and storage
  4. Challenge - Timers and animation
  5. Challenge - Modular structure