# Understanding @Binding in SwiftUI

date: April 23, 2022
slug: binding-in-swiftui
status: Published
tags: iOS, swift, swiftui
summary: Explore the power of data binding in SwiftUI.
type: Post

---

---

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:

```
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

# Make your own calculator in HTML, CSS, JAVASCRIPT

date: April 10, 2020
slug: calculator-html-css-js
status: Published
tags: HTML/CSS/JS, Web Development
summary: Learn how to create a custom calculator using HTML, CSS, and JavaScript to enhance your web development skills.
type: Post

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](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](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](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](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](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](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](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](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](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](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!!!

Make your own calculator in HTML, CSS, JAVASCRIPT

# Working with closures in Swift

date: April 19, 2022
slug: closures-swift
status: Published
tags: concepts, swift
summary: Get to know the art of closures in Swift to enhance your coding skills & leverage their flexibility.
type: Post

> 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

# Understanding Constants in Swift

date: February 4, 2022
slug: constants-in-swift
status: Published
tags: concepts, swift
summary: Gain a clear understanding of constants in Swift, their declaration, immutability, and best practices for using them to create stable and secure code, ensuring data integrity and preventing unintended modifications.
type: Post

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:

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

Image showing the error

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

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

date: May 16, 2022
slug: george-polya-methods
status: Published
tags: Coding, Life
summary: Uncover the systematic problem-solving approach developed by George Pólya, including problem understanding, devising a plan, executing the plan, and reflecting on the results, to enhance your problem-solving abilities and tackle challenges with confidence.
type: Post

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.

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

# Creating an Instagram-Like Zoom Effect in SwiftUI

date: April 20, 2023
slug: creating-instagram-like-zoom-effect-swiftui
status: Published
tags: swift, swiftui
summary: Learn how to recreate the captivating zoom effect used in Instagram's photo viewer using SwiftUI, adding an immersive touch to your iOS app's user experience.
type: Post

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:

![https://bqtojrlgmcjymtitneuf.supabase.co/storage/v1/object/public/storage/instagram-sample.gif?t=2023-06-04T06%3A10%3A15.016Z](https://bqtojrlgmcjymtitneuf.supabase.co/storage/v1/object/public/storage/instagram-sample.gif?t=2023-06-04T06%3A10%3A15.016Z)

## 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

- 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](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

![https://bqtojrlgmcjymtitneuf.supabase.co/storage/v1/object/public/storage/final-result.gif?t=2023-06-04T06%3A10%3A44.333Z](https://bqtojrlgmcjymtitneuf.supabase.co/storage/v1/object/public/storage/final-result.gif?t=2023-06-04T06%3A10%3A44.333Z)

## 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

# Simplifying My Portfolio Site

date: July 22, 2023
slug: migrating-my-portfolio
status: Published
tags: HTML/CSS/JS, Web Development
summary: 

In this post, I'd like to discuss my thinking behind migrating my developer portfolio website from a flashy, modern design to a more sleek, minimal, old-school, and much more basic layout. 

This decision didn't come lightly; it was born out of careful consideration and a desire to create the most effective showcase of my skills and projects. In this blog post, I'll walk you through the reasons behind my decision, the process of migration, and how long it took me to complete this transformation.

### Why I Decided to Migrate:

As a developer, I understand the importance of constantly evolving and improving my online presence. My previous portfolio design was visually appealing but had some drawbacks that I couldn't ignore. The design, with all its animations and complex elements, resulted in slower loading times, affecting the overall user experience. I realized that while a shiny and trendy design might catch the eye initially, it could also distract visitors from the content I wanted them to focus on—the projects I've worked on and my coding abilities. Moreover, earlier design was influenced by a pov of a developer, not an end-user who just want to learn more about me, my projects, or read my blog posts. So I kept this in mind to keep it as simple as possible.

As part of the migration to a more minimalistic design, I emphasized creating a streamlined connection with the user. I mentioned direct links to various communication channels, making it easier for visitors to get in touch with me. By prioritizing clear and efficient communication, I aimed to enhance the user experience. 

TBH, I wanted a timeless design that could stand the test of time and remain relevant for years to come.

### How Long It Took:

The process of migrating my developer portfolio to a more basic design took just a few hours from start to finish since this was a minimal and easy-to-implement update.

I drew inspiration from classic web layouts that focused on content rather than distracting elements. Next, I analyzed my existing portfolio to identify essential elements and content that needed to be retained or adapted for the new design.

Simplicity does not mean compromising on functionality; in fact, it challenged me to create a seamless user experience while maintaining a basic layout. I used the best practices of [semantic HTML](<https://developer.mozilla.org/en-US/docs/Glossary/Semantics#semantics_in_html>) and used a minimal framework that goes by the name [Water CSS](<https://watercss.kognise.dev//>) (I tweaked it a little bit based upon my design preference).

I used Next.js as the React framework so as to get the most out of my application by utilizing the capabilities of the framework and ready-to-use configurations Next.js offers.

### Reflection:

Once the new basic design was completed, I focused on the final touches, ensuring all the elements were aligned, the typography was carefully chosen, and the color scheme complemented the overall theme. I also made sure that all my projects were up-to-date, removing outdated or less relevant work to maintain a clean and concise portfolio.

The migration process made me realize that simplicity is a powerful tool for conveying a strong message. By focusing on what truly matters—my skills, relevant information about me, and passion for coding, I was able to create a more authentic and memorable brand identity.

### Conclusion:

Migrating my shiny developer portfolio to the most basic one has been a transformative journey. The decision was driven by a desire for a more efficient and effective way to showcase my skills and projects.

Thank you for reading this far!


Simplifying My Portfolio Site

# Remove Duplicate Elements From An Array in Javascript!

date: January 28, 2022
slug: duplicate-sets-js
status: Published
tags: JavaScript
summary: Remove duplicate elements from an array in JavaScript using various concept of Sets, ensuring a unique collection of elements for efficient data processing and manipulation.
type: Post

> 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!

# Understanding Sets in Swift.

date: February 24, 2022
slug: sets-in-swift
status: Published
tags: concepts, swift
summary: Discover the power of Sets in Swift for efficient storage, unique value handling, and convenient operations on collections.
type: Post

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.

# Snippet for formatting dates in JavaScript

date: December 11, 2022
slug: formatting-dates-js
status: Published
tags: JavaScript, Snippets
summary: Efficiently format dates in JavaScript for improved readability and customization.
type: Post

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

# String Interpolation in Swift

date: February 22, 2022
slug: string-interpolation-swift
status: Published
tags: concepts, swift
summary: Learn the power of string interpolation in Swift, a concise and expressive way to combine variables, constants, and expressions within a string, enabling dynamic and readable output for enhanced user experience and code readability.
type: Post

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.***

![https://cdn.hashnode.com/res/hashnode/image/upload/v1645545228382/pyRnNotOf.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1645545228382/pyRnNotOf.png)

Screenshot showing an example for string interpolation

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

# Easy Searching in SwiftUI with Searchable

date: May 12, 2023
slug: searchable-in-swift
status: Published
tags: swift, swiftui
summary: Simplify the process of implementing search functionality in SwiftUI using the Searchable protocol, enabling effortless searching and filtering within your app's views.
type: Post

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.

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

Searchable in SwiftUI

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

# Understanding Variables in Swift

date: January 31, 2022
slug: variables-in-swift
status: Published
tags: concepts, swift
summary: Get a comprehensive understanding of variables in Swift, including their declaration, assignment, data types, scope, and manipulation, to effectively store and manage data in your Swift applications.
type: Post

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.

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

Variables Image 1

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.

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

Variables Image 2

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"

```

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

Error Image 1

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.

![https://cdn.hashnode.com/res/hashnode/image/upload/v1643603933484/07_aiNlBr.png](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

# Voyager: Your Friendly macOS API Playground

date: July 30, 2023
slug: voyager
status: Published
tags: iOS, swift, swiftui
summary: Introducing Voyager, a fantastic macOS application designed to make API testing a breeze!

---

Introducing Voyager
===================

Hey there, fellow developers! Today, I'm excited to introduce you to [Voyager](https://github.com/ishaanbedi/voyager), a fantastic macOS application designed to make API testing a breeze! As a developer myself, I know how crucial it is to have a reliable tool for testing APIs and quickly viewing responses. Voyager is all about streamlining this process and providing you with an easy-to-use playground to interact with APIs effortlessly.

![Image](https://res.cloudinary.com/dhfhotfqs/image/upload/v1690693678/Voyager/256981132-0ad1601a-dc83-48d8-b2f4-90496045244f_v9ri5w.png "Voyager")

A Playground for API Testing
----------------------------

Voyager offers a user-friendly interface that's tailor-made for macOS, ensuring you have a seamless experience while testing your APIs. The app is built entirely with Swift and SwiftUI, harnessing the full potential of macOS for a smooth and optimized performance. And you know what that means - a delightful API testing experience right at your fingertips!


Key Features
------------

Let's dive into some of the fantastic features Voyager has to offer:

*   #### Native macOS Support
    
    Voyager's foundation lies in Swift and SwiftUI, giving you a fully native application that seamlessly integrates with your macOS environment. This native approach ensures that the app runs efficiently, providing you with a smooth testing experience.
    
*   #### Intuitive Interface
    
    Voyager has a user-friendly design. Navigating and setting up API requests is a breeze, thanks to the intuitive interface. The app's native design language aligns with macOS, making it familiar to you right from the start.
    
*   #### Request Customization
    
    As a developer, you want control over your API requests, and Voyager delivers just that. With this app, you can easily customize your requests with various parameters, headers, authentication methods, and request bodies. The app's responsiveness ensures that you get instant feedback, helping you fine-tune your requests effortlessly.
    

![Image](https://res.cloudinary.com/dhfhotfqs/image/upload/v1690693830/Voyager/256980024-5c7f3008-8ccc-4ea0-9775-d6976982b204_n9inz9.png "Voyager")    

Getting Started with Voyager
----------------------------

So, are you ready to embark on a journey with Voyager? Let's get started:

1.  #### Requirements
    
    Before you set sail, ensure you have macOS 11.0 or later installed on your Mac. Additionally, if you want to build the app from source, you'll need Xcode 12.0 or later, as Voyager uses Swift Package Manager to manage some third-party libraries.
    
2.  #### Installation
    
    You can download Voyager for free from the [GitHub Releases page](https://github.com/ishaanbedi/Voyager/releases). Once you have the DMG file, simply drag the app into your Applications folder.
    
3.  #### The Interface
    
    Upon launching Voyager, you'll find a clean and straightforward interface. The app's window is divided into two main sections:
    
    1.  **Query Builder**: This is where the magic happens. Configure your API requests by entering the URL, selecting the request method, and adding headers, parameters, and authentication if needed.
    2.  **Response Viewer**: Once you run the request, the response will be displayed here. If it's in JSON format, Voyager will format it for easy readability. Otherwise, it will be displayed as plain text.
        
![Image](https://res.cloudinary.com/dhfhotfqs/image/upload/v1690693847/Voyager/256980627-e52edc54-b990-4588-86a3-c38e656d0787_lfv8hw.png)  
    
You can add as many query parameters and headers as you need. Voyager currently supports Basic Authentication and Bearer Token Authentication, so you can easily secure your requests.
    
You can type the body of your request as raw JSON, which is immediately parsed and formatted for easy readability. 

![Image](https://res.cloudinary.com/dhfhotfqs/image/upload/v1690693844/Voyager/256980471-74870ed7-7a2b-4567-8622-e472fcbd58be_zaapyy.png)  


Sending API Requests
--------------------

Ready to fire off some API requests? Here's how you can do it:

1.  Enter the API URL in the Query Builder section.
2.  Choose the desired request method from the dropdown menu (GET, POST, PUT, DELETE, PATCH, or HEAD).
3.  Add headers, parameters, and authentication if required.

Now, the exciting part - hit the "Run" button or use the "Command + R" keyboard shortcut to execute the request. The response will be displayed in the Response Viewer section, making it a breeze to examine the results.



#### Dependencies

Voyager couldn't have set sail without the support of these fantastic open-source projects:

*   [Alamofire](https://github.com/alamofire/): Powers the app's API requests and response processing, making it incredibly reliable.
*   [SwiftJSONFormatter](https://github.com/luin/SwiftJSONFormatter): Ensures JSON responses are formatted neatly for easy understanding and debugging.
*   [CodeEditor](https://github.com/ZeeZide/CodeEditor.git): Provides a familiar IDE-like feel, allowing seamless JSON editing and real-time changes.

Some Frequently Asked Questions
-------------------------------

#### Why Choose Voyager?

Voyager is a no-nonsense API testing tool designed to be simple, lightweight, and efficient. It's perfect for quick API testing and debugging, without overwhelming you with excessive complexity. While it's not a replacement for feature-packed tools like Postman or Insomnia, it's a handy companion for your swift API interactions.

#### Compatibility and System Requirements

Voyager is exclusively built for macOS, leveraging the power of Swift and SwiftUI. It requires macOS 11.0 or later to run smoothly. If you want to build from source, you'll need Xcode 12.0 or later.

#### Bug Reports and Feedback

Your feedback matters! If you encounter any bugs or have feature requests, feel free to open an issue on [GitHub](https://github.com/ishaanbedi/Voyager/issues). For security concerns, please reach out to me directly at [hi@ishaanbedi.in](mailto:hi@ishaanbedi.in).

### Licensing

Voyager is distributed under the [MIT License](https://github.com/ishaanbedi/Voyager/blob/main/LICENSE). Feel free to use, modify, and distribute this tool!

Thank you for joining me on this voyage with Voyager! With Voyager, you can explore APIs, test endpoints, and gain insights into responses with ease.

If you haven't already, head over to the [GitHub Releases page](https://github.com/ishaanbedi/Voyager/releases) and download Voyager for free.

Thank you for reading this far, and I hope you enjoy using Voyager as much as I enjoyed building it!


‹ back