Forem: Hussaini Ahmed

Debunking Common Programming Myths and Misconceptions

Hussaini Ahmed — Sun, 25 Jun 2023 16:50:46 +0000

Programming, often hailed as the language of the future, is a field surrounded by many myths and misconceptions, which can be misleading, most especially to aspiring programmers, creating a misconception of what it takes to get started and be successful in the industry.

From popular TV series like Silicon valley and Mr Robot to social media forums and online forums, there have been very a strong portrayal of this misconceptions. One popular example is that all programmers fit to this stereotype: Genius, socially awkward and introverted as portrayed in Mr Robot. In the TV series, Elliot's character embodies this stereotype, as he is portrayed as a brilliant but socially awkward hacker who struggles with interpersonal relationships.

This is also seen in Silicon Valley, as the main character, Richard Hendricks is a badass programmer but lacks good communication skill, He struggles with selling his ideas to others. One scene even shows him blabbering utter nonsense in front of his employees as he attempts to introduce
himself. Well, He ends up puking.

These examples, among several others has led a lot of people to believe these as being the truth.
This is why we here today - to unravel these myths and shed light on the realities of the programming landscape. we will uncover the truth behind these misconceptions and present a more accurate portrayal of the programming profession.

By debunking these myths, we aim to empower individuals to approach programming with a balanced perspective, understand the challenges they may encounter, and make informed decisions about their learning and career paths, So, let's dive.

Myth 1: Programming is only for the Genius.

Many aspiring programmers have let themselves believe that programming is exclusively reserved for extraordinarily intelligent individuals. However, I'm here to debunk this myth once and for all: programming is not solely for geniuses. In fact, it's far from it. Hell, I'm kinda dumb and i can code. No offense, Hussaini.

Here's the truth: learning how to code requires commitment, perseverance, and a sh*t ton of practice. If you possess basic reading and writing skills, you already have a solid foundation to start learning how to code. Most popular programming languages used today are considered high-level languages, meaning their syntax resembles English (except with those annoying semicolons and braces). This makes it more accessible and easier to understand for beginners.

Myth 2: Programmers can solve any technical problem instantly; they don't need to refer to documentation or search for solutions.

This is yet another popular myth and for a while, i too, believed this. I did, so well that i thought i was a fraud for actually looking at documentations or asking CHATGPT for help when i got stuck whilst solving a programming problem.

I always believed being a good programmer meant sitting right in front of the PC and smashing the keyboard non-stop, Having it all figured out and all...

But is this true?

Nah. Programming is a vast and complex field, and no programmer, no matter how experienced, can have all the solutions memorized. Programming languages and frameworks are continually evolving, and new challenges and scenarios arise regularly. Programmers often rely on documentation, references, and online resources to assist them in solving problems.

Myth 3: You need a computer science degree to become a successful programmer.

The success of Elon Musk and many other self-taught programmers serves as a testament to the fact that formal education is not the only determining factor for success in the field. Self-taught
programmers often possess a unique drive, passion, and determination to learn and excel in programming.

At age of 12, Elon musk invented a video game, Blaster, and later sold it to a computer magazine company that published the code’s printed copy. He later founded Zip2, which was acquired by a company called Compaq for $207 million.

So if you are a self-taught programmer like Elon Musk and me, or intend to become one, don’t let the absence of a formal education discourage you. Pursue your dream and keep the fire burning. Forgive me if I sound over-dramatic.

Myth 4: Programming is only for the young.

A lot of people believe that programming is reserved only for the young, and older people like my Grandma who wants to learn how to code have missed the opportunity to venture into the field. Well, fortunately for my Grandma and the older people out there, this is only a misconception.

Programming in fact, has no age barrier, and individuals of all ages can successfully learn to code and pursue a career in the field.

Mario Burgos, on this Quora question, shares his motivating experience about how he started his coding career at the age of 37 and years later, he became the director of software development in one of the biggest Insurance Companies.

Myth 5: All programmers earn six-figure salaries; it's a guaranteed path to financial success.

Sorry to burst your bubbles but Yeah its true, not all programmers earn six-figures salaries and it is not a guaranteed path to success.

As pretty as it seem to imagine yourself being landing your first job and earning six-figure earner after 3 years of learning how to code, it doesn’t always happen.

Becoming successful or even earning as programmer, like in any other profession, depends on various factors such as experience, expertise, location, industry, job demand, and economic conditions.

This is why it is important to approach programming as a career choice based on passion and interest rather than solely for the pursuit of financial gain.

Myth 6: Language X is better than language Y

I’ve seen a lot of programmers arguing about which programming language is better. But in reality, this is silly. And there should be no comparison between two programming languages. Its like comparing a hammer to a spanner. Using this tools other than for purposes they are meant for will only lead to inefficiency and frustration, Since a hammer cannot be used to loosen a bolt and a spanner cannot be used to punch a nail into wood.

To make informed decision before picking a programming language it is important that you clearly define your objectives. For web development, Javascript emerges as the best option due to it versatility and browser compatibility.

On the other hand, for app development, java, react native, Kotlin or flutter are the best options as they have tons of libraries tailored for mobile applications.

Wrapping things up.

That’s it folks, we’ve discussed quite a lot today. These are some of the myths and misconceptions out there about programming. Hopefully you can now see programming from a clearer perspective and are able to accurately separate them from the truth and dispel unrealistic expectations.

My name is Hussaini Ahmed, I am a front end developer. I also write about front end languages, frameworks and latest technologies. I’d loved to hear your thought on this article. Feel free to drop a comment below or reach out to me via:

Upwork
Github
WhatsApp
Twitter
LinkedIn

From Zero To Hero: Front End Development Projects For Beginners[With Source Code]

Hussaini Ahmed — Tue, 30 May 2023 16:10:36 +0000

Welcome, fellow developers, to today's blog post where we will explore the world of simple web development projects that are ideal for beginners. Regardless of your age or technical background, these projects provide a playground for aspiring coders to grow their abilities and embark on a path to becoming a skilled programmer.

The Power of Building Front-End Projects:

Building projects is akin to playing the stock market. It requires an investment of time and effort, and while success is not guaranteed, the process serves as a valuable learning experience.

Building projects is a lot like embarking on a thrilling adventure. It requires dedication, effort, and a willingness to step outside of your comfort zone. However, the rewards that come from building front-end projects are immeasurable.

When you engage in building front-end projects, you are actively applying the knowledge you've acquired. By putting theory into practice, you solidify your understanding of concepts and develop problem-solving skills. Each project becomes an opportunity to explore new techniques, experiment with different approaches, and overcome challenges.

The beauty of front-end projects lies in their versatility. You have the freedom to choose projects that align with your interests, allowing you to create something meaningful and engaging.

Whether it's building a personal portfolio website, crafting a responsive landing page, or developing a dynamic JavaScript calculator, each project serves as a stepping stone on your journey to becoming a front-end development hero.

Building projects not only helps you refine your technical skills, but it also nurtures your creativity. As you tackle design decisions, implement interactive features, and polish the user experience, you gain a deeper appreciation for the artistry behind web development. It's an opportunity to showcase your unique style and leave a lasting impression on your audience.

Beginner Projects for front end Developers

Now, let's dive into the heart of the matter—the beginner projects that are both enjoyable and straightforward, suitable even for those with limited coding experience. These projects provide an opportunity to grasp essential front-end development concepts while making the learning process delightful.

Project 1: Simple website

Prerequisites:
To build a simple website, you'll need the following prerequisites:

HTML: Understanding of HTML tags and structure to create the content and layout of the website.
CSS: Familiarity with CSS selectors, styles, and layout techniques to design and customize the website's appearance.
Basic Web Design Principles: Knowledge of fundamental web design principles, including visual hierarchy, typography, color theory, and user experience.

Description:
Building a simple website involves creating a digital presence to showcase information, products, or services in an accessible and user-friendly manner. Here's a breakdown of how you can approach building a simple website:

Planning and Content: Start by planning the purpose and goals of your website. Determine the target audience and define the content that you want to present to visitors. This could include text, images, videos, or other multimedia elements.
HTML Structure: Create the basic HTML structure for your website. Use HTML tags to define headings, paragraphs, lists, links, images, and other content elements. Structure the content using semantic HTML for better accessibility and search engine optimization.
CSS Styling: Apply CSS styles to enhance the visual appearance of your website. Use CSS selectors to target HTML elements and apply colors, fonts, spacing, and other visual properties. Create a cohesive design by considering typography, layout, and consistent styling across the website.
Layout and Navigation: Design the layout of your website to ensure a clear and intuitive user experience. Organize the content into logical sections and create a navigation menu to allow visitors to navigate between different pages or sections of your site. Consider using responsive design techniques to make your website mobile-friendly.
Interactive Elements: Enhance user engagement by incorporating interactive elements into your website. This can include contact forms, image sliders, buttons, accordions, or other interactive components that provide a dynamic and engaging experience for visitors.
Testing and Optimization: Test your website across different browsers and devices to ensure it displays correctly and functions properly. Optimize your website's performance by minimizing file sizes, optimizing images, and utilizing caching techniques. Test for accessibility to ensure your website is usable by people with disabilities.
Deployment and Domain: Choose a hosting provider and deploy your website to make it accessible on the internet. If you cannot afford to pay for a hosting plan, you can use vercel or netlify. They offer free hosting.

Live Demo
Source code

Project 2: Quote generator

Prerequisites:

Basic knowledge of HTML, CSS, and JavaScript.
Familiarity with HTML tags, CSS selectors, and JavaScript functions.
Understanding of DOM manipulation and event handling in JavaScript.
Text editor or Integrated Development Environment (IDE) for coding.
Web browser for testing and previewing the project.

Description:
The quote generator project involves creating a web application that displays random quotes to the user when a button is clicked. It's a great project for beginners to practice their HTML, CSS, and JavaScript skills while learning about event handling and dynamic content manipulation.

The project can be divided into the following steps:

HTML Structure: Begin by setting up the HTML structure. Create a container element to hold the quote and a button for generating new quotes. Add appropriate IDs or classes to the necessary elements for easy access using JavaScript.
CSS Styling: Apply CSS styling to make the quote generator visually appealing. Customize the font, colors, and layout to match your desired design. You can experiment with different CSS properties to achieve the desired look and feel.
JavaScript Functionality: Write JavaScript code to handle the button click event and generate random quotes. Define an array or object to store a collection of quotes. When the button is clicked, randomly select a quote from the collection and display it on the web page.
Dynamic Content Update: Use JavaScript to update the quote content dynamically. Access the necessary HTML elements using selectors or IDs and modify their text or innerHTML property with the selected quote.
Optional: Additional Features: Once you have the basic functionality working, you can enhance the quote generator with additional features. For example, you can add a "Share" button to allow users to share quotes on social media, include animations for a more interactive experience, or provide the ability to filter quotes based on categories.

Throughout the project, test your code in a web browser to ensure everything is functioning as expected. You can also customize the project by adding your own styling or modifying the functionality to suit your preferences.

Live Demo
Source code

Project 3: Password Generator

Prerequisites :
To build a password generator, you should have a basic understanding of the following:

HTML: Knowledge of HTML is necessary to create the user interface elements such as input fields, buttons, and display areas.
CSS: Familiarity with CSS will enable you to style the user interface and make it visually appealing.
JavaScript: Proficiency in JavaScript is essential as it will be used to generate random passwords, handle user interactions, and manipulate the DOM to update the password display.

Description:
A password generator is a tool that creates random and secure passwords based on certain criteria. Here's a breakdown of how a password generator can be built:

HTML Structure: Start by creating the necessary HTML structure to display the password generator interface. This typically includes input fields for specifying password length, check boxes for selecting character types (e.g., uppercase letters, lowercase letters, numbers, symbols), a button to generate the password, and an area to display the generated password.
JavaScript Functionality:
Write a function that generates the password based on the user's specified criteria. This function will typically include the logic to randomly select characters from the desired character types and combine them to form the password.
Handle user interactions, such as retrieving the selected options (password length and character types) from the HTML elements and passing them to the password generation function.
Update the DOM to display the generated password in the designated area.
Randomization and Secure Passwords:
Utilize JavaScript's random number generation capabilities to ensure the password generated is random and secure.
Consider using built-in functions like Math.random() and array manipulation methods to randomly select characters from the chosen character types.
Optional Features:
Allow users to customize the password criteria further, such as setting a minimum requirement for each character type or excluding certain characters.
Implement additional functionalities like a "Copy to Clipboard" button to make it easier for users to use the generated password.

Live Demo
Source code

Project 4: Analog Clock

To build an analog clock, you'll need the following prerequisites:

Basic HTML: Familiarity with HTML tags and structure.
Basic CSS: Understanding of CSS selectors, positioning, and transformations.
Basic JavaScript: Knowledge of JavaScript functions, intervals, and DOM manipulation.
Description:
Building an analog clock involves creating a visual representation of the current time using HTML, CSS, and JavaScript. Here's a breakdown of how you can approach building an analog clock:
HTML Structure: Start by creating the basic HTML structure for the clock. Typically, this would include a container element for the clock and nested elements for the clock face, hour hand, minute hand, and second hand.
CSS Styling: Apply CSS styles to position and style the clock elements. Use CSS properties like position, transform, and border-radius to create the circular clock face and hands. Adjust the size, colors, and styling to achieve the desired visual appearance.
JavaScript Logic: Write JavaScript code to update the position of the clock hands based on the current time. Use JavaScript's Date object to get the current time, and calculate the corresponding angles for the hour, minute, and second hands. Update the CSS transform property of each hand to rotate them accordingly.
Clock Animation: To make the clock continuously update and display the correct time, use JavaScript's setInterval() function to repeatedly call a function that updates the clock hands. By specifying an appropriate interval (e.g., every second), the clock will continuously update to reflect the current time.
Responsive Design: Consider making the analog clock responsive by using CSS media queries. Adjust the size and layout of the clock elements for different screen sizes to ensure it displays well on various devices.

Live Demo
Source code

Project 5: Stopwatch

Prerequisites:
To build a stopwatch using JavaScript, you'll need the following prerequisites:

HTML: Understanding of HTML tags and structure to create the stopwatch display and UI elements.
CSS: Familiarity with CSS selectors, styles, and layout techniques to design and customize the stopwatch's appearance.
JavaScript: Knowledge of JavaScript functions, DOM manipulation, and event handling.

Description:
Building a stopwatch involves creating a functional timer that can measure elapsed time accurately. Here's a breakdown of how you can approach building a stopwatch using JavaScript:

HTML Structure: Create the HTML structure for your stopwatch. Use HTML tags to define the stopwatch display, control buttons, and other necessary elements. Structure the layout using appropriate HTML elements and classes.
CSS Styling: Apply CSS styles to enhance the visual appearance of your stopwatch. Use CSS to customize the colors, fonts, and layout of the stopwatch interface. Apply styles to the display area, control buttons, and other elements to create a visually appealing design.
JavaScript Logic: Write JavaScript code to handle the stopwatch's functionality. Implement functions to start, stop, and reset the stopwatch. Use JavaScript's setInterval() and clearInterval() methods to measure elapsed time accurately and update the display accordingly.
Button Interactivity: Add event listeners to the control buttons to capture user input. When the start button is clicked, start the stopwatch timer by invoking the appropriate functions. Similarly, clicking the stop button should pause the timer, and the reset button should reset the timer to zero.
Time Calculation: Use JavaScript's Date object or the performance.now() method to measure elapsed time accurately. Calculate the time difference between the start and stop events and update the stopwatch display accordingly.
Display Formatting: Format the stopwatch display to show the elapsed time in a user-friendly manner. Convert milliseconds to hours, minutes, seconds, and milliseconds as needed. Ensure that the display format is consistent and easy to read.
Responsive Design: Consider implementing responsive design techniques to ensure your stopwatch functions well on different screen sizes and devices. Use CSS media queries to adjust the layout and styling for optimal user experience.
Testing and Refinement: Test your stopwatch thoroughly, checking for accurate timekeeping and proper display. Debug any issues or errors that may arise during testing. Refine the design and functionality based on user feedback and testing results.

Live Demo
Source code

Project 6: Simple Javascript calculator

Prerequisites:
To build a simple JavaScript calculator, you'll need the following prerequisites:

HTML: Understanding of HTML tags and structure to create the calculator interface.
CSS: Familiarity with CSS selectors, styles, and layout techniques to design and customize the calculator's appearance.
JavaScript: Knowledge of JavaScript functions, DOM manipulation, and event handling.

Description:
Building a simple JavaScript calculator involves creating a functional calculator interface that can perform basic arithmetic operations. Here's a breakdown of how you can approach building a simple JavaScript calculator:

HTML Structure: Create the HTML structure for your calculator. Use HTML tags to define the calculator display, buttons, and other necessary elements. Structure the layout using appropriate HTML elements and classes.
CSS Styling: Apply CSS styles to enhance the visual appearance of your calculator. Use CSS to customize the colors, fonts, and layout of the calculator interface. Apply styles to the buttons, display area, and other elements to create an appealing design.
JavaScript Logic: Write JavaScript code to handle the calculator's functionality. Implement functions to perform arithmetic operations, handle user input, and update the display accordingly. Use JavaScript's addEventListener() method to handle button clicks and trigger the appropriate actions.
Button Interactivity: Add event listeners to the calculator buttons to capture user input. When a button is clicked, retrieve the button value and perform the corresponding operation or update the display accordingly. Use JavaScript to handle decimal numbers, clear the display, or evaluate the final result.
Responsive Design: Consider implementing responsive design techniques to ensure your calculator functions well on different screen sizes and devices. Use CSS media queries to adjust the layout and styling for optimal user experience.
Testing and Refinement: Test your calculator thoroughly, checking for accurate calculations and proper display. Debug any issues or errors that may arise during testing. Refine the design and functionality based on user feedback and testing results.

Live Demo
Source code

Project 7: Tic Tac Toe Game

Prerequisites:
To build a Tic Tac Toe game, you'll need the following prerequisites:

HTML: Familiarity with HTML tags and structure to create the game board and UI elements.
CSS: Understanding of CSS selectors, styles, and layout to visually design the game.
JavaScript: Knowledge of JavaScript functions, arrays, DOM manipulation, and event handling.

Description:
Building a Tic Tac Toe game involves creating a playable game board where two players take turns marking X and O symbols until one of them wins or the game ends in a draw. Here's a breakdown of how you can approach building a Tic Tac Toe game:

HTML Structure: Begin by creating the basic HTML structure for the game board. Use a combination of
elements or an HTML table to represent the grid of cells for the Tic Tac Toe board.
CSS Styling: Apply CSS styles to visually design the game board and UI elements. Use CSS to set the dimensions of the cells, customize the appearance of X and O symbols, and style the game status display.
JavaScript Logic: Write JavaScript code to handle the game logic. Create data structures to represent the game board state, track player turns, and handle win conditions. Implement functions to update the board, check for a winning combination, and determine the game's outcome.
User Interaction: Add event listeners to the game cells to handle player moves. When a player clicks on an empty cell, update the board state, display the corresponding symbol, and check for a win or draw. Allow players to take turns until the game is won or ends in a draw.
Game Outcome Display: Implement a display mechanism to show the game outcome. Update the UI to inform players when someone wins, the game ends in a draw, or it's the next player's turn. Optionally, provide a restart button to allow players to play again.
Optional Enhancements: You can further enhance the game by adding features like player names, score tracking, a timer, or an AI opponent for single-player mode. These enhancements can make the game more engaging and customizable.

Live Demo
Source code

Conclusion

building front-end projects is an excellent way to enhance your coding skills and embark on a journey from zero to hero in the world of web development. Regardless of your technical background, beginner projects provide an opportunity to grasp essential concepts while enjoying the learning process.

We explored various beginner-friendly projects, such as a password generator, analog clock, tic-tac-toe game, and a simple website. These projects not only allow you to practice your coding skills but also serve as tangible proof of your progress as you create functional and visually appealing applications.
Remember, the path to becoming a skilled front-end developer requires practice and hands-on experience. The more you immerse yourself in building projects, the closer you get to achieving your goal. Don't be afraid to experiment, make mistakes, and learn from them. Every project you undertake adds to your knowledge and expertise.

With the right prerequisites in place, such as HTML, CSS, and JavaScript skills, you have a solid foundation to embark on these projects. By following the guidelines, planning your approach, and staying dedicated, you can build impressive projects that showcase your abilities.

So, what are you waiting for? Start your coding journey today with these beginner projects and let your creativity flourish. With each project, you'll gain confidence, problem-solving skills, and a deeper understanding of front-end development.

Remember, the path from zero to hero is about the dedication, passion, and willingness to learn. Embrace the power of building projects, and before you know it, you'll transform into a front-end development hero!

Happy coding!

Upwork
Github
WhatsApp
Twitter
LinkedIn

JavaScript Closures: Understanding Private Variables, Callbacks, and Memoization for Efficient Code

Hussaini Ahmed — Thu, 11 May 2023 23:16:16 +0000

JavaScript is a powerful programming language that is used to create interactive websites and web applications. One of the most important concepts in JavaScript is closures. Closures can be a little tricky to understand at first, but once you get the hang of them, they can make your code much more powerful and flexible. In this article, we will explain what closures are, how they work, and how to use them in your code.

What are Closures?

A closure is a function that has access to its parent function's variables, even after the parent function has returned. In other words, a closure is created when a function is defined inside another function, and the inner function has access to the outer function's variables. This means that the inner function "closes over" the variables of the outer function, hence the name closure.

How do Closures Work?

To understand how closures work, let's look at an example. Consider the following code:

function outer() {
 var name = "Hussaini";
 function inner() {
 console.log(name);
 }
 return inner;
}
var closure = outer();
closure();

In this code, we define a function called outer that contains a variable name and a function inner. The function inner logs the value of name to the console. We then return the function inner from outer and store it in a variable called closure. Finally, we call the closure function.

"Hussaini"

When we call closure(), it logs the value of name to the console, even though name is not defined within the closure function itself. This is because closure is a closure that has access to the variables of the outer function, even though outer has already returned.

This may seem like a small and insignificant detail, but closures can be incredibly powerful when used correctly. They allow you to create functions that are both flexible and efficient, and can help you write code that is easier to read and maintain.

How to Use Closures?

Now that we know what closures are and how they work, let's look at some examples of how to use them in your code.

1. Creating Private Variables
One common use of closures is to create private variables. In JavaScript, all variables defined within a function are accessible to any nested functions within that function. This means that if you define a variable in a function, any functions defined within that function can also access that variable. For example:

function outer() {
 var name = "Hussaini";
 function inner() {
 console.log(name);
 }
 inner();
}
outer();

In this code, we define a function called outer that contains a variable name and a function inner. The function inner logs the value of name to the console. We then call the inner function from within the outer function.

"Hussaini"

When we call outer(), it logs the value of name to the console, because inner has access to the name variable. However, this also means that any other functions defined within outer would also have access to the name variable, which may not always be desirable.

To create a private variable that is only accessible to theinnerfunction, we can use a closure. Here's an example:

function outer() {
 var name = "Hussaini";
 function inner() {
 console.log(name);
 }
 return inner;
}
var closure = outer();
closure();

In this code, we define a function called outer that contains a variable name and a function inner. The function inner is returned from outer instead of being called directly. We then store the returned function in a variable called closure. Finally, we call the closure function.

"Hussaini"

When we call closure(), it logs the value of name to the console, just like before. However, because name is defined within the outer function and not directly accessible outside of it, it is effectively a private variable that is only accessible through the closure created by outer.

2. Creating Callback Functions
Another common use of closures is to create callback functions. A callback function is a function that is passed as an argument to another function and is executed when the original function completes. Callback functions can be used for a variety of purposes, such as handling user input or responding to server requests.

Here's an example of how to create a callback function using closures:

function calculate(num1, num2, operation) {
 var result = operation(num1, num2);
 console.log("Result: " + result);
}
function add(num1, num2) {
 return num1 + num2;
}
function subtract(num1, num2) {
 return num1 - num2;
}
calculate(5, 10, add);
calculate(5, 10, subtract);

In this code, we define a function called calculate that takes three arguments: num1, num2, and operation. The operation argument is expected to be a function that takes two numbers and returns their result. We then use the operation function to calculate the result of num1 and num2, and log the result to the console.

We also define two additional functions called add and subtract that take two numbers and return their sum and difference, respectively. We then call the calculate function twice, passing in the add and subtract functions as the operation argument each time.

When we run this code, we should see the following output:

//Result: 15
//Result: -5

This is because the calculate function is using the operation function passed in as an argument to perform the calculation. This allows us to use different functions for different calculations without having to rewrite the calculate function every time.

3. Memoization
Finally, closures can also be used for memoization, which is a technique for optimizing function performance by caching the results of expensive calculations. Memoization can be especially useful when dealing with recursive functions that perform the same calculations multiple times.

Here's an example of how to use closures for memoization:

function fibonacci() {
 var cache = {};
 function calculate(n) {
 if (n in cache) {
 return cache[n];
 } else {
 if (n <= 1) {
 return n;
 } else {
 var result = calculate(n - 1) + calculate(n - 2);
 cache[n] = result;
 return result;
 }
 }
 }
 return calculate;
}
var fib = fibonacci();
console.log(fib(10));
console.log(fib(15));
console.log(fib(20));

In this code, we define a function called fibonacci that returns another function called calculate. The calculate function takes a single argument n and uses memoization to calculate the nth Fibonacci number.

We use a closure to create a cache object that stores the results of expensive calculations. If the result of the calculation for a given n value is already in the cache, we return that result instead of performing the calculation again. Otherwise, we calculate the result using a recursive call to calculate, store the result in the cache, and then return the result.

Finally, we call the fibonacci function to get the calculate function, and store it in a variable called fib. We then call the fib function three times with different values to calculate the 10th, 15th, and 20th Fibonacci numbers.

When we run this code, we should see the following output:

//55
//610
//6765

This is because the calculate function is using memoization to avoid performing the same calculations multiple times. This makes the function faster and more efficient.

Conclusion

In conclusion, closures are a powerful feature of JavaScript that allow you to create functions with private variables and maintain state between function calls. Closures can also be used for creating callback functions and for memoization. By understanding how closures work, you can write more efficient and flexible JavaScript code.

Upwork
Github
WhatsApp
Twitter
LinkedIn

Unleashing the Full Potential of the CSS Box Model

Hussaini Ahmed — Wed, 10 May 2023 00:07:06 +0000

Everything in CSS has a box around it, and understanding these boxes is key to being able to create more complex layouts with CSS, or to align items with other items.
-MDN Web Docs.

Table of content

1. Introduction

Prerequisite
Explanation of the CSS box model
Importance of understanding the box model

2. The Four Parts of the CSS Box Model
A. Content Box

Definition and explanation
How to manipulate the content box with example
B. Padding
Definition and explanation
How to manipulate the padding with example
C. Border
Definition and explanation
How to manipulate the border with example
D. Margin
Definition and explanation
How to manipulate the margin with example

3. Understanding the Box Model in Practice

Common CSS properties that interact with the box model
Examples of how the box model affects layout and design
Tips for working with the box model

4.Common Box Model Issue: Problems with box sizing

Explanation of the issue
How to solve it

5. Conclusion

Introduction

The CSS box model is like a container for every element on a webpage, and it helps us to control how much space each element takes up on the page. It is used to create and customize design and layout of elements on a webpage.

Prerequisite

In other to fully understand CSS Box Model and all it entails, this is what you need to know:

Basic Computer Literacy
HTML Basics
Styling with CSS

Explanation of the CSS box model

The CSS Box model is a fundamental concept in web development that governs how elements are displayed on a web page. The box model refers to the way in which elements are represented on a page, and it is based on the idea that every HTML element can be thought of as a rectangular box. Each box contains four different areas:

content
Padding
Border
Margin

Content - is the innermost area of the box and represents the actual content of the element. It includes text, images, video or any other media that are contained within the element.
Padding - is the area that surrounds the content area and contained within the border area.
Border - the border area goes around the padding and content and is contained within the margin area.
Margin - This is the outermost area of the box model, it surrounds the content, padding and border area.

These four areas, together make up the box model. Don't worry if you have no idea what any of these(content, Padding, Border, Margin) means at the moment, afterall it is only meant to serve as a introduction to the concepts. Later, in this article i will give in-depth explanation on them.

Importance of understanding the box model

Understanding the CSS box model is crucial for web developers who want to create effective and visually appealing web pages. This concept is fundamental to how elements are displayed on a web page, and a solid understanding of the box model is essential for creating layouts that work well across different devices and screen sizes.

One of the most important reasons to understand the box model is that it affects how elements are positioned and sized on a web page. Since every element is thought of as a retangular box and the size and position is determined by the content, padding, border and margin of the element, this means that changing any of this properties(the content, padding, border and margin) can have significant impact on the layout of the page.

In addition, understanding the box model is crucial for troubleshooting layout issues. When elements are not positioned or sized correctly on a web page, the box model can often provide valuable clues to the source of the problem.

The Four Parts of the CSS Box Model

As earlier mentioned, the CSS box model is divided into four parts(content, Padding, Border, Margin). After successfully introducing the concept of CSS box model and highlighting it importance, we will proceed to discuss each of them in-depth, showing how to manipulate them using a few examples.

Content Box(Definition and explanation)

Content box is the innermost area of the box and represents the actual content of the element. It includes text, images, video or any other media that are contained within the element. The size of the content box is determined by the width and height properties of the element, as well as any padding or borders that are added to the element.

How to manipulate the content box with example
For example, let's say we have a simple HTML paragraph element that contains some text. By default, the content box of the paragraph element will be sized to fit the text.

<p>Hello, world!</p>

In CSS, we can manipulate the content box of this paragraph element in a variety of ways. For example, we can change the font size of the text by setting the font-size property:

p {
   font-size: 20px;
   background-color: blue;
   color: white;
}

This will increase the size of the text inside the content box, making the box itself larger to accommodate the text.
We can also change the width and height of the content box using the width and height properties. For example, let's say we want to create a box that is 200px wide and 100px tall:

p {
    background-color: blue;
    color: white;
    width: 200px;
    height: 100px;
}

This will create a content box that is 200px wide and 100pxtall, with the text inside the box wrapping to fit the available space. In addition to these basic examples, there are many other ways to manipulate the content box using CSS. For example, we can add images to the content box, set the line height to control the spacing between lines of text, or adjust the text alignment within the box

Padding (Definition and explanation)

The padding of an HTML element is the space between the content box and the element's border. In other words, it's the amount of space between the content inside the element and the edge of the element. The padding can be thought of as a cushion that surrounds the content inside the element, creating a visual separation between the content and the border.

How to manipulate the padding with example
Padding can be added to an element using the padding property in CSS. This property allows you to specify the amount of padding that you want to add to each side of the element, using a variety of units such as px, ems, or percentages. For example, the following CSS code would add 20px of padding to all sides of a div element:

<div>Hello, world!</div>

div {
  padding: 20px;
  background-color: blue;
  color: white;
}

We can also specify different amounts of padding for each side of the element using the padding-top,padding-right, padding-bottom, and padding-left properties. For example, the following CSS code would add 50px of padding to the top of a div element, 20px of padding to the right and bottom and80px padding to the left:

div {
  background-color: blue;
  color: white;
  padding-top: 50px;
  padding-right: 20px;
  padding-bottom: 20px;
  padding-left: 80px;
}

Padding can be especially useful for creating visually appealing and easy-to-read layouts. By adding padding to an element, we can create a visual separation between the content and the border, making it easier for the user to read and understand the content.

Border(Definition and explanation)

The border of an HTML element is a decorative or structural feature that surrounds the content and padding of an element. The border is typically used to visually separate elements from one another, or to create a sense of structure and hierarchy within a layout.

How to manipulate the border with example.
Borders can be added to an element using the border property in CSS. This property allows you to specify the width, style, and color of the border. For example, the following CSS code would add a 1px wide solid black border to a div element:

<div>Hello, world!</div>

div {
  border: 1px solid black;
}

We can also specify the width, style, and color of each side of the border using the border-top, border-right, border-bottom, and border-left properties. For example, the following CSS code would add a 2px wide dashed red border to the top of a div element, and a 1px wide solid blue border to the left and right sides:

div {
  border-top: 2px dashed red;
  border-left: 1px solid blue;
  border-right: 1px solid blue;
}

There are many different border styles and colors to choose from in CSS, including solid, dashed, dotted, double, groove, ridge, inset, and outset. Borders can also be rounded using the border-radius property, which allows you to specify the radius of the corners of the border.

Borders can be especially useful for creating visually appealing and easy-to-read layouts. By adding a border to an element, we can create a visual separation between different elements on a page, making it easier for the user to navigate and understand the content.

Margin(Definition and explanation)

The margin of an HTML element is the space outside of the element's border. In other words, it's the amount of space between the border of an element and the next closest element on the page. The margin can be thought of as a buffer zone that surrounds the element, creating a visual separation between the element and other elements on the page.

How to manipulate the margin with example.
Margins can be added to an element using the margin property in CSS. This property allows you to specify the amount of margin that you want to add to each side of the element, using a variety of units such as px, ems, or percentages. For example, the following CSS code would add 20px of margin to all sides of a div element:

<div>First Div</div>
<div>Second Div</div>
<div>Third Div</div>

div {
    background-color: blue;
    color: white;
    margin: 20px;
}

We can also specify different amounts of margin for each side of the element using the margin-top, margin-right, margin-bottom, and margin-left properties. For example, the following CSS code would add 20px of margin to all sides of the div element except the first child which has a 20px margin to the top, 0px margin to the right, 80px margin to the bottom and 60pxmargin to the left.

<div>First Div</div>
<div>Second Div</div>
<div>Third Div</div>

div {
    background-color: blue;
    color: white;
    margin: 20px;
}
div:first-child {
    margin-top: 20px;
    margin-right: 0px;
    margin-bottom: 80px;
    margin-left: 60px;
}

Margins can be especially useful for creating visually appealing and easy-to-read layouts. By adding margin to an element, we can create a visual separation between different elements on the page, making it easier for the user to navigate and understand the content. Margins can also be used to add space around an element, creating a more balanced and visually pleasing layout.

Understanding the Box Model in Practice

Common CSS properties that interact with the box model

There are several common CSS properties that interact with the box model, including width, height, padding, border, and margin. These properties allow developers to control the size, spacing, and appearance of elements on a page.

For example, the width property controls the width of an element's content box, while the height property controls the height of the content box. The padding property adds space between the content box and the element's border, while the borderproperty adds a border around the content box. Finally, the margin property adds space between the element's border and the next closest element on the page.

Examples of how the box model affects layout and design**

The box model can have a significant impact on the layout and design of a web page. For example, consider a simple layout with two div elements:

<div class="box1">This is box 1.</div>
<div class="box2">This is box 2.</div>

By default, these two elements will be displayed one after the other, with no space between them.

.box1 {
  width: 200px;
  height: 100px;
  background-color: red;
  color: white;
  padding: 20px;
}

.box2 {
  width: 200px;
  height: 100px;
  background-color: blue;
  color: white;
  padding: 20px;
}

However, by adding margins and padding to these elements, we can create a more visually appealing and well-organized layout:

.box1 {
  width: 200px;
  height: 100px;
  background-color: red;
  color: white;
  margin-bottom: 20px;
  padding: 20px;
}

.box2 {
  width: 200px;
  height: 100px;
  background-color: blue;
  color: white;
  padding: 20px;
}

In this example, we've added a 20px margin to the bottom of box1, and padding to both box1and box2. This creates space between the two boxes, and gives each box a more defined structure and visual hierarchy.

** Tips for working with the box model**

When working with the box model in CSS, there are a few important tips to keep in mind:

Be aware of how the box model affects the size of an element:

<div>Hello world</div>

div {
  width: 200px;
  height: 100px;
  background-color: blue;
  color: white;
  padding: 20px;
  margin: 0px;
  border: none;

}

In this example, the div element has a width of 200px, height of 100px, a padding of 20px, a margin of 0px and no border, its total width will be 240px and height will be 140px.

this is because:
total element width = width + left padding + right padding + left border + right border + left margin + right margin

total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin
so:
total div width = 200px + 20px + 20px + 0px + 0px + 0px + 0px = 240px
total div height = 100px + 20px + 20px + 0px + 0px + 0px + 0px = 140px

Note that we used 0px for all sides of the border because the border property was set to none, which is the same as 0px.

Always consider the impact of padding and margin on the overall layout of the page. Adding too much padding or margin can create a cluttered or disjointed layout.
Use the box-sizing property to control how an element's size is calculated. By default, an element's size is calculated based on its content box. However, by setting box-sizing: border-box, the size will be calculated based on the content box plus any padding and border.

div {
  box-sizing: border-box;
  width: 200px;
  height: 100px;
  background-color: blue;
  color: white;
  padding: 20px;
  margin: 0px;
  border: none;
}

This example has a total width of 200px and height of 100pxregardless of the padding.

Use the outline property to create a visible outline around an element that doesn't affect its size or position. This can be useful for debugging or visualizing the layout of a page.

div {
  width: 200px;
  height: 100px;
  background-color: blue;
  color: white;
  padding: 20px;
  margin: 0px;
  border: none;
  outline: 3px solid black;
}

This example adds an outline of 3px to the div element. This does not affect its size or position.

By keeping these tips in mind, developers can create well-organized and visually appealing layouts using the box model in CSS.

Common Box Model Issue: Problems with box sizing

Explanation of the issue:
One common issue with the box model is that the size of an element can be difficult to predict when padding and borders are added. By default, the width and height properties only apply to the content box of an element, while any padding or border is added on top of the content box. This means that if you set a width of 200px and then add 20px of padding and a 2px border, the actual width of the element will be 244px (200 + 20 + 2).

div {
  width: 200px;
  background-color: blue;
  color: white;
  padding: 20px;
  border: 2

px solid black;
}

How to solve it:
To avoid this issue, you can use the box-sizing property. By setting box-sizing: border-box, the width and height properties will apply to the content box plus any padding and border. This makes it easier to predict the size of an element, even when padding and borders are added.

div {
  box-sizing: border-box;
  width: 200px;
  background-color: blue;
  color: white;
  padding: 20px;
  border: 3px solid black;
}

Conclusion

In this article, we covered the CSS box model, which is the foundation of layout in CSS. We explained how the box model works, including the content box, padding, border, and margin. We also discussed common issues with the box model and how to solve them.

Understanding the CSS box model is essential for any web developer or designer. Without a solid understanding of the box model, it can be difficult to create consistent and responsive designs. By mastering the box model, you can create layouts that work well on a variety of devices and screen sizes, and you can avoid common layout issues that can cause frustration for users.

Upwork
Github
WhatsApp
Twitter
LinkedIn

How I built a Tic Tac Toe Game using vanilla Javascript.

Hussaini Ahmed — Sun, 07 May 2023 00:30:15 +0000

Tic Tac Toe is a classic game that many of us have played at some point in our lives. The game uses a 3×3 grid. The goal of the game is to be the first player to place three symbols in a straight horizontal, vertical, or diagonal row. If you are a beginner in the field of web development, building a game like Tic Tac Toe is a good start to help build and develop your programming skills.

Prerequisite

To be able to develop a game like Tic Tac Toe, you will need a solid background knowledge in the following languages:

HTML
CSS
JavaScript

Building a Tic Tac Toe Game with HTML, CSS, and JavaScript

To start building a Tic Tac Toe Game, we will need to create three seperate files(HTML, CSS, and JavaScript respectively). You can go ahead and open your favourite code editor and proceed to create the files.

HTML Structure

Let's start by creating the HTML structure for our game. We will use a simple table to represent the game board. Each cell in the table will represent a position on the board. We will also create a
section to display the game score and a button to reset the game. Here is the code for our HTML structure:


<!DOCTYPE html> <html lang="en"> 
    <head> <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link rel="stylesheet" href="style.css"> 
    <title>Tic Tac Toe Game</title> 
</head> 
<body> 
    <div id="main"> 
        <table> 
            <caption>Tic Tac Toe Game</caption> 
            <tr> 
                <td id="0"></td> 
                <td id="1"></td> 
                <td id="2"></td> 
            </tr> 
            <tr> 
                <td id="3"></td> 
                <td id="4"></td> 
                <td id="5"></td> 
            </tr> 
            <tr> 
                <td id="6"></td> 
                <td id="7"></td> 
                <td id="8"></td> 
            </tr>
        </table>
        <div id="game-score"> 
            <h1 id="player"></h1> 
            <h3 id="text"></h3> 
        </div> 
        <button id="reset-btn">Reset Game</button> 
</div> <script src="script.js"></script> 
</body> 
</html>

The code starts with the HTML5 doctype declaration and sets the language to English for the document. It then defines the head section of the document, which includes the meta tags for character set, compatibility mode, and viewport. The stylesheet for the game is also linked to the document.

The body section of the document contains a div element with an ID of "main" that wraps all the game elements, including a table with 3 rows and 3 columns to represent the Tic Tac Toe game board. Each cell of the table has a unique ID (0-8) to enable JavaScript code to access them easily.

The code also includes a div element with an ID of "game-score" to display the current game score, a heading element with an ID of "player" to display the current player's turn, a subheading element with an ID of "text" to display game-related messages, and a button element with an ID of "reset-btn" to reset the game when clicked.

Finally, the code includes a script tag with the source attribute "script.js," which will be used to write the JavaScript code for the Tic Tac Toe game.

Now that we've added the HTML structure, let's proceed to include the CSS styling.

CSS Styling

Next, we will add some CSS styling to our HTML elements. We will use CSS to create a simple and clean interface for our game. We will also use CSS to define the style of our table cells, game score section, and reset button. Here is the code for our CSS styling:

#main{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

The #main selector applies thedisplay: flex property to the main element and sets the flex-direction tocolumn, which aligns the game elements in a vertical column. justify-content and align-items center the elements both horizontally and vertically, and text-align centers the text within the main element.

table {
    display: block;
    border-collapse: collapse;
    margin: 20px auto;
}

The table selector applies the display: block property and border-collapse: collapse, which removes the borders between cells on the table. It also sets the margin property to center the table horizontally.

caption{
    font-size: 32px;
    margin: 24px auto;
}

The caption selector sets the font-size to 32px and adds margin to center the caption within the table.

td{
    border: 1px solid black;
    width: 80px;
    height: 80px;
    font-size: 48px;
    text-align: center;
    vertical-align: middle;
}

The td selector sets the border property to 1px solid black, and sets the width and height properties to 80px. The font-size is set to 48px to increase the size of the symbols and text-align and vertical-align properties are set to center the content within each cell.

td:hover {
    background-color: #eee;
    cursor: pointer;
}

The td:hover selector applies the background-color of #eee to the table cell when the mouse hovers over it, and the cursor property is set to pointer to provide visual feedback to the user.

button {
    display: block;
    margin: 20px auto;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 5px;
    border: none;
    background-color: #4CAF50;
    color: white;
}

The button selector sets the display property to block and the margin property to center the button. It also sets the padding property,font-sizeproperty, and border-radius property to round the corners. The border property is set to none, and the background-color is set to #4CAF50, which is a shade of green, while the color is set to white.

button:hover {
    background-color: #3e8e41;
    cursor: pointer;
}

The button:hover selector applies the background-color of #3e8e41 to the button when the mouse hovers over it and the cursor property is set to pointer.

#game-winner{
    display: none;
}

The #game-winner selector applies the display: none property to the game-winner element to hide it by default, and it will be used to display the winner when the game ends.

JavaScript Functionality

Now, we will add JavaScript functionality to our game. We will use JavaScript to implement the game logic, handle user input, and update the game score. We will create functions to check for a winner

Declare variables


//Declare variables
let currentPlayer = 'X';
let gameEnded = false;
let gameMoves = ['', '', '', '', '', '', '', '', ''];

At the beginning of the JavaScript code, there are three variables declared - currentPlayer, gameEnded, and gameMoves.

The currentPlayer variable keeps track of whose turn it is. It is initially set to 'X'.

The gameEnded variable is used to determine if the game has ended. It is initially set to false.

The gameMoves variable is an array that represents the state of the game. Each index in the array corresponds to a cell on the game board. The initial state of the gameMoves array is an empty string for each cell.

Get DOM

//Get DOM
const boxes = document.querySelectorAll('td');
const table = document.querySelector('table');
const gameScore = document.querySelector('#game-score');
let player = document.querySelector('#player');
let text =  document.querySelector('#text');

the code uses the querySelectorAll() method to select all the table cells (td elements) in the game board. It also selects the table, the #game-score element, the #player elementand #text element.

Add event listener to table cells

//add event listener to table boxes
  boxes.forEach((box, index) =>{
      box.addEventListener('click', ()=>{
          if (!gameEnded && gameMoves[index] === '') {
              gameMoves[index] = currentPlayer;
              box.textContent = currentPlayer;
              //check for winner
              if (gameWin()) {
                  table.style.display = 'none';
                  gameScore.style.display = 'block';
                  player.textContent = currentPlayer;
                  text.textContent = 'WINNER';
                  gameEnded = true;
              }
              //check for tie
              else if (gameTie()) {
                  table.style.display = 'none';
                  gameScore.style.display = 'block';
                  player.textContent = 'XO';
                  text.textContent = 'DRAW';
                  gameEnded = true;
              } else{
                  currentPlayer = currentPlayer === 'X' ? '0' : 'X';
              }
          } 
      });
  });

A forEach loop is used to add a click event listener to each table cell. When a table cell is clicked, the event listener triggers a function that checks if the game has ended, if the cell has already been clicked, and updates the gameMoves array accordingly.

Check for winner function

//Check for winner function
  const gameWin = ()=>{
      const winningCombos = [
      [0, 1, 2], [3, 4, 5], [6, 7, 8], // rows
      [0, 3, 6], [1, 4, 7], [2, 5, 8], // columns
      [0, 4, 8], [2, 4, 6] // diagonals
    ];
    return winningCombos.some(combo=>{
      return combo.every(index=>{
          return gameMoves[index] === currentPlayer;
      })
    })
  }

The gameWin() function checks if the current player has won the game. It does this by checking if any of the winning combinations (rows, columns, or diagonals) have all the same value (either 'X' or '0').

The function uses the some() method to iterate through each winning combination and the every() method to iterate through each index in the combination. If all the indexes in a combination have the same value as the current player, the function returns true, and the current player has won.

Check for tie function

//Check for tie function
  const gameTie = ()=>{
      return gameMoves.every(move => {
          return move !== '';
      });
  }

The gameTie() function checks if the game is a tie. It does this by checking if all the cells on the game board have been clicked.

The function uses the every() method to iterate through each element in the gameMoves array. If every element is not an empty string, the function returns true, and the game is a tie.

Update game state

If the current player has won the game, the table is hidden, and the game-score div is displayed. The div displays the current player's move and the text 'WINNER'. The gameEnded variable is set to true.

If the game is a tie, the table is hidden, and the game-score div is displayed. The div displays 'XO' and the text 'DRAW'. The gameEnded variable is set to true.

If the game is not over, the currentPlayer variable is updated to the other player.

Reset game function

//Reset game function
  const resetGame = ()=>{
    table.style.display = 'block';
    gameScore.style.display = 'none';
    currentPlayer = 'X';
    gameEnded = false;
    gameMoves = ['', '', '', '', '', '', '', '', ''];
    boxes.forEach(box => {
      box.textContent = '';
    });
}

//Event listener for reset button
const resetButton = document.getElementById('reset-btn');
resetButton.addEventListener('click', resetGame);

The resetGame() function is called when the reset button is clicked. It sets the game back to its initial state by resetting the gameMoves array, the currentPlayer variable, and the gameEnded variable. It also clears the text in each cell on the game board and hides the game-score div.

Overall, this JavaScript code works by using a combination of event listeners, functions, and variables to keep track of the game state and update the game board as players make their moves. It also checks for a winner or tie and updates the game state accordingly. Finally, it provides a way to reset the game and start over.
This is the complete javascript code.

//Declare variables
let currentPlayer = 'X';
let gameEnded = false;
let gameMoves = ['', '', '', '', '', '', '', '', ''];
//Get DOM
  const boxes = document.querySelectorAll('td');
  const table = document.querySelector('table');
  const gameScore = document.querySelector('#game-score');
  let player = document.querySelector('#player');
  let text =  document.querySelector('#text');
  //add event listener to table boxes
  boxes.forEach((box, index) =>{
      box.addEventListener('click', ()=>{
          if (!gameEnded && gameMoves[index] === '') {
              gameMoves[index] = currentPlayer;
              box.textContent = currentPlayer;
              //check for winner
              if (gameWin()) {
                  table.style.display = 'none';
                  gameScore.style.display = 'block';
                  player.textContent = currentPlayer;
                  text.textContent = 'WINNER';
                  gameEnded = true;
              }
              //check for tie
              else if (gameTie()) {
                  table.style.display = 'none';
                  gameScore.style.display = 'block';
                  player.textContent = 'XO';
                  text.textContent = 'DRAW';
                  gameEnded = true;
              } else{
                  currentPlayer = currentPlayer === 'X' ? '0' : 'X';
              }
          } 
      });
  });
  //Check for winner function
  const gameWin = ()=>{
      const winningCombos = [
      [0, 1, 2], [3, 4, 5], [6, 7, 8], // rows
      [0, 3, 6], [1, 4, 7], [2, 5, 8], // columns
      [0, 4, 8], [2, 4, 6] // diagonals
    ];
    return winningCombos.some(combo=>{
      return combo.every(index=>{
          return gameMoves[index] === currentPlayer;
      })
    })
  }
  //Check for tie function
  const gameTie = ()=>{
      return gameMoves.every(move => {
          return move !== '';
      });
  }
  //Reset game function
  const resetGame = ()=>{
    table.style.display = 'block';
    gameScore.style.display = 'none';
    currentPlayer = 'X';
    gameEnded = false;
    gameMoves = ['', '', '', '', '', '', '', '', ''];
    boxes.forEach(box => {
      box.textContent = '';
    });
}

  //Event listener for reset button
  const resetButton = document.getElementById('reset-btn');
  resetButton.addEventListener('click', resetGame);

Congratulations, you've just learnt how to create a Tic Tac Toe game using HTML, CSS and Javascript. By now you should be able to build your own version, feel free to modify and use the code to build yours. Ensure you do not copy paste the code but rather write it from scratch and play around with the code to see if you can add new functionalities or edit existing ones to suit your needs. This will not only help you understand the code but also ensure you grow your coding skills faster.

Conclusively, i want to thank you for finding time to read this article, i sincerely hope you enjoyed it, however if you come across any bugs whilst trying out the code, please do not hesitate to let me know.

Upwork
Github
WhatsApp
Twitter
LinkedIn