Tailwind CSS is a popular CSS framework, allowing us to create styles without leaving our HTML files. In this article, we will show you how to create a toggle switch, which is mostly used for setting themes on websites, with Tailwind CSS.

## HTML Structure

Let's start by building the HTML structure for the toggle switch:

```xml
<label>
  <input type="checkbox" value="" />
  <div></div>
</label>
```

To break down the HTML code:

- <label\> element that acts as a container for our toggle switch
- Inside the label, we have an <input\> element of type "checkbox."
- <div\> element represents the visual part of our toggle switch. It is styled using Tailwind CSS classes for size, background color, focus effects, and more.

## CSS Styling

Now, let's style the HTML elements above to create a toggle switch. Class list for the switch is quite long. However, we will explain the purpose of the each of them. 

Here is the final version of the switch with its style.

```xml
  <label class="relative inline-flex items-center cursor-pointer">
        <input type="checkbox" value="" class="sr-only peer" />
        <div class="w-11 h-6 peer bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full  peer-checked:after:translate-x-full  after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border after:rounded-full after:h-5 after:w-5 after:transition-all  peer-checked:bg-blue-600"></div>
      </label>
```

Let's also break down the TailwindCSS style classes:

- w-11 h-6 bg-gray-200:
These classes define the width, height, and background color of the toggle switch.
- Classes with the after prefix style the knob's appearance, including background color, border, size, and transition effects.
- peer represent the sibling element which is input in this case. For example, peer-checked-translate-x-full means  when input is checked, knob will move in x axis.

## Conclusion

In this article, we have showed how to create a toggle swithc using TailwindCSS. With these steps, you should have a basic theme toggle switch in your application. Now, you can expand theme toggling functionality and customize the styles further.

Thank you for reading

Create a theme toggle switch with Tailwind CSS.

How To Create A Toggle Switch With TailwindCSS 

BEM, which stands for Block-Element-Modifier, is a popular methodology for naming CSS. It was originally created by the Russian search engine Yandex to improve CSS code maintainability and scalability and has since been adopted by many companies and developers worldwide.

## How BEM  Works

BEM is a methodology for dividing your web components into three different parts:

- Blocks: The highest-level component in your hierarchy. Blocks are standalone parts of your page that can be reused throughout your project.

- Elements: Specific parts of a block associated with a block and it can't be used outside of that block

- Modifiers: Variations of blocks or elements that change their appearance or behavior.

By seperating your CSS classes into these there part, you can create a modular system that's easy to maintain and scale.

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-9252990233452858"
     data-ad-slot="6344386266"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

## BEM Methodology For Naming CSS

To write BEM code, you'll need to follow a few simple rules for naming your CSS classes. Here's an example of how you might use BEM to style a card component:


### HTML Card Component

Consider the first scenario, where you have a card component that will be utilized throughout your application. How would you name your classes? 

Here is the structure of BEM Methodolgy For Naming CSS

- block__element--modifer   or
- block__element_modifier


```xml
<div class="card">
  <h2 class="card__title">Card Title</h2>
  <p class="card__description">This is a description of the card.</p>
  <button class="card__button card__button--primary">Primary Button</button>
  <button class="card__button card__button--secondary">Secondary Button</button>
</div>

 
```

In this example, "card" is the block, "title", "description" and "button" are the elements, and "primary" and "secondary" are modifiers. Here's how you might style this component using BEM methodology:


```
.card {
  /* Block styles */

  &__title {
    /* Element styles */
  }

  &__description {
    /* Element styles */
  }

  &__button {
    /* Element styles */

    &--primary {
      /* Modifier styles */
    }

    &--secondary {
      /* Modifier styles */
    }
  }
}
```

Note that the [& symbol in SCSS](https://ontechmap.com/article/scss-ampersand/) is used to reference the parent selector (in this case, .card) within the nested blocks and elements.


<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-9252990233452858"
     data-ad-slot="6344386266"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

## Guidelines For BEM Methodology

When using the BEM methodology, there are several important guidelines to follow. 

### Modifiers Also Can Be Applied To Blocks

Modifiers can be applied to both blocks and elements. This allows you to change the appearance or behavior of an entire block, rather than just a single element. For example:

```xml
<div class="block block--modifier">
  <div class="block__element"></div>
</div>
```

### Blocks can be nested in each other.

Blocks can be nested inside each other to create complex components. This allows you to create reusable blocks that can be combined in different ways. For example:

```xml

<header class="header">
    
    <div class="contact"></div>

    
    <form class="form"></form>
</header>
```

### Elements can be nested inside each other.

Elements can also be nested inside each other to create more complex components. This can be useful when you need to create more complex UI elements. For example:

```
<form class="form"> 
    <div class="form__content"> 
        <input class="form__input"> 
        <button class="form__button">Submit</button> 
    </div>
</form>
```

### It is not possible to use an element independently of its corresponding block

Elements should always be used within their corresponding block. This helps to prevent naming conflicts and ensures that your code is easy to understand. For example:

```
 <div class="form"> </div> 
 <div class="form__content"> </div> 
```

### An element can not be part of the another element

An element should not be a part of another element. This can make your code more difficult to read and maintain. For example:

```
<form class="form"> 
    <div class="form__content"> 
        <input class="form__content__button"> 
        <input class="form__content-button"> 
    </div>
</form>
```


###  A modifier can not be used alone

Modifiers should always be used in combination with a block or element. This ensures that your code is consistent and easy to read. For example:

```
<div class="form--active"></div> 

```

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-9252990233452858"
     data-ad-slot="1214437105"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

## Good To Know

And here is some points to consider for using BEM methodolgy for naming CSS.

- Avoid nesting too deeply: While nesting is allowed in BEM, it's important to avoid nesting too deeply. This can make your HTML and CSS difficult to read and maintain. Aim for no more than three levels of nesting.

- Use clear and concise class names: The BEM methodology encourages the use of descriptive class names. Avoid using abbreviations or acronyms that are not immediately understandable.

- Keep modifiers simple and reusable: Modifiers should be used sparingly and kept simple. Avoid creating modifiers that only apply to a single instance of a block or element. Instead, create modifiers that can be reused across multiple instances.

- Document your BEM structure: As with any naming convention, it's important to document your BEM structure so that other developers can understand and follow it. Consider creating a style guide or documentation to outline your BEM conventions.



## Conclusion

In this article, we have covered BEM methodology for naming CSS with some examples. At the end of the article, let me remind you that BEM  methodology is an option for naming CSS, using it may have pros/cons depending on your projects and team.

Thank you for reading.

## REFERENCES

https://en.bem.info/methodology/quick-start/

Discover how to use BEM methodology for naming CSS and seperating your classes into there parts: Block, Element and Modifier

How BEM Methodology Works

The table element is a fundamental part of HTML that enables the creation of tabular data. Tables allow website developers to organize and present data in an easy-to-read format, making it easier for users to understand and analyze the information.

In this article, we'll explore the table element and its child elements to create rows and data cells. Let's get started.

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-9252990233452858"
     data-ad-slot="8120921533"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

## Table Element In HTML

HTML provides us the table tag so that we can easily add a table content our website. The table element also contains other elements such as the thead (table head), tbody (table body), and td (table data) etc. elements. 

Let's discover them in order.

### thead

The thead (table head) element is used to group the header content in a table. The header content of a table typically includes column titles, descriptions, or any other metadata 

### tbody

In HTML, the tbody tag is used to group the body content of an HTML table. The body content typically contains the data that is displayed in the table, such as text, numbers, images, and links.

### tfoot

The tfoot element is used to group the footer content of an HTML table. The footer content typically contains summary information about the data in the table, such as totals, averages, or other calculations.

### td

The td element is used to define a standard data cell within a table. It is an essential component of a well-structured HTML table and is used to display data within a specific row and column.

### th

The th element is used to define a header cell within a table. It is similar to the td element, but it is typically used for the first row or column of a table, where the cell's content is a header or label for the data below or to the right. 

### tr

The tr element is used to define a row within a table. It stands for "table row" and is used to group together multiple td or th elements to form a single row of data

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-9252990233452858"
     data-ad-slot="6187628078"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

## Example Of Table Element In HTML

After tihs brief description for each table element, let's create a table consisting these element so that you can easily create own table in your website.


```
<table>
  
  <thead>
    <tr>
      
      <th>Name</th>
      <th>Age</th>
      <th>Country</th>
    </tr>
  </thead>
  
  <tbody>
    <tr>
      
      <td>John Doe</td>
      <td>30</td>
      <td>United States</td>
    </tr>
    <tr>
      <td>Jane Smith</td>
      <td>25</td>
      <td>Canada</td>
    </tr>
    <tr>
      <td>Ali Khan</td>
      <td>40</td>
      <td>Pakistan</td>
    </tr>
  </tbody>
  
  <tfoot>
    <tr>
      <td>Total</td>
      <td>95</td>
      
      <td></td>
    </tr>
  </tfoot>
</table>

```

And here is the result after adding the following style it.

```
  table {
    font-family: Arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
  }
  th,
  td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }
  th {
    background-color: #f2f2f2;
    color: #333;
  }
  tr:nth-child(even) {
    background-color: #f2f2f2;
  }
  tfoot {
    font-weight: bold;
  }
```

![table element in html](https://api.gobrain.net/uploads/table_element_in_thml_a8df58281f.png)

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-9252990233452858"
     data-ad-slot="6344386266"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
## Conclusion

In this article, we have explored the various table elements available in HTML and their specific purposes.

To demonstrate how these elements work together, we created a simple HTML table that included all the different table elements. We then used inline styles to format the table with borders, font size, and alignment.

Thank you for reading.

The table element is a fundamental part of HTML so let's see how to create a table element in HTML using its elements such as thead, tbody, td etc.

HTML Table

In today's digital age, having a strong online presence is essential for businesses and individuals alike. One of the key elements of establishing this presence is having a reliable and powerful website. To make your website accessible to users around the world, you need a hosting service. One popular option is Google Cloud VPS Hosting. In this article, we will explore what Google Cloud VPS Hosting is and why it might be the right choice for your website.

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-9252990233452858"
     data-ad-slot="8120921533"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

## Understanding VPS Hosting

Before we delve into Google Cloud VPS Hosting, let's briefly understand what VPS hosting is. VPS stands for Virtual Private Server. It's a type of web hosting where a physical server is divided into multiple virtual servers, each of which acts as an independent server. This means you get the benefits of a dedicated server at a more affordable cost. VPS hosting offers better performance, security, and customization options compared to shared hosting.

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-9252990233452858"
     data-ad-slot="6187628078"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

## Google Cloud VPS Hosting: An Overview

Google Cloud VPS Hosting is a service provided by Google Cloud Platform (GCP) that allows you to host your website on virtual servers within Google's powerful infrastructure. This means your website will benefit from Google's global network, high-speed data centers, and advanced security features.

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-9252990233452858"
     data-ad-slot="6344386266"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

## Advantages of Google Cloud VPS Hosting

Scalability: With Google Cloud VPS Hosting, you can easily scale your resources up or down based on your website's needs. If you experience a sudden surge in traffic, you can allocate more resources to ensure your website remains responsive.

Performance: Google's infrastructure is known for its speed and reliability. Your website will load quickly, providing a better user experience and potentially improving your search engine rankings.

Global Reach: Google's data centers are located all around the world. This means your website will have a global reach, serving users from various geographic locations without latency issues.

Security: Google Cloud VPS Hosting offers advanced security features, including firewalls, regular security updates, and encryption. Your data will be well protected against online threats.

Customization: You have more control over your virtual server's configurations and software installations. This allows you to tailor the server environment to your specific needs.

Support: Google offers excellent customer support to assist you with any technical issues you might encounter.

Getting Started with Google Cloud VPS Hosting

Sign Up: To get started, you'll need a Google Cloud account. You can sign up for an account on the Google Cloud Platform website.

Create a Virtual Machine: Within the Google Cloud Console, you can create a virtual machine (VM) instance. This will be your VPS where you'll host your website.

Configure Settings: You can choose the VM's specifications, such as the amount of RAM, CPU, and storage space. You'll also select the operating system and software you want to install.

Deploy Your Website: After setting up the VM, you can upload your website files and databases. You can use tools like SSH to manage your server remotely.

Domain Configuration: Point your domain to your Google Cloud VPS by updating your domain's DNS settings.

<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-layout="in-article"
     data-ad-format="fluid"
     data-ad-client="ca-pub-9252990233452858"
     data-ad-slot="8072638585"></ins>

## Conclusion

Google Cloud VPS Hosting offers a powerful and flexible solution for hosting your website. With its impressive infrastructure, scalability, security, and global reach, it's a great choice for businesses and individuals looking to establish a strong online presence. By following the steps outlined in this article, you can get started with Google Cloud VPS Hosting and enjoy the benefits it provides for your website.

Introduction to Google Cloud VPS Hosting


JavaScript is a widely used programming language that plays a fundamental role in modern web development. If you've ever interacted with a website, chances are you've encountered JavaScript in action. It is a versatile and powerful language that adds interactivity, dynamic content, and enhanced functionality to web pages.

## How JavaScript Works

JavaScript is a client-side scripting language, meaning it runs directly in your web browser on the user's device. This sets it apart from server-side languages like Python or PHP, which are executed on the web server before the web page is sent to the user's browser. When you visit a website, your browser downloads the HTML, CSS, and JavaScript files associated with that page. Once loaded, the browser interprets and executes the JavaScript code, enabling it to interact with the page's elements and modify its content in real-time.

## Why is JavaScript Important?

JavaScript is a cornerstone of modern web development for several reasons:

Enhanced User Experience: JavaScript allows developers to create dynamic and interactive user interfaces. From form validation and animations to sliders and pop-ups, JavaScript enables web developers to craft engaging and user-friendly experiences.

Web Applications: With the advent of modern web technologies, JavaScript has become the foundation of many web applications. Frameworks like React, Angular, and Vue.js have gained popularity for building complex single-page applications (SPAs) that function like desktop applications within the browser.

Asynchronous Programming: JavaScript supports asynchronous programming, which means it can handle tasks without waiting for previous ones to complete. This enables smooth loading of content, handling user interactions without freezing the page, and performing server requests in the background.

Cross-platform Compatibility: JavaScript is supported by all major web browsers, making it a cross-platform language. This compatibility allows developers to build web applications that work seamlessly across different devices and operating systems.

Ecosystem and Libraries: JavaScript has a vast ecosystem with a multitude of libraries and frameworks. Developers can leverage these tools to expedite development, add functionality, and solve common challenges.

## Basic Syntax

JavaScript code is typically embedded within <script> tags in an HTML file or included from external JavaScript files. Here's a simple example of JavaScript code:

```
<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Example</title>
</head>
<body>
    <button id="myButton">Click Me!</button>

    <script>
        // JavaScript code starts here
        const button = document.getElementById('myButton');
        button.addEventListener('click', function() {
            alert('You clicked the button!');
        });
    </script>
</body>
</html>
```
In this example, we create a button element with the ID myButton and use JavaScript to attach a click event listener to it. When the button is clicked, an alert box will pop up with the message "You clicked the button!".

## Conclusion
JavaScript is a powerful programming language that has revolutionized web development by adding interactivity and dynamism to web pages. It has become an essential skill for web developers, and its versatility allows for a wide range of applications, from simple form validations to complex web applications. As you continue your journey into web development, mastering JavaScript will undoubtedly open doors to creating even more exciting and interactive web experiences. Happy coding!

Learn what is Javascript and how it is used in web development

What is JavaScript?

In the world of web development, "hosting" is a crucial aspect that allows websites and web applications to be accessible to users worldwide. Hosting refers to the process of making your website or web application available on the internet so that others can visit it using their web browsers. In this article, we will explore the basics of hosting in web development, the different hosting options available, and how to choose the right hosting solution for your needs.

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-9252990233452858"
     data-ad-slot="8120921533"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

## What is Hosting?
When you create a website or a web application, it consists of various files, including HTML, CSS, JavaScript, images, and other media. These files need to be stored on a server that is connected to the internet to be accessible to users. This server is called a "host," and the process of placing your files on this server and making them available to the public is called "hosting."

In simpler terms, hosting is like renting space on the internet to store your website's files so that anyone with an internet connection can access them.

##Types of Hosting

There are several types of hosting available, each catering to different needs and budgets. Here are the most common types:

Shared Hosting: This is the most budget-friendly option and is suitable for beginners. In shared hosting, multiple websites share the same server resources, making it a cost-effective choice. However, it may result in slower loading times if other websites on the same server experience high traffic.

VPS (Virtual Private Server) Hosting: VPS hosting provides a dedicated portion of a server for your website. It offers more control and better performance than shared hosting. With VPS hosting, you have your own virtual server environment, which is isolated from other websites on the same physical server.

Dedicated Hosting: In dedicated hosting, you get an entire physical server exclusively for your website. This option is more expensive but offers maximum control, security, and performance. It is suitable for websites with high traffic and resource-intensive applications.

Cloud Hosting: Cloud hosting utilizes a network of servers to host your website, distributing resources dynamically as needed. This ensures high availability and scalability, allowing your website to handle traffic spikes effectively.

Managed WordPress Hosting: This type of hosting is tailored specifically for WordPress websites. It includes features like automatic updates, enhanced security, and expert support to optimize WordPress performance.

<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-layout="in-article"
     data-ad-format="fluid"
     data-ad-client="ca-pub-9252990233452858"
     data-ad-slot="2451954009"></ins>

## How to Choose the Right Hosting Provider

Selecting the right hosting provider is essential for the success of your website. Consider the following factors when making your decision:

Performance and Reliability: Look for a hosting provider that guarantees high uptime (ideally 99.9% or higher) and offers good server response times. A reliable host ensures that your website is accessible to users without frequent downtime.

Scalability: If you expect your website to grow over time, choose a hosting provider that allows easy scalability, such as cloud hosting. This ensures that your website can handle increasing traffic without any major hiccups.

Security: Website security is crucial to protect your data and your users' information. Check if the hosting provider offers features like SSL certificates, firewalls, and regular backups.

Customer Support: A reliable customer support team can assist you with any technical issues or questions you may encounter. Look for a hosting provider that offers 24/7 customer support through multiple channels.

Cost: Hosting costs can vary significantly depending on the type of hosting and the features included. Consider your budget and compare different providers to find the best value for your money.

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-9252990233452858"
     data-ad-slot="6344386266"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

## Conclusion

Hosting is a fundamental aspect of web development, allowing your website or web application to reach a global audience. Understanding the different hosting options and choosing the right hosting provider can significantly impact your website's performance, security, and overall success. Whether you are a beginner or an experienced developer, taking the time to research and select the best hosting solution for your needs is a critical step in building a successful online presence.

Discover the importance of hosting in development and different types of hosting

Hosting in Web Development: A Beginner's Guide

Functions is core part of JavaScript programming. It allows  to create reusable blocks of code.In this article, we will explore the fundamentals of JavaScript functions, including their syntax, types, parameters, return values, and various ways to define and invoke them.

## Function Syntax

A JavaScript function can be defined using the function keyword followed by the function name, a set of parentheses for optional parameters, and a block of code enclosed in curly braces. Here's the basic syntax:

```js
function functionName(parameter1, parameter2, ...) {
  // Code to be executed
}
```

The function name should be descriptive and follow naming conventions. Parameters are optional, and multiple parameters can be separated by commas. The code inside the function block is executed when the function is invoked.


## Function Types
JavaScript supports three types of functions: named functions ,anonymous functions and arrow functions.

### Named Functions

A named function is one that has a specified name. It can be defined using the syntax mentioned earlier. Here's an example:

```js
function greet(name) {
  console.log(`Hello, ${name}!`);
}
```

### Anonymous Functions

An anonymous function, also known as a function expression, doesn't have a specific name. Instead, it's assigned to a variable or used as an argument to another function. Here's an example:

```js
const greet = function(name) {
  console.log(`Hello, ${name}!`);
};
```

In this case, the function is assigned to the greet variable, and the variable can be used to invoke the function.

## Function Parameters and Return Values

Parameters are placeholders for values that can be passed to a function when it is invoked. They allow functions to receive inputs and perform actions based on those inputs. Functions can have zero or more parameters. Here's an example with parameters:

```js
function addNumbers(a, b) {
  return a + b;
}
```

In this example, the addNumbers function takes two parameters, a and b, and returns their sum using the return statement.

Return values are the output of a function that can be used further in the program. The return statement specifies the value to be returned from the function

## Invoking Functions

Once a function is defined, it can be invoked or called to execute the code inside its block. Function invocation is done by using the function name followed by parentheses. Here are a few examples:

```js
greet("John"); // Output: Hello, John!

const result = addNumbers(3, 5);
console.log(result); // Output: 8
```

## Conclusion

JavaScript functions are an essential part of the language, it enables code to reuse. The functions that can be defined in three ways accept inputs and return outputs.

Thank you for reading



Javascript functions explained with its syntax, types and how to invoke them.

JavaScript Functions

Javascript variables are used to store a wide range of data.  Imagine that you are developing an e-commerce site, products, quantities, customers, credit card information are all data on this site. At this point, variables are used to store like these pieces of information in memory.

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-9252990233452858"
     data-ad-slot="8120921533"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

## Declaring Variables

You can think of variables as a container that stores a particular information. To create them in javascript, you can use the ```var```,   ```let```, or  ```const``` keywords followed by a variable name:

```js
var productBrand;
let productQuantity;
const productId;
```

In this snippet above, we have created three variables ( ie defined or declared them) to store information. Now we can put some data on them to store and access this information later.


```js
var productBrand = "Apple";
let productQuantity = 20;
const productId = "Pro Max 15";
```


## Using Variables

Once we create some variables and put information in then, we can now use them in different parts of our javascript application. 

```js
let width = 20;
let height = 20;
let area = width * height;
console.log(area) // 400
```

In this example, we have three variables; The width and height variables store the side lengths of a square, and the area variable stores the area of the square. This example shows that after you declare some variables, you can use them to create another variable or to get information inside them.

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-9252990233452858"
     data-ad-slot="6187628078"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

## Naming Variables

As you can see, we have given different names to each variable. We have some restrictions in giving these names and best practices without obligation mostly used by the javascript community.

These rules are important to make code more readable and understandable. Here are some rules and best practices for naming variables:

### Rules

```js
let product1 = "Phone"; ✔
let product-1 = "Phone"; ✘

let 9product = "PC" ✘

let while = 4 ✘
```


- Variable names can only contain letters, numbers and underscores
- Variable names cannot start with a number
- Reserved keywords cannot be used as variable names (if, for, while)
- Variable names are case sensitive: myVariable, myvariable and MyVariable are all different variables in JavaScript.

### Best Practises

```js
let a = "MacBook"; ✘
let computer = "MacBook"; ✔

let phonenumber = "0234058"; ✘
let phoneNumber = "0234058"; ✔

let pi = 3.14; ✘
const PI = 3.14; ✔
```

- Variable names should describe the data they store
- It is common to use camelCase for variable names (productId, phoneNumber )
- If a value of a variable will not change throughout the program, it is common to use uppercase letters for its name (PI_NUMBER, MAX_NUMBER)

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-9252990233452858"
     data-ad-slot="9959831409"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

## Summary

In this guide we have discussed the variables in javascript. The summary of the guide would be: 

- Variables are used to store data on memory
- Variables can be declared with three keywords (var, let, const)
- After creating a variable and putting data into it , it can be used in different sections of the application
- We have some restrictions that is necessity and best practises to make code more readable for giving name to a variable

Learning requires practice, so you should work on variables locally so that you can gain a more comprehensive understanding of the topic.

Thank you for reading.

Javascript variables explained with examples of declaring, naming and using them appliying best practises and some rules

Javascript Variables Explained

Javascript forEach is an built-in array method that loops through an array and executes a function on each element in the array. 

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-9252990233452858"
     data-ad-slot="6187628078"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>


## Syntax 

forEach method takes a callback function as its parameter. This function can be a named, anonymous or arrow function. Here are three different syntax variations of the forEach method in JavaScript:


```js
const array = [1,2,3,4,5]

// Using a named function:
function callback(currentElement,index,arr) {
  console.log(currentElement);
}
array.forEach(callback);

// Using an anonymous function:
array.forEach(function(currentElement, index, arr) {
   console.log(currentElement);
});

// Using an arrow function:
array.forEach((currentElement, index, arr) => {
  console.log(currentElement);
});
```

### Parameters

The callback function can take up to three parameters: 

- **currentElement**: The current element being processed
- **index**: The index of the current element in the array
- **arr**: The original array itself (array) .

## Examples

### Print Each Element In The Array

In this basic example, we're using the `forEach()` to iterate through the array of numbers and print each number to the console using the console.log() method.

```js
const numbers = [1, 2, 3, 4, 5];

numbers.forEach(function(number) {
  console.log(number);
  // 1, 2, 3, 4, 5
});
```
We can also print the index of each element in the array, like this:

```js
const numbers = [1, 2, 3, 4, 5];

numbers.forEach(function(number, index) {
  console.log(`Index: ${index}, Number: ${number}`);
});

/*

Index: 0, Number: 1
Index: 1, Number: 2
Index: 2, Number: 3
Index: 3, Number: 4
Index: 4, Number: 5

*/
```

### Sum Values In An Array

To sum all the values in the array, the forEach method iterates through each item in the array and adds each value to the `sum` variable.

```js
const values = [1, 2, 3, 4, 5];
let sum = 0;

values.forEach(value => {
  sum += value;
});

console.log(sum); // Output: 15
```

After the forEach loop is finished, the `sum` variable contains the total sum of all the values in the array.



## foreach vs for

### for

Javascript foreach method is alternative to the for loop. While both of these loops can achieve the same goal, they differ in their syntax, performance and flexibility.

The for loop is a looping construct that has been a part of programming languages for many years. It's a very basic loop that allows you to iterate through an array and perform an action on each element. The syntax of the for loop is as follows:

```js
for (let i = 0; i < array.length; i++) {
  //code to execute on each element
}
```
The for loop is generally faster than the forEach loop, especially when you have a large array with many elements. This is because the for loop only needs to perform a simple operation on each element, while the forEach loop needs to execute a function on each element.

Additionally, the for loop provides us with greater control over the iteration because we can set limits for execution.

## forEach

One advantage of the forEach loop over the for loop is that it's more flexible. The forEach loop allows you to pass a function as a parameter, which provides more clear and readable code for complex usages.


<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-9252990233452858"
     data-ad-slot="6344386266"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

## Conclusion

The javascript forEach method is a powerful method while working on arrays. It gets a callback function as an parameter and call this callback function for each element to perform actions over the elements.


## More

If you want to learn more javascript array methods, you can take a look at guides for the [map](https://onjsdev.com/article/javascript-map-method) and [reduce](https://onjsdev.com/article/javascript-array-reduce-method) methods

Thank you for reading.

JavaScript forEach method is an alternative built-in array method to the for loop. It is used for executing a callback function on each element

Javascript forEach() Method

The Javascript filter method is used to filter arrays based on the function provided as an argument. It creates a new array with filtered elements.This article will discuss the javascript filter method by providing its syntax, use cases and examples.


<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-9252990233452858"
     data-ad-slot="8120921533"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

## Syntax of Filter Method In Js


The syntax of the filter method in javascript is simple. It takes a function as an argument, which determines whether or not an element should be included in the new array. The syntax is as follows:


```js
const newArray = array.filter(function(currentValue, index, arr), thisValue)
```

In this code snippet: 

- newArray is the filtered array
- array is the array you want to filter. 
- currentValue is the value of the current element being processed
- index is the index of the current element
- arr is the array that filter was called upon.
- thisValue argument is optional and sets the value of ```this``` within the function.


## Examples of Filter Method In Javascript

Let's say you have an array of numbers and you want to create a new array that only contains even numbers. You could use the filter method like this:


```js
const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter(function(number) {
  return number % 2 === 0;
});
console.log(evenNumbers);
// [2, 4, 6]
```

In this example, the function we provided is applied each element on array and **if the element being processed is even the function return true which means this element will contain in the new array** returned by filter method.

Let's give anohter example, this example shows how to filter an array to obtain only numbers:

```js
const inputArray = [1, 2, 'three', 4.5, 'five', 6];
const numbers = inputArray.filter((x) => typeof x === 'number');
console.log(numbers)
// [1, 2, 4.5, 6]
```

In this example, we checks the type of element being processed, if the type of element is number, the filter method adds it to the array called numbers.

## Js Filter Method With Objects

You can use the filter method in javascript with data structures combined with arrays. For example, let's say you have an array including some objects representing people and you want to create a new array containing only people who are over the age of 18. You could use the filter method like this:

```js
const people = [
  { name: 'John', age: 20 },
  { name: 'Jane', age: 17 },
  { name: 'Bob', age: 25 },
  { name: 'Mary', age: 16 }
];

const adults = people.filter(function(person) {
  return person.age >= 18;
});
console.log(adults);
/*

[
  { name: 'John', age: 20 },
  { name: 'Bob', age: 25 }
]

*/
```

## Filter Method With Js Arrow Function

An arrow function is an anohter way of writing a function in JavaScript that was introduced in ES6 so you can simply use an arrow function as a callback in your filter method as in the following example:


```js
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(number => number % 2 === 0);
console.log(evenNumbers); 
// [2, 4]
```

As you can see, we have created the same example using the arrow function. This method reduces code complexity and increases readability.

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-9252990233452858"
     data-ad-slot="6187628078"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>

## Conclusion

If you develop a javascript application, you would probably use the filter method to filter arrays based on a function that tests whether the current element meets the condition.

So, In this article we have discussed the javascript filter method with examples.

Thank you for reading

Javascript filter method and its syntax and usages explained with examples for filtering an array based on a js callback function provided