DEV Community: Mohammad Talim

Building a Chain Calculator in JavaScript: Method Chaining for Clean Arithmetic

Mohammad Talim — Mon, 09 Jun 2025 15:42:01 +0000

In this post, we'll explore how to design a Chain Calculator—a calculator class that lets you perform a series of arithmetic operations using a fluent, chainable interface. This is a popular interview question and a great exercise to deepen your understanding of JavaScript classes and method chaining.

Why Method Chaining?

Method chaining is a programming pattern that allows multiple method calls in a single statement, improving code readability and succinctness. It's used widely in libraries like jQuery and Lodash, and it's a great tool for creating intuitive APIs. By building a chainable calculator, you'll learn how to design methods that return this, enabling seamless chaining of operations.

The Problem

Design a Chain Calculator in JavaScript that supports method chaining for basic arithmetic operations:

Addition
Subtraction
Multiplication
Division
Exponentiation (power)

The calculator should allow users to perform a sequence of operations in one line, like this:

const calc = new Calculator(10);
const result = calc.add(5).subtract(3).multiply(2).divide(3).getResult(); // 8

Requirements

Initial value: The calculator starts with a number passed to its constructor.
Chainable methods: Support these methods:
- add(number)
- subtract(number)
- multiply(number)
- divide(number)
- power(number)
All arguments are valid numbers.
Division by zero should throw an error.
The final result is retrieved with getResult().

Approach: Using Classes and Chaining

To achieve method chaining, each arithmetic method will:

Modify the calculator's internal state.
Return this so calls can be chained.

We'll use a class to encapsulate state and behavior. For error handling, division by zero will throw an exception.

Why Not a Functional Approach?

You might wonder: why not just use functions and closures? While possible, the class-based approach is more idiomatic for method chaining in JavaScript and is more readable, especially in interview settings.

Implementation: Step by Step

Let's build the Calculator class step by step.

1. The Skeleton

class Calculator {
  constructor(value) {
    this.result = value;
  }
}

2. Arithmetic Methods

Each method updates the result and returns this:

add(value) {
  this.result += value;
  return this;
}

subtract(value) {
  this.result -= value;
  return this;
}

multiply(value) {
  this.result *= value;
  return this;
}

3. Division with Error Handling

divide(value) {
  if (value === 0) {
    throw new Error("Division by zero is not allowed");
  }
  this.result /= value;
  return this;
}

4. Exponentiation

power(value) {
  this.result **= value;
  return this;
}

5. Retrieving the Result

getResult() {
  return this.result;
}

6. The Complete Class

class Calculator {
  constructor(value) {
    this.result = value;
  }

  add(value) {
    this.result += value;
    return this;
  }

  subtract(value) {
    this.result -= value;
    return this;
  }

  multiply(value) {
    this.result *= value;
    return this;
  }

  divide(value) {
    if (value === 0) {
      throw new Error("Division by zero is not allowed");
    }
    this.result /= value;
    return this;
  }

  power(value) {
    this.result **= value;
    return this;
  }

  getResult() {
    return this.result;
  }
}

Example Usage

Let's see this calculator in action:

const calc = new Calculator(10);
console.log(calc.add(5).subtract(3).multiply(2).divide(3).getResult()); // Output: 8

More Examples

Expression	Output	Explanation
`new Calculator(10).add(5).subtract(3).getResult()`	12	10 + 5 - 3 = 12
`new Calculator(2).multiply(5).power(2).getResult()`	100	(2 × 5)² = 10² = 100
`new Calculator(20).divide(4).add(2).multiply(3).getResult()`	21	20 ÷ 4 = 5, 5 + 2 = 7, 7 × 3 = 21
`new Calculator(5).divide(0).getResult()`	Error	Throws error for division by zero
`new Calculator(7).getResult()`	7	No operations; returns initial value

Time and Space Complexity

Time Complexity: O(1) per operation (each method does a simple calculation).
Space Complexity: O(1) (stores only a single number).

Key Takeaways

Always return this from methods to enable chaining.
Handle errors (like division by zero) gracefully.
This pattern—called the fluent interface—makes APIs easy and intuitive to use.

How to Visually Hide Elements Using CSS Clipping So That Screen Readers Can Still Read It

Mohammad Talim — Tue, 24 Oct 2023 02:46:16 +0000

What is CSS Clipping?

Simply put, CSS clipping allows you to hide parts of an element. You can define a rectangle that acts as a mask. Anything outside that mask get clipped or hidden.

The clip property lets you specify the coordinates of the clipping rectangle. The coordinates are relative to the element's top-left corner. For example:

clip: rect(10px 20px 30px 40px);

This hides everything except a rectangle with a top edge 10px down, a right edge 20px across, a bottom edge 30px down, and a left edge 40px across.
To hide the entire element, set clip: rect(0 0 0 0) This creates a zero-size rectangle that hides everything.

Why Hide Elements?

There are times you may want to hide something visually but keep it for screen readers.
For example:

Provide text alternative for images, icons, or unclear buttons.
Give extra instructions for screen reader users

CSS clipping hides content from sighted users but leaves it available for assistive technologies
Example
Here is HTML and CSS to visually hide an element

<div class="user-offline">
  John <span class="visually-hidden">(offline)</span>
</div>
<div class="user-online">
  Kyle <span class="visually-hidden">(online)</span>
</div>

.visually-hidden {
  position: absolute; 
  clip: rect(0 0 0 0);
  width: 1px; 
  height: 1px;
  overflow: hidden;
}

The visually-hidden class applies the clipping and other CSS to hide the element.

position: absolute removes it from document flow
clip: rect(0 0 0 0) hides the entire element
width: 1px; height: 1px makes it take up minimal space
overflow: hidden hides any overflowing content Screen readers can still read the hidden text.

Summary

Use CSS clipping to hide elements visually but keep them for screen readers
Set clip: rect(0 0 0 0) to hide the entire element
Combine with other properties like position and overflow
Useful for providing text alternatives or extra instructions

I hope this simple guide helps explain CSS clipping to visually hiding an element. Let me know, if you're still confused or have any other queries.

Open Source 101: A Short & Straight Guide for Beginner Programmers

Mohammad Talim — Wed, 04 Oct 2023 01:41:33 +0000

Introduction

Diving into the world of open-source software development is pretty awesome. It's a chance to grow your tech skills and work with a global crew of folks who are just as into it as you are.

Let me give you a glimpse into my open-source journey. I took on the #30DaysOpenSource challenge by Depth. Three days in and one big lesson later, I hit a major milestone: I got my first pull request merged. It might not sound like a big deal, but it was the start of an exciting journey into the open-source universe.

The pull request was just a small typo fix on a website's meta description. But this tiny change highlighted how teamwork can improve open-source projects. It was cool to see how fixing one little typo could make the project better and improve user experience.

Now that I've had a taste of success, I'm excited to share my journey with other programmers who might be thinking about dipping their toes into open-source development. In this blog post, we'll go over the basics of open source, why it's important, and how you can get started.

So, whether you're a newbie coder or a seasoned developer looking for a new challenge, this guide is your map to the fascinating world of open-source development. Let's jump in together and learn the key principles, tools, and strategies to become an open-source contributor.

The Power of Open Source

Open-source software is a powerful tool that promotes innovation, creativity, and collaboration. It's a platform that not only improves the quality of software but also fosters learning and skill development. As a programmer, you might be wondering why you should contribute to open source. There are many reasons for this.

Why Contribute to Open Source?

Boost your programming skills: Contributing to open source is like a continuous coding boot camp. You encounter diverse challenges, from debugging to optimizing code, which sharpen your programming skills. It's a hands-on approach to becoming a better developer.
Improve the software you use: Imagine having the power to enhance the software tools you rely on daily. By contributing to open source, you can make improvements, fix bugs, and add features to the applications you love. It's a way to customize your digital world.
Share your expertise: Everyone has unique skills and knowledge. By sharing your expertise through open source, you become part of a collective effort to create better software. Your contributions can help others learn and grow, just as you have.
Build your reputation: In the tech world, a strong reputation can open doors to exciting opportunities. Contributing to open source showcases your skills and commitment. Potential employers and collaborators often value this type of experience, which can boost your career.

Ways to Contribute to Open Source?

Contrary to popular belief, you don't need to be a coding expert to contribute to open source. Even if don't know how to code, you can still contribute by:

Fixing typos
Improving documentation
Answering questions about the project
Translating the project into other languages

Here are some helpful tips for making good contributions:

Follow the project's style and conventions
Seek feedback and learn from your mistakes
Write tests for your code and make sure they pass
Document your code and add comments where necessary
Be respectful and courteous to everyone in the community
Write clear and concise commit messages and pull descriptions

Essential Elements in Open Source Projects

Before contributing to any open-source project, ensure they have the following elements in their project:

A Licence
README file
Code of conduct
Contribution guidelines

These elements provide a framework for how the project operates and how contributors can participate.

Getting Started with Open Source

Starting with open source is simple. Follow these steps:

Find a project that interests you: The first step is finding a project that aligns with your interests and skill level. Explore GitHub, GitLab, or other platforms to discover projects that pique your curiosity.
Understand project culture and guidelines: Before diving in, take the time to understand the project's culture, code of conduct, and contribution guidelines. Familiarize yourself with how the community operates.
Fork, clone, and make changes: Once you've chosen a project, fork its repository on the platform. Then, clone the forked repository to your local machine. This allows you to work on the project's code locally.
Test locally and push your changes: Before submitting a contribution, thoroughly test your changes locally to ensure they work as intended. Once you're confident, push your changes to your forked repository.
Create a pull request: To propose your changes to the main project, create a pull request. This initiates a discussion and review process with the project maintainers.
Engage with project maintainers: Be open to feedback and collaborate with project maintainers to address any issues or suggestions. Effective communication is key to successful contributions.

Conclusion

Open source is a fantastic way to foster creativity, improve software quality, and encourage collaboration. It's a platform that allows you to enhance your skills and contribute to the software you use daily. So why wait? Find a project and Start your open-source journey today!

React + Tailwind CSS: The Perfect Frontend Stack for Beginners.

Mohammad Talim — Tue, 03 Oct 2023 11:12:16 +0000

Introduction

Throughout the past year, I have been actively learning Frontend Development. During this time, I have come across a multitude of tutorials, tools, frameworks, and technologies. I have spent countless hours watching videos on YouTube about the "Frontend Developer Roadmap".

While I initially found these resources helpful, I quickly realized that I was procrastinating by obsessing over the "perfect" stack to choose for my projects. In hindsight, I wish I had spent less time searching and more time learning and building actual projects. I hope others can learn from my experience and prioritize hands-on learning over endlessly searching for the "perfect" tools.

The Best Stack

Choosing the right front-end stack can be overwhelming for beginners. With so many frameworks and libraries to choose from, it can be hard to figure out which ones are the best fit for you.

So, without further ado, here's the straightforward answer to that question: "The best frontend stack for beginners is React + TailwindCSS", which I have already mentioned in the title.

I think that for three reasons:

You don't need to be a JavaScript or CSS expert. As long as you know the basics, you can start using these frameworks.
The ecosystem, tooling, and community around React are superior right now, with React Server Components, Next.js, Framer Motion, and more.
And the speed that you get with Tailwindcss is just unbeatable.

Now, let's explore them in some detail. If you don't like reading too much, I recommend you jump over to How to use React with TailwindCSS.

React.js

React, is a free and open-source front-end JavaScript library for building user interfaces based on components. It is maintained by Meta and a community of individual developers and companies. React can be used to develop single-page, mobile, or server-rendered applications with frameworks like Next.js.

Some of the key features of React include:

Declarative programming: React uses a declarative programming style, which means that you describe what you want to render on the screen, and React takes care of updating the DOM efficiently. This makes React code more readable and maintainable.
Component-based architecture: React applications are built up of reusable components. This makes it easy to create complex user interfaces and to share code between different parts of your application.
Virtual DOM: React uses a virtual DOM to efficiently update the real DOM. This makes React applications very fast and responsive.

React is one of the most popular front-end development libraries in the world. It is used by companies of all sizes, including Facebook, Twitter, and Netflix.

Here are some of the benefits of using React:

Increased performance and scalability: React applications are very fast and responsive, thanks to the use of a virtual DOM. This makes them ideal for building complex and interactive applications.
Improved code quality and maintainability: React's declarative programming style and component-based architecture make code more readable and maintainable. This can lead to a reduction in development time and costs.
Large community and ecosystem: React has a large and active community of developers. This means that there is a lot of support available, and there are many third-party libraries and tools that can be used with React.

Tailwind CSS

Tailwind CSS is a utility-first CSS framework that provides a set of low-level CSS classes for building custom user interfaces. It is designed to be flexible and customizable, so you can create the exact look and feel you want for your website or application.

Unlike other CSS frameworks, such as Bootstrap, Tailwind CSS does not provide any pre-built components. Instead, it provides a set of utility classes that can be used to build your components. This gives you complete control over the design and functionality of your components, and it allows you to create custom designs that are not possible with other CSS frameworks.

Tailwind CSS is lightweight and efficient. It does not add unnecessary CSS to your code, which can improve the performance of your website or application.

Here are some of the benefits of using Tailwind CSS:

Responsiveness: Tailwind CSS makes it very easy to use media queries in the utility classes to make the website responsive. For example, you can use the 'sm:' directive that will apply styles only on large-screen devices rather than mobile.
Flexibility and customization: Tailwind CSS is very flexible and customizable, allowing you to create exactly the look and feel you want for your website or application.
Performance: Tailwind CSS is very lightweight and efficient, and it does not add any unnecessary CSS to your code.
Scalability: Tailwind CSS is scalable and can be used to build websites and applications of all sizes.
Community: Tailwind CSS has a large and active community of developers, which means that there is a lot of support available and there are many third-party libraries and tools that can be used with Tailwind CSS.

Tailwind CSS is a popular choice for front-end developers of all levels and is used by companies of all sizes, including Google, Spotify, and Airbnb.

How to Use React with Tailwind CSS

Here is a simple code example of how to use React with Tailwind CSS:

// App.js
import React from "react";
import "./App.css";

const App = () => {
  return (
    <div className="container">
      <h1>Hello, world!</h1>
    </div>
  );
};

export default App;

/* App.css */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background-color: #ff4800;
}

h1 {
  font-size: 2rem;
  font-weight: bold;
}

This code will render a simple <h1> element with the text "Hello, world!" in the center of the page. The container class is used to set the maximum width of the page and to center it horizontally. The h1 class is used to set the font size and weight of the heading.

You can use Tailwind CSS to style any element on your page by adding the appropriate class names. For example, to add a blue background to the h1 element, you would add the bg-blue-500 class:

// App.js
import React from 'react';
import './App.css';

const App = () => {
  return (
    <div className="container">
      <h1 className="bg-blue-500">Hello, world!</h1>
    </div>
  );
};

export default App;

This will render the heading with a blue background.

You can also use Tailwind CSS to create responsive designs. For example, to make the heading larger on larger screens, you would add the md:text-3xl class:

// App.js
import React from 'react';
import './App.css';

const App = () => {
  return (
    <div className="container">
      <h1 className="bg-blue-500 md:text-3xl">Hello, world!</h1>
    </div>
  );
};

export default App;

This will render the heading with a font size of 1.5rem on small screens and 3rem on medium and large screens.

Conclusion

In conclusion, I believe that React + Tailwind CSS is the best front-end stack for beginners. It is easy to learn, fast, and flexible. If you're just starting with front-end development, I highly recommend using this stack.

Of course, this is my and so many other developers' opinion. There are many other great front-end stacks out there. But if you're looking for a stack that is easy to learn, fast, and flexible, then React + Tailwind CSS is a great option.

So, go ahead and give it a try! I'm sure you'll fall in love with it.

P.S. If you have any questions about React or Tailwind CSS, please feel free to leave a comment below. I'm always happy to help!

DEV Community: Mohammad Talim

Building a Chain Calculator in JavaScript: Method Chaining for Clean Arithmetic

Why Method Chaining?

The Problem

Requirements

Approach: Using Classes and Chaining

Why Not a Functional Approach?

Implementation: Step by Step

1. The Skeleton

2. Arithmetic Methods

3. Division with Error Handling

4. Exponentiation

5. Retrieving the Result

6. The Complete Class

Example Usage

More Examples

Time and Space Complexity

Key Takeaways

Further Reading

How to Visually Hide Elements Using CSS Clipping So That Screen Readers Can Still Read It

What is CSS Clipping?

Why Hide Elements?

Summary

Open Source 101: A Short & Straight Guide for Beginner Programmers

Introduction

The Power of Open Source

Why Contribute to Open Source?

Ways to Contribute to Open Source?

Essential Elements in Open Source Projects

Getting Started with Open Source

Conclusion

React + Tailwind CSS: The Perfect Frontend Stack for Beginners.

Introduction

The Best Stack

React.js

Tailwind CSS

How to Use React with Tailwind CSS

Conclusion