Forem: Anderson Osayerie

Build a Responsive NavBar in React with Chakra UI v3

Anderson Osayerie — Tue, 02 Sep 2025 10:06:14 +0000

Introduction

Every landing page or app needs a robust navigation bar that works across all screen sizes. With Chakra UI v3, we can build a fully responsive NavBar in React with minimal code, while leveraging Chakra’s composable components, theming, and responsive props.

Why Chakra UI, you might ask?

Here's how I actually ended up with Chakra UI: I recently joined a new team, and they were already deep into using Chakra for their project. I had my own preferred stack, but the team needed consistency. So I dove in. And wow, was I pleasantly surprised.

What We're Building

We'll create a navbar that:

Collapses into a hamburger menu on mobile devices
Displays all navigation items on desktop
Includes a logo, navigation links, and a call-to-action button

Desktop View

Mobile View

Installation

Let’s start a new React project using Vite, but create-react-app or Next.js also works:

npm create vite@latest chakra-navbar -- --template react-ts
cd chakra-navbar
npm install

Next, we’ll install Chakra UI and some dependencies.

npm i @chakra-ui/react @emotion/react lucide-react

For setting up Chakra UI with React, we'll need to wrap our app with the ChakraProvider and a custom theme, or the default system theme. You can check the documentation for full installation instructions.

// main.tsx

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { ChakraProvider, defaultSystem } from "@chakra-ui/react";

import App from "./App.tsx";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <ChakraProvider value={defaultSystem}>
      <App />
    </ChakraProvider>
  </StrictMode>
);

Building the Navbar Components

Let's break our navbar into smaller, manageable components. This approach makes our code cleaner and easier to maintain.

Our NavBar will have three parts:

Logo → Branding text or an image.
Menu Links → Navigation links and a call-to-action button, horizontal on desktop, vertical on mobile.
Mobile Drawer → A hamburger button and slide-in drawer for smaller screens.

We’ll compose these inside a Flex container that adapts at breakpoints.

Logo Component

The Logo is the brand identity of the NavBar. It’s often the first thing users notice, so we want it to be simple yet clear.

In this tutorial, we’ll just use a styled text element as our logo, but you could easily swap it out for an actual image.

Here’s the component:

import { Box, Text } from "@chakra-ui/react";

const Logo = () => {
  return (
    <Box>
      <Text fontSize="lg" fontWeight="bold" color="blue.600">
        Logo
      </Text>
      {/* Or use an actual image */}
      {/* <Image src="/logo.png" alt="Logo" height="40px" /> */}
    </Box>
  );
};

export default Logo;

The Menu Links

It’s the part of the NavBar that includes the navigation links and a call-to-action button.

Instead of writing raw tags every time, we’ll define our navigation items in a simple array and map through them. Each item is styled consistently and gets hover transitions for a smooth effect.

Here’s how it looks in our component:

import { HStack, VStack, Link, Button } from "@chakra-ui/react";

const links = [
  { name: "Home", href: "#home" },
  { name: "About", href: "#about" },
  { name: "Services", href: "#services" },
  { name: "Contact", href: "#contact" },
];

const MenuLinks = ({ isMobile = false }) => {
  const LinkComponent = isMobile ? VStack : HStack;

  return (
    <LinkComponent gap={isMobile ? 4 : 8} align="center">
      {links.map((link) => (
        <Link
          key={link.name}
          href={link.href}
          fontWeight="medium"
          color="blue.600"
          _hover={{
            color: "blue.500",
            textDecoration: "underline",
          }}
          transition="color 0.2s ease"
        >
          {link.name}
        </Link>
      ))}

      <Button
        bg="blue.600"
        color="white"
        size="sm"
        borderRadius="full"
        px={6}
        _hover={{
          transform: "translateY(-2px)",
          shadow: "lg",
        }}
        transition="all 0.2s ease"
      >
        Get Started
      </Button>
    </LinkComponent>
  );
};

export default MenuLinks;

As you can see, the component dynamically switches between VStack and HStack depending on the screen size. On mobile, the navigation items are stacked vertically, while on desktop, they are aligned horizontally.

This is controlled by the optional isMobile prop. We also fine-tune the gap to control spacing and alignment. At the end of the navigation links, we include a “Get Started” call-to-action button.

Mobile Drawer Component

On smaller screens, we don’t want the links taking up horizontal space. Instead, we replace them with a hamburger button. When clicked, this button opens a full-screen Drawer that slides in with the menu items.

For this, we’ll use Chakra UI’s Drawer component. You can check the Drawer docs for more details, but here’s a simple MobileDrawer component for our nav:

import {
  useDisclosure,
  Drawer,
  Button,
  Portal,
  CloseButton,
  Icon,
} from "@chakra-ui/react";
import { Menu } from "lucide-react";
import Logo from "./Logo";
import MenuLinks from "./MenuLinks";

const MobileDrawer = () => {
  const { open, onToggle } = useDisclosure();

  return (
    <Drawer.Root open={open} onOpenChange={onToggle} size="full">
      <Drawer.Trigger asChild>
        <Button variant="outline" size="sm">
          <Icon color="blue.600">
            <Menu />
          </Icon>
        </Button>
      </Drawer.Trigger>
      <Portal>
        <Drawer.Backdrop />
        <Drawer.Positioner>
          <Drawer.Content>
            <Drawer.Header>
              <Drawer.Title>
                <Logo />
              </Drawer.Title>
            </Drawer.Header>
            <Drawer.Body>
              <MenuLinks isMobile />
            </Drawer.Body>
            <Drawer.CloseTrigger asChild>
              <CloseButton size="md" />
            </Drawer.CloseTrigger>
          </Drawer.Content>
        </Drawer.Positioner>
      </Portal>
    </Drawer.Root>
  );
};

export default MobileDrawer;

This component uses Chakra’s useDisclosure hook to handle opening and closing. We add the Logo in the header and reuse MenuLinks (this time with the isMobile prop) inside the drawer. The close button provides a simple way to exit.

Putting It All Together

Now that we have Logo, MenuLinks, and MobileDrawer, let’s combine them into our final NavBar.

import { Flex, Box } from "@chakra-ui/react";
import Logo from "./Logo";
import MenuLinks from "./MenuLinks";
import MobileDrawer from "./MobileDrawer";

function App() {
  return (
    <Flex
      as="nav"
      align="center"
      justify="space-between"
      wrap="wrap"
      gap={{ base: 8, lg: 16 }}
      px={{ base: 6, lg: 12 }}
      py={3}
      maxW={{ base: "full", xl: "1440px" }}
      mx="auto"
    >
      <Logo />

      {/* Desktop Menu */}
      <Box display={{ base: "none", md: "block" }}>
        <MenuLinks />
      </Box>

      {/* Mobile Drawer */}
      <Box display={{ base: "block", md: "none" }}>
        <MobileDrawer />
      </Box>
    </Flex>
  );
}

export default App;

Here, we conditionally render the navigation by placing MenuLinks inside a Box that only appears on desktop (md and above), while the MobileDrawer is wrapped in a Box that only displays on mobile (base).

Conclusion

We built a responsive navigation bar using Chakra UI, complete with:

A reusable Logo component.
A flexible MenuLinks component that adapts to desktop or mobile layouts.
A MobileDrawer that slides in on small screens.

With Chakra UI handling layout and styling, plus React’s component-based architecture, we end up with a clean, responsive NavBar.

I have attached a link to the code on github.

Integrating Pinata for Seamless Image Uploads in Nfticket

Anderson Osayerie — Sun, 13 Oct 2024 21:40:48 +0000

This is a submission for the The Pinata Challenge

What I Built

I built NFTicket, a decentralized application (dApp) that allows event organizers to mint, sell, and distribute event tickets as NFTs on the blockchain. Each NFTicket grants holders access to exclusive events, digital content, or experiences.

To enhance this dApp, I’ve integrated Pinata’s Files API for efficient, decentralized file storage and delivery. Using Pinata’s CDN and image optimization features, I’m able to ensure fast, secure, and reliable access to these files, greatly improving the overall performance and user experience of the dApp.

Demo

Check out the working version of the app here: Nfticket

Screenhots:

Image upload form

Events view

My Code

Feel free to take a look at the full project code over on GitHub:
Nfticket

More Details

How I Used Pinata

Setting Up Pinata API in the dApp

First, I had to set up access to Pinata’s API using my JWT and Gateway URL. I obtained these by signing up for a Pinata account and following the Getting Started Docs for React.

Image Upload for Event Organizers

In NFTicket, event organizers can easily upload images, like posters or banners, to visually boost their event listings. This makes the events more attractive to potential ticket buyers.

I built a simple image upload form that lets organizers select an image, preview it, and then upload it to Pinata. Using the Files API, these images are stored on IPFS, ensuring they’re decentralized and permanently linked to the event through the IPFS hash in the event metadata.

Here’s the code I used for image uploads via Pinata’s API:

  const [file, setFile] = useState<File>();
  const [fileUrl, setFileUrl] = useState("");
  const [uploading, setUploading] = useState(false);

  const uploadFile = async () => {
    if (!file) {
      alert("No file selected");
      return;
    }

    try {
      setUploading(true);
      const upload = await pinata.upload.file(file);

      const ipfsUrl = await pinata.gateways.convert(upload.IpfsHash);
      setFileUrl(ipfsUrl);
      setUploading(false);
    } catch (e) {
      console.log(e);
      setUploading(false);
      alert("Trouble uploading file");
    }
  };

Displaying Images with Pinata’s CDN

Once the image is uploaded and the IPFS hash is stored, I use Pinata’s CDN to serve the image efficiently. This ensures that images load quickly, providing an optimal user experience.

  <div className="flex flex-col gap-2">
      <img
        src="https://blush-impossible-raven-254.mypinata.cloud/ipfs/bafkreifndvxnxuk52tq2mx5fgnm2bzqdlfpogt67wwc3e3vephxsao4ooa"
        alt=""
        className="h-96 w-full object-cover object-center rounded-lg overflow-hidden"
      />
      <div className="flex gap-2">
        <p>Tickets Available for minting:</p>
      </div>
      <MintButton {...props} />
    </div>

Why I Chose Pinata

Pinata offered the perfect combination of decentralized storage, performance, and flexibility that I needed for NFTicket. By using Pinata’s Files API, I was able to build a smooth image upload experience for event organizers while keeping everything secure and decentralized.

Thanks to Pinata’s CDN and file optimization tools, the dApp runs efficiently and provides a great user experience for both organizers and NFT holders. And because files are stored on IPFS, they’re tamper-proof and accessible, even if traditional storage services fail. This aligns perfectly with Web3’s values, making Pinata an ideal choice for handling media in NFTicket.

Conclusion

Integrating Pinata’s Files API into NFTicket has significantly improved how images are uploaded and managed. Pinata not only delivered high performance, but its API was also really easy to work with, allowing me to focus on the core features of the dApp, knowing that Pinata had file storage and delivery handled.

Overall, Pinata has been an invaluable tool in building a reliable, decentralized image management solution for NFTicket.

Building a Dynamic Nested Mobile Navigation Menu with React

Anderson Osayerie — Wed, 11 Sep 2024 17:30:29 +0000

Introduction

As developers, we all encounter tricky problems that require creative solutions. One such problem I recently faced was creating a nested mobile navigation menu in React.

I needed to build a menu where clicking on a parent menu item expands a list of related submenus, which may contain additional nested submenus.

In this article, I’ll walk you through how I solved the problem step by step, using React and state management. If you’ve ever wanted to build a dynamic, multi-level mobile navigation menu for your website, this guide is for you.

Understanding the Problem

Nested menus allow users to navigate through hierarchical levels of content. Each subcategory can lead to more specific sections, creating a multi-level navigation structure.

For instance, in an e-commerce app, a menu might have a “Products” category, which opens into subcategories like “Men’s Clothing” or “Electronics”.

I wanted users to be able to:

Click on a parent menu item (like "Products") to see its child items.
Click on an item with a URL (like "Home") and go directly to that page.
Click on an item with more children and dive even deeper into the menu.
Go back up a level smoothly without reloading the page.

Planning the Solution

Data Structure

The foundation of the navigation system is a structured data array representing the menu hierarchy. The data contains both parent and child elements, with each element either having a direct URL or a set of child elements. Here’s the data structure I used:

const menuData = [
  { title: "Home", url: "/home" },
  {
    title: "Products",
    children: [
      {
        title: "Men",
        url: "/products/men",
      },
      {
        title: "Women",
        url: "/products/women",
      },
      {
        title: "Electronics",
        children: [
          {
            title: "Phones",
            url: "/products/electronics/phones",
          },
          {
            title: "Laptops",
            url: "/products/electronics/laptops",
          },
        ],
      },
    ],
  },
  {
    title: "Services",
    children: [
      {
        title: "Same Day Delivery",
        url: "/services/same-day-delivery",
      },
      {
        title: "Customized Services",
        url: "/services/customized-services",
      },
    ],
  },
  {
    title: "About",
    url: "/about",
  },
  {
    title: "Contact",
    url: "/contact",
  },
]

The menu structure is simple—it’s just an array of objects. Each object represents an item in the menu, and some of these items have children (submenus), while others have url (links to specific pages).

Implementing the Dynamic Nested Mobile Navigation Menu

Setting Up the Project

To begin, I created a new Nextjs project with Shadcn as the component library.

npx shadcn@latest init

I also installed Framer Motion to add subtle animations when menu items load, giving a nice, smooth experience when navigating between levels.

npm i framer-motion

Catch-all Page

For our navigation menu, each menu item may have multiple sub-levels, requiring a flexible route handler.

By using Next.js Optional Catch-all Segments, we can define a single route in Next.js to handle multiple layers of navigation without creating a separate file for each level.

The [[...route]]/page.tsx file would catch all routes and display the current route as a heading on the page.

import Link from "next/link";
import { Menu } from "lucide-react";

import { Button } from "@/components/ui/button";
import { Sheet, SheetTrigger, SheetContent } from "@/components/ui/sheet";

import MobileNav from "./_components/MobileNav";

export default function CurrPage({ params }: { params: { route: string[] } }) {
  const showParams = (route: string[]) => {
    if (!route) return "Index Page";

    return `${route.join(", ")} Page`;
  };

  return (
    <div className="flex flex-col h-screen bg-white text-slate-800">
      <header className="flex items-center justify-between px-4 py-3 border-b">
        <Link href="#" className="text-lg font-semibold" prefetch={false}>
          Mobile Navigation
        </Link>
        <Sheet>
          <SheetTrigger asChild>
            <Button variant="ghost" size="icon" className="rounded-full">
              <Menu className="w-6 h-6" />
              <span className="sr-only">Toggle menu</span>
            </Button>
          </SheetTrigger>
          <SheetContent
            side="right"
            className="w-full max-w-xs bg-white p-4 pt-8"
          >
            <MobileNav />
          </SheetContent>
        </Sheet>
      </header>

      <section className="my-4 text-center text-2xl font-bold capitalize px-4">
        {showParams(params.route)}
      </section>
    </div>
  );
}

The CurrPage component is a Next.js page that utilizes a Shadcn Sheet component for a mobile navigation drawer and dynamically renders the current route on the page based on route parameters.

The showParams function checks whether there is a route provided, and based on the dynamic segments, it generates a string to display which page is currently being viewed. If there’s no route, it shows "Index Page" otherwise it concatenates the route segments.

Navigation Component

Next, I built the core component responsible for rendering the current menu and handling navigation between parent and child menus. Here's how I structured the component:

"use client";

import { useState } from "react";
import Link from "next/link";
import { Link as LinkIcon } from "lucide-react";
import { motion } from "framer-motion";

import { navigation, NavigationType } from "@/lib/constants";

const MobileNav = () => {
  // `currList` holds the current list of navigation items, initially set to the main navigation.
  const [currList, setCurrList] = useState(navigation);

  // `navStack` holds the navigation history as an array, used for back navigation.
  const [navStack, setNavStack] = useState<NavigationType[]>([]);
  // `titleStack` holds the title history as an array, used for showing the title.
  const [titleStack, setTitleStack] = useState<string[]>([]);

  // Handle when an item in the navigation list is clicked.
  const handleItemClick = (item: NavigationType[0]) => {
    if (item.children) {
      setNavStack([...navStack, currList]);
      setTitleStack([...titleStack, item.title]);
      setCurrList(item.children);
    }
  };

  // Handle the "Back" button click to return to the previous navigation level.
  const handleBackClick = () => {
    if (navStack.length > 0) {
      const previousItems = navStack[navStack.length - 1];
      setCurrList(previousItems);
      setNavStack(navStack.slice(0, -1));
      setTitleStack(titleStack.slice(0, -1));
    }
  };

  return (
    <div className="w-full max-w-md mx-auto bg-white overflow-hidden mt-2">
      {/* Show the back button if there is navigation history */}
      {navStack.length > 0 && (
        <div className="flex items-center p-4 bg-gray-100 border-b text-slate-800">
          <button onClick={handleBackClick} className="mr-2">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="1em"
              height="1em"
              viewBox="0 0 24 24"
            >
              <path
                fill="currentColor"
                d="M7.828 11H20v2H7.828l5.364 5.364l-1.414 1.414L4 12l7.778-7.778l1.414 1.414z"
              />
            </svg>
          </button>
          {/* Show the current navigation title */}
          <span className="font-semibold text-slate-800">{titleStack.slice(-1)}</span>
        </div>
      )}

      {/* Display the list of current navigation items */}
      <ul className="divide-y divide-gray-200">
        {currList.map((item) => (
          <motion.li
            key={item.title}
            className="p-4"
            initial={{ y: 20, opacity: 0 }}
            animate={{ y: 0, opacity: 1 }}
            transition={{ ease: "easeInOut", duration: 0.75 }}
          >
            {item.url ? (
              <Link
                key={item.title}
                href={item.url}
                className="w-full text-left flex justify-between items-center hover:text-slate-500 text-slate-800 transition-colors"
                prefetch={false}
              >
                <span>{item.title}</span>
                <LinkIcon className="h-5 w-5" />
              </Link>
            ) : (
              <button
                onClick={() => handleItemClick(item)}
                className="w-full text-left flex justify-between items-center hover:text-slate-500 text-slate-800"
              >
                <span>{item.title}</span>
                {/* Show the right arrow icon if the item has children */}
                {item.children && (
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  >
                    <path d="m9 18 6-6-6-6" />
                  </svg>
                )}
              </button>
            )}
          </motion.li>
        ))}
      </ul>
    </div>
  );
};

export default MobileNav;

The MobileNav component contains the navigation functionality. It handles nested menus using a currList state to represent the current items and a navStack state to store the previous levels of navigation.

Walkthrough of Key Features

State Initialization

const [currList, setCurrList] = useState(navigation);
const [navStack, setNavStack] = useState<NavigationType[]>([]);
const [titleStack, setTitleStack] = useState<string[]>([]);

currList holds the current menu items displayed to the user, initialized to the top-level navigation.
navStack is an array that keeps track of the previously visited menus, allowing users to go back to the previous navigation level.
titleStack keeps track of the titles of the currently displayed menu, used to show where the user is within the navigation.

Item Click Handling

const handleItemClick = (item: NavigationType[0]) => {
  if (item.children) {
    setNavStack([...navStack, currList]);
    setTitleStack([...titleStack, item.title]);
    setCurrList(item.children);
  }
};

This function gets triggered when a navigation item is clicked. If the clicked item has child elements (children), the current list is added to the navStack array, and the currList state is updated to display the children.

Back Navigation

const handleBackClick = () => {
  if (navStack.length > 0) {
    const previousItems = navStack[navStack.length - 1];
    setCurrList(previousItems);
    setNavStack(navStack.slice(0, -1));
    setTitleStack(titleStack.slice(0, -1));
  }
};

The handleBackClick function restores the previous navigation items from the stack and removes the latest entry in navStack and titleStack.

Rendering the Navigation

Back Button and Sub-menu title:

{navStack.length > 0 && (
        <div className="flex items-center p-4 bg-gray-100 border-b text-slate-800">
          <button onClick={handleBackClick} className="mr-2">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="1em"
              height="1em"
              viewBox="0 0 24 24"
            >
              <path
                fill="currentColor"
                d="M7.828 11H20v2H7.828l5.364 5.364l-1.414 1.414L4 12l7.778-7.778l1.414 1.414z"
              />
            </svg>
          </button>
          {/* Show the current navigation title */}
          <span className="font-semibold text-slate-800">{titleStack.slice(-1)}</span>
        </div>
      )}

Only shown when navStack is not empty.

Current Menu List:

<ul className="divide-y divide-gray-200">
        {currList.map((item) => (
          <motion.li
            key={item.title}
            className="p-4"
            initial={{ y: 20, opacity: 0 }}
            animate={{ y: 0, opacity: 1 }}
            transition={{ ease: "easeInOut", duration: 0.75 }}
          >
            {item.url ? (
              <Link
                key={item.title}
                href={item.url}
                className="w-full text-left flex justify-between items-center hover:text-slate-500 text-slate-800 transition-colors"
                prefetch={false}
              >
                <span>{item.title}</span>
                <LinkIcon className="h-5 w-5" />
              </Link>
            ) : (
              <button
                onClick={() => handleItemClick(item)}
                className="w-full text-left flex justify-between items-center hover:text-slate-500 text-slate-800"
              >
                <span>{item.title}</span>
                {/* Show the right arrow icon if the item has children */}
                {item.children && (
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  >
                    <path d="m9 18 6-6-6-6" />
                  </svg>
                )}
              </button>
            )}
          </motion.li>
        ))}
      </ul>

Dynamically displays the current level of the navigation, with either a link or a button depending on whether the item has a url or children.

Conclusion

Building a dynamic nested mobile navigation menu in React required a careful balance of state management and user experience design.

Using React's useState for dynamic rendering, I was able to create an intuitive navigation system that can handle complex menu structures.

If you’re building a web app with multi-level menus, I hope this guide has given you the tools and inspiration to tackle the challenge.

I have attached a link to the code on github.

Build a Guessing Game with Python

Anderson Osayerie — Mon, 18 May 2020 22:41:55 +0000

In this article, we will be building a simple guessing game using Python. This was a task done during the StartNG Beginner Software Development Training. The game would have three modes corresponding to levels of difficulty.

In the Easy mode, the player would try to guess the random number generated by the program between 1 to 10. The player would have 6 tries at guessing the correct number.

In the Medium mode, the player would try to guess the random number generated by the program between 1 to 20. The player would have 4 tries at guessing the correct number.

In the Hard mode, the player would try to guess the random number generated by the program between 1 to 50. The player would have 3 tries at guessing the correct number.

Before heading into the actual solution of the task, it is usually best practice to make a rough sketch (pseudo-code) of how the program should be.

To achieve the aim of the program, we would need to have a means of generating a random number. We could choose to select a particular number within each range to be the number, but that would not be fun. We need the number to change at every iteration of the program.

So to generate the random number, we would be making use of a Python module called “random”. This enables us to have a different random number every time the game is played.

It is possible to use if/else statements for the three different modes of the game, but it is usually best practice to write functions wherever possible to make for more readable code. So we would be making use of functions.

First of all, we would be creating a function called guess_game. This function would have two parameters which are limit and number. Below is a pictorial illustration of the code.

A variable for the random number was created and the variable makes use of the “random” module. The “randint” built-in function of the “random” module is used to generate a random number between 1 and another variable (number) that corresponds to the highest number in the range from which the player should make their guess.

The function would need two arguments each time that the function is called. These two arguments correspond to the number of tries and the highest number in the range for the different modes.

So in the case of the Easy mode, we would call the guess_game function and pass 6 as the argument for limit, which is the number of tries a player has to make the correct guess.

For the other parameter number, the argument would be 10, since that corresponds to the highest number in the range of which the player should guess a number for the Easy mode.

In the rare case where our player enters anything other than a number, the try and except block handles that exception and tells the user that only numbers are allowed.

So we will pass the arguments for each mode, and this results in the functions below

After creating the functions that would enable the game to run smoothly, we would need a function that would allow the player to choose what mode they want to play in. For that, we would be creating a function called welcome.

Now we have a program that runs. Unfortunately, our program only runs once. You know what that means? If our game were to be a mobile app, our game would exit after one round and the user would have to launch the application to play a second round.

I guess we do not want that. We would want to give our users the opportunity to choose to play again without having to launch the application every single time.

Well, like always, we would create a function for that. We never get tired of creating functions, right? So we would create a try_again function.

We have to add the try_again function to the welcome function so that our player has the option to try again after one round of the game has ended without having to start the program entirely.

Now our players can choose to play the game as much as they want.
So voila, we have been able to use a couple of functions to build a simple guessing game. It was fun, right? Yeah, I sure had fun building it too.

Feel free to drop your comments, and questions below

The source code can be found here — https://github.com/ema-mimus/guess_game/blob/master/Guess_game.py