Appearance

VanillaJS ​

VanillaJS runs using JSDOM.

Entry file ​

  • Script entry: The entry file for this template is index.js.
  • Browser entry: The browser entry file is index.html.
  • The index.html you must include the script tag, e.g. <script type="module" src="./index.js"></script>.
  • Add CSS via <link rel="stylesheet" href="./style.css"> if needed.

Version ​

Running on Node.js v20.0.0

Supported languages ​

Javascript

Testing framework ​

Jest

Special reminders and implementation details ​

js
import { createHeader } from './helloWorld';

describe('helloWorld.ts', () => {
  beforeEach(() => {
    document.documentElement.innerHTML = global.htmlContent;
  });

  test("Should create a h1 with text Hello World!", () => {
    createHeader();

    const header = document.querySelector('h1');

    expect(header.textContent.trim()).toEqual("Hello World!");
  });
});

Included libraries ​

How to debug ​

Debugging JavaScript code is a crucial skill for any developer. One of the simplest yet effective ways to debug is by using console.log() statements.

Steps to Debug Using Console Logs ​

  1. Identify the Problem Area Locate the section of your code where you suspect the problem might be.

  2. Insert console.log() Statements Add console.log() statements before and after the suspected problematic code to print out variable values and flow control.

  3. Check the Results Output of your tests

  4. Use Debug Icon in Preview Area: Click on the debug icon in the Preview area to check the console output or check your browser console.

  5. Analyze the Output Look at the values printed in the console to understand what's going wrong in your code. Adjust your code based on the findings and repeat as necessary.

Here’s an example of how to use console.log() for debugging:

javascript
function calculateSum(a, b) {
  console.log("calculateSum called with arguments:", a, b); // Log function call
  let sum = a + b;
  console.log("Sum after addition:", sum); // Log sum calculation
  return sum;
}

let result = calculateSum(5, 10);
console.log("Result of calculateSum:", result); // Log the result