DEV Community: Iszyk

Building Shopping Cart With Python: What I Learned About Dictionaries, Loops, and Logic

Iszyk — Tue, 25 Aug 2026 11:00:10 +0000

I'm continuing my journey of learning Python, and this time I decided to build something a little more practical: a Simple Shopping Cart.

After learning variables, strings, conditionals, functions, loops, lists, dictionaries, and sets, I wanted to see how I could combine these concepts into one project.

At first, I thought a shopping cart would be simple:

Select a product → choose a quantity → calculate the total.

But while building it, I realized there was much more logic involved.

Starting With a Dictionary

The first thing I needed was a way to store my products and their prices.

A Python dictionary was perfect for this because it stores information as key-value pairs.

products = {
    "Wireless Mouse": 25.99,
    "Mechanical Keyboard": 89.99,
    "Bluetooth Headphones": 120.00,
    "Water Bottle": 15.50,
    "Backpack": 45.00
}

The product name is the key, while the price is the value.

For example:

products["Wireless Mouse"]

returns:

25.99

This helped me understand dictionaries much better because I wasn't just learning that a dictionary stores key-value pairs. I was actually using one to solve a problem.

Looping Through the Products

I used a for loop with .items() to display all the products:

for product, price in products.items():
    print(product, price)

I learned that .items() allows me to get both the key and value while looping through a dictionary.

So:

for product, price in products.items():

basically means:

For every product and its price in this dictionary...

This was useful because I needed to display the available products before the customer made a selection.

Creating the Cart

Next, I created an empty dictionary:

cart = {}

I decided that my cart would store:

Product → Quantity

For example:

{
    "Wireless Mouse": 2,
    "Coffee Mug": 3
}

This was one of the moments where dictionaries started making more sense to me.

I wasn't just storing random data. I was creating a structure that represented something from the real world.

Handling User Input

The customer needs to select a product and enter how many they want.

customer_request = input("What product would you like to buy? ")
product_quantity = int(input("How many would you like to buy? "))

One thing I had to remember was that input() returns a string.

So when I wanted the quantity to be treated as a number, I needed to convert it using int().

int(input(...))

This was another example of how concepts I had previously learned started working together.

Using a While Loop

I wanted the customer to be able to continue shopping instead of selecting only one product.

So I used a while loop:

while continue_shopping.lower() == "yes":

The idea was simple:

Keep asking the customer for products while they want to continue shopping.

This was a good exercise because I had recently learned loops, and now I was using a loop to control an actual program.

The Problem of Buying the Same Product Twice

This was one of the interesting problems I encountered.

Suppose the customer buys:

Wireless Mouse → 2

Then later buys:

Wireless Mouse → 3

If I simply did:

cart[customer_request] = product_quantity

the second purchase would replace the first one.

The cart would contain:

{
    "Wireless Mouse": 3
}

instead of:

{
    "Wireless Mouse": 5
}

So I needed to check whether the product already existed in the cart:

if customer_request in cart:
    cart[customer_request] += product_quantity
else:
    cart[customer_request] = product_quantity

Now, if the customer buys 2 and then another 3, Python adds them together.

This taught me an important lesson:

Writing code isn't always about knowing the syntax. Sometimes it's about thinking carefully about how your data should behave.

Calculating the Total

After the customer finished shopping, I needed to calculate the total price.

I started with:

total = 0

Then I looped through the cart:

for product, quantity in cart.items():
    item_total = products[product] * quantity
    total += item_total

This was where many of the concepts I had learned came together.

I had the product and quantity from the cart, and I could use the product name to find its price in the products dictionary.

For example:

Wireless Mouse
$25.99 × 2 = $51.98

Then:

Coffee Mug
$12.99 × 3 = $38.97

And finally:

$51.98 + $38.97 = $90.95

I also learned the difference between an individual item total and the overall cart total.

item_total = products[product] * quantity

represents the cost of one type of product.

While:

total += item_total

keeps adding those individual totals together.

A Mistake I Made

One of my mistakes was modifying the original product price while calculating the total.

I initially tried something like:

products[product] *= quantity

This changed the original price inside my products dictionary.

For example, if the Wireless Mouse originally cost:

$25.99

and the customer bought two, it would become:

$51.98

inside my product dictionary.

That wasn't what I wanted.

I learned that I should calculate the value separately instead:

item_total = products[product] * quantity

and then add it to the overall total:

total += item_total

This was a simple mistake, but fixing it helped me understand the difference between changing data and using data in a calculation.

Making Product Search Case-Insensitive

I also wanted users to be able to enter:

Wireless Mouse

or:

wireless mouse

or:

WIRELESS MOUSE

and still find the product.

I used .lower() to compare the user's input with the product names:

for product in products:
    if customer_request.lower() == product.lower():
        customer_request = product
        break

This allowed me to compare both strings in lowercase while keeping the original product name from the dictionary.

It was another example of taking something I had learned previously and applying it to a real problem.

What I Learned From This Project

This project taught me more than just how to build a shopping cart.

*Dictionaries are extremely useful

I understood dictionaries much better after using them in a real project.

*Loops become more meaningful when you build something

Instead of simply writing a loop to practice syntax, I was using loops to process actual data.

*if statements control the logic of a program

The program constantly needs to make decisions:

Does this product exist?
Is it already in the cart?
Does the customer want to continue shopping?

*Bugs are part of learning

I made several mistakes while building this project.

But fixing those mistakes helped me understand the concepts better than if everything had worked perfectly on the first try.

*Small projects show what you actually understand

I could recognize Python syntax before starting this project.

But building the shopping cart forced me to think about how the different concepts work together.

And I think that's where real learning starts.

What's Next?

This is another step in my Python learning journey.

So far, I've built:

🎯 A Number Guessing Game

🏧 A Simple ATM

❓ A Python Quiz Game

🛒 A Simple Shopping Cart

I'm still a beginner, but I'm starting to understand something important:

You don't become better at programming by waiting until you know everything. You become better by building things with what you currently know.

And that's exactly what I'm going to keep doing.

One project at a time. 🐍💻

Learning Python Loops as a Beginner: What I Finally Understood

Iszyk — Wed, 19 Aug 2026 19:35:44 +0000

When I started learning Python, I understood variables, data types, conditionals, and functions. But there was one concept I knew I couldn't avoid for long: loops.

Loops are one of those programming concepts that seem simple when someone explains them, but actually using them in a project is where things start to make sense.

After learning and practicing them, I decided to write about what I learned and how I used loops in my first Python projects.

What Is a Loop?

A loop allows us to repeat a block of code multiple times without writing the same code over and over again.

Imagine I wanted Python to print the numbers from 1 to 5.

Without a loop, I would have to write:

print(1)
print(2)
print(3)
print(4)
print(5)

That works, but imagine having to print 1 to 1,000.

That's where loops become useful.

Instead, I can use a loop to tell Python:

"Repeat this action for each number."

for number in range(1, 6):
    print(number)

The result is:

Much cleaner.

The `for` Loop

The first loop I focused on was the for loop.

A for loop is useful when I want to go through a collection of items or repeat something a specific number of times.

For example:

fruits = ["Apple", "Banana", "Orange"]

for fruit in fruits:
    print(fruit)

Python goes through the list one item at a time.

The output is:

Apple
Banana
Orange

The important thing I learned here is that the variable fruit represents the current item in the list.

So the loop is essentially doing:

First → fruit = Apple
Second → fruit = Banana
Third → fruit = Orange

This helped me understand that a loop isn't magic. Python is simply repeating the same instructions while changing the value of the loop variable.

Understanding `range()`

Another important thing I learned was range().

For example:

for number in range(5):
    print(number)

This produces:

One thing that initially confused me was why it stops at 4 instead of 5.

The reason is that range(5) starts at 0 and stops before 5.

You can also specify a starting point:

for number in range(1, 6):
    print(number)

Now we get:

Understanding this made working with loops much easier.

Using Loops With Conditions

Loops become much more powerful when combined with if statements.

For example:

for number in range(1, 6):
    if number % 2 == 0:
        print(number)

This goes through the numbers from 1 to 5 and only prints the even numbers.

Output:

2
4

This showed me that loops don't just have to repeat the exact same action. I can also make decisions during each repetition.

Using `enumerate()`

One of the most useful things I learned while building my quiz project was enumerate().

Suppose I have:

questions = [
    "What is Python?",
    "What is HTML?",
    "What is CSS?"
]

I can write:

for index, question in enumerate(questions):
    print(index, question)

The output will be:

0 What is Python?
1 What is HTML?
2 What is CSS?

enumerate() gives me both:

the position of the item (index)
the actual item (question)

This became particularly useful in my quiz game.

Applying Loops: My Python Quiz Game

After learning loops, I wanted to actually use them in a project.

I built a simple Python Quiz Game.

The game contains five questions and asks the user to select an answer for each one.

I stored the questions in a list:

questions = [
    "Question 1...",
    "Question 2...",
    "Question 3...",
    "Question 4...",
    "Question 5..."
]

And I stored the correct answers in another list:

answers = ['B', 'A', 'D', 'B', 'B']

Then I used enumerate() to connect each question to its correct answer:

for index, question in enumerate(questions):
    print(question)

    answer = input("What is your answer?: ").upper()

    if answer == answers[index]:
        score += 1

This was one of the moments where loops really started to click for me.

Instead of writing separate code for Question 1, Question 2, Question 3, and so on, I could write the logic once and let the loop handle all five questions.

Keeping Track of the Score

I also learned that I can use a variable outside the loop and modify it inside the loop.

I started with:

score = 0

Then whenever the user answered correctly:

score += 1

After all the questions were completed, I displayed the result:

print(f"Your score is: {score}/5")

This helped me understand how variables can change as a program runs.

What I Learned From Loops

Learning loops wasn't just about learning the for syntax.

I learned several important programming ideas along the way:

1. Don't repeat code unnecessarily

If I'm writing the same block of code multiple times, I should ask myself:

"Can a loop handle this?"

2. Lists and loops work really well together

A list can hold multiple pieces of information, while a loop can process them one by one.

for item in items:
    print(item)

This combination is something I'll probably use constantly as I continue learning Python.

3. Indexes are important

Understanding indexes helped me understand how I could connect data from different lists.

answers[index]

4. Loops make programs more dynamic

Without loops, my quiz would have required separate code for every question.

With a loop, the same logic can handle any number of questions.

That's a much better way to think about programming.

What I'm Learning Next

Now that I've finished learning loops and practiced them by building a project, I'm moving on to dictionaries and sets.

I'm following the approach of learning a concept and then building something with it instead of trying to memorize everything at once.

My next Python project will be a Simple Shopping Cart, where I'll put these concepts together and start working with dictionaries.

Final Thoughts

Loops were one of the concepts I was looking forward to learning because I knew they were fundamental to programming.

After actually using them in a project, I can see why.

The biggest lesson for me wasn't simply learning:

for item in items:

It was learning how to look at a problem and recognize:

"I don't need to write this five times. I can make Python repeat it for me."

That's one of the small moments that makes learning programming feel a lot more rewarding.

I'm still learning Python, but I'm starting to understand that the best way to learn isn't just reading about a concept.

Learn it → practice it → build something with it → make mistakes → fix them → move on.

And that's exactly what I'm doing.

Building My First Python Project (ATM): What I Learned From a Simple Project

Iszyk — Fri, 14 Aug 2026 16:45:33 +0000

When I started learning Python, I knew the basics: variables, data types, strings, numbers, conditionals, functions, and scope.
But knowing the syntax and actually using it to build something are two different things.
So I decided to build a Simple ATM program using only the concepts I had learned so far.

The goal wasn't to build a real banking system. It was to take the fundamentals I had learned and put them together into something practical.
And honestly, this small project taught me more than simply reading about Python syntax.

I wanted the program to have three basic options:

1. Withdraw
2. Deposit
3. Check Balance

Choose an option: 1

How much do you want to withdraw? 2000

Withdrawal successful!
Your remaining balance is: 8000 CFA

1. Starting with Variables
The first thing I needed was a starting balance. This looks very simple, but it represents something important: variables allow programs to store information that can change.
The balance can change after a withdrawal or deposit.
For Example:

balance = 10000
balance -= 2000
Now the balance is 
8000

2. Getting Input From the User
The ATM needs to interact with the user.
I used Python's input() function. One thing I learned here is that input() returns a string.
That's why when asking for a withdrawal amount, I used:

option = input('Choose an option: ')
withdrawal = int(input('How much do you want to withdraw? '))

3. Using Conditional Statements
The ATM needs to know what the user wants to do.
That's where if, elif, and else come in.

if option == '1':
    # Withdraw

elif option == '2':
    # Deposit

elif option == '3':
    # Check balance

else:
    print('Invalid Option!')

This was one of the most important parts of the project.
The program is essentially making decisions:
If the user chooses 1, do this.
If the user chooses 2, do that.
If the user chooses 3, show the balance.
Otherwise, tell them the option is invalid.

4. Creating Functions
Initially, I had most of my logic directly inside the program.
But I wanted to make the code more organized, so I created functions.
For withdrawals and deposits:

def withdraw_money(balance, withdrawal):
    if withdrawal <= balance:
        balance -= withdrawal
        return balance, True
    else:
        return balance, False


def deposit_money(balance, deposit):
    balance += deposit
    return balance

This taught me that functions allow me to separate different responsibilities in my program. Instead of having all the withdrawal logic mixed with the menu logic, I can put the withdrawal logic inside its own function.

5. Understanding Parameters
My withdrawal function has two parameters:

def withdraw_money(balance, withdrawal):

balance represents the current account balance.
withdrawal represents the amount the user wants to withdraw.

When I call the function:
balance, success = withdraw_money(balance, withdrawal)
I'm passing those values into the function.

6. Understanding return
This was probably the concept that challenged me the most.
At first, I was returning messages directly from my function:
return "Withdrawal successful!"
But then I realized that this would make my balance variable become a string instead of a number.
For example: balance = withdraw_money(balance, withdrawal) could make balance contain "Withdrawal Successful" instead of 8000. That would obviously cause problems when I wanted to perform another calculation.

So I changed the function to return the actual balance:

return balance, True

OR

return balance, False

7. Returning Multiple Values
This was another new concept for me.
Python allows a function to return multiple values.

For example:

return balance, True
balance, success = withdraw_money(balance, withdrawal)

So if the withdrawal succeeds:
balance = 8000
success = True

And if it fails:
balance = 10000
success = False

I can the use the boolean value:
if success:
    print("Withdrawal successful!")
else:
    print("Insufficient funds!")

This helped me understand how functions can perform an operation and communicate the result back to the main program.

8. My Final ATM Program

This Project Taught Me That
Before building, I had to understand the individual concepts.
But putting them together helped me understand how they work as a system.

I practiced:

Variables
Strings
Integers
Type conversion
User input
Arithmetic operators
Conditional statements
Functions
Function parameters
Scope
Return values
Boolean values
Returning multiple values
Basic program structure

Most importantly, I learned that building projects exposes gaps in your understanding.
There were several moments where I knew the syntax but wasn't sure how to connect everything together.
That's actually one of the reasons I think projects are so important when learning to program.

You don't just learn:
"What does return mean?"
You learn:
"Why do I need return here?"
And that's a much deeper understanding.

What's Next?

This ATM is still very basic.
There are plenty of things I could add later:

Multiple transactions
PIN authentication
Transaction history
Account numbers
Transfer functionality
Input validation
Error handling
Loops so the ATM doesn't terminate after one operation
Saving account information

But I intentionally didn't add those features yet.
I'm still building my Python fundamentals, so I'm focusing on understanding one concept at a time.
The next step is to keep building small projects and gradually introduce new concepts.

Thanks for staying with me till the end

Building a Simple Currency Converter in React with useState and useMemo

Iszyk — Thu, 13 Aug 2026 15:41:19 +0000

One of the best ways to learn React is by building small, practical projects. A currency converter is an excellent example because it introduces state management, user input handling, calculations, and performance optimization—all in a single application.

I built a simple currency converter using React that converts from USD to EUR, GBP, and JPY. For simplicity, I used fixed exchange rates instead of calling a live exchange rate API.

React applications are interactive because they can respond to user actions. The useState hook allows components to remember values between renders.

For this project, I declared it as thus,

const [amount, setAmount] = useState(1); const [currency, setCurrency] = useState("EUR");

The amount stores the value entered.
The setAmount() updates it.
The currency variable stores the selected currency.
The setCurrency() changes the selected currency.
Whenever either value changes, React automatically re-renders the component.

Now, to calculate the conversion, I stored the exchange rate in an object

const RATES = { USD: 1, EUR: 0.92, GBP: 0.79, JPY: 157.3 };

The interface contains:
A number input.
A dropdown menu.
A heading displaying the converted amount.

Example:

```return (

Currency Converter

  <input
      type="number"
      value={amount}
      onChange={(e) => setAmount(Number(e.target.value))}
  />

  <select
      value={currency}
      onChange={(e) => setCurrency(e.target.value)}
  >
      <option value="EUR">EUR</option>
      <option value="GBP">GBP</option>
      <option value="JPY">JPY</option>
  </select>

  <h2>
      {amount} USD = {convertedAmount} {currency}
  </h2>

);```

Building a Simple Currency Converter in React with useState and useMemo

Iszyk — Thu, 30 Jul 2026 13:38:58 +0000

In this tutorial, I built a simple currency converter using React that converts from USD to EUR, GBP, and JPY.

For simplicity, I used fixed exchange rates instead of calling a live exchange rate API.

React applications are interactive because they can respond to user actions. The useState hook allows components to remember values between renders.

`const [amount, setAmount] = useState(''); const [fromCurrency, setFromCurrency] = useState('USD'); const [toCurrency, setToCurrency] = useState('EUR');`

Here:

amount stores the value entered.
setAmount() updates it.
fromCurrency is the initial currency
setFromCurrency changes the initial currency
toCurrency stores the selected currency.
setToCurrency() changes the selected currency.

Whenever either value changes, React automatically re-renders the component.

Normally, React recalculates everything every time the component renders—even when the calculation doesn’t need to change.

That’s where useMemo comes in.

It remembers (memoizes) the previous calculation and only recalculates when its dependencies change.

For example:

`const memoizedValue = useMemo(() => { return expensiveCalculation(); }, [dependency]);`

`const RATES = { USD: 1, EUR: 0.92, GBP: 0.79, JPY: 157.3 };`

These rates represent the value of 1 USD.

I combined everything with useMemo.

`const convertedAmount = useMemo(() => { const value = Number(amount); if (amount === '' || !Number.isFinite(value)) return ''; return ((value / RATES[fromCurrency]) * RATES[toCurrency]).toFixed(2); }, [amount, fromCurrency, toCurrency]);`

Multiply the amount by the selected RATES.
Format the result to two decimal places.
Only recalculate when amount or currency changes.

Building the User Interface

The interface contains:

A number input.
A dropdown menu.
A heading displaying the converted amount.

Example:

`return ( <div className="table-container"> <h1 className="heading">Currency Converter</h1> <h3 className="converter-title" >{`${fromCurrency} to ${toCurrency} Conversion`}</h3> <form className="form" onSubmit={e => e.preventDefault()}> <input type="number" id="amount" placeholder="0" value={amount} onChange={(e) => setAmount(e.target.value)} />`

 ```<p className="start-paragraph">Start Currency:</p>
    <select className="start-currency"
      value={fromCurrency}
      onChange={(e) => setFromCurrency(e.target.value)} >
     <option>USD</option>
     <option>EUR</option>
     <option>GBP</option>
     <option>JPY</option>
    </select> 

 <p className="start-paragraph">Target Currency:</p>
    <select className="target-currency"
    value={toCurrency}
    onChange={(e) => setToCurrency(e.target.value)} >          
      <option>USD</option>
      <option>EUR</option>
      <option>GBP</option>
      <option>JPY</option>
    </select>  
  </form>
  <p className="result">
  {convertedAmount ? `Converted Amount: ${convertedAmount} ${toCurrency}`: `Converted Amount: 0.00 ${toCurrency}`}
   </p>
</div>);```

Although this project is simple, it teaches several core React concepts:

Managing state with useState.
Handling user input.
Rendering UI dynamically.
Using useMemo to avoid unnecessary calculations.
Organizing component logic in a clean, readable way.

Conclusion

Building small projects is one of the fastest ways to become comfortable with React. This currency converter demonstrates how a few hooks can create an interactive, efficient application.

useState gives your components memory, while useMemo helps avoid unnecessary work by recalculating values only when needed.

JavaScript Libraries and Frameworks: REACT

Iszyk — Tue, 21 Jul 2026 16:25:29 +0000

JavaScript libraries and frameworks provide pre-built code that streamlines the development process. While both libraries and frameworks serve to improve productivity and standardize coding practices, they differ in their approach and level of control they provide to developers.

Libraries are generally more focused on providing solutions to specific tasks, such as manipulating the DOM, handling events, or managing AJAX requests.
An example of a JavaScript library is jQuery.

Frameworks, on the other hand, provide a more defined structure for building applications. They often come with a set of rules and conventions that developers need to follow.

React, a UI library, is more flexible and doesn't enforce any particular architectural pattern. React focuses primarily on the view layer and leaves a lot of the choices on application design up to the developers.

React is one of the most popular JavaScript libraries for building user interfaces and web applications. Originally developed and maintained by Facebook, React has gained huge popularity in web development due to its efficiency, flexibility, and features.

A fundamental concept in React is the creation of reusable UI components. These components, such as buttons, cards, and avatar components, can be easily reused throughout an application. It can nest these components inside each other to build more complex, dynamic interfaces.

Components are the building blocks of React applications that allow developers to break down complex user interfaces into smaller, manageable pieces, making it easier to develop and maintain large-scale applications.
Example of a component:-

function Greeting() { const name = "John" {/* The result will be Hello John*/} return <h1 className="title">Hello {name}</h1>; }

In this example, we've defined a component called Greeting. The curly braces {} inside the h1 tags enable us to embed JavaScript expressions, allowing us to access the name variable within the h1 element. We are also applying a className called title to the h1 element, this is because in JavaScript, class is a reserved name. So, we need to use className instead.

One of the key advantages of React is that these custom components can update and render independently as data changes.

Unlike traditional JavaScript, which requires direct manipulation of the DOM (Document Object Model), React uses a virtual DOM, which improves performance and efficiency.

In addition to reusable components, React also provides a powerful way to manage the state of your application. State refers to the data that determines how a component renders and behaves.

With React, you can easily track and update the state of components, ensuring that the UI reflects the most current data.

Asynchronous Javascript

Iszyk — Thu, 02 Apr 2026 09:21:38 +0000

Asynchronous JavaScript is a way of writing code that allows tasks to run without blocking the rest of your program.

In simple terms: instead of waiting for a code to finish executing like fetching data from an API, JavaScript continues executing other code and comes back to the result later.

We basically have two types of operations in javascript, synchronous and asynchronous. The primary difference is that synchronous operations occur sequentially, requiring one task to finish before the next begins, while asynchronous operations allow multiple tasks to run concurrently without waiting, improving efficiency and responsiveness. Synchronous is "blocking" (wait-for-result), while asynchronous is "non-blocking" (continue-to-other-tasks).

Example of synchronous operation;-


let data = fetchData(); // waits here until done

console.log(data);
console.log("End");

The app pauses until fetchData() finishes.

Example of asynchronous operation;-

console.log("Start");

fetchData().then(data => {
  console.log(data);
});

console.log("End");

plaintext
The Output;-

Start
End
(data comes later)

plaintext

🔹 Common Asynchronous Techniques

Callbacks

A callback is a function passed as an argument to another function, which is then executed (or "called back") inside that outer function to complete a specific task, because functions in JavaScript are First-class Objects, they can be treated like any other variable and passed between functions.
For example,

A Simple Synchronous Callback

function greet(name, callback) {
  console.log("Hello, " + name);
  callback(); // Executing the callback function
}

function sayGoodbye() {
  console.log("Goodbye!");
}

// Pass 'sayGoodbye' as a callback to 'greet'
greet("Alice", sayGoodbye);

plaintext

In this example, the greet function takes a callback as a parameter and executes it immediately after performing its own logic.

Asynchronous Callback
Callbacks are essential for asynchronous programming, where a task needs time to complete (like a timer or data fetch) without blocking the rest of the code.

console.log("Start");

// setTimeout takes an anonymous function as a callback
setTimeout(() => {
  console.log("This appears after 2 seconds");
}, 2000);

console.log("End");

plaintext

Promises

In JavaScript, a Promise is an object representing the eventual completion or failure of an asynchronous operation and its resulting value. It serves as a placeholder for a result that is not yet available, allowing you to handle asynchronous code in a cleaner way than traditional callbacks.
Promises exist in one of three states: pending (ongoing), fulfilled (successful), or rejected (failed). Once fulfilled or rejected, a promise is settled and cannot change state.

You create a Promise using the new Promise() constructor, which takes an executor function. This function runs immediately and receives two callback arguments provided by the JavaScript engine: resolve and reject.

const myPromise = new Promise((resolve, reject) => {
  const success = true; 
  if (success) {
    resolve("Operation Successful!"); // Moves state to Fulfilled
  } else {
    reject("Operation Failed.");      // Moves state to Rejected
  }
});

plaintext
To handle the result of a Promise, you attach handlers using these methods:
.then(): Runs when the promise is fulfilled. It can also take a second argument for rejection.
.catch(): A shorthand for handling errors. It runs if the promise is rejected at any point in the chain.
.finally(): Runs after the promise settles, regardless of whether it succeeded or failed. It is often used for cleanup.

const myPromise = new Promise((resolve, reject) => {
  const success = true; 
  if (success) {
    resolve("Operation successful!"); // Marks as fulfilled
  } else {
    reject("Something went wrong.");  // Marks as rejected
  }
});

// Consuming the promise
myPromise
  .then((data) => console.log(data))    // Runs if resolved
  .catch((err) => console.error(err))   // Runs if rejected
  .finally(() => console.log("Done"));  // Always runs

plaintext

Async/Await (Modern & Cleaner)

In JavaScript, async and await are keywords used to write asynchronous code that looks and behaves like synchronous code. They are "syntactic sugar" built on top of JavaScript Promises, making complex asynchronous flows easier to read and maintain.

The Concept

async Keyword: Placed before a function declaration to define an asynchronous function.
An async function always returns a Promise.
If the function returns a value, that value is automatically wrapped in a resolved Promise.

await Keyword: Can only be used inside an async function (or at the top level of a module).
It pauses the execution of the async function until the Promise settles (resolves or rejects).
Once the Promise resolves, it returns the result. If it rejects, it throws an error.
While the function is paused, the JavaScript engine can perform other tasks, making it non-blocking.

async function fetchData() {
  try {
    // Execution pauses here until the fetch promise resolves
    const response = await fetch('https://example.com');

    // Execution pauses again for the .json() promise
    const data = await response.json();

    console.log(data);
  } catch (error) {
    // Standard try/catch handles any errors in the async flow
    console.error("Fetch error:", error);
  }
}

fetchData();

To fetch data from an API using the Fetch API, the async/await pattern is commonly used.

Building a Simple JavaScript Slider: A Code Walkthrough

Iszyk — Tue, 17 Feb 2026 11:40:15 +0000

Image sliders are one of the most widely used UI components in modern web development. From product showcases and portfolio galleries to testimonials and hero banners, sliders allow multiple pieces of content to occupy the same space while keeping the interface clean and interactive. First of all, what is a slider? A slider is a UI component that displays one slide at a time, it allows navigation between slides, it moves content horizontally (most common) or vertically and lastly it uses animation for smooth transitions. A slider typically displays one item at a time and lets users navigate between items using arrows, dots, or swipe gestures.
The images are placed horizontally inside a fixed-width container but only one slide is visible because the container hides the overflow as shown below.
+----------------------------------+
| Viewport Window |
| [ Slide 1 ] |
+----------------------------------+
When we click "Next", we shift the entire row left, likewise when we click "Previous", we shift the entire right. By this way, we allow the next image that was hidden to be displayed while the previous goes hidden.
When we want to build an image slider, we start with the HTML document by creating the div container first with a class of slider, the left and right arrows are enclosed in a button element with a class of slider_btn slider_btn--left in the HTML. Then we create the img element with the images we want, and also with a class of slides as it is shown below.

<div class="slider">
                    <img src="../images/image-product-1.jpg" alt="Slide 1" class="slide">
                    <img src="../images/image-product-2.jpg" alt="Slide 2" class="slide">
                    <img src="../images/image-product-3.jpg" alt="Slide 3" class="slide">
                    <img src="../images/image-product-4.jpg" alt="Slide 4" class="slide">
                    <button class="slider__btn slider__btn--left">&larr;</button>
                    <button class="slider__btn slider__btn--right">&rarr;</button>
            </div>

The next step is the styling which is done in the css file section. The styling shown below is in 375px, it is shown in mobile view. It gives basic layout, the hiding and showing behavior for slides.

.slider{
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
}

.slides {
    display: flex;
    width: 100%;
    height: auto;
}

.slider__btn--left {
    left: 5px;
}

.slider__btn--right {
    right: 5px;
}

.slider__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: white;
    border: none;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    color: hsl(26, 100%, 55%);
    font-weight: 700;
    z-index: 10;
}

The last step is implementing the javascript logic. The logic is to make sure that when the button is clicked, it performs a function which is showing the correct slide in this context.

let currentMobileSlide = 0;
const mobileSlides = document.querySelectorAll('.slider .slide');
const mobileLeftBtn = document.querySelector('.slider__btn--left');
const mobileRightBtn = document.querySelector('.slider__btn--right');

unction showMobileSlide(index) {
    if (!mobileSlides || mobileSlides.length === 0) return;
    mobileSlides.forEach((slide, i) => {
        slide.style.display = (i === index) ? 'block' : 'none';
        slide.classList.toggle('active', i === index);
    });
}

if (mobileLeftBtn) {
    mobileLeftBtn.addEventListener('click', () => {
        currentMobileSlide = (currentMobileSlide === 0) ? mobileSlides.length - 1 : currentMobileSlide - 1;
        showMobileSlide(currentMobileSlide);
    });
}

if (mobileRightBtn) {
    mobileRightBtn.addEventListener('click', () => {
        currentMobileSlide = (currentMobileSlide === mobileSlides.length - 1) ? 0 : currentMobileSlide + 1;
        showMobileSlide(currentMobileSlide);
    });
}

// Initialize mobile slider
showMobileSlide(currentMobileSlide);

In conclusion, slider is simple and lightweight, ideal for portfolios or landing pages. It can also be enhanced by adding autoplay, swipe gestures and/or transition effects.

# JavaScript and Event Listeners: Making Web Pages Interactive

Iszyk — Mon, 22 Dec 2025 11:06:50 +0000

Introduction

One of the things that makes a website feel alive is interactivity.

You click a button and something happens.

You type into a search box and results appear.

You submit a form and the page responds.

You move your mouse over an element and its appearance changes.

You resize your browser and the layout responds.

But how does JavaScript know that these things are happening?

The answer is events and event listeners.

As I continue learning JavaScript, event listeners are one of the concepts that really helped me understand how JavaScript interacts with HTML and responds to what users do on a webpage.

In this article, I'll break down:

What an event is
What an event listener is
How addEventListener() works
Common JavaScript events
event.preventDefault()
Why events are important for interactive websites
A simple practical example

What Is an Event?

An event is an action or occurrence that happens in the browser.

For example:

A user clicks a button
A user types something into an input
A form is submitted
A key is pressed
The mouse moves over an element
A checkbox is changed
The browser window is resized

JavaScript can detect these actions and respond to them.

Think of an event as a signal.

For example:

"Hey JavaScript, the user just clicked this button!"

JavaScript can then decide what should happen next.

What Is an Event Listener?

An event listener is a function that waits for a particular event to happen and then executes some code when that event occurs.

The most common way to create one in JavaScript is with:

addEventListener()

The basic syntax looks like this:

element.addEventListener("event", function () {
    // code to execute
});

For example:

const button = document.querySelector("#myButton");

button.addEventListener("click", function () {
    console.log("Button clicked!");
});

Here is what is happening:

We select the button from the HTML.
We tell JavaScript to listen for a "click" event.
When the user clicks the button, the function runs.
"Button clicked!" is printed to the console.

It's basically JavaScript saying:

"I'm going to watch this button. Whenever someone clicks it, I'll do something."

Events vs Event Listeners

This was an important distinction for me to understand.

An event is the action.

An event listener is what waits for that action and tells JavaScript what to do when it happens.

For example:

Event: User clicks a button.

Event listener: Wait for the click and run this function.

button.addEventListener("click", function () {
    console.log("The user clicked the button.");
});

So you can think of it like this:

Event → Listener → Action

A Practical Example

Let's build something simple.

Suppose we have a button:

<button id="myButton">Click Me</button>

<p id="message">Nothing has happened yet.</p>

Now let's use JavaScript to change the message when the button is clicked.

const button = document.querySelector("#myButton");
const message = document.querySelector("#message");

button.addEventListener("click", function () {
    message.textContent = "You clicked the button!";
});

Before clicking:

Nothing has happened yet.

After clicking:

You clicked the button!

This might look simple, but this is one of the fundamental ideas behind interactive web applications.

The same concept can eventually be used for things like:

Opening and closing navigation menus
Showing and hiding modals
Form validation
Image sliders
Search functionality
Shopping carts
Dropdown menus
Games
Interactive dashboards

Common JavaScript Events

JavaScript has many different events that we can listen for.

Here are some common ones:

1. `click`

Triggered when an element is clicked.

button.addEventListener("click", function () {
    console.log("Clicked!");
});

This is probably one of the events you'll use most often as a beginner.

2. `input`

Triggered when the value of an input changes as the user types.

const input = document.querySelector("#username");

input.addEventListener("input", function () {
    console.log(input.value);
});

This is useful for:

Search boxes
Live form validation
Character counters
Password strength indicators

3. `change`

Triggered when the value of certain form elements changes.

For example:

const select = document.querySelector("#country");

select.addEventListener("change", function () {
    console.log(select.value);
});

This is commonly used with:

<select> elements
Checkboxes
Radio buttons
Form controls

4. `keydown`

Triggered when a key is pressed down.

document.addEventListener("keydown", function (event) {
    console.log(event.key);
});

If the user presses the Escape key, for example, JavaScript can detect it.

document.addEventListener("keydown", function (event) {
    if (event.key === "Escape") {
        console.log("Escape was pressed!");
    }
});

Note: You may see keypress in older tutorials, but for modern JavaScript, keydown and keyup are generally preferred.

5. `mousemove`

Triggered when the mouse moves over an element or document.

document.addEventListener("mousemove", function () {
    console.log("Mouse is moving");
});

You can use mouse events to create interactive effects and animations.

6. `dblclick`

Triggered when an element is double-clicked.

button.addEventListener("dblclick", function () {
    console.log("Double clicked!");
});

And there are many more events available in JavaScript.

What Is the Event Object?

Another useful concept is the event object.

When an event occurs, JavaScript can provide information about that event.

We can receive that information through a parameter, commonly called event or e.

For example:

button.addEventListener("click", function (event) {
    console.log(event);
});

The event object contains useful information about what happened.

For example:

document.addEventListener("keydown", function (event) {
    console.log(event.key);
});

If I press the letter A, JavaScript can tell me:

If I press Escape, it can tell me:

Escape

This becomes very useful when building interactive applications.

`event.preventDefault()`

One method I think every beginner should understand is:

event.preventDefault()

Some HTML elements have default browser behavior.

For example, when a user submits a form, the browser may attempt to send the form and reload the page.

But what if I want JavaScript to handle the form myself?

I can prevent the browser's default behavior.

const form = document.querySelector("#myForm");

form.addEventListener("submit", function (event) {
    event.preventDefault();

    console.log("Form submission handled by JavaScript!");
});

The important line is:

event.preventDefault();

It tells the browser:

"Don't perform the normal default action. I'll handle this with JavaScript."

This is particularly useful when building custom form validation and applications where data is sent using JavaScript.

Why Are Event Listeners Important?

This is where event listeners become really interesting.

Imagine a website with only HTML and CSS.

You can create beautiful layouts.

You can display text, images, buttons and forms.

But if nothing responds to the user's actions, the website can feel very limited.

JavaScript gives us the ability to respond to those actions.

For example:

User clicks "Add to Cart"

↓

JavaScript detects the click

↓

Event listener runs

↓

Product is added to the cart

That's the basic idea behind many interactive features we use every day.

Static vs Interactive Websites

This also helped me understand the difference between a static page and an interactive application.

A simple static website might mainly display information:

About a company
Services
Contact information
Blog posts
Images

But an interactive application can respond to the user.

For example:

E-commerce website

User clicks:

Add to Cart

JavaScript responds:

Product added to your cart.

Login form

User enters incorrect information.

JavaScript responds:

Please enter a valid email address.

Search application

User types:

JavaScript

JavaScript can respond by displaying matching results.

The website isn't simply displaying information anymore.

It is responding to the user.

Events Are Everywhere

Once you start paying attention to them, you'll notice events everywhere.

When you:

Click a button
Submit a form
Type in a search box
Press a keyboard key
Select an option
Move your mouse
Resize your browser
Scroll a page

There is a good chance JavaScript can listen for that action and respond to it.

That's what makes the web feel interactive.

What I'm Taking Away From Learning Event Listeners

Learning event listeners has helped me understand something important about JavaScript.

JavaScript isn't just about writing calculations and displaying messages in the console.

It can listen to what users are doing and respond accordingly.

That is a major part of what makes modern websites and web applications interactive.

The concept itself is actually quite simple:

Something happens
       ↓
JavaScript detects it
       ↓
Event listener runs
       ↓
Something changes

And that simple process can power surprisingly complex applications.

Final Thoughts

Event listeners are one of the fundamental concepts I believe every beginner learning JavaScript should understand.

The addEventListener() method might look simple:

element.addEventListener("click", function () {
    // do something
});

But behind this simple syntax is a powerful idea:

JavaScript can listen, react, and change the experience of the user.

As I continue learning JavaScript and building projects, I'm beginning to see event listeners everywhere.

From buttons and forms to search bars and interactive applications, events are a major part of what transforms a webpage from something you simply look at into something you can actually interact with.

And that's one of the things I really enjoy about JavaScript.

You don't just write code.

You write code that responds to people. 🚀

What's Next?

The best way to understand event listeners isn't just by reading about them.

It's by building.

So my next step is to keep practicing with small JavaScript projects and use events to make them more interactive.

If you're also learning JavaScript, don't just memorize addEventListener().

Try something with it.

Build a button.

Build a form.

Build a counter.

Build a small game.

Break it.

Fix it.

And learn from it.

That's how the concepts start to stick. 💻🚀

What was the first JavaScript event you learned? Let me know in the comments.

DEV Community: Iszyk

Building Shopping Cart With Python: What I Learned About Dictionaries, Loops, and Logic

Learning Python Loops as a Beginner: What I Finally Understood

What Is a Loop?

The for Loop

Understanding range()

Using Loops With Conditions

Using enumerate()

Applying Loops: My Python Quiz Game

Keeping Track of the Score

What I Learned From Loops

1. Don't repeat code unnecessarily

2. Lists and loops work really well together

3. Indexes are important

4. Loops make programs more dynamic

What I'm Learning Next

Final Thoughts

Building My First Python Project (ATM): What I Learned From a Simple Project

Building a Simple Currency Converter in React with useState and useMemo

Currency Converter

Building a Simple Currency Converter in React with useState and useMemo

JavaScript Libraries and Frameworks: REACT

Asynchronous Javascript

Building a Simple JavaScript Slider: A Code Walkthrough

# JavaScript and Event Listeners: Making Web Pages Interactive

Introduction

What Is an Event?

What Is an Event Listener?

Events vs Event Listeners

A Practical Example

Common JavaScript Events

1. click

2. input

3. change

4. keydown

5. mousemove

6. dblclick

What Is the Event Object?

event.preventDefault()

Why Are Event Listeners Important?

Static vs Interactive Websites

Events Are Everywhere

What I'm Taking Away From Learning Event Listeners

Final Thoughts

What's Next?

The `for` Loop

Understanding `range()`

Using `enumerate()`

1. `click`

2. `input`

3. `change`

4. `keydown`

5. `mousemove`

6. `dblclick`

`event.preventDefault()`