
[Vapor](https://vapor.codes/) is a popular server-side Swift web framework that allows you to build web applications using Swift. It provides a wide range of features, including routing, templating, authentication, and more.

Middleware plays a crucial role in web application development, allowing you to intercept requests and responses to add additional functionality. In this blog post, we will explore how to extract tokens from headers in Vapor, a popular server-side Swift web framework. We will provide detailed explanations, along with code snippets and examples, to guide you through the process.

### Prerequisites:

Before diving into the implementation, make sure you have the following prerequisites installed on your system:

- Swift: Vapor is built using the Swift programming language, so ensure you have a compatible Swift version installed.
- Vapor: Install Vapor from the [official website](https://docs.vapor.codes/install/macos/) or using [Homebrew](https://formulae.brew.sh/formula/vapor#default), or using any other method of your choice.


Let's begin by setting up a new Vapor project and creating the necessary middleware.

### Step 1: Setting Up a Vapor Project

To create a new Vapor project, open your terminal and run the following commands:

```bash
mkdir VaporProject
cd VaporProject
vapor new MyProject -n
cd MyProject
```

### Step 2: Creating the Middleware

Inside the `Sources/App/Middleware` directory, create a new file named `TokenMiddleware.swift` with the following code:

```swift
import Vapor

final class TokenMiddleware: Middleware {
    func respond(to request: Request, chainingTo next: Responder) -> EventLoopFuture<Response> {
        // Extract token from the request's headers
        guard let token = request.headers.first(name: "Authorization") else {
            let errorResponse = Response(status: .unauthorized)
            errorResponse.body = "Missing token in headers"
            return request.eventLoop.makeFailedFuture(Abort.unauthorized)
        }

        // Perform token validation or processing logic here
        // ...

        // Continue the request chain
        return next.respond(to: request)
    }
}
```

### Step 3: Registering the Middleware
Open the `Sources/App/configure.swift` file and add the following code inside the `configure(_:)` method:

```swift
app.middleware.use(TokenMiddleware())
```


### Step 4: Testing the Middleware
To test the middleware, we will create a sample route that requires token authentication. Open the `Sources/App/routes.swift` file and replace the existing code with the following:

```swift
import Vapor

func routes(_ app: Application) throws {
    app.get("protected") { req in
        return "This is a protected route"
    }
}

```

### Step 5: Starting the Server
Now that we have set up the middleware and a protected route, let's start the Vapor server. Open your terminal and run the following command:

```bash
vapor run
```

Congratulations! Your Vapor server is now running and ready to accept requests.

### Testing the Middleware:
To test the token extraction middleware, we can make a request to the protected route by including the token in the request headers. You can use tools like cURL or Postman for this purpose.

> Example cURL Request:


```bash
curl -X GET http://localhost:8080/protected -H "Authorization: Bearer YOUR_TOKEN_HERE"
```

> Example Postman Request:

Set the request URL to `http://localhost:8080/protected`.

Go to the `"Headers"` tab and add a new header with the key `"Authorization"` and the value `"Bearer YOUR_TOKEN_HERE"`.

Click the `"Send"` button to make the request.

If the token extraction is successful, you should receive a response with the message `"This is a protected route"`. 

If the token is missing or invalid, you will receive a response with an `"Unauthorized"` status and an appropriate error message.


### Conclusion:

In this post, we explored how to extract tokens from headers in Vapor middleware. 

By following the steps outlined above, you can implement token-based authentication and perform necessary validation or processing logic. Middleware provides a powerful mechanism to intercept requests and add additional functionality to your Vapor applications, making it an essential tool for building secure and robust web applications.

Remember to consider security best practices, such as token encryption and revocation, when implementing authentication systems in production environments. 

Thank you for reading this far.

Extracting Tokens from Headers in Middleware using Vapor


Search functionality is a common feature in many apps, and SwiftUI makes it easy to add search functionality to a list with the `searchable` modifier. 

With just a few lines of code, we can allow users to search through a list of items and find what they’re looking for quickly and easily.


In this post, we’ll create a simple list of fruits and add search functionality to it using the `searchable` modifier. We’ll also take a look at how the `searchable` modifier works behind the scenes.

## How `searchable` Works

The `searchable` modifier is used to add search functionality to a view in SwiftUI. When applied to a view, it adds a search bar to the top of the view that allows users to enter a search query.

Under the hood, the `searchable` modifier creates a `UISearchController` on iOS and a `NSSearchField` on macOS. These search controllers are responsible for handling user input and displaying search results.

When the user enters a search query, the `searchable` modifier calls the `onSubmit(of:search:)` closure, passing in the search query. This closure is responsible for performing the search and updating the view with the search results.

The `searchable` modifier also takes an optional `placement` parameter, which determines where the search bar is displayed. By default, the search bar is displayed at the top of the view, but it can also be displayed in the navigation bar or as a separate view.

Now that we have an understanding of how the `searchable` modifier works, let’s take a look at how to use it in our SwiftUI app.

## Adding Search Functionality to a List

First, let’s create a list of fruits to search through:

```swift
struct Fruit: Identifiable {
    let id = UUID()
    let name: String
}

let fruits = [
    Fruit(name: "Apple"),
    Fruit(name: "Banana"),
    Fruit(name: "Cherry"),
    Fruit(name: "Grape"),
    Fruit(name: "Kiwi"),
    Fruit(name: "Mango"),
    Fruit(name: "Orange"),
    Fruit(name: "Pineapple"),
    Fruit(name: "Strawberry"),
    Fruit(name: "Watermelon")
]
```

Next, let’s create a `List` view to display the fruits:

```swift
struct ContentView: View {
    var body: some View {
        NavigationView {
            List(fruits) { fruit in
                Text(fruit.name)
            }
            .navigationTitle("Fruits")
        }
    }
}
```

This will display a simple list of fruits in a navigation view.

To add search functionality, we need to apply the `searchable` modifier to the `List` view:

```swift
struct ContentView: View {
    @State private var searchText = ""

    var body: some View {
        NavigationView {
            List(fruits.filter { searchText.isEmpty ? true : $0.name.localizedCaseInsensitiveContains(searchText) }) { fruit in
                Text(fruit.name)
            }
            .navigationTitle("Fruits")
            .searchable(text: $searchText)
        }
    }
}
```

Here, we’ve added a `@State` variable called `searchText` to hold the search query. We’re also using the `filter` method on the `fruits` array to filter the list based on the search query. We’re using `localizedCaseInsensitiveContains` to perform a case-insensitive search.

Finally, we’re applying the `searchable` modifier to the `List` view and passing in the `searchText` variable as the `text` parameter. This will display a search bar at the top of the view that allows users to enter a search query.


```swift
struct ContentView: View {
    @State private var searchText = ""

    var body: some View {
        NavigationView {
            List(fruits.filter { searchText.isEmpty ? true : $0.name.localizedCaseInsensitiveContains(searchText) }) { fruit in
                Text(fruit.name)
            }
            .navigationTitle("Fruits")
            .searchable(text: $searchText)
        }
    }
}
```

And that’s it! With just a few lines of code, we’ve added search functionality to our list of fruits in SwiftUI.

## Conclusion
In this tutorial, we saw how to add search functionality to a list in SwiftUI using the `searchable` modifier. 

![Searchable in SwiftUI](https://res.cloudinary.com/dhfhotfqs/image/upload/v1683951750/searchablegid.gif)

By adding search functionality to our app, we can make it easier for users to find what they’re looking for and improve the overall user experience. 

Thank you for reading this far!

Easy Searching in SwiftUI with Searchable


One of the key features of SwiftUI is the `@Binding` property wrapper, which allows for two-way communication between views and their parent views.

In this blog post, we will explore `@Binding` in SwiftUI and how it can be used to create dynamic and interactive user interfaces.

## What is `@Binding`?

`@Binding` is a property wrapper in SwiftUI that creates a two-way connection between a property defined in a child view and a property defined in its parent view. This means that changes made to the child view’s property will be reflected in the parent view’s property, and vice versa.

Here is an example of how `@Binding` can be used to create a simple counter app:

```swift
struct ContentView: View {
    @State private var count = 0
    
    var body: some View {
        VStack {
            Text("\(count)")
                .font(.largeTitle)
            CounterView(count: $count)
        }
    }
}

struct CounterView: View {
    @Binding var count: Int
    
    var body: some View {
        HStack {
            Button("-") {
                count -= 1
            }
            Button("+") {
                count += 1
            }
        }
    }
}
```

In the above example, the `ContentView` defines a `@State` property called `count`, which is initially set to 0. It then creates a `CounterView` and passes the count property using the $ prefix to create a binding.

The `CounterView` defines a `@Binding` property called `count`, which is used to display the current count and to update it when the user taps the “+” or “-” buttons.


## How @Binding works

When a child view is created with a `@Binding` property, SwiftUI automatically creates a binding between the child view’s property and the parent view’s property. This binding is essentially a reference to the parent view’s property, which allows the child view to read and modify its value.

When the child view modifies the `@Binding` property, SwiftUI updates the parent view’s property with the new value. This triggers a re-render of the parent view, which in turn updates the child view with the latest value of the `@Binding` property.

## Best practices for using @Binding

Here are some best practices for using `@Binding` in your SwiftUI apps:

- Use `@Binding` sparingly: While `@Binding` can be a powerful tool for creating dynamic and interactive user interfaces, it can also make your code more complex and harder to reason about. Use `@Binding` only when it’s necessary to create a two-way connection between views.

- Use descriptive names for `@Binding` properties: When creating a `@Binding` property, use a descriptive name that reflects the purpose of the property. This makes it easier to understand the role of the property in the context of the view hierarchy.

- Avoid circular dependencies: When using `@Binding`, be careful not to create circular dependencies between views. This can lead to infinite loops and crashes.

- Use `@State` or `@ObservedObject` instead of `@Binding` when appropriate: In some cases, it may be more appropriate to use `@State` or `@ObservedObject` instead of `@Binding`. For example, if the property you want to pass to a child view is only used for display purposes and not for updating the parent view, then it’s better to use `@State` or `@ObservedObject`.

## Conclusion

`@Binding` is a powerful property wrapper in SwiftUI that allows for two-way communication between views and their parent views. 

It’s a great tool for creating dynamic and interactive user interfaces, but it should be used sparingly and with care. 

By following best practices and using `@Binding` appropriately, you can create SwiftUI apps that are both elegant and easy to reason about.

Thank you for reading this far.

Understanding @Binding in SwiftUI


If you’ve ever used Instagram, you’ve likely encountered the pinch-to-zoom effect used to enlarge images. 
This effect allows users to zoom in on details and get a closer look at photos. 

In this post, let's have a look on how to create a similar zoom effect in SwiftUI.

Before getting started, if you need to check out the Instagram's feature we are trying to replicate, you can check out a sample video below:

![Instagram Sample](/assets/instagram-sample.gif)


## Creating a new SwiftUI project and adding an image asset: 
You should be already familiar with the process of creating a new SwiftUI project and importing image assets if you are learning about gestures in SwiftUI. 

A quick guide to creating a new SwiftUI project is given below.

- Open Xcode and create a new SwiftUI project.
- Select `App` as the project template under iOS section and click on `Next`.
- Give your project a name and click on `Next`. Make sure to select `SwiftUI` as the user interface.
- Save the project in a location of your choice and click on `Create`.

![Creating a new SwiftUI project](/assets/new-project-sample.png)

- For an image as a placeholder, import any image of your choice by dragging and dropping the image file into the assets folder of your project in the project navigator of Xcode.

In my project, I have used an image of a car as a placeholder ([Credits: Erik Mclean on Unsplash</a>
  ](https://unsplash.com/photos/ZRns2R5azu0)).

## Add a new `Image` view to the `ContentView` struct
Inside the `ContentView` struct present in the template, create a new `Image` view. 

Set the image to be resizable and scaled to fit the available space.

```swift
struct ContentView: View {
    var body: some View {
        Image("car")
            .resizable()
            .scaledToFit()
    }
}
```
## Add a `scaleEffect` modifier to the ﻿Image view

Apply a `scaleEffect` modifier to the `Image` view, which will be used to adjust the scale of the image based on the user’s pinch gesture. Also, create a new private variable `scale` of type `CGFloat` and set it to `1.0` so as to set the initial scale of the image to `1.0` and track the scale of the image as the user performs the pinch gesture and store the changes in here.


```swift
struct ContentView: View {
    @State private var scale: CGFloat = 1.0
    
    var body: some View {
        Image("car")
            .resizable()
            .scaledToFit()
            .scaleEffect(scale)
    }
}
```

## Adding a `MagnificationGesture` to the `Image` view
Attach a `MagnificationGesture` to the `Image` view using the `gesture` modifier. When the user changes the magnification value, update the `scale` property using the `onChanged` closure.

```swift
struct ContentView: View {
    @State private var scale: CGFloat = 1.0
    
    var body: some View {
        Image("car")
            .resizable()
            .scaledToFit()
            .scaleEffect(scale)
            .gesture(MagnificationGesture()
                        .onChanged { value in
                            self.scale = value.magnitude
                        }
            )
    }
}
```

## Add an `onEnded` closure to the `MagnificationGesture`

Add an `onEnded` closure to the `MagnificationGesture` that sets the `scale` property back to its original value of `1.0` when the user releases the pinch gesture. This will cause the image view to return to its original size and position.

```swift
struct ContentView: View {
    @State private var scale: CGFloat = 1.0
    
    var body: some View {
        Image("car")
            .resizable()
            .scaledToFit()
            .scaleEffect(scale)
            .gesture(MagnificationGesture()
                        .onChanged { value in
                            self.scale = value.magnitude
                        }
                        .onEnded { _ in
                            self.scale = 1.0
                        }
            )
    }
}
```

## Add a conditional statement to the `onChanged` closure
Add a conditional statement to the `onChanged` closure of the `MagnificationGesture` that checks if the magnification value is less than `1.0`. If it is, set the `scale` property to `1.0`, which will cause the image view to return to its original size. If the magnification value is greater than or equal to `1.0`, set the `scale` property to the magnitude of the pinch gesture, as before.

This step is crucial because if the user performs a pinch gesture that is less than `1.0`, the image view will shrink to a size smaller than the original image. This is not the desired behavior, so we need to add a conditional statement to prevent this from happening.

```swift
struct ContentView: View {
    @State private var scale: CGFloat = 1.0
    
    var body: some View {
        Image("car")
            .resizable()
            .scaledToFit()
            .scaleEffect(scale)
            .gesture(MagnificationGesture()
                        .onChanged { value in
                            if value.magnitude < 1.0 {
                                self.scale = 1.0
                            } else {
                                self.scale = value.magnitude
                            }
                        }
                        .onEnded { _ in
                            self.scale = 1.0
                        }
            )
    }
}

```

## Some final touches:

Wrap the `Image` in a `VStack` and add a `padding` modifier to the `VStack` to add some space between the edges of the screen and the image view.

```swift
struct ContentView: View {
    @State private var scale: CGFloat = 1.0
    
    var body: some View {
        VStack {
            Image("car")
                .resizable()
                .scaledToFit()
                .scaleEffect(scale)
                .gesture(MagnificationGesture()
                            .onChanged { value in
                                if value.magnitude < 1.0 {
                                    self.scale = 1.0
                                } else {
                                    self.scale = value.magnitude
                                }
                            }
                            .onEnded { _ in
                                self.scale = 1.0
                            }
                )
        }
        .padding()
    }
}
```
## Final result:

![Instagram-like zoom effect in SwiftUI](/assets/final-result.gif)

## Conclusion

Great, you’ve just created an Instagram-like zoom effect in SwiftUI. We’ve learnt about creating this using the `MagnificationGesture` and `scaleEffect` modifiers. 

With just a few lines of code, you have added interactivity and a touch of elegance to your SwiftUI app. 

Try experimenting with different images and gestures to create your own unique effects.

I hope you found this tutorial helpful.

Thank you for reading this far.

Creating an Instagram-Like Zoom Effect in SwiftUI


Welcome to my post about `swiftup`, a command-line tool written in Swift that allows you to check the reachability of URLs in all the Swift files and packages within a directory, including any nested directories. 

This tool is useful for verifying that the URLs referenced in your code are valid and accessible, ensuring that your projects are using reliable resources.

## Installation

Before you can use `swiftup`, you'll need to install it on your machine. Here's what you'll need to get started:

### Prerequisites:

- Swift: Make sure you have the latest version of Swift installed on your machine. You can check this by running swift --version in the terminal.

### Installation Steps:

Clone the repository: 
```
git clone https://github.com/ishaanbedi/swiftup.git
```

Navigate to the repository directory: 
```
cd swiftup
```
Compile and install the tool: 
```
swift build -c release
```
Move the binary file to a directory included in the system path: 
```
mv .build/release/swiftup /usr/local/bin/swiftup
```
On macOS, the `/usr/local/bin directory` is typically included in the default system path. On Linux, the recommended directory for system executables is `/usr/bin`.

After moving the binary file to a directory that is included in your system path, you can use the swiftup command from any directory on your system. 
You may need to restart your terminal or log out and log back in for the changes to take effect.

Install using a single command

To install `swiftup`, compile the tool, and include it in the system path in a single command, run the following:

```
git clone https://github.com/ishaanbedi/swiftup.git && cd swiftup && swift build -c release;
sudo mv .build/release/swiftup /usr/local/bin/swiftup
```
To fix the `permission denied` error when executing the mv command, I've combined it with `sudo` command to give the installation process superuser privileges. 
If prompted for a password at this step, please enter the password for your user account on the machine.

On macOS, this will clone the repository, navigate to the repository directory, compile and install the tool, and move the binary file to the `/usr/local/bin directory`, which is included in the default system path. On Linux, the command will be similar, but the binary file will be moved to the `/usr/bin` directory instead.

### Usage

Using `swiftup` is simple. Just run the command with any of the following optional arguments:

```
swiftup [-s START] [-h] [-v]
```
- -s START, --start START
- -h, --help: Show the help message and exit
- -v, --verbose: Enable verbose output

### Examples:
To check the reachability of URLs in all files in the current directory: `swiftup`
To check the reachability of URLs in all files in a specific directory: `swiftup -s /path/to/directory`

Enabling verbose output will cause the tool to print more detailed information about the URLs it is checking and their reachability status. This can be helpful if you are trying to troubleshoot why a particular URL is not being reached, or if you simply want more insight into how the tool is functioning. To enable verbose output, you can use the `-v` or `--verbose` flag when running the swiftup command.

For example: `swiftup -v`

### Note

Please note that "swiftup" is a tool that only checks the reachability of URLs and does not validate their content or replace any occurrences of the URL. It is the responsibility of the end-user developer or user to ensure that any unreachable URLs reported by the tool are corrected and point to the intended resources. 

`swiftup` simply provides a way to identify and flag any URLs that are not reachable, and it is up to the user to take the necessary steps to address any issues.

### License

This project is licensed under the **MIT** license.

I hope you find `swiftup` to be a useful tool for your projects. 

Thank you for reading this far.

swiftup: A Swift Command-Line Tool for Checking the Reachability of URLs


Swiflicense is a command line tool for generating a license for your software right from the command line interface. This tool is written in Swift and allows you to quickly and easily generate a license for your software, without having to leave the command line.

To install Swiflicense, you will need to have Swift installed on your system. Once you have Swift installed, you can clone the Swiflicense repository and compile the tool by running the following commands:

```
git clone https://github.com/ishaanbedi/swiflicense.git
cd swiflicense
swift build -c release
```
After the tool has been compiled, you can move the binary file to a directory included in your system path, such as `/usr/local/bin` on macOS or `/usr/bin` on Linux. 

To do this, you can use the `mv` command, as shown below:

```
mv .build/release/swiflicense /usr/local/bin/swiflicense
```
Alternatively, you can install Swiflicense using a single command that will clone the repository, compile the tool, and move the binary file to the appropriate directory all in one step:

```
git clone https://github.com/ishaanbedi/swiflicense.git && cd swiflicense && swift build -c release;
sudo mv .build/release/swiflicense /usr/local/bin/swiflicense
```

Once Swiflicense has been installed, you can use the swiflicense command to generate a license for your software. 

The swiflicense command takes three options: -n for the name to include in the license, `-y` for the year to include in the license, and `-t` for the type of license to generate. 

For example, to generate an `MIT` license for the year `2020` with your name, you can run the following command:

```
swiflicense -n "Ishaan Bedi" -y 2020 -t mit
```
Swiflicense supports the following license types:

 - unlicense
 - boost
 - mit
 - apache
 - mozilla
 - gpl

To see a full list of available options and usage information for Swiflicense, you can run the `swiflicense -h` command.

Checkout Swiflicense at [GitHub](https://github.com/ishaanbedi/swiflicense).

In conclusion, Swiflicense is a convenient and easy-to-use command line tool for generating licenses for your software. 

With Swiflicense, you can quickly and easily generate a license right from the command line, without having to leave your terminal.

Thank you for reading this far.





Swiflicense: The Swift Way to Generate Licenses for your software


If you're working with dates in JavaScript, you may have found that the built-in Date object doesn't always provide the formatting options you need. This is especially true if the dates you're working with are coming from a database, and are not in the format expected by the Date object. 

In this case, you'll need to use a function like `formatDate()` to convert the date into a format that the Date object can understand. 

In this blog post, we'll take a closer look at how the `formatDate()` function works, and how you can use it to convert dates from a database into the proper format.

To understand how this function works, let's take a closer look at the code:

```
const formatDate = (date) => {
  var inputDate = date;
  var dateParts = inputDate.split("-");
  var date = new Date(dateParts[0], dateParts[1] - 1, dateParts[2]);
  var ordinalSuffixes = ["th", "st", "nd", "rd"];
  var day = date.getDate();
  var suffix = "";
  if (day % 10 === 1 && day !== 11) {
    suffix = ordinalSuffixes[1];
  } else if (day % 10 === 2 && day !== 12) {
    suffix = ordinalSuffixes[2];
  } else if (day % 10 === 3 && day !== 13) {
    suffix = ordinalSuffixes[3];
  } else {
    suffix = ordinalSuffixes[0];
  }
  var monthNames = [
    "January",
    "February",
    "March",
    "April",
    "May",
    "June",
    "July",
    "August",
    "September",
    "October",
    "November",
    "December",
  ];
  var month = monthNames[date.getMonth()];
  var year = date.getFullYear();
  var outputDate = day + suffix + " " + month + " " + year;
  return outputDate;
};

```

The `formatDate` function is a useful tool for formatting a date in the form of a string. The function takes a date in the format of a string as an input, with the date formatted as ``YYYY-MM-DD``. It then splits the date string into its individual parts: the year, the month, and the day. These parts are used to create a new Date object, which is used to extract the day, month, and year in a format that can be manipulated.

Next, the function determines the ordinal suffix for the day. For example, if the day is the 1st, it would be "st", if it is the 2nd, it would be "nd", and so on. 
The ordinal suffix is determined by using the modulo operator to find the remainder of the day divided by 10. If the remainder is 1, the suffix is "st", if it is 2, the suffix is "nd", and so on.

Once the ordinal suffix has been determined, the function uses an array of month names to convert the numerical value of the month into its corresponding name. For example, if the month is 1, the name would be "January", if it is 2, the name would be "February", and so on.

Finally, the function combines the day, month, year, and ordinal suffix into a single string, and returns this string as the output. This string is formatted as "day + ordinal suffix + month + year". For example, if the input date is "2022-12-11", the output would be "11th December 2022".

The `formatDate` function is a useful and convenient way to format a date string into a more readable and presentable form. It is simple to use, and can easily be incorporated into any project that requires the manipulation of dates.


In conclusion, the `formatDate` function is a useful tool for formatting dates in JavaScript. It allows you to take a date in string format and convert it into a more human-readable form. Whether you're working with dates from a database or simply want to present dates in a more user-friendly way, the formatDate function is a simple and convenient solution. Give it a try in your next JavaScript project and see the benefits for yourself.



Thank you for reading this far.


Snippet for formatting dates in JavaScript


A few months back, when my coding instructor started teaching the topic _' Approaching Solution Of A Problem '_, in the JavaScript data-structures track, he introduced _George Pólya's methods of problem-solving_.

Let's Begin

As said, it's basically the step-by-step roadmap of approaching the solution of a problem, not limited to just coding problems, but to every aspect of life. And over these months, I've started applying the same basic principle of problem-solving, and trust me, it works fantastically!

This method is extracted from George Pólya's **How to Solve It** (1945).

In this article, I'll try to break down this glorious method of problem-solving.

Basically, the method is divided into four steps:

1. Understanding the problem statement.
2. Making a structured plan.
3. Carrying out the plan.
4. Looking back and improving the solution.

That's it. These are the magical steps to tackle any kind of problem.

Let's further dive and understand them in brief.

**First principle**: _Understanding the problem statement._

This surely seems obvious at a first glance, but when I analyze myself before I used to apply this technique, most of the time, I didn't understand the hidden aim behind the statement and jumping straight toward writing the code was never a wise choice.

Understanding the coding problem is the most difficult and important stage for finding out the appropriate final result for the problem. Understanding what the instance demands from us and how we can break down the same into tiny parts helps a lot.

After I've read the problem statement and I feel I've understood it, the mind algorithm I follow is :

- Finding out is there anything more that can be extracted from the problem? Re-analyzing again the question always brings something more to ease my work.
- Can I break down the same into very easy and simplified words that I can explain to a 5-year-old? Sometimes, translating the question to my L1 is also very helpful.
- Can I visualize a clear picture or outcome of what is being demanded from me?
- Can I predict the output or result of what is being asked?
- Are there any constraints I might encounter while laying out the plan to solve it?

Giving proper time to this algorithm and executing is basically solving 50% of the problem.

Moving onto the next step:

**Second principle**: _Making a structured plan._

From what is extracted from the first principle, try to write a pseudo-code in form of comments, draw a rough flowchart or timeline of how you'll be approaching the end result, and gradually, the patterns of the solution will start bubbling up, making the work extremely easy.

The best practices to fully achieve the second principle while writing code are:

- Scribbling steps to solve the problem.
- Drawing flowcharts and timelines.
- Rough dry-runs and executions.
- Re-visiting ideas from the first principle.

It's hard to believe that with these two principles, 70% of the work is already done, while we haven't written a single line of the final code!

Let's move forward and see how the rest 30% work will be achieved?

**Third principle**: _Carrying out the plan._

This step involves writing the code, and trust me, this is the easiest of all the four steps.
From the formulation of the above three stages, convert your pseudo-code into a well-structured executable code.

This is just translating your words and flowchart (that you already have) to code, with the only challenge of remembering the correct syntax!

By now, you must have a working solution to the problem that executes without any errors and somewhat gives the expected output.

This marks the 90% completion of the problem.

**Fourth principle**: _Look back and improve your solution._

The rest 10% will be taken care of by this fourth principle. In this step, we will re-visit our solution and try to improve it in such a way that it is more efficient and better.

This principle might include some of the following ideologies:

- Tweaking the code in such a way that it is more readable and self-explanatory (tough, but give it a shot).
- Any unnoticed bug or error should be fixed while analyzing the code again.
- The code should not be producing any unexpected behaviour for some edge cases.
- How can the code be made more efficient to improve its time and space complexity?

This might scale up your code to a new level, and that's it! If you have implemented all the four principles properly and carefully, your solution must be 100% correct, or at least close to it.

I found this technique so helpful and insightful, and over time, I can see improvements in my accuracy.

Thanks for reading this far.

Breaking down George Pólya's methods of problem-solving.


> In today's article, we'll be looking at the concept of Closures in Swift, and, oh boy, the concept of closure was once a nightmare for me! Closures are a powerful and essential feature in Swift programming language that allow developers to define a block of code that can be executed at a later time. Let's deep dive in learning more about closures.


## What are Closures?
A closure is a self-contained block of code that can be passed around and used in your code. 
Simplifying, closures can capture and store references to any constants and variables from the context in which they are defined. This is called capturing, and it allows closures to maintain state between multiple invocations. 
In Swift, closures are treated as [first-class citizens](https://en.wikipedia.org/wiki/First-class_citizen#:~:text=In%20programming%20language%20design%2C%20a,generally%20available%20to%20other%20entities.), meaning they can be assigned to variables and passed as arguments to functions just like any other data type.

## Syntax of Closures:
Closures are defined using the following syntax:
```swift
{ (parameters) -> return type in
    // code to be executed
}
```
The parameters and return type are optional and can be omitted if the closure does not take any arguments or return a value. The `in` keyword separates the closure header from the closure body.

Here is an example of a closure that takes two integers as arguments and returns their sum:
```
let sumClosure = { (a: Int, b: Int) -> Int in
    return a + b
}
```

## Using Closures in your projects:
Closures can be used in a variety of ways in Swift. One of the most common uses of closures is in functions that take other functions as arguments. For example, the `sorted(by:)` method on arrays takes a closure that compares two elements and returns a boolean value indicating whether the first element should come before the second element in the sorted array.
```
let numbers = [5, 2, 7, 1, 9]
let sortedNumbers = numbers.sorted(by: { (a, b) -> Bool in
    return a < b
})
```
In this example, the closure passed to sorted(by:) takes two integers and returns a boolean value indicating whether the first integer is less than the second integer. The sorted array is returned as the result of the sorted(by:) method.

## Capturing Values with Closures: 
Closures can capture and store references to any constants and variables from the context in which they are defined. This is called capturing, and it allows closures to maintain state between multiple invocations.
```
func makeIncrementer(forIncrement amount: Int) -> () -> Int {
    var runningTotal = 0
    func incrementer() -> Int {
        runningTotal += amount
        return runningTotal
    }
    return incrementer
}

let incrementByTen = makeIncrementer(forIncrement: 10)
incrementByTen() // returns 10
incrementByTen() // returns 20
incrementByTen() // returns 30
```
In this example, the `makeIncrementer(forIncrement:)` function returns a closure that captures a reference to the `runningTotal` variable. Each time the closure is called, it increments the running total by the amount passed to `makeIncrementer(forIncrement:)`.

## Conclusion
Closures are a powerful and essential feature in Swift programming language that allow developers to define a block of code that can be executed at a later time. Closures can capture and store references to any constants and variables from the context in which they are defined. This is called capturing, and it allows closures to maintain state between multiple invocations. In Swift, closures are treated as first-class citizens, meaning they can be assigned to variables and passed as arguments to functions just like any other data type.


This was all about Closures in Swift.

Thank you for reading this far.


Working with closures in Swift


One of the essential data structures in Swift is a set. 
A set is an unordered collection of unique elements. 
In this post, we will explore the concept of sets in Swift, how to create, access, and manipulate them.

#### Creating a Set in Swift:
To create a set in Swift, we use the Set keyword followed by angle brackets enclosing the data type of elements in the set. For example, to create a set of integers, we write:

```
var setOfNumbers: Set<Int> = [1, 2, 3, 4, 5]
```

This creates a set of integers with the values 1, 2, 3, 4, and 5. We can also create an empty set using the same syntax:
```
var emptySet: Set<Int> = []
```

Alternatively, we can omit the data type and let Swift infer it based on the elements in the set, as shown below:
```
var setOfNumbers = Set([1, 2, 3, 4, 5])
```

This creates a set of integers with the same values as the previous example.

#### Accessing and Modifying Sets:
We can access and modify the elements in a set using various methods. For example, to add a new element to a set, we use the insert method, as shown below:
```
setOfNumbers.insert(6)
```

This adds the element 6 to the set. To remove an element from a set, we use the remove method:
```
setOfNumbers.remove(5)
```
This removes the element 5 from the set. We can also remove all the elements from a set using the removeAll method:
```
setOfNumbers.removeAll()
```
This removes all the elements from the set.

We can also check if a set contains a specific element using the contains method:
```
if setOfNumbers.contains(3) {
  print("The set contains the element 3")
}
```
This prints "The set contains the element 3" if the set contains the element 3.

Iterating Over a Set:
We can iterate over the elements in a set using a for loop:

```
for number in setOfNumbers {
  print(number)
}
```
This prints all the elements in the set. Note that the order of elements in a set is undefined, which means that the order of elements in the output may vary each time the loop is executed.

#### Set Operations:
Sets in Swift support various set operations, such as union, intersection, and difference. The union operation combines the elements of two sets:

```
let set1: Set<Int> = [1, 2, 3]
let set2: Set<Int> = [3, 4, 5]
let unionSet = set1.union(set2)
print(unionSet) // prints [1, 2, 3, 4, 5]
```
The intersection operation returns the elements that are common to two sets:
```
let intersectionSet = set1.intersection(set2)
print(intersectionSet) // prints [3]
```
The difference operation returns the elements that are in one set but not in the other:
```
let differenceSet = set1.symmetricDifference(set2)
print(differenceSet) // prints [1, 2, 4, 5]
```

#### Conclusion:
In conclusion, sets are a powerful data structure in Swift that allow us to store a collection of unique elements. We can create, access, and modify sets using various methods, and perform set operations to combine, intersect, or find the difference between sets.





Understanding Sets in Swift.


We've already learned a lot about Strings In Swift in [this article](http://ishaanbedi.in/post/strings-in-swift). This is a continuation to that article, in which we'll briefly discuss about String Interpolation in Swift.

Let's get started.

In this article, we'll be looking at a very useful technique called String Interpolation, which we'll use much often while programming in Swift.

A lot of time, we'll encounter a situation in which we'll need to insert some values inside a string. For example, look at the following code snippet:

```
var myAge = 19
``` 
Here I have a variable ```myAge``` which has an integral value of 19.

Suppose I've to print a string "I am 19 years old".

One of the possible ways of doing it is:


```
print("I am 19 years old")
``` 
A simple, naive approach, without the utilization of the variable we had declared earlier.
But in case we have to update our age, we'll have to manually update *19* everywhere we have used this statement inside our program.

Another way of doing it will be something like this:


```
print("I am",  myAge," years old")

``` 
This is a better approach than the previous as even if we assign a new variable to variable myAge, it'll automatically get updated here as we have introduced the variable inside the string, separated from the string with commas, whereas in the previous case, we'd have to manually change and update the string every time and everywhere in the program as the variable was not involved inside the string.

A better and more efficient way of doing the same thing, without separating the strings and variables with commas is with ***String Interpolation***.

In Swift, to interpolate a value inside a string, we can wrap the value in parentheses, and write a backslash \ before the parentheses.
Here the value can be a variable, a constant, or any other kind of data type or operation in Swift.

For example:


```
var myAge = 19
print("I am \(myAge) years old")
``` 
We can treat the variable ```myAge``` as raw Swift code and perform any kind of operation to it as well.

For example:

```
var myAge = 19
print("I will be \(myAge+1) years old next year.")
``` 
And as you guessed, the output will be :
***I will be 20 years old next year.***

![Screenshot showing an example for string interpolation ](https://cdn.hashnode.com/res/hashnode/image/upload/v1645545228382/pyRnNotOf.png)

This was all about the very easy and important concept of String Interpolation in Swift.


Thank you for reading this far.

String Interpolation in Swift


In today's article, we'll be looking at the concept of Constants in Swift.

Just like variables, the concept of constants is also very easy to understand and implement.

Let's dive deeper and understand constants in-depth:

### What are constants?

Just like its name, constants are something that remains constant throughout the program!

Once a value is declared as a constant in the memory, its value cannot be changed throughout the execution of your program or application.

### How to initialize a constant?

To declare a constant, we use the `let` keyword, followed by the name we want to give to that particular constant and assign it to any kind of data type we want to be constant throughout the execution of the program.

It's just like initializing a variable, but replacing the `var` with the ` let` keyword.

We can store any kind of data type as a constant, whether it may be an integer, float, double, string, boolean, etc.

### Let's look at an example:

```
let myName = "Ishaan"
```

According to this code snippet, we declare a new constant called myName that stores the string _' Ishaan'_.

Do remember to use the keyword ` let`, otherwise, your program will generate an error.

Now, myName, a constant has a value of 'Ishaan' in the memory, which will remain constant throughout the flow of our program.

You may try implementing this on your own on a Swift Playground or some other compiler and explore new concepts and errors.

Now, if we try to change the value of the constant _myName_, Swift will show us an error, as shown in the image below:

![Image showing the error](https://cdn.hashnode.com/res/hashnode/image/upload/v1643954160188/pc5q1eAYo.png)

In the second attempt of initialization, Swift throws an error that it cannot assign _myName_ to a new value as it is a constant.

It also shows us a hint to solve this problem by replacing `let` with ` var`. In other words, it's asking us to declare myName as a variable if we need to change its value at any point of time, later in the program.

### Some examples with other data types:

```
let isAdult = true
print(isAdult)
```

In this example, we store a boolean value as a constant in _isAdult_ and then we print it.
As expected, we will get `true` as the output.

```
let myNumber = 13
print(myNumber)
```

In this example, we store an integral value of 13 as a constant in _myNumber_ and then we print it.
As expected, we will get ` 13` as the output.

```
let mathScore = 98.5
print(mathScore)
```

In this example, we store a floating value of 98.5 as a constant in _mathScore_ and then we print it.
As expected, we will get ` 98.5` as the output.

> Good to know: Just like a variable, we can also explicitly declare a constant's data type to define what kind of data we want it to store in it.

```
let mathScore:Int
mathScore = 100
print(mathScore)
```

Here, we are explicitly telling the compiler to make sure that the constant mathScore stores an integer value only, though only one time we'll be doing it (anywhere in the program).

You may avoid explicitly declaring data type unless it's absolutely necessary.

So that's all for this article. You now have a deep understanding of constants in Swift. Hope you have understood what I wanted to convey.

Thank you for reading this far.


Understanding Constants in Swift


In today's article, we'll be looking at the concept of variables in Swift.

Variables, in any programming language, is the concept that a programmer learns about in the initial days of learning that language, and understanding it is an important part of gaining a solid grip over that particular language.

Talking about variables in Swift, the concept of variables is very easy to understand and implement.

Let's dive deeper and understand variables in depth.

### What are variables?

As the name suggests, _variables_ are something that can _vary_.

A variable refers to a storage location we reserve in the computer’s memory for some data or value to store that we can change freely & manipulate as per our program's requirements.

### How to initialize a variable?

To declare a variable, we use the `var` keyword, followed by the name we want to give to that particular variable and assign it to something we want this particular variable to store in the memory.

We can store any kind of data type as a variable, whether it may be an integer, float, double, string, boolean, etc.

### Let's look at an example:

```
var myNumber = 13
```

According to this code snippet, we declare a new variable called _myNumber_ that stores the integer value of _13_.

Do remember to use the keyword var, otherwise, your program will generate an error.

Now, _myNumber_, a variable has a value of _13_ in the memory.

You may try implementing this on your own on a Swift Playground or some other compiler.

![Variables Image 1](https://cdn.hashnode.com/res/hashnode/image/upload/v1643603285177/Mm6V6q5QI.png)

We can perform any kind of operations on this variable like mathematical calculations, building & solving logic, implementing algorithms, etc, just thinking of it as a substitute for the integer 13.

And as we discussed above, we can change or manipulate this value.

```
myNumber = 26
```

No need to use the `var` keyword again as we are trying to modify an existing variable that is already declared earlier.

Now the variable `myNumber` has the value of integer _26_ in the memory.

![Variables Image 2](https://cdn.hashnode.com/res/hashnode/image/upload/v1643603438967/WHveEJKze.png)

As you can see, after reassigning the variable to 26, the second ` print(myNumber)` statement prints out 26 in the console.

### IMPORTANT NOTE

> If we are reassigning the variable to a new value, the new value should be of the same data type of which the variable was earlier declared for:

```
var myAge = 18

myAge = 19
```

The above code snippet is valid in the Swift program as we are reassigning an integer 19 to the variable, which was earlier initialized with a value of integer 18. The data type at both times of initialization was an integer, making this program valid.

Whereas in the following code snippet, an error will be generated:

```
var myAge = 18

myAge = "eighteen"

```

![Error Image 1](https://cdn.hashnode.com/res/hashnode/image/upload/v1643604767552/76DkR1d45.png)

As you can see, the Swift compiler shows us an error that it cannot assign a variable of type string to a variable that was earlier assigned an integral value.

Keep this in mind, and you are good to go :)

### Some examples with other data types:

```
var name = "John Doe"
print(name)

```

In this example, we store a variable of type string _"John Doe"_ in the variable name and then we print it.
![Variables Image 3](https://cdn.hashnode.com/res/hashnode/image/upload/v1643603933484/07_aiNlBr.png)

```
var isAdult = false

var isStudent = true

```

In this example, we initialize two variables and store a boolean value in them.

```
var myScore = 9.4
```

In this example, we store a floating value in the variable `myScore`.

You may try more examples on your own by storing and experimenting with other data types.

> Good to know:
> We can explicitly declare a variable's data type to define what kind of data we want it to store in it.

Example:

```
var myAge:Int
myAge = 18

```

Here, we are explicitly telling the compiler to make sure that the variable`myAge` always stores an integer value only.

So now you also have an idea of explicitly declaring the data type of a variable.

Since we already know that if we directly initialize a variable to some data type, it'll always store that kind of data type only in future re-assignments, you may avoid explicitly declaring data type unless it's absolutely necessary.

So that's all for this article. You now have a deep understanding of variables in Swift.
Hope you have understood what I wanted to convey.

Thank you for reading this far.


Understanding Variables in Swift


> In today's article, we'll be looking at a super simple trick that can be used to remove duplicate elements from an array in Javascript.

With the help of this trick, you can delete the duplicate elements from an array without the use of loops or other complex operations.

We'll be using the concept of Sets in Javascript to achieve this.

So let's start...

We start with initializing a new example array, on which we’ll perform the operation to remove duplicate elements.

```
var arr = [1,2,2,3,3,3,4,4,4,4,5,5,5,5,5];
```

In this example array, we have duplicate integers (as many times as their value).
We want to remove duplicate elements from this array and our updated array should look like this:

```
[1, 2, 3, 4, 5]
```

Now to remove duplicate elements, the simplest part, we use a combination of arrays’ spread operator (to spread the elements of the array) along with creating a new Set which will allow us to store only the unique elements from the array.

```
arr = [... new Set(arr)];
```

This re-initializes the variable arr with the non-duplicate elements, just like the way we want.

```
Arr -> [1, 2, 3, 4, 5]
```

If you want to retain the original array, you may declare a new variable that stores the non-duplicate elements array from the original array.

Ex.

```
var arr = [1, 2, 2, 3, 3, 3];
var newArr = [... new Set(arr)];
```

Through this way, we get a new array with no duplicate elements, and we also have our original array, which we might need later.

Arr -> [1, 2, 2, 3, 3, 3]

newArr -> [1, 2, 3]

Not only integers, but we can use this concept for any data type. Let’s take an example with elements of type String.

```
var stringArray = ['a', 'b', 'b', 'c', 'd', 'd', 'd', 'e', 'e', 'f'];
```

Now, using the same concept as discussed above, we use

```
stringArray = [... new Set(stringArray)];
```

And, as you guessed, the output after removing all the duplicate elements from the array is

```

["a", "b", "c", "d", "e", "f"]
```

The last example we take is with an array of boolean values.

```
var boolArray = [true,true,false,false,true,false];
```

Applying the same concept, we use:

```
boolArray = [... new Set(boolArray)];
```

And as expected, we have the boolArray with only two elements, ie,

```
[true, false]
```

### The final key point:

> The Set() constructor lets us create Set Objects that lets us store the unique value of any data type.

Thank you for reading this far.

Remove Duplicate Elements From An Array in Javascript!


#### This post was featured on [The Startup](https://medium.com/swlh)  in 2020. Check it out [here.](https://medium.com/swlh/make-your-own-calculator-in-html-css-javascript-1319dd93a742)

Hey, what’s up, everyone!

Today, we’ll be making our own calculator using HTML, CSS & JAVASCRIPT.

This project is divided into 2 parts: The Front End & The Back End. We’ll be making the structure of our Calculator using HTML and beautifying it using CSS in the Front end part.

In the Back End part, we’ll be giving it life, i.e will make it work to solve the equations. The back end part will be done using javascript.

Our final project will look like this:

![](https://kcldtzblfykiwwltfouv.supabase.co/storage/v1/object/sign/meta/1__zezo__lSBZmvNIrfQkUPYRw.png?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJtZXRhLzFfX3plem9fX2xTQlptdk5JcmZRa1VQWVJ3LnBuZyIsImlhdCI6MTY2MzY3Mjk4NywiZXhwIjoxOTc5MDMyOTg3fQ.QuIJ_9KVNRa43znPRWFiEfMjkef9smYPC5ejMq2ema4&t=2022-09-20T11%3A23%3A07.207Z)

So let’s dive into Part 1: The structure and design of our calculator.

First, open your desired code editor. In my case, I’d be using VS Code. You may use anyone you like (Sublime Text, Atom etc.). Don’t use Notepad, please.

First, save the new file as “\*projectname\*.html”. After this, we’ll be adding the basic structure of our HTML file (the boilerplate). In VS Code, you can get it by typing “!” and hitting enter, while in sublime text, you get it by typing “<html” and pressing enter. Now you’ll see something like this:

![](https://kcldtzblfykiwwltfouv.supabase.co/storage/v1/object/sign/meta/1__IeKYvDwiG9PaSuFET__ihTw.png?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJtZXRhLzFfX0llS1l2RHdpRzlQYVN1RkVUX19paFR3LnBuZyIsImlhdCI6MTY2MzY3MzAxOCwiZXhwIjoxOTc5MDMzMDE4fQ.B9oHqxk72xCJIMOdCzH9d-Sh0f7-sYaMQz8e1lWwoeM&t=2022-09-20T11%3A23%3A38.830Z)

Change the text “Document” with the name you want to give to your Calculator Project.

Now, we have to define an area where we’ll be showing the output to the user. This is our output screen. For that, I’m making a division with class display.

```
<div class="display"></div>
```

Now, this display (output) screen has to show some text even before the user inputs some equation to solve. For that, we’ll be using 0. So let’s make a paragraph inside the “display” division with default-text 0 :
```
<p id="output">0</p>
```

Now, below the output screen, we have our first row of buttons. Different calculators have different kinds of buttons arrangement. So I’m using the button arrangement with which I’m comfortable. You can use your set of button arrangements once you’re clear with how to make this project.

Our first row of buttons will have 3 buttons, although the next row will have 4 buttons. This is because the Clear button in the first row will take place of 2 buttons as it’s the primary button in our calculator (0 as well). You might have seen that in the screenshot above as well.

![](https://kcldtzblfykiwwltfouv.supabase.co/storage/v1/object/sign/meta/1__1fgBg3ti6RCHTBtfrln__UA.png?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJtZXRhLzFfXzFmZ0JnM3RpNlJDSFRCdGZybG5fX1VBLnBuZyIsImlhdCI6MTY2MzY3MzA0OSwiZXhwIjoxOTc5MDMzMDQ5fQ.kP5Oteu6SKqSweOkXHqsjzpgsD6Z1NM0M0UGkqUaLN8&t=2022-09-20T11%3A24%3A09.932Z)

For this, I’m defining a new div with class “first-row”. Here all our buttons belonging to the first row will be placed here. The buttons will be “C” , “%” & “/”.
```
<div class="first-row"> </div>
```
Inside this div, we’ll place our buttons. Buttons are inserted using <button> tag, followed by </button>. The text that our button should hold is placed between these two tags. Along with the buttons, we’ll be giving them an id. This id will help us at the time of back end programming.

The id should follow the format: “row\_no-button\_no”. For example: if the button is for row 1 and is the first button in the row, it will have an id “r1–1”.

See example below
```
<button id="r1-1">C</button>
```
Now, I’m assuming you can make the basic structure of your calculator on your own.

Your calculator by this time should look like this:

![](https://kcldtzblfykiwwltfouv.supabase.co/storage/v1/object/sign/meta/1__KUjDzpdSiFTEm66c__0fskA.png?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJtZXRhLzFfX0tVakR6cGRTaUZURW02NmNfXzBmc2tBLnBuZyIsImlhdCI6MTY2MzY3MzA3NywiZXhwIjoxOTc5MDMzMDc3fQ.XNidFZkVj6NflHuogPU9I_fvGw0xlxqp4V0FTUALk2U&t=2022-09-20T11%3A24%3A37.989Z)

If you’re not getting stuff like the above, refer to the given HTML. Don’t just copy-paste it). If you got everything perfect, cheers.
```
<p id="output">0</p>

<div class="first-row">  
   <button id="r1-1">C</button>  
   <button id="r1-3">%</button>  
   <button id="r1-4">/</button>  
</div>

<div class="second-row">  
   <button id="r2-1" >7</button>  
   <button id="r2-2" >8</button>  
   <button id="r2-3" >9</button>  
   <button id="r2-4" >X</button>  
</div>

<div class="third-row">  
   <button id="r3-1" >4</button>  
   <button id="r3-2" >5</button>  
   <button id="r3-3" >6</button>  
   <button id="r3-4" >-</button>  
</div>

<div class="fourth-row">  
   <button id="r4-1"  >1</button>  
   <button id="r4-2"  >2</button>  
   <button id="r4-3"  >3</button>  
   <button id="r4-4"  >+</button>  
</div>

<div class="fifth-row">  
  <button id="r5-1" >0</button>  
  <button id="r5-2" >.</button>  
  <button id="r5-3" >=</button>  
</div>
```
Clicking any button at this time would not do anything. There’s a lot way to go.

But the calculator is looking ugly. Let’s jump to CSS section.

Remember the calculator will not be responsive as it would have taken more time to explain. So once you’re able to understand this simple coding process, you can go ahead in making the calculator responsive.

So you have to connect the new CSS file (say “style.css”) to the HTML page.

For that, inside the head tag, the below code has to be there:
```
<link rel="stylesheet" href="style.css" type="text/css">
```
Now, we have to design the output screen, to which we gave the class as “.display”.

![](https://kcldtzblfykiwwltfouv.supabase.co/storage/v1/object/sign/meta/1__PyiDvolwaSDGoXU4__dH60w.png?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJtZXRhLzFfX1B5aUR2b2x3YVNER29YVTRfX2RINjB3LnBuZyIsImlhdCI6MTY2MzY3MzEwMCwiZXhwIjoxOTc5MDMzMTAwfQ.2IPFqTj62RVfpQZMsZ1Yf-dWOasS9ZVN-paeFd4W9co&t=2022-09-20T11%3A25%3A01.029Z)

We have to make it look like the above snapshot.

So 5 things will be involved in making the output screen like that.

1.  Its background-colour
2.  Padding
3.  Width
4.  Text alignment
5.  Font size

_BONUS: THE BORDER RADIUS CAN BE CHANGED TO MAKE IT LOOK GOOD._

So let's write our CSS code for this:
```
.display {  
      background-color: rgb(201, 201, 201);  
      padding: 15px;  
      width: 250px;  
      text-align: right;  
      font-size: 20px;  
      border-top-left-radius:10px;  
      border-top-right-radius:10px;  
}
```
The text has to be aligned to the right because most calculators have arrangements like that only.

Congrats, you’ve made your output screen look good.

Now, we’ll be writing common CSS code for all the buttons, as we want them to look similar. (except 0 & C, we’ll get back to them).

It’ll involve 7things:

1.  Padding
2.  Width
3.  Height
4.  Margin
5.  Background colour
6.  Text colour
7.  Font size

You can customize all the above properties as per your own creativity.
```
button {  
      padding: 10px;  
      width: 67px;  
      height: 45px;  
      margin-top: 10px;  
      background-color: rgb(194, 194, 194);  
      color: black;  
      font-size: 20px;  
}
```
Now, let's go-to style 0 & C buttons. They require a width of two buttons. We have to go to the HTML section and style them manually.

Refer to the code:
```
<button id="r1-1" style="width: 138px;">C</button>  
<button id="r5-1" style="width: 138px;">0</button>
```
Now, we have to further beautify our calculator. It involves that when the button is hovered/clicked it should change colour accordingly, giving a more realistic look.

![](https://kcldtzblfykiwwltfouv.supabase.co/storage/v1/object/sign/meta/1__Tau4TLzhMbvioLcVqvsVQA.png?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJtZXRhLzFfX1RhdTRUTHpoTWJ2aW9MY1ZxdnNWUUEucG5nIiwiaWF0IjoxNjYzNjczMTI2LCJleHAiOjE5NzkwMzMxMjZ9.8qF4VHKqQLw7GCXMnaXZd99-HwkkCwqENtc2awafXwo&t=2022-09-20T11%3A25%3A26.271Z)

For this, we have to change the cursor to a pointer and the background colour a bit darker when it’s covered. Also, it should look a bit darker when it's clicked upon.
```
button:hover {  
 cursor: pointer;  
 background-color: rgb(182, 178, 178);  
}

button:active {  
 background-color: rgb(136, 136, 136);  
}
```
Woohoo!! We have designed our calculator. By this time, it looks like:

![](https://kcldtzblfykiwwltfouv.supabase.co/storage/v1/object/sign/meta/1__gTMPtTqJANp9hQconOyLqQ.png?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJtZXRhLzFfX2dUTVB0VHFKQU5wOWhRY29uT3lMcVEucG5nIiwiaWF0IjoxNjYzNjczMTM4LCJleHAiOjE5NzkwMzMxMzh9.KDqrNtmZpkTvJMB3u0rbfEPsJpaBplfwxTNukip3e9E&t=2022-09-20T11%3A25%3A38.611Z)

But it’s still lifeless. We have to give it life.

So let’s dive into the backend section and make the calculator solve our problems.

Let’s make a JavaScript file, say “script.js”. We have to link it to our HTML file as well.

Place the code inside the head tag.
```
<script src="script.js">
```
Now it’s linked to our HTML file.

Now let’s make our first function, that clears any mess on the output screen, which comes into play when the “C” button is triggered.

Let’s call our function _forclear()._

The concept behind the working of this function is that it should get the value of the output screen and set it to default (i.e. 0).
```
function forclear() {  
      document.getElementById("output").innerHTML = "0";  
}
```
Also, this won’t come into action unless we assign this function to the C button. For that, we go to the HTML section and add the property to the C button that onclick(), it should trigger this function.
```
<button id="r1-1" _onclick="forclear()"_ style="width: 138px;">  
     C  
</button>
```
Great. Now any equation on the output screen will be cleared by clicking the clear button.

Now we have to define a function that removes the default 0 on the output screen, otherwise, any value updated on the output screen will be concatenated with 0, like this:

![](https://kcldtzblfykiwwltfouv.supabase.co/storage/v1/object/sign/meta/1__8oXrtRbo__QPMzmXBebxO2g.png?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJtZXRhLzFfXzhvWHJ0UmJvX19RUE16bVhCZWJ4TzJnLnBuZyIsImlhdCI6MTY2MzY3MzE1OCwiZXhwIjoxOTc5MDMzMTU4fQ.DQvWCcCb7QxSeaxZIdsp284lGWMLVy9Cjad7A5oAeqA&t=2022-09-20T11%3A25%3A58.682Z)

This does not look nice and logical. We have to remove this zero before any operation starts.

So, we define a new function “removeZero()”, that replaces the 0 with just a gap if 0 is present before any operation starts.
```
function removeZero() {  
      var value = document.getElementById("output").innerHTML;  
      if (value == "0") {  
           value = " "  
           document.getElementById("output").innerHTML = value;  
      }

}
```
Next, we have to define a function to find the percentage of the value on the output screen when the “%” button is triggered.

For that, we define a function as _perc(),_ that gets value from the output screen, divides it by 100 and then sends it back.
```
function perc() {  
      var value = document.getElementById("output").innerHTML;  
      value = value / 100;  
      document.getElementById("output").innerHTML = value;  
}
```
But remember, this will not work unless we say the % button to do so. Go to the HTML section and define the property “onclick”.
```
<button id="r1-3" onclick="perc()"> % </button>
```
Great, now % would also work.

Now 2 things are left: Updating the value on the output screen when any button is clicked and solving the equation on the output screen once the “=” button is clicked.

Let's code for displaying the values on the output screen.

For this, we define a new function _fordisplay(value)_, where _value_ is the parameter that is nothing but the numerical values or arithmetic operators.

Let’s see the code:
```
function fordisplay(value) {  
      removeZero()  
      document.getElementById("output").innerHTML += value;

}
```
It first removes the zero by _removeZero()_ function discussed above.

Then it updates the value of the output screen with the value or operator which is triggered.

But we have to define the “onclick” property for each and every number and operator in the HTML section.

The “value” will be replaced with what is triggered.

Example:
```
<button id="r3-1" value="4" _onclick="fordisplay('4')_ ">4</button>
```
The above code is defined for the button “4”. You have to do this for the rest buttons as well.

Your code will look like this:

![](https://kcldtzblfykiwwltfouv.supabase.co/storage/v1/object/sign/meta/1__ZF0IlPrd7YXoSz__gWrMvQw.png?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJtZXRhLzFfX1pGMElsUHJkN1lYb1N6X19nV3JNdlF3LnBuZyIsImlhdCI6MTY2MzY3MjgzMiwiZXhwIjoxOTc5MDMyODMyfQ.TWNtKa5oww5kScbgvB8lLCXd6B2Iy4pswASTOouR72g)

Now whatever we press on the calculator, it gets updated on the output screen.

Still, the purpose of the calculator is not served.

We have to display the output once the “=” button is triggered.

For that, we define a function _solve()_ for that.

But the question is how we are going to solve the equation?

_Thanks to JavaSript, we have a function eval(equation)_ that evaluates/executes the equation passed as a parameter. We’ll be using that concept here.
```
function solve() {  
     removeZero()  
     var equation = document.getElementById("output").innerHTML;  
     var solved = eval(equation);  
     document.getElementById('output').innerHTML = solved;  
}
```
Obviously, our first process will be to remove the zero. Thanks for removeZero() we have discussed above. Then we will fetch the equation from the output screen using its _id._

Then we have created a variable _solved_ that stores the value of the evaluated expression.

_(You might think there was no need to store the value anywhere as it’s not used anywhere else. EASTER EGG: You can make an advanced version of this calculator project, which even saves the history of the user’s calculations. )_

Next, we update the output screen with the value stored in solved. That’s the answer to the equation user sent for solving.

In the final step, we have to tell the “=” button what it has to do once it's clicked.
```
<button id="r5-3" value="=" onclick="solve()" >=</button>
```
That’s it!!!

**_Congratulations!!!_**

You have made your own calculator. It’s working and looks good as well. It solves problems as well. Great!

![](https://kcldtzblfykiwwltfouv.supabase.co/storage/v1/object/sign/meta/1__coCXlkRyHIUbzJHUgJNelw.png?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJtZXRhLzFfX2NvQ1hsa1J5SElVYnpKSFVnSk5lbHcucG5nIiwiaWF0IjoxNjYzNjczMTkyLCJleHAiOjE5NzkwMzMxOTJ9.hgsOsNuQLFxs2y1FYCJ9m9ggw-XYiH_Gue8B0NFoPrY&t=2022-09-20T11%3A26%3A32.678Z)

Stuck somewhere? Drop me a DM on [Twitter](https://twitter.com/ishnbedi)

You can also watch me code this project in [_this video_](https://www.youtube.com/watch?v=Dw9tcViHXXo&t=576s)_._


Thanks a lot for reading.

Have an amazing day ahead!!!

Posts