DEV Community: Tejas Khanolkar

calculator using html,css and js

Tejas Khanolkar — Sun, 12 Oct 2025 19:05:35 +0000

Creating a Calculator Application using HTML, CSS, and JavaScript

In this guide, I’ll walk you through how I built a simple calculator web application using HTML, CSS, and JavaScript.

This project helped me understand how the Document Object Model (DOM) works, how to validate expressions using regular expressions (regex), and how to handle user input dynamically through JavaScript events.

🧰 Prerequisites

Before starting, you should have basic knowledge of:

HTML structure and elements
CSS for basic styling
JavaScript fundamentals (variables, functions, event listeners)

If you’re new to JavaScript, don’t worry — this project is simple and a great way to learn DOM manipulation and regex usage.

🧠 What You’ll Learn

By the end of this project, you’ll understand:

How to access and modify HTML elements using the DOM.
How to validate arithmetic expressions using regular expressions (regex).
How to respond to user interactions (button clicks).
How to evaluate user input dynamically using JavaScript’s eval() function.

🏗️ About the Project

This calculator is a simple, single-page web application that performs basic arithmetic operations such as addition, subtraction, multiplication, division, and modulus.

For the UI (User Interface), I used a pre-made HTML and CSS template.
My main focus was on writing the JavaScript logic to make the calculator actually work.

🌐 Understanding the DOM

The Document Object Model (DOM) represents your HTML page as a tree of elements that JavaScript can interact with.

Using the DOM, we can grab elements, update content, or change styles based on user actions.

Common DOM methods I used:

document.getElementById() – grabs an element by its unique ID.
document.querySelector() – grabs the first element matching a CSS selector.
document.querySelectorAll() – grabs all elements matching a CSS selector.

Example:

document.getElementById("display").innerText = "Hello World";

click here

Day 1: Defining Variables in JavaScript

Tejas Khanolkar — Sat, 13 Jul 2024 22:01:51 +0000

I’ve started Hitesh Sir’s JavaScript 30 days challenge, and today’s task was all about defining variables and understanding their types. If you haven't joined yet, you can check it out here. Hurry, it's free until July 14th!

Declaring Variables

In JavaScript, you can declare variables using three keywords: let, var, and const. Here’s a quick overview:

let: Allows you to declare a variable that can be changed later.
var: Similar to let, but has some differences in scope handling.
const: Used to declare variables that should not be changed.
Example:

let myVariable = 'Hello';
var myOldVariable = 'World';
const myConstant = 42;

When you use let or var, you can change the value of the variable. However, if you declare a variable with const, attempting to change its value will result in an error.

Variable Types

You can assign various types of values to variables:
Number: For numerical values.
String: For text values.
Boolean: For true/false values.
undefined: For variables that are declared but not yet assigned a value.
null: For variables explicitly set to have no value.
These are called primitive values.

Syntax
The syntax for declaring a variable is straightforward:

let/const/var variableName = value;

Think of a variable as a box, and the value as the content inside the box.

Key Points

typeof: This is an operator, not a function. It’s used to check the type of a variable.

console.log(typeof myVariable); // Output: string

console.table: Handy for displaying arrays and objects in a tabular format.

const fruits = ['Apple', 'Banana', 'Cherry'];
console.table(fruits);

const user = {
  name: 'John',
  age: 25,
  city: 'New York'
};
console.table(user);

Research Findings on Variable Declarations

I found an excellent resource on variable declarations at javascriptInfo. Here’s a summary of what I learned:

Difference between var and let: They are almost the same, but their scope handling is different. let is block-scoped while var is function-scoped.
Naming constants: Use uppercase letters for constant variable names if their values are already known. Otherwise, use camelCase.
Redeclaration: You cannot declare the same variable again using let or var, but you can change its value multiple times (except for const variables).
Naming conventions: Variable names should preferably be in camelCase (though it's not strictly required).
Declaring multiple variables: It's better to declare multiple variables on separate lines for readability.

let user = 'John';
let age = 25;
let message = 'Hello';

Instead of:

let user = 'John', age = 25, message = 'Hello';

Meaningful names: Always give meaningful names to your variables. For more detailed information, you can follow thisblog article.

Feel free to tweak this further as per your style. Happy coding!

Mastering Django: A Workflow Guide

Tejas Khanolkar — Tue, 09 Jul 2024 21:29:39 +0000

Understanding the Django Framework: A Deep Dive into its Working Flow

Django is a full-stack framework created in Python. To understand Django, it’s essential first to grasp the concept of a framework. A framework is the structure or skeleton of your application. It provides a basic foundation upon which you build your application. When developing an app using a framework, you must adhere to its rules and conventions. These rules are strict to ensure your application runs smoothly in a production environment. Official documentation for each framework is available to guide you in creating applications that comply with these rules.

Django has its own flow structure, which you must follow to inject your code correctly. Deviating from this structure can lead to errors and issues. Let’s delve into the main topic and understand the working flow of the Django framework.

Request Handling in Django

User Request: The process begins when a user sends a request to the server. In this context, the server is the Django server.
URL Resolver: The Django server catches the request and passes it to the URL resolver, a private file in Django that developers do not have access to. This file resolves the URL and forwards the request to the urls.py file, where the routes are mapped to views.

Understanding Views and MVT Architecture

URL Mapping: In the urls.py file, the URL resolver checks which route is mapped to which view and sends the request to the corresponding view function in the views.py file.
Views: In Django, a view is a function that takes a request as an argument and returns a response to the client. To fully understand views, you need to understand the MVT architecture that Django follows. MVT stands for Model, View, Template. In this architecture, the view acts as a communicator between models and templates.

Interaction with Models

Model Interaction: Based on the nature of the request, the view may interact with models. A model in Django represents a table in the database. While you could interact directly with the database, Django provides a way to interact with it through models, which offer an abstract layer. This abstraction allows you to change the database with a single setting without interrupting the rest of the code.

Returning the Response

Template Rendering: After interacting with the model, control returns to the view, which then searches for the appropriate template to return to the client. Templates in Django are specific folders containing HTML files. These HTML files are called templates because their content is dynamic, changing with the help of the Jinja template engine. Jinja allows you to inject logic into your HTML files, making them dynamic.
Response: After rendering the template, the controller (in this case, the view) prepares the final response and sends it back to the user (client).

Conclusion

This is the overall workflow of a Django application. From receiving a request to returning a response, Django’s structure ensures a streamlined process that adheres to its MVT architecture. By following this flow, developers can create robust and scalable web applications efficiently.