Forem: Anjali Jha

Machine Coding - Vending Machine

Anjali Jha — Tue, 19 Aug 2025 19:17:27 +0000

In this article, I will try my hands on designing and implementing a solution for vending machine using Golang

The requirements

The vending machine should support multiple products with different prices and quantities.
The machine should accept coins and notes of different denominations.
The machine should dispense the selected product and return change if necessary.
The machine should keep track of the available products and their quantities.
The machine should handle multiple transactions concurrently and ensure data consistency.
The machine should provide an interface for restocking products and collecting money.
The machine should handle exceptional scenarios, such as insufficient funds or out-of-stock products.

Analysis

Upon seeing the question, I can figure that the machine works differently based on its state. These states can be-

No money inserted (Idle)
Has money but not yet purchased (HasMoney)
Currently dispensing (Dispensing)
Return money/change (ReturnChange)

Instead of huge if/else blocks, we can use the State Pattern which lets each state define valid actions (InsertMoney, SelectProduct, Cancel).

Flow Example

Machine starts in idleState.
User inserts coin → IdleState.InsertCoin() is called → moves to readyState.
User selects product → ReadyState.SelectProduct() checks stock + payment.
If enough payment → transitions to dispenseState, calls DispenseProduct().
If change needed → transitions to returnChangeState, calls ReturnChange().
After transaction → back to idleState.

The approach here will be to first create an interface which defines possible actions. We will then implement the interface using object instance.

We will also need few classes here

Product: which shows the product of vending machine
Coin and Note : represent the denominations of coins and notes
VendingMachine : main class that represents the vending machine

Application

We will first create state interface, assuming we have struct in place for Product(name, price, qty), Coin (penny, quarter), Note(ten,twenty)-

type VendingMachineState interface {
    SelectProduct(product *Product)
    InsertCoin(coin Coin)
    InsertNote(note Note)
    DispenseProduct()
    ReturnChange()
}

Now we will create VendingMachine context struct. This holds products, cash inventory, balance, and current state and provides methods for state transitions and payment handling.

type VendingMachine struct {
    inventory         map[*Product]int
        //state
    idleState         VendingMachineState
    readyState        VendingMachineState
    dispenseState     VendingMachineState
    returnChangeState VendingMachineState
    currentState      VendingMachineState
       // transaction/runtime
    selectedProduct   *Product
    totalPayment      float64
}

We initialize a new Vending Machine. This creates a vending machine with an empty inventory and concrete state objects (IdleState, ReadyState, etc.). It follows the Singleton pattern to ensure only one instance of the vending machine exists. The snippet also has delegation methods.This means the behavior changes depending on the current state.-

func NewVendingMachine() *VendingMachine {
    vm := &VendingMachine{
        inventory: NewInventory(),
    }
    vm.idleState = &IdleState{vm}
    vm.readyState = &ReadyState{vm}
    vm.dispenseState = &DispenseState{vm}
    vm.returnChangeState = &ReturnChangeState{vm}
    vm.currentState = vm.idleState
    return vm
}
func (vm *VendingMachine) SelectProduct(product *Product) {
    vm.currentState.SelectProduct(product)
}

func (vm *VendingMachine) InsertCoin(coin Coin) {
    vm.currentState.InsertCoin(coin)
}

func (vm *VendingMachine) InsertNote(note Note) {
    vm.currentState.InsertNote(note)
}

func (vm *VendingMachine) DispenseProduct() {
    vm.currentState.DispenseProduct()
}

func (vm *VendingMachine) ReturnChange() {
    vm.currentState.ReturnChange()
}

We can also create few utility methods to set state, resetPayment.

Now to the main part -
The magic happens in concrete state implementations. Each state (IdleState, ReadyState, etc.) implements the VendingMachineState methods. They decide when to call SetState to move to another state. For example -

// IdleState struct
type IdleState struct {
    vendingMachine *VendingMachine
}

func (s *IdleState) SelectProduct(product *Product) {
    if s.vendingMachine.inventory.IsAvailable(product) {
        s.vendingMachine.selectedProduct = product
        s.vendingMachine.SetState(s.vendingMachine.readyState)
        fmt.Println("Product selected:", product.name)
    } else {
        fmt.Println("Product not available:", product.name)
    }
}

func (s *IdleState) InsertCoin(coin Coin) { fmt.Println("Please select a product first.") }
func (s *IdleState) InsertNote(note Note) { fmt.Println("Please select a product first.") }
func (s *IdleState) DispenseProduct()     { fmt.Println("Please select a product and make payment.") }
func (s *IdleState) ReturnChange()        { fmt.Println("No change to return.") }

Similarly other states can be implemented. You can add a demo file to demonstrate the entire functionality by adding products to the inventory, selecting products, inserting coins and notes, dispensing products, and returning change.

Hope this helps! Always open to suggestions for improvement.

How to be a Microsoft Learn Student Ambassador

Anjali Jha — Tue, 23 Nov 2021 14:35:13 +0000

What is MLSA Program?

Recently I was selected as MLSA.
It is a program where the student developers learn using the resources provided by Microsoft on the trending technologies and then educate their fellow students on various Technical Skills. It helps building digital communities and connecting with students who share similar passion.

Application and eligibility

You can fill the application form throughout the year, although MLSAs are recruited on a quarterly basis. You can apply at-
Microsoft Learn Student Ambassador
Here you would have to answer various questions-

Fill the form with your basic personal and academic information.
The "Written Sample" section is the most important part of the application. This is what decides your outcome and thus needs major effort. It requires you to answer three questions, one in video and two in written format.
While responding to these questions make sure you answer them in a detailed manner. Write about your motive and passion to the community and the ways in which you can help to expand it. Make a video answer for the question you are most confident about. The video should be brief and presentable describing your response clearly.
In the "social media" section, try to fill as many fields as possible. This increases your chances of selection and provides an overview of your connectivity.

You will be informed about your selection or rejection through mail.
Hope this article helps.

All the best!!!

How I cleared AWS Certified Cloud Practitioner

Anjali Jha — Mon, 06 Sep 2021 19:27:16 +0000

Recently I successfully passed my AWS Certified Cloud Practitioner (CLF-C01) exam. Here, I want to share my experiences, so you can judge better on why you should go for the certification, and how to prepare.

I got the opportunity to write the test through SheBuilds-CloudU program run by AWS. It's an eight week self paced learning program with a very supportive and positive community of mentors and participants from all around the world. I would definitely recommend it to females trying to explore cloud.
To know more:
https://awscloudushebuildcpeapj.splashthat.com/

About the certification

It gives you exposure to cloud fluency, foundational AWS knowledge and tests your basic knowledge of AWS platform.
https://aws.amazon.com/certification/certified-cloud-practitioner/

The preparation

Overall, I had eight weeks from when I signed-up – to the day of the exam. This was clearly more than enough time to prepare. If you're a student like me, who has other commitments as well and whose only purpose is to clear the exam then a week of studying is enough. Nonetheless if you want to gain more exposure and knowledge, then you can avail hands-on-lab tutorials and explore AWS a lot more.

To get a raw idea about the exam and to get started, visit: https://aws.amazon.com/training/
https://aws.amazon.com/certification/certification-prep/ provides you with exam guides and sample questions which gives the idea about areas of focus in the exam.
https://www.aws.training/Details/Curriculum?id=27076 is a free digital course provided by AWS to help clear your exam.

According to me reading AWS whitepapers, FAQ and practicing sample questions make clearing the exam easier.

Some of the free resources-

Hope it helps!!!

CSS Charts/Graphs

Anjali Jha — Wed, 11 Aug 2021 19:25:09 +0000

I have recently learnt how to add graphs and charts to websites. It helps to keep your data representation organized, presentable and easy to comprehend. One of the easiest method of doing so is through Google Charts.

To get started-

Visit https://developers.google.com/chart.
Navigate to guide section and then select chart gallery. You will be presented with different kinds of maps to choose from.
Choose the map of your choice and head into it's code description.
Copy the script section to the head section of your HTML. Also copy the div in the body section of the code description to specify the dimensions.
That's it, you have now added a graph to your HTML file. You can customize it by changing the parameters and the content of the graph to suit your needs. Example-

You can also modify it to 3D, rotating, donut and can add various other properties.
Hope it helps!

Creating a Hamburger Menu

Anjali Jha — Mon, 02 Aug 2021 06:29:20 +0000

The hamburger icon is simply a symbol that has come to mean "menu". It's used to toggle a menu or navigation bar between being collapsed behind the button or displayed on the screen.

Here is how to create it-

1. HTML File

We start by creating our HTML file and initializing two classes to target our elements.

<body>
  <div class="menu-btn">
    <div class="menu-btn__burger"></div>
  </div>
</body>

2. CSS File

Here we start creating and designing our hamburger icon. We start with basic properties such as defining the width, height and the transition. This creates the basic outline of the box.

.menu-btn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  cursor: pointer;
  transition: all .5s ease-in-out;
  border: 3px solid #fff; 
}

To get the middle line (out of the three) of our icon we define width, height and border radius as follows-

.menu-btn__burger {
  width: 50px;
  height: 6px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(255,101,47,.2);
  transition: all .5s ease-in-out;
}

To get the other two top and bottom lines-

.menu-btn__burger::before,
.menu-btn__burger::after {
  content: '';
  position: absolute;
  width: 50px;
  height: 6px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(255,101,47,.2);
  transition: all .5s ease-in-out;
}
.menu-btn__burger::before {
  transform: translateY(-16px);
}
.menu-btn__burger::after {
  transform: translateY(16px);
}

3. JS File

Here we work with the animation of the hamburger icon. We target the "menu-btn" class and initialize a variable "menuopen" to be false. We add an eventListener "click" which either adds or removes the class "open".

const menuBtn = document.querySelector('.menu-btn');
let menuOpen = false;
menuBtn.addEventListener('click', () => {
  if(!menuOpen) {
    menuBtn.classList.add('open');
    menuOpen = true;
  } else {
    menuBtn.classList.remove('open');
    menuOpen = false;
  }
});

4. Final Touch

At last, we need to retouch our CSS for the final animation. Here our middle line moves to the left and other two rotate to 45 deg on click.

.menu-btn.open .menu-btn__burger {
  transform: translateX(-50px);
  background: transparent;
  box-shadow: none;
}
.menu-btn.open .menu-btn__burger::before {
  transform: rotate(45deg) translate(35px, -35px);
}
.menu-btn.open .menu-btn__burger::after {
  transform: rotate(-45deg) translate(35px, 35px);
}

Here is the final preview-

Hope it helps!!!

Useful VS Code Extensions

Anjali Jha — Thu, 29 Jul 2021 04:31:41 +0000

Here are some efficient VS Code extensions which will help improve your productivity and workflow.

1. indent-rainbow

It is a simple extension to make indentation more readable. This extension colorizes the indentation in front of your text alternating four different colors on each step. Some may find it helpful in writing code for Python.

2. Live-Server

It is one of the most used extension. It launches a local development server with live reload feature for static & dynamic pages.

3. auto rename tag

Useful for writing substantial lines of code. When you rename one HTML/XML tag, it automatically renames the paired HTML/XML tag thus making the process easier.

4. CSS Peek

If you hate having to toggle over to your .css file to check the properties attached to a class or id, with CSS Peek, you can view a hover image of your CSS from within you HTML file. This extension also turns class names and ids into a hyper link that takes you directly to that class or id definition in your CSS.

5. Prettier

Prettier - Code Formatter is incredibly popular for auto-formatting. It automatically formats your code on saving thus making it more organized and easy to work with.

Creating a custom scrollbar

Anjali Jha — Mon, 19 Jul 2021 14:28:50 +0000

Recently, I figured out about customizing scrollbars. Adding custom scrollbars to websites you make, helps enhance it even further and also helps in overall color-coordination.

To start with, we use ::-webkit-scrollbar.It can be included in your CSS section. It's a pseudo element used to modify the look of a browser’s scrollbar. Most browsers other than firefox support this.

A sample example of the code would be-

/* width */
::-webkit-scrollbar {
  width: 10px;
}

This section targets the width of your scrollbar.

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

This relates to the progress bar. Properties such as border radius, box shadow can also be added.

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
}

It specifies the properties of the scrolling handle that can be dragged.
To design that even further you can try-

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

This will change the color upon hovering.

Similarly some of the other pseudo elements you can use are-

::-webkit-scrollbar-button

the buttons on the scrollbar (arrows pointing upwards and downwards).

::-webkit-scrollbar-track-piece

the track (progress bar) NOT covered by the handle.

::-webkit-scrollbar-corner

the bottom corner of the scrollbar, where both horizontal and vertical scrollbars meet
and many more

Hope it helps!!

Adding Social Media icons in HTML

Anjali Jha — Tue, 13 Jul 2021 05:42:38 +0000

If you are new to web development, you might have wondered how to add social media icons to your website to help expand its reach and connectivity. I figured out just few days ago-

There are various options, but I used a popular toolkit called Font Awesome.

Step 1:

To get started, open the link below-
https://fontawesome.com/

Step 2:

Click on start for free and enter your email id to receive a kit code. You will receive an email for confirmation and setting up your account.

Step 3:

You will be greeted with a kit code, which needs to be copied and pasted in the head section of your HTML.

Step 4:

You can now browse to any icons on the Font Awesome webpage. Select the icon you wish to use and copy the associated HTML code. You can use this code in your HTML page and would be able to see the icon that you wished to.

To increase or decrease the size of the icon you can just manipulate your code a little.

<i class="fab fa-twitter"></i>

The size of the above icon can be enlarged by -

<i class="fab fa-twitter fa-5x"></i>

<i class="fab fa-twitter fa-6x"></i>

Hope you get the idea!!!!

Converting .py to .exe

Anjali Jha — Mon, 05 Jul 2021 12:30:52 +0000

To share your Python projects with the world it needs to be converted from .py to .exe file, exe file is an executable file format. It contains a program and has the ability to run as a program in computer. It does not require any import statements to execute.

Let's get started

Step 1:

Install the library pyinstaller. You can do so by typing the following code into your command prompt.

pip install pyinstaller

Step 2:

Go to the folder where .py file is located. You’ll see few folder created newly. Now Press the shift button and simultaneously right-click to open PowerShell window.

Step 3:

Type the following command:

pyinstaller --onefile 'filename.py'

It will take some time to finish the process depending on the size of your project. You will get a "Building EXE completed successfully" message.

Step 4:

Open your dist folder, here you will find your .exe file and you are good to go!!!

Atom vs VS Code

Anjali Jha — Tue, 29 Jun 2021 07:33:35 +0000

If you're searching for the perfect code editor, there's a good chance that you've run into both Atom and Visual Studio Code. Sure, there are plenty of other editors, but these two are among the most talked about. Atom has been around a while, but Visual Studio Code was once the new kid in town no one was quite sure about. Long story short, I settled down upon VS Code.

A little background

Both the VS Code and Atom are open-source code editors, originally created by Microsoft and GitHub respectively. Each of these editors is based on Electron - a framework for creating "native" desktop apps with web technologies - HTML, CSS, JS - with the addition of Node.js.

Performance

Even if Atom was the first, everyone who has used both of these editors, at least to some small extent, must agree - VS Code is just faster. Visual Studio Code has a firmly composed crux set of functionalities with plugins adding exterior level features. On the contrary, the Atom uses an extension-based approach to almost everything. So, when the number of plugins increases in Atom, it adds the sluggish behavior by placing it behind the Visual Studio code in terms of performance. Visual Studio Code has an in-built debugger, making the development flow less ‘clicky’ and maintains a single view with code and debugger. You don’t need to have multiple screens to run the different consoles and rearrange them each time you need to minimize something. It’s built into the design and your desired workspace set up. With the addition of framework, library, and language plugin extensions, you can leverage this even further with ready-made boiler-plates. Although the major feature of Visual Studio Code is being a code editor, with the addition of extensions, it becomes more than just a code editor. With the right settings, extensions, and configured shortcut keys, it can easily become a full-stack workstation. Atom allows for plugins and runs on the same general philosophy of extensibility – like Visual Studio Code. However, ATOM out of the box requires more configuration to turn it into an IDE. Visual Studio Code, in contrast, comes preconfigured with what you generally need to get started. This makes the ease of adoption much faster and easier than Atom.

Decision time

So is Visual Studio Code the best code editor?

For most web-related development, the answer is yes.
Now, it's your time to choose! Especially for beginners, it might be a very time-consuming process, so I recommend you to just try out a little of both, to finally pick the one.

Top pygame projects

Anjali Jha — Wed, 23 Jun 2021 18:53:22 +0000

Being a beginner myself, I recently got started on python and eventually Pygame. It is a collection of Python modules for video game development. If you want to become a game developer, learning Pygame is an excellent way to start.
To know more about it : https://www.pygame.org/docs/
For basic system setup and getting started: https://realpython.com/pygame-a-primer/

Here are top pygame project ideas-

Flappy Bird

Flappy bird was popular few years ago. It is a simple game where the player controls the flight of the bird with a click and prevents it from crashing into obstacles.
https://pygamezero-bird.readthedocs.io/en/latest/

Snake game

Its an old favorite game which can be made using pygame. In the snake game, the player controls a snake which gains points by eating fruits present on the screen. The snake grows every time it eats fruit.
https://www.pygame.org/project/433

Sudoku

Sudoku is a puzzle game where you have a 9×9 grid. The grid has nine squares, and you have to enter 1-9 digits in every square, row, and column. Sudoku’s catch is that the player can’t repeat a number in a row, column or square.
https://thecodezine.com/sudoku-pygame-building-using-python/

Dodge racing

This is also a popular game. It is basically a scrolling game where the player drives a car and dodges other incoming cars by changing lanes.
https://www.pygame.org/project/1523

Ladybug Run

It is a clone of the very famous action maze chase- pacman game. The player controls the character through an enclosed maze. The objective of the game is to eat all of the dots placed in the maze while avoiding obstacles.
https://www.pygame.org/project/478

For more games and ideas, visit -https://code-projects.org/t/pygame/

Forem: Anjali Jha

Machine Coding - Vending Machine

The requirements

Analysis

Application

How to be a Microsoft Learn Student Ambassador

What is MLSA Program?

Application and eligibility

How I cleared AWS Certified Cloud Practitioner

About the certification

The preparation

Some of the free resources-

AWS Whitepapers & Guides

AWS Exam Preparation Overview

Practice exam

CSS Charts/Graphs

Creating a Hamburger Menu

1. HTML File

2. CSS File

3. JS File

4. Final Touch

Useful VS Code Extensions

1. indent-rainbow

2. Live-Server

3. auto rename tag

4. CSS Peek

5. Prettier

Creating a custom scrollbar

Similarly some of the other pseudo elements you can use are-

::-webkit-scrollbar-button

::-webkit-scrollbar-track-piece

::-webkit-scrollbar-corner

Adding Social Media icons in HTML

Step 1:

Step 2:

Step 3:

Step 4:

Converting .py to .exe

Let's get started

Step 1:

Step 2:

Step 3:

Step 4:

Atom vs VS Code

A little background

Performance

Decision time

So is Visual Studio Code the best code editor?

Top pygame projects

Flappy Bird

Snake game

Sudoku

Dodge racing

Ladybug Run