<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Anik Saha</title>
    <description>The latest articles on DEV Community by Anik Saha (@aniksaha12).</description>
    <link>https://dev.to/aniksaha12</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F838912%2F8b1b4b83-8670-4f4e-87fa-6406b34d0a07.jpg</url>
      <title>DEV Community: Anik Saha</title>
      <link>https://dev.to/aniksaha12</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/aniksaha12"/>
    <language>en</language>
    <item>
      <title>Understanding Multi-Tenant Architecture (Part-One)</title>
      <dc:creator>Anik Saha</dc:creator>
      <pubDate>Thu, 08 May 2025 13:46:09 +0000</pubDate>
      <link>https://dev.to/aniksaha12/understanding-multi-tenant-architecture-basic-part-one-33c3</link>
      <guid>https://dev.to/aniksaha12/understanding-multi-tenant-architecture-basic-part-one-33c3</guid>
      <description>&lt;p&gt;Multi-tenant architecture is a powerful concept in software development, especially in SaaS (Software as a Service) platforms. If you're just starting out in backend or full-stack development, understanding how multi-tenancy works is essential.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What is Multi-Tenant Architecture?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;In simple terms, multi-tenancy means that a single instance of your software runs on a server and serves multiple customers (called "tenants"). Each tenant’s data is isolated, but they all use the same application.&lt;br&gt;
Think of it like a single apartment building where multiple families live. Each family has their own apartment (data and settings), but the building (application) is shared.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Types of Multi-Tenant Architectures:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;1. Shared Database, Shared Schema&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;All tenants share one database and one set of tables.&lt;/li&gt;
&lt;li&gt;Tenant data is separated using a tenant_id column in each table.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;2. Shared Database, Separate Schemas&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;All tenants use the same database, but each tenant has its own set of tables (schemas).&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;3. Separate Databases&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Each tenant has its own database.&lt;/li&gt;
&lt;li&gt;Offers better isolation and security, but can be harder to manage at scale.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffed7r0n2fb79o3xer0if.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffed7r0n2fb79o3xer0if.png" alt="Image description" width="800" height="533"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Each tenant can have its own database or share the same one depending on your architecture choice.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Key Benefits:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Cost-Efficient: One app serves multiple users.&lt;/li&gt;
&lt;li&gt;Scalable: Easily add more tenants.&lt;/li&gt;
&lt;li&gt;Centralized Management: Easier to update and patch.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Challenges:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Data Isolation: Must ensure no tenant can access another's data.&lt;/li&gt;
&lt;li&gt;Complex Migrations: Updating schemas across tenants is tricky.&lt;/li&gt;
&lt;li&gt;Security: More tenants = higher security responsibility.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;** Best Practices**&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Always use tenant-specific identifiers (tenant_id).&lt;/li&gt;
&lt;li&gt;Design for scalability from the start.&lt;/li&gt;
&lt;li&gt;Monitor tenant performance individually.&lt;/li&gt;
&lt;li&gt;Secure your APIs and data access.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Final Thoughts:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Multi-tenant architecture is the backbone of scalable SaaS platforms. Whether you go for shared schemas or separate databases, the goal is to balance cost, security, and scalability.&lt;br&gt;
If you’re planning to build a SaaS product, learning this basic concept and start development.&lt;/p&gt;

</description>
      <category>programming</category>
      <category>sass</category>
    </item>
    <item>
      <title>Postman new update that developer should know</title>
      <dc:creator>Anik Saha</dc:creator>
      <pubDate>Thu, 16 May 2024 03:40:11 +0000</pubDate>
      <link>https://dev.to/aniksaha12/postman-new-update-that-developer-should-know-5gg0</link>
      <guid>https://dev.to/aniksaha12/postman-new-update-that-developer-should-know-5gg0</guid>
      <description>&lt;p&gt;&lt;strong&gt;What is Postman?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Postman is an API platform for building and using APIs. Postman simplifies each step of the API lifecycle and streamlines collaboration so you can create better APIs—faster.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;New updates :&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Store and reuse scripts everywhere with the package library&lt;br&gt;
Available on Free, Basic, Professional, and Enterprise plans&lt;/p&gt;

&lt;p&gt;With the new Package Library, teams can now store and reuse test scripts for more efficient and reliable API testing. Test script packages can contain business logic and code, which can be consumed in multiple requests by just referencing the package in various places within the team. Change once, use everywhere. No more copy-pasting. No more redundant code.&lt;br&gt;
**&lt;br&gt;
Package Library: **&lt;/p&gt;

&lt;p&gt;Configure request and collection runs using the Postman Runtime library. The library is an open-source Node.js project you can use for low-level configuration over request sending in your API development and testing projects.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;runtime = require('postman-runtime');
var runner = new runtime.Runner();

var collection = new sdk.Collection();

runner.run(collection, {
  data: [],
  timeout: {
    request: 30000,
    script: 5000
  },
  iterationCount: 1,

  //other options...

},
function (err, run) {
  //Callbacks to execute as the collection runs
  run.start(callbacks);
});
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You can use the Runtime library if you need a detailed configuration of your request runs, for example as part of an automation workflow to integrate Postman Collection runs into your development pipeline.&lt;/p&gt;

</description>
      <category>postman</category>
      <category>backenddevelopment</category>
      <category>api</category>
    </item>
    <item>
      <title>How to optimize SQL queries</title>
      <dc:creator>Anik Saha</dc:creator>
      <pubDate>Fri, 29 Mar 2024 12:46:26 +0000</pubDate>
      <link>https://dev.to/aniksaha12/how-to-optimize-sql-queries-3517</link>
      <guid>https://dev.to/aniksaha12/how-to-optimize-sql-queries-3517</guid>
      <description>&lt;p&gt;With so many companies using the cloud to store large amounts of data, SQL optimization has become more important than ever. SQL &lt;strong&gt;(structured language query)&lt;/strong&gt; is a programming language used to query and communicate with a database to extrapolate information. It is a language that can be used to perform a variety of tasks, such as creating, querying, updating, and deleting data. The performance of SQL queries greatly depending on how to the query written. &lt;/p&gt;

&lt;p&gt;This guide will discuss some of the most important factors to consider when optimizing SQL queries.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Why Optimize SQL Queries?&lt;/strong&gt;&lt;br&gt;
Imagine a customer searching for a product in online and results take a few minutes a appear. What do you think customer wait? In my opinion probably not. For this reason Database managers must ensure SQL queries optimize with efficiency.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;1. Use indexes efficient&lt;/strong&gt;&lt;br&gt;
Indexes are a key to query performance. They allow the database to quickly find the rows that match your query criteria.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;2. Avoid SELECT queries&lt;/strong&gt;&lt;br&gt;
SELECT queries are inefficient. This is because they view all the fields in a dataset rather than just the relevant ones. Instead, focus on retrieving necessary columns only.  By only selecting the fields that you need to view, models and reports will be clean and easier to use.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;3. Use Joins Properly&lt;/strong&gt;&lt;br&gt;
Joins can be a powerful tool, but they can also be costly. Choose the right join type for the task at hand, and use efficient join conditions to avoid cartesian products.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;4. Use EXIST() instead of COUNT() queries&lt;/strong&gt;&lt;br&gt;
When searching for a specific element in a table, it’s more efficient to use an EXIST() keyword instead of a COUNT() one. This is because a COUNT query counts every instance of the specific search element – which can be very inefficient, especially if the database is large!&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;5.Avoid subqueries&lt;/strong&gt;&lt;br&gt;
When subqueries are used in WHERE or HAVING clauses, they can slow down the performance of the query. This is because they can return large numbers of rows, making them difficult to execute.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;6. Use Caching and Materialized Views&lt;/strong&gt;&lt;br&gt;
Caching and materialized views can be used to store frequently accessed query results in memory, which can significantly improve performance.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;7.Use Tools for Query Tuning&lt;/strong&gt;&lt;br&gt;
There are number of tools available like APEXSQL Plan, SQL Azure Query Performance Insight that can help you  to understand how your queries are executing, and EXPLAIN and ANALYZE commands can help you to identify optimization opportunities.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Conclusion&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Understanding and monitoring performance plays a key role in optimizing SQL queries and combined with simple steps such as indexing and swapping functions you can quickly make a difference to search time.&lt;/p&gt;

</description>
    </item>
    <item>
      <title>When to Use React Query or useEffect for Data Fetching</title>
      <dc:creator>Anik Saha</dc:creator>
      <pubDate>Sun, 25 Feb 2024 11:43:26 +0000</pubDate>
      <link>https://dev.to/aniksaha12/when-to-use-react-query-or-useeffect-for-data-fetching-42an</link>
      <guid>https://dev.to/aniksaha12/when-to-use-react-query-or-useeffect-for-data-fetching-42an</guid>
      <description>&lt;p&gt;When it comes to data fetching in React Applications all developers often face a dilemma what should we use to React Query or traditional useEffect hooks?&lt;/p&gt;

&lt;p&gt;Two commonly used tools for these purposes are React Query and useEffect. But both approaches have their own strengths and weaknesses.&lt;/p&gt;

&lt;p&gt;In this blog, we will explore how and when two approaches are used and why.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Using React Query for Data Fetching&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;React Query is a powerful library designed specifically for fetching, caching, synchronizing, and updating server state in React applications. It offers a declarative API and integrates seamlessly with React components.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Key Features:&lt;/strong&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Declarative Data Fetching:** React Query provides a declarative approach to data fetching, making it easy to fetch and manage data in React components.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;strong&gt;2. Caching:&lt;/strong&gt; It automatically caches fetched data, optimizing performance by reducing unnecessary network requests.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;3. Automatic Data Refetching:&lt;/strong&gt; React Query can automatically refetch data based on various triggers such as stale time, window focus, or specific actions.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;4. Mutation Management:&lt;/strong&gt; It simplifies managing mutations (e.g., POST, PUT, DELETE requests) and provides built-in support for optimistic updates and error handling.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Example:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import { useQuery } from 'react-query';

async function fetchUsers() {
  const response = await fetch('/anik/v1/data');
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
}

function UsersList() {
  const { isLoading, error, data } = useQuery('users', fetchUsers);

  if (isLoading) return &amp;lt;div&amp;gt;Loading...&amp;lt;/div&amp;gt;;
  if (error) return &amp;lt;div&amp;gt;Error: {error.message}&amp;lt;/div&amp;gt;;

  return (
    &amp;lt;ul&amp;gt;
      {data.map(user =&amp;gt; (
        &amp;lt;li key={user.id}&amp;gt;{user.name}&amp;lt;/li&amp;gt;
      ))}
    &amp;lt;/ul&amp;gt;
  );
}

export default UsersList;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Using useEffect for Data Fetching&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;useEffect is a built-in React hook used for handling side effects in functional components. It allows you to perform operations such as data fetching, subscriptions, or DOM manipulations after component renders.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Key Features:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;1. Lifecycle Management:&lt;/strong&gt; useEffect provides a way to perform 2 side effects in functional components similar to lifecycle methods in class components.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;2. Dependency Tracking:&lt;/strong&gt; It enables you to specify dependencies, ensuring that the effect runs only when certain values change.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;3. Cleanup:&lt;/strong&gt; You can return a cleanup function from useEffect, which executes when the component unmounts or before the effect runs again.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;4. Custom Hooks:&lt;/strong&gt; useEffect can be used to create custom hooks for encapsulating logic and reusing it across components.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Example Code:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import React, { useState, useEffect } from 'react';

function UsersList() {
  const [users, setUsers] = useState([]);

  useEffect(() =&amp;gt; {
    const fetchUsers = async () =&amp;gt; {
      try {
        const response = await fetch('/anik/v1/data');
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        const data = await response.json();
        setUsers(data);
      } catch (error) {
        console.error('Error fetching users:', error);
        // You can handle errors here, e.g., set an error state
      }
    };

    fetchUsers();
  }, []); // Empty dependency array ensures the effect runs only once

  return (
    &amp;lt;ul&amp;gt;
      {users.map(user =&amp;gt; (
        &amp;lt;li key={user.id}&amp;gt;{user.name}&amp;lt;/li&amp;gt;
      ))}
    &amp;lt;/ul&amp;gt;
  );
}

export default UsersList;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Conclusion:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Both React Query and useEffect serve distinct purposes in React development. React Query is ideal for managing complex data fetching scenarios with built-in caching and mutation management, while useEffect is suitable for basic data fetching and other side effects within functional components. Understanding the strengths and use cases of each tool empowers developers to make informed decisions when architecting React applications.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>react</category>
    </item>
    <item>
      <title>ReactJs Virtual DOM</title>
      <dc:creator>Anik Saha</dc:creator>
      <pubDate>Wed, 19 Jul 2023 20:16:05 +0000</pubDate>
      <link>https://dev.to/aniksaha12/reactjs-virtual-dom-1jff</link>
      <guid>https://dev.to/aniksaha12/reactjs-virtual-dom-1jff</guid>
      <description>&lt;p&gt;&lt;strong&gt;What is DOM? And why we are understanding react DOM?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;DOM stands for '&lt;strong&gt;Document Object Model&lt;/strong&gt;'. It is a structured representation of HTML in the webpage or application . In modern javascript framework have change the way of web development.They have provided a great abstraction by addressing common issues in browsers and enhancing performance using methodologies that were not possible through plain JavaScript.&lt;/p&gt;

&lt;p&gt;One of the most popular javascript framework of front-end development is React js.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What is react dom? How it is work?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;React popularized something called the Virtual DOM.The virtual DOM is only a virtual representation of the actual DOM.For every DOM object, there is a corresponding Virtual DOM object. Everytime the state of our application changes, the virtual DOM gets updated instead of the real DOM.&lt;br&gt;
ReactDOM is a package that provides DOM-specific methods that can be used at the top level of a web app to enable an efficient way of managing DOM elements of the web page. ReactDOM provides the developers with an API containing the following methods and a few more. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;-render()&lt;/strong&gt;&lt;br&gt;
&lt;strong&gt;-findDOMNode()&lt;/strong&gt;&lt;br&gt;
&lt;strong&gt;- unmountComponentAtNode()&lt;/strong&gt;&lt;br&gt;
&lt;strong&gt;- hydrate()&lt;/strong&gt;&lt;br&gt;
&lt;strong&gt;- createPortal()&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjp66l7f3vor75qm3ttfj.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjp66l7f3vor75qm3ttfj.jpg" alt="Image description" width="800" height="400"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;How does a page render in a browser?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;When a browser loads any webpage, the page is loaded in multiple parts, then it is constructed in the browser and rendered.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;The HTTP protocol returns data in bytes.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;These bytes are converted into characters, then tokens, then nodes, and then, lastly, the object model.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;The DOM (Document Object Model) is a tree-like structure that represents HTML. It is generated from a webpage’s HTML markup. Similarly, the CSSOM (CSS Object Model) is generated from a webpage’s CSS markup. The DOM and CSSOM are loaded independently as trees, and then they are combined into a render tree to form a webpage.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frwd1la3jvuz53az6fsjw.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frwd1la3jvuz53az6fsjw.jpg" alt="Image description" width="600" height="376"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Why is React so fast?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;There is no direct access or change to the DOM elements in Virtual DOM. When virtual DOM gets updated, React compares it with a virtual DOM snapshot that was taken right before the update. It then compares the new virtual DOM with the previous virtual DOM and figures out which objects have changed. &lt;br&gt;
Once React knows which virtual DOM objects have changed, it updates only those objects on the real DOM and other elements don't get updated as opposed to what the real DOM normally does. This is how virtual DOM works behind the scenes, making it much faster.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fp7j2qx5ynxvhwkhd7mj9.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fp7j2qx5ynxvhwkhd7mj9.jpg" alt="Image description" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Conclusion&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Virtual DOM is a powerful concept that React uses to overcome standard performance issues in the browser.&lt;/p&gt;

</description>
      <category>beginners</category>
      <category>react</category>
      <category>javascript</category>
      <category>programming</category>
    </item>
    <item>
      <title>JavaScript Loops</title>
      <dc:creator>Anik Saha</dc:creator>
      <pubDate>Fri, 26 Aug 2022 08:23:53 +0000</pubDate>
      <link>https://dev.to/aniksaha12/javascript-loops-4gdg</link>
      <guid>https://dev.to/aniksaha12/javascript-loops-4gdg</guid>
      <description>&lt;p&gt;Hello everyone, welcome to the third blog of the beginner series. &lt;br&gt;
In previous blog we talked about data type method, today we will be discussing basics on loops.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;What is loop?&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Loop is a sequence of instruction that is continuously repeated until a certain condition is reached.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Types of loops :&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;There are three types of loops, &lt;strong&gt;"while loops"&lt;/strong&gt;, "&lt;strong&gt;for loops"&lt;/strong&gt;, "&lt;strong&gt;do-while loop"&lt;/strong&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  **while Loops:
&lt;/h2&gt;

&lt;p&gt;**&lt;br&gt;
while loops continue to run until a condition is true.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Syntax :&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6kqdcmy1dru0f5c8ui6p.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6kqdcmy1dru0f5c8ui6p.png" alt="Image description" width="800" height="480"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The purpose of a while loop is to execute a statement or code block continuously  repeated as long as an expression is true. Once the expression became false, the loop terminates.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnljrap24fh3fcr6v4xv4.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnljrap24fh3fcr6v4xv4.png" alt="Image description" width="800" height="735"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Output:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkoqsua4czpbnhmsvm1oi.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkoqsua4czpbnhmsvm1oi.png" alt="Image description" width="554" height="818"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;do-while Loop:&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;do-while loop is similar to the while loop except that the condition check happens at the end of the loop.&lt;/p&gt;

&lt;p&gt;Syntax:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Far87j0ke4dfakjkzeogy.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Far87j0ke4dfakjkzeogy.png" alt="Image description" width="800" height="471"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;If the condition is true the loop will repeated. Or loop will always be executed at least once , even if the condition is false.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftthecm37ipnhniachsrs.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftthecm37ipnhniachsrs.png" alt="Image description" width="800" height="767"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Since the do block is run first without checking the condition, this can cause unexpected issues if you're not careful. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkro8f9cfrbhpg84wdxl4.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkro8f9cfrbhpg84wdxl4.png" alt="Image description" width="554" height="856"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;For Loop:&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;for loop are the most common type of loop. for loop repeats until a specific condition evaluates to false.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjfds98zetnvhil6cgton.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjfds98zetnvhil6cgton.png" alt="Image description" width="800" height="348"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The initial expression , if any is executed. This expression usually initialize one or more loop.&lt;br&gt;
The condition Expression is ending of the loop. If the expression is true , the loop statements execute.&lt;br&gt;
To execute multiple statements use  block statement.&lt;/p&gt;

&lt;p&gt;Here the example of for loops. The most common loop -&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fo51vli1du5xj30pukgke.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fo51vli1du5xj30pukgke.png" alt="Image description" width="800" height="792"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Output:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flvgbv4k7e0itff4542zl.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flvgbv4k7e0itff4542zl.png" alt="Image description" width="554" height="782"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Ending Notes&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;This is all about loops, thanks for your reading till the end.&lt;/p&gt;

&lt;p&gt;You will also check this link :&lt;br&gt;
&lt;a href="https://www.w3schools.com/js/"&gt;https://www.w3schools.com/js/&lt;/a&gt;&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>beginners</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>JavaScript (ES6) data Type</title>
      <dc:creator>Anik Saha</dc:creator>
      <pubDate>Wed, 17 Aug 2022 09:30:00 +0000</pubDate>
      <link>https://dev.to/aniksaha12/javascript-es6-data-type-13ee</link>
      <guid>https://dev.to/aniksaha12/javascript-es6-data-type-13ee</guid>
      <description>&lt;p&gt;Hello everyone, welcome to the second blog of the beginner series. &lt;br&gt;
In previous blog we talked about DOM method, today we will be discussing basics on Data types.&lt;br&gt;
**&lt;/p&gt;

&lt;p&gt;what is data type?&lt;br&gt;
**&lt;br&gt;
Data type describe the different types or kinds of data that we are gonna be working with and how things are stored. In javascript, there are 6 data types:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;String type&lt;/li&gt;
&lt;li&gt;Boolean type.&lt;/li&gt;
&lt;li&gt;Null type.&lt;/li&gt;
&lt;li&gt;Undefined type.&lt;/li&gt;
&lt;li&gt;BigInt type.&lt;/li&gt;
&lt;li&gt;Symbol type
**&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  String:
&lt;/h2&gt;

&lt;p&gt;**&lt;br&gt;
A string is a series of characters like "Harry".  Also it could be a single character, a line of text, a paragraph, and so on. In javaScript there is no difference between single quotes and double quotes. You can use quotes inside a string, as long as they don't match the quotes surrounding the string.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzgku1rfao0eix5sogbr8.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzgku1rfao0eix5sogbr8.png" alt="Image description" width="800" height="301"&gt;&lt;/a&gt;&lt;br&gt;
**&lt;/p&gt;

&lt;h2&gt;
  
  
  Boolean Type:
&lt;/h2&gt;

&lt;p&gt;**&lt;br&gt;
In programming there is only two type of values, like &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;True or False&lt;/li&gt;
&lt;li&gt;yes or No.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fk00kouh9t6fn2d8kjs2g.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fk00kouh9t6fn2d8kjs2g.png" alt="Image description" width="688" height="446"&gt;&lt;/a&gt;&lt;br&gt;
**&lt;/p&gt;

&lt;h2&gt;
  
  
  Null type :
&lt;/h2&gt;

&lt;p&gt;**&lt;br&gt;
JavaScript Null value represent the international absence of any object value.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwrh0fqqd4nb9jiu2b6cz.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwrh0fqqd4nb9jiu2b6cz.png" alt="Image description" width="586" height="446"&gt;&lt;/a&gt;&lt;br&gt;
**&lt;/p&gt;

&lt;h2&gt;
  
  
  Undefined type:
&lt;/h2&gt;

&lt;p&gt;**&lt;br&gt;
A variable without a value defined has the value undefined. This is not similar as Null. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffgaue8p2q4tgaxsije8v.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffgaue8p2q4tgaxsije8v.png" alt="Image description" width="800" height="278"&gt;&lt;/a&gt;&lt;br&gt;
**&lt;/p&gt;

&lt;h2&gt;
  
  
  BigInt type :
&lt;/h2&gt;

&lt;p&gt;**&lt;br&gt;
BigInt is a built-in object in javaScript. It's a primitive wrapper object used to represent and manipulate primitive BigInt values which are too large to be represented by the number primitive.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwtysa2wwo8isfs1pdszh.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwtysa2wwo8isfs1pdszh.png" alt="Image description" width="800" height="397"&gt;&lt;/a&gt;&lt;br&gt;
**&lt;/p&gt;

&lt;h2&gt;
  
  
  Symbol type :
&lt;/h2&gt;

&lt;p&gt;** &lt;br&gt;
A symbol represents a unique identifier. we can create many symbols with the exactly the same description, but they are different values. Symbols are must be unique.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvc62z2j0ohvzb1hblwqu.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvc62z2j0ohvzb1hblwqu.png" alt="Image description" width="756" height="558"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;**&lt;/p&gt;

&lt;h2&gt;
  
  
  Ending Notes
&lt;/h2&gt;

&lt;p&gt;**&lt;/p&gt;

&lt;p&gt;This is all about Data Types, thanks for your reading till the end. &lt;br&gt;
You will also check this link :&lt;br&gt;
&lt;a href="https://www.w3schools.com/js/"&gt;https://www.w3schools.com/js/&lt;/a&gt;&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>beginners</category>
      <category>programming</category>
    </item>
    <item>
      <title>JavaScript DOM</title>
      <dc:creator>Anik Saha</dc:creator>
      <pubDate>Fri, 29 Jul 2022 12:04:00 +0000</pubDate>
      <link>https://dev.to/aniksaha12/javascript-dom-399j</link>
      <guid>https://dev.to/aniksaha12/javascript-dom-399j</guid>
      <description>&lt;h2&gt;
  
  
  &lt;strong&gt;Introduction&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;JavaScript DOM(Document Object Model) is essential part of web development. DOM is a platform that allows programs and script to dynamically access and content , style and structure of a document.&lt;br&gt;
There are three different parts of DOM -&lt;br&gt;
a. Core DOM - Document type&lt;br&gt;
b. XML DOM - XML Documents&lt;br&gt;
c. HTML DOM - HTML documents&lt;br&gt;
In these case we will discuss about HTML DOM.&lt;/p&gt;

&lt;p&gt;1) document.getElementById: &lt;br&gt;
Select element using get element by Id .&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fozkmapqnyh8atbcdtzq6.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fozkmapqnyh8atbcdtzq6.png" alt="Image description" width="800" height="271"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;2) document.querySelector :&lt;br&gt;
select element using query selector.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fcc92b0v51e0g2rrkj5pu.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fcc92b0v51e0g2rrkj5pu.png" alt="Image description" width="800" height="317"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;3) document.getElementByTagName: &lt;br&gt;
Select element by tag name .&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fagdp58rt0vm17ne8giij.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fagdp58rt0vm17ne8giij.png" alt="Image description" width="800" height="315"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;4) document.getElementByClassName:&lt;br&gt;
Get multiple elements using getElements by class name.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F101jc5x54vghlr9yowgb.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F101jc5x54vghlr9yowgb.png" alt="Image description" width="800" height="324"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;5) document.querySelectorAll:&lt;br&gt;
Get multiple elements items using querySelectorAll. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fc2y3ffx1rjdcqfotkk69.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fc2y3ffx1rjdcqfotkk69.png" alt="Image description" width="800" height="326"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Event listeners in DOM&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;The addEventListener() method allows you to add event listeners on any HTML DOM object such as HTML elements, the HTML document, the window object.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;click event ()&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;The onclick event occurs when the user clicks on an element.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Favzxlue2xdsj30olm27x.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Favzxlue2xdsj30olm27x.png" alt="Image description" width="800" height="295"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;addEventListener() method, the JavaScript is separated from the HTML markup, for better readability and allows you to add event listeners even when you do not control the HTML markup.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5o0wdmyqnfn0ef9db2jl.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5o0wdmyqnfn0ef9db2jl.png" alt="Image description" width="800" height="260"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;when user click on change color button the body background will automatically change and the color of text will change also.&lt;/p&gt;

&lt;h2&gt;
  
  
  Example:
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzzxvf9t08m2t4ph1rbm7.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzzxvf9t08m2t4ph1rbm7.png" alt="Image description" width="800" height="461"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>programming</category>
      <category>beginners</category>
    </item>
  </channel>
</rss>
