JavaScript - lesson 7 | HackIndia Skills

JavaScript - lesson 7 | HackIndia Skills | HackIndia

Example

Small project shape

For a project that shows public data, this shape is enough. Do not create extra folders just to look professional.

my-js-project/
  index.html
  README.md
  src/
    main.js
    api.js
    render.js
    helpers.js

Example

Export and import

Use named exports when a file has several useful functions. Use the exact exported name when importing.

// src/helpers.js
export function formatRupees(amount) {
  return `₹${Number(amount).toFixed(0)}`;
}

export function isValidItem(item) {
  return item && item.name && typeof item.price === 'number';
}

// src/render.js
import { formatRupees, isValidItem } from './helpers.js';

export function renderItems(items, container) {
  container.innerHTML = '';

  items.filter(isValidItem).forEach((item) => {
    const row = document.createElement('p');
    row.textContent = `${item.name}: ${formatRupees(item.price)}`;
    container.appendChild(row);
  });
}

Example

Connect in main

Your main.js should read like the story of the app. Get elements. Fetch data. Render it. Handle errors.

// src/api.js
export async function getProducts() {
  const response = await fetch('https://fakestoreapi.com/products?limit=5');

  if (!response.ok) {
    throw new Error('Could not load products');
  }

  return response.json();
}

// src/main.js
import { getProducts } from './api.js';
import { renderItems } from './render.js';

const app = document.querySelector('#app');

async function startApp() {
  try {
    const products = await getProducts();
    const items = products.map((product) => ({
      name: product.title,
      price: product.price * 83
    }));

    renderItems(items, app);
  } catch (error) {
    app.textContent = error.message;
  }
}

startApp();

Common mistake

Common module mistake

If you use import in the browser, your script tag must use type="module". Without it, the browser will not understand import and export.

Also include the .js extension in local imports, like './api.js'. This avoids path errors when running directly in the browser.

<script type="module" src="./src/main.js"></script>

Tip

Use AI carefully

You can ask AI to suggest a project structure. Then check if every file has a real job and if the imports match the exports.

Reject structures with too many folders for a small hackathon app. Simple and readable beats fancy.

Prompt:
I have a small browser JavaScript app that fetches data and renders a list.
Suggest a simple file structure using modules.
Keep it beginner-friendly and explain what each file does.

Modules And Project Shape

One idea

Why shape matters

Use simple folders

Small project shape

Export and import

Connect in main

Common module mistake

Use AI carefully

Do this now

Quick check