DEV Community: Shameer Chagani

From Callback Hell to Elegance: Simplifying Asynchronous Code with Top-Level await in JavaScript.

Shameer Chagani — Sun, 09 Jul 2023 06:42:57 +0000

In JavaScript, we often have to wait for something to happen, like fetching information from the internet or loading pictures. Before top-level await, we had to write a lot of extra code to handle waiting for these things to finish. It could be quite tricky, just like a big puzzle!

But with top-level await, it's much simpler. We can just tell JavaScript to wait for something to finish, and it will automatically move on to do other things while waiting. It's like having more free time to make other things while our special cake is being baked!

Imagine you want to make a cake. You need to get some ingredients, like flour, eggs, and sugar. You can do this in two ways:

You can go to the store and buy the ingredients one by one. This is like using an async function. Each time you go to the store, you have to wait until you get the ingredient before you can go back and get the next one. This can take a long time.
You can go to the store and buy all the ingredients at once. This is like using top-level await. You can wait until you have all the ingredients before you start baking the cake. This is much faster.

Top-level await is a way of making asynchronous operations more like synchronous operations. It allows you to wait for the results of an asynchronous operation before you continue with your code. This can make your code more concise and readable, and it can also make it faster.

Here is an example of how you can use top-level await:

const response = await fetch("https://www.example.com/");
const data = await response.json();
console.log(data);

In this example, we are using top-level await to wait for the results of the fetch() and json() methods. Once we have the results, we can log them to the console.

Without top-level await, we would have to write this code as an async function:

async function main() {
  const response = await fetch("https://www.example.com/");
  const data = await response.json();
  console.log(data);
}

main();

As you can see, the code with top-level await is much simpler and easier to read.

"In conclusion, top-level await in JavaScript is a powerful feature that simplifies asynchronous programming. It allows us to write cleaner and more efficient code by eliminating the need for complex callback structures or additional functions. With top-level await, we can await multiple tasks simultaneously, making our programs faster and more responsive.

By embracing top-level await, we can unlock new possibilities in JavaScript development. It's like having a secret weapon in our coding arsenal that saves us time and effort. Asynchronous operations become more manageable, allowing us to focus on building amazing web applications and delivering exceptional user experiences.

If you found this writeup helpful and informative, don't forget to hit the like button and subscribe to stay updated with our future content. Feel free to share this post with fellow developers who might benefit from learning about top-level await in JavaScript. Together, let's level up our coding skills and explore the exciting frontiers of JavaScript!

Have a nice day!

What is a Protocol in python?

Shameer Chagani — Wed, 05 Jul 2023 03:53:07 +0000

In Python, protocols refer to a concept introduced in Python 3.8 as a way to define structural typing or "duck typing" within the language. A protocol is a set of methods or attributes that an object must have in order to be considered compatible with that protocol. Protocols enable you to define interfaces without explicitly creating a class or inheriting from a specific base class.

Protocols are defined using the typing.Protocol class or the typing.Protocol decorator. Let's explore the details with examples:

Defining a Protocol:
To define a protocol, you can use the typing.Protocol class or the typing.Protocol decorator. Here's an example using the class syntax:

from typing import Protocol

class Printable(Protocol):
    def print(self) -> None:
        pass

In this example, we define a protocol named Printable that requires an object to have a print method. The Protocol class allows you to define abstract methods (in this case, just print) that must be implemented by objects conforming to the protocol.

Implementing a Protocol:
To implement a protocol, you don't need to explicitly declare it. Instead, you can ensure that an object conforms to a protocol by implementing the required methods. Here's an example:

class Book:
    def __init__(self, title: str):
        self.title = title

    def print(self) -> None:
        print(f"Book Title: {self.title}")

In this example, the Book class implements the Printable protocol by providing the required print method. Any instance of the Book class can be treated as a Printable object.

Using a Protocol:
Protocols are primarily used for type hinting and static type checking. You can use a protocol as a type annotation to indicate that an argument or variable must conform to a specific protocol. Here's an example:

def print_object(obj: Printable) -> None:
    obj.print()

In this example, the print_object function takes an argument obj of type Printable. This means that any object passed to this function must implement the print method defined in the Printable protocol.

Multiple Protocols:
You can also define a protocol that combines multiple other protocols. Here's an example:

class Serializable(Protocol):
    def serialize(self) -> str:
        pass

class PrintableAndSerializable(Printable, Serializable):
    pass

In this example, we define a protocol named Serializable with a serialize method. Then we define another protocol named PrintableAndSerializable that combines both the Printable and Serializable protocols.

To conclude with,Protocols provide a way to define structural typing in Python, allowing you to create interfaces without the need for explicit inheritance. They enable type checkers to verify that objects adhere to the defined protocols, enhancing code correctness and maintainability.

Exploring String.prototype.replaceAll(): Simplifying Substring Replacements in JavaScript

Shameer Chagani — Thu, 22 Jun 2023 04:23:21 +0000

Certainly! The replaceAll() method is a useful addition to the String prototype in JavaScript that allows you to replace all occurrences of a specified substring with another substring within a string. Prior to the introduction of this method, developers often had to use regular expressions or custom workarounds to achieve this functionality.

Here's a more detailed explanation of replaceAll():

Syntax:

string.replaceAll(searchValue, replaceValue)

Parameters:

searchValue: The substring to be replaced. It can be a string or a regular expression.
replaceValue: The replacement substring.

Return value:

A new string with all occurrences of searchValue replaced by replaceValue.

Example usage:

const str = 'Hello, hello, hello!';
const newStr = str.replaceAll('hello', 'hi');
console.log(newStr); // 'Hi, hi, hi!'

In the example above, the replaceAll() method is called on the str string. It replaces all occurrences of the substring 'hello' with 'hi'. The resulting string, newStr, becomes 'Hi, hi, hi!'.

Some key points to note about replaceAll():

Case-sensitivity: The replaceAll() method is case-sensitive. It replaces only exact matches of the searchValue. If you need case-insensitive replacement, you can use a regular expression with the /i flag.
Regular expressions: The searchValue parameter can be a regular expression. This allows for more advanced and flexible search patterns. For example:

   const str = 'apple, APPLE, AppLe, aPPle';
   const newStr = str.replaceAll(/apple/i, 'orange');
   console.log(newStr); // 'orange, orange, orange, orange'

Original string remains unchanged: It's important to note that replaceAll() returns a new string with the replacements, while the original string remains unchanged. Strings in JavaScript are immutable, so any modification operations return a new string.
Browser compatibility: The replaceAll() method is supported in most modern browsers, including Chrome, Firefox, Edge, and Safari. However, it may not be available in older browsers. If you need to support older browsers, you can use alternative approaches like using regular expressions or writing custom functions.

The replaceAll() method provides a convenient way to replace all occurrences of a substring within a string without resorting to complex workarounds. It improves code readability and simplifies string manipulation tasks.

I hope you found this article helpful! If you enjoyed it, I would greatly appreciate it if you could give it a thumbs-up and consider sharing it with your friends. And if you haven't already, don't forget to hit that subscribe button!

What is Optional Chaining (?.) In javaScript?

Shameer Chagani — Fri, 16 Jun 2023 21:06:34 +0000

Optional chaining is a feature that simplifies accessing nested properties or calling functions on objects that may be nullish or undefined. It allows you to avoid the common "TypeError: Cannot read property 'x' of undefined" error when accessing properties deep within an object hierarchy.

Here's an example to illustrate how optional chaining works:

const user = {
  id: 1,
  name: 'John',
  address: {
    city: 'New York',
    street: '123 Main St'
  }
};

// Accessing nested property without optional chaining
const city = user.address.city; // 'New York'

// Accessing nested property with optional chaining
const city = user.address?.city; // 'New York'

// Accessing non-existent property with optional chaining
const country = user.address?.country; // undefined

In the example above, the address property is optional. With optional chaining (?.), you can safely access the city property of address even if address itself is null or undefined. If address is null or undefined, the expression will simply return undefined.

Optional chaining is especially useful when working with data from APIs or when dealing with complex object structures where certain properties may not always exist.

Note that optional chaining is supported in modern JavaScript environments, including most up-to-date browsers. However, if you're working in an older environment or need to support older browsers, you might need to transpile your code using a tool like Babel to ensure compatibility.

How to Copy Text to Clipboard using JavaScript?

Shameer Chagani — Wed, 07 Sep 2022 20:00:37 +0000

Hello my dear friends,

Today we are going to see how we can copy any text or link to clipboard using JavaScript.

I decided to share this in of the projects the clients requirement was visitor should be able to copy the generated link to the clipboard. Its not something new you may have came across many websites like Dropbox or Google Drive to mention the popular ones, when you click on get link/ share it creates a link and next to it you get a button copy and then it copies the link to your clipboard.

Let me tell you this, it is much more easier than you think.
so let's get started.

Am going to create a folder on my desktop copyTextJS and create 3 files inside this folder:

index.html
style.css
script.js

am going to open the folder in VScode you can use your favorite editor which you are comfortable with.

open index.html and paste the following code.

<!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" />
    <title>Copy Text To Clipboard</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <main class="container">
      <div class="wrapper">
        <form>
          <input
            type="text"
            name="text"
            id="text"
            placeholder="Type any text and click copy"
            autocomplete="no"
          />
          <button id="btn" class="btn">Click to Copy</button>
          <br /><br />
          <textarea cols="30" rows="5"> </textarea>
        </form>
      </div>
    </main>

    <script src="script.js"></script>
  </body>
</html>

In the above HTML file we have:

Linked our style.css
Linked the script.js
Created a form with input box(for the user to type the text to be copied), a button which will execute our function on click, textarea (not needed though) I will use this to paste the copied text so as to show you!

lets style the above compnents;

Open style.css and paste the following code

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
main {
  height: 100vh;
  width: 100%;
  background-color: #eee;
  display: flex;
  justify-content: center;
  align-items: center;
}
.wrapper {
  background: #fff;
  width: 400px;
  height: 200px;
  box-shadow: 5px 5px 15px 10px rgba(0, 0, 0, 0.2),
    5px 5px 15px 10px rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}
input#text {
  padding: 5px 10px;
  font-size: 18px;
}
button#btn {
  padding: 5px;
  font-size: 18px;
  border-radius: 6px;
  border: none;
  outline: none;
  cursor: pointer;
  background: transparent;
  color: #4b4949;
  box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease-in-out;
}
button#btn:hover {
  background-color: #76daf6;
  box-shadow: 5px 5px 2px 3px rgba(0, 0, 0, 0.3);
}

I will not go deep into the styles above.
You can style yours the way you like.

Our webpage should look something like below:

Now lets begin to code our javascript

open script.js and copy the following code:

const btn = document.getElementById("btn");
btn.addEventListener("click", copyText);

function copyText(e) {
  e.preventDefault();
  const text = document.getElementById("text");
  text.select();
  document.execCommand("copy");
}

lets understand our code:

Line 1 we have grabbed our button
Line 2 we add click event to the button which will trigger a function copyText

lets understand our function now.
we have used e.preventDefault() to prevent the default behaviour of the form.
We grab our textbox, and used javascript method select() to select the text typed inside the textbox
Now we come to the magical line of code

document.execCommand("copy");

When an HTML document has been switched to designMode, its document object exposes an execCommand method to run commands that manipulate the current editable region, such as form inputs or contentEditable elements.
copy
Copies the current selection to the clipboard.

The above line of code, copies the selected text to the clipboard.

So we have reached end of the mini tutorial. Hope you have enjoyed it.

If you have liked the post or it was something new that you have learned today please do not forget to give a like. And if you have not already please give a follow to receive notifications whenever there is a new post.

Here are the links to my previous post please have a look:

How to create a responsive navbar with toggler button animation using flexbox?
https://bit.ly/3qk9QQ4

How To Create Help Section for Your Website Using HTML & CSS?
https://bit.ly/3ewA7Ys

How to Create Simple Animations using HTML & CSS...(Text Slide and Fade)
https://bit.ly/3TOktrM

Have a great day.

How to Create a Responsive Navbar with Toggler Button Animation Using Flexbox?

Shameer Chagani — Tue, 30 Aug 2022 17:24:05 +0000

Hello Friends,

Today we are going to see how to make a Responsive Navbar using Flexbox.
Why Flex box? because flex box gives us freedom to change the order of elements within its children. You are gonna see in this post how we achieve it. So without further ado lets gets started...

I am going to create a folder on my desktop and name it responsiveNavbar (you can create wherever you wish). let's create two files index.html and styles.css; I am going to open the folder in VS Code, (you can use your favorite code editor, i like VS Code);

From the above preview you can see the navbar is divided into 3 parts

Brand Name(it can be logo or company name anything..)
Nav links and
Login and Signup Buttons

Lets first create a basic markup for our project
open index.html file and paste the following code

<!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" />
    <title>Responsive NavBar</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <nav class="nav__bar">
        <div class="nav__brand">
          <a href="#" class="navbar__brand">Brand Name</a>
        </div>
        <div class="nav__links">
          <ul class="nav__items">
            <li class="nav__item">
                <a href="#" class="nav__link">Home</a>
            </li>
            <li class="nav__item">
                <a href="#" class="nav__link">About</a>
            </li>
            <li class="nav__item">
              <a href="#" class="nav__link">Services</a>
            </li>
            <li class="nav__item">
                <a href="#" class="nav__link">Blogs</a>
            </li>
            <li class="nav__item">
                <a href="#" class="nav__link">Contact</a>
            </li>
          </ul>
          <div class="nav__btns">
              <button class="nav__btn">Sign Up</button>
              <button class="nav__btn">Login</button>
          </div>
        </div>   
      </nav>
    </header>
  </body>
</html>

Nothing Fancy, we created 3 div's One for BrandName/logo second ul for the links and finally the 3rd for our signup and login buttons within the menu div. Also we have linked our styles.css to our index.html file.

Now lets start designing our navbar. Open styles.css and paste the following code

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap");

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
html {
  font-size: 62.5%;
}
a {
  text-decoration: none;
  color: #fff
}
ul li {
  list-style-type: none;
}
nav.nav__bar {
  display: flex;
  justify-content: space-between;
  gap: 2em;
  height: 8vh;
  background-color: #00003f;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
}

lets understand what the above code,

At line one we have imported Google fonts,
then we removed the default padding, margin and set the imported font-family;
We also set the font-size for our html document to be 62.5%; the value because so in the later styles its easy to define our font-sizes rem units.
We have also set the display to be flex, this will display our child items/elements in a row (the flex-direction property's default is row)

so far our display should look as shown in the below image.

lets move ahead and style our brand, links and buttons.
Come back to our styles.css and paste the following code

.nav__brand {
  margin-left: 3rem;
  padding: 0.5rem 1rem;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 2.25rem;
  color: #f6f6f6;
}
.nav__menu {
  display: flex;
  align-items: center;
  transition: 0.5s ease-in;
}
.nav__items {
  display: flex;
  gap: 2rem;
  transition: 0.5s linear;
}
.nav__link {
  font-size: 1.8rem;
}
.nav__link:hover,
.nav__link:focus {
  color: #f6f6f6;
  font-weight: 600;
}
button {
  margin-right: 1.5rem;
}
.nav__btns {
  margin-right: 3rem;
  padding: 0.5rem 1rem;
}
.nav__btns .signup,
.nav__btns .login {
  padding: 0.6rem 2rem;
  border-radius: 0.8rem;
  cursor: pointer;
  font-size: 1.6rem;
  font-weight: 500;
  color: #fff;
  width: 12rem;
  transition: background 0.2s ease-in-out;
}

.nav__btn.signup {
  background: transparent;
  border-color: #cd0362;
}

.nav__btn.login {
  background-color: #03cd62;
}
.nav__btn.login:hover,
.nav__btn.login:focus {
  opacity: 0.8;
}
.nav__btn.signup:hover,
.nav__btn.signup:focus {
  background-color: #cd0362;
  border-color: #fff;
}

Our output should look something like the below image:

Now that we have created the styles for bigger screens, lets now make it responsive to mid-screens and small-screens as well.
Remember in the beginning I said that we are going to create a animated toggler button as well.

Lets come back to our index.html and create 3 div's and give each of them a class name one, two, three respectively. we will create them just below the nav__menu section;

    <div class="nav__toggler toggleIcon">
          <div class="one"></div>
          <div class="two"></div>
          <div class="three"></div>
        </div>

Also let us style the above togglerIcon which we just created.
Come back to styles.css and paste the following code;

.nav__toggler div {
  width: 3rem;
  height: 0.2rem;
  margin: 0.4rem;
  background: #909090;
  transition: 0.4s ease-in-out;
}

Our navbar so far should look like the blow image;

But also know that we do not want to display the toggler Icon on the Bigger-screen sizes. We will display it only on the Medium and smaller screen sizes. so lets add the following code in the styles.css file.

.nav__toggler {
  cursor: pointer;
  display: none;
}

Now that we have created our Navbar let us write some media queries to make it responsive.

Style for Small & Medium Screen sizes

@media screen and (max-width: 900px) {
  .nav__toggler {
    display: block;
  }
  .nav__menu {
    position: fixed;
    top: 9.5vh;
    right: 0;
    width: 50%;
    height: 90vh;
    background: #00003f;
    flex-direction: column;
    z-index: 999;
    transform: translateX(0);
  }
  .nav__items {
    flex-direction: column;
  }
  .nav__btns {
    margin-left: 3.5rem;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    margin-top: 3rem;
  }
}

Now we want to toggle the active class when we click on the hamburger icon the navbar should be displayed and when we click again it should hide it. For this we will need to write simple javaScript.
Before that let us define the .nav__active class in our style sheet

.nav__active {
  transform: translateX(0);
}

That should do the trick for us.

As this is just a small tutorial I will write the script in index.html just before the closing body tag.

<script>
      const toggler = document.querySelector(".nav__toggler");
      toggler.addEventListener("click", activeClass);
      function activeClass() {
        document.querySelector("#navMenu").classList.toggle("nav__active");
      }
    </script>

lets understand the above code.

we are grabbing the toggler button and storing in a variable.
Then we have added a event listener to our toggleIcon;
on click it will fire a function activeClass().
in this function we are toggling the activeClass,meaning if the class is present it will remove it and vice versa.

our output should look something like the below gif.

Only one thing remaining now is to animate the toggler/menu icon;
to do that we need to write the following line of code in our javascript function.

function activeClass() {
        document.querySelector("#navMenu").classList.toggle("nav__active");
        document.querySelector("#toggleIcon").classList.toggle("toggleIcon");
      }

we are toggling class for our menu icon on the click.
Lets also define the toggleIcon class for our animation, to so that come back to our styles.css file and write the below code.

toggleIcon .one {
  transform: rotate(-45deg) translate(-4px, 5px);
}
.toggleIcon .two {
  opacity: 0;
}
.toggleIcon .three {
  transform: rotate(45deg) translate(-4px, -5px);
}

Output should look similar to the below image...

We have reached the end of our tutorial. Hope you guys have loved it.

Please do not forget to give a reaction and if you have not already please give a follow, This encourages me to create more creative posts like this one.

Have a great day!!!

What should I write about next?

Shameer Chagani — Wed, 24 Aug 2022 17:38:00 +0000

❤️ How to create a Modal Using HTML / CSS & JavaScript?
🦄 How to create a Navbar with Drop-Down Menu Using HTML / CSS & JavaScript?

Comment/Hit with the appropriate Icon. I will make a on post the topic that gets the most VOTES.

Have a Happy Day!!!

How to Create Simple Animations using HTML & CSS...(Text Slide and Fade)

Shameer Chagani — Tue, 16 Aug 2022 11:00:11 +0000

Hello friends,

In this post we are going to see how to create simple animations like slide or fade using HTML and CSS.

You must have seen on many websites when you browse the text is fading in/out or the text is sliding from left/right/top/bottom and it must have seemed so overwhelming. But let me tell you this its so hard as you think.

We are going to write few lines of code in CSS and that is it.

Our Output Should be similar to this below image..

To get started download or Fork the starter files from the below repository:
https://github.com/shameerchagani/animationStaterCode.git

Let's Make the text1 slide from right to left.



section.text1 p{
  font-weight: 600;
  color: #FA7700;
  animation: slide-right 2s ease-in;
}

in the above code what we did is just to change the color and font weight of the text.
Next we define the animation, Slide-right; This wont do anything just yet because we need to define it first. to do that we need the following piece of code.



@keyframes slide-right{
  from{
    margin-left:-100%
  }
  to{
    margin-left:0;
  }
}

What we are doing in the above code is that we are setting the margin to -100% from the left so the text will not be visible initially, but when the page loads completely you will see that the text is sliding from left to right and the duration of this animation we set as 2s;

Output should look similar to below

so with just a couple lines of code we have created nice looking animation.

Now lets make the text2 to slide from right to left.
You must have already guessed it how to do it.

Let's type the following piece of code in styles.css file



 section.text2 p{
  font-weight: 200;
  font-style: italic;
  color: #000F89;
  animation: slide-left 2s ease-in;
}

@keyframes slide-left{
  from{
    margin-right:-100%;
  }
  to{
    margin-right:0;
  }
}

Nothing fancy right?

For text1 we said margin-left to -100% here to the text2 we set it just opposite to that. so we say margin-right from -100% to 0 in 2s duration.

Output should look like below:

FadeIn Animation

It more simpler than you think; We will use the Opacity a CSS property make the text fade.

This is how we utilize it



section.text3 p{
  font-weight: 800;
  font-style: italic;
  color: #00703C;
  animation: fadeIn 2s ease-in;
}

@keyframes fadeIn{
  from{
    opacity:0;
  }
  to{
    opacity:1;
  }
}

When you set the opacity to 0; the text will not be visible.

In the above we defined the fadeIn animation, and we set the opacity of the text from 0 to 1 in 2s duration. so the text3 will come to life in 2secs...

Output:

With that we come to the end of this article.
Hope you found this article helpful.

If you found this article interesting please give a follow and react appropriately. Please let me know in comments how I could have made this more better.

Cheers!!

How To Create Help Section for Your Website Using HTML & CSS

Shameer Chagani — Thu, 11 Aug 2022 10:28:26 +0000

Hello Friends,

Welcome to yet another HTML & CSS Project. In this tutorial we will learn how to create Help section to the website using HTML and CSS. So lets get started...

Project setup:

make a folder helpSection (I created it on my desktop you can create it wherever you want)
Here we are gonna need 2 files index.html and styles.css;
As this is a small tutorial i will not creating separate folder i will dump everything in the helpSection folder...

I will now open my project in VS code., You can use your favorite code editor of your choice doesn't matter what you use.

in the index.html i will create a container and in that container we will have a image section and info section and add classes to it so that we can style them later on.

<!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">
    <title>Help Section</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
    <main>
        <section class="container">
          <section class="img-section">
          </section>
          <section class="info"> 
          </section>
        </section>
      </main>
</body>
</html>

now lets style our container and I would also like to add google fonts default fonts are so boring😜😜 Just kidding, I personally like to use google fonts in all my projects its not a must though it just depends on someone's personal preferences.

To import google fonts to in our project open sytles.css file and use @import url();

@import url('https://fonts.googleapis.com/css2?family=Akshar:wght@300;400;500;600&display=swap');

let's also reset the default padding and margin and set the font-family what we just imported

@import url('https://fonts.googleapis.com/css2?family=Akshar:wght@300;400;500;600&display=swap');
*{
  margin: 0;
  padding:0;
  box-sizing: border-box;
 font-family: 'Akshar', sans-serif;
  transition: all 200ms ease-in;

}
body{
  padding:20px;
  margin: auto;
}
section.container{
  margin: auto;
  margin-top: 50px;
  min-width: 500px;
  width: 80%;
  display: flex;
  justify-content: center; 
  align-items: center;
  gap: 40px;
  border-radius: 20px;
  box-shadow: 0 0 15px rgba(0,0,0,0.25);
  padding: 20px;
}

the output should look something like this:

Now lets comeback to our index.html and add the contents to our sections;

<section class="img-section">
        <img src="https://i.postimg.cc/7YZF63WQ/help-banner.png" alt="help image" />
      </section>
      <section class="info">
        <h3>NEED HELP?</h3>
        <p class="text1">We’re committed to serving you with the best possible support.</p>

        <p class="text2">CALL OUR TOLL FREE HELPLINE</p>
        <h3 class="head2">1800 000 4321</h3>
        <hr />
        <h3>VISIT US</h3>
        <p class="text3">Find our branch near you 
           <button>Click Here</button>
        </p>
      </section>

now that we have added the contents to our HTML let us now add some styles; Open styles.css and add the following code.,

section.info{
  display: flex;
  flex-direction: column;
  gap: 20px;

}
section.info h3{
  font-size: 30px;
  font-weight: 500;
}
section.info p.text1{
  margin-top: -10px;
  font-size: 18px;
  font-weight: 500;
}
section.info p.text2{
  letter-spacing: 0.25px;
  font-weight: bold;
  margin-top: 10px;
}
section.info h3.head2{
  margin-top: -18px;
  letter-spacing: 1px;
  font-weight: 600;
  font-size: 1.75em;
}
section.info p.text3{
  margin-top: -15px;
  font-size: 1.25em;
}
section.info p.text3 button{
  padding: 5px 10px;
  border-radius: 8px;
  outline: none;
  border: none;
  background: brown;
  color: #fff;
  text-transform: uppercase;
  font-weight: 300;
  letter-spacing: 0.15em;
  cursor: pointer;
}

the output should look like below image:

it looks almost similar to the final project i intend to make..

But there is one thing here, its not responsive. Let's add a media query to make it responsive for the small screen sizes.

Open style.css

@media screen and (max-width:900px){
  section.container{
    width:80%;
    display: flex;
    flex-direction: column;
  } 
  section.container section.img-section{
    text-align: center;
  }
  section.container section.img-section img{
    width: 100%;


  }
}
@media screen and (max-width: 480px){
  section.container{
    width: 100%;
  }
  section.container section.img-section img{
    padding: 0;    
    width: 100%;
    overflow: hidden;

  }
}

Our page should look like this in the smaller screens...

That's all for today!

let me know in the comments section below how did you like this one. Your comments are most welcome it helps me improve on my code.

Please Like and Follow. It encourages me to share more stuff like this..

Have a great one!

How to create Bootstrap like Accordions using HTML | CSS | JavaScript

Shameer Chagani — Wed, 30 Mar 2022 12:57:03 +0000

what's up guys!
Hope you all are doing well.
In most of my small projects I try to keep away from using libraries for CSS/JavaScript as much as possible, reason being it offers me more control over my code. I've seen many developers using tools/libraries for even a small things, Am not against using them It just depends on one's personal choice.
Today I want to talk about a way to create Accordions using plain JavaScript. Its simpler than you think. so lets dive in.

First Create a folder named accordions.(You can name it as you want but i like to keep it simple).
inside of this accordions Folder create two more folders css and js and a file index.html.
Let's now create two more files style.css inside of css folder and script.js inside of js folder. our file and folder structure is all set.

let begin with index.html

<!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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="css/style.css" />

  <title>Accordions</title>
</head>
<body>
  <header>
    <h1>Accordions using HTML CSS and JavaScript.
  </header>
    <main>      
    <section class="container">

    </section>
    </main>
</body>
<script src="js/script.js"></script>
</html>

The above is just basic boilerplate for our project we have linked our stylesheets and javascript files and added fontawesome cdn link for icons in the html and added a heading.

Now I want to create 3 sections inside of the section with class container, and give it a class accordions.
And inside of these each sections I want to create another section with the class heading which will hold our div element with class text and another div with the class icon, which will be our heading of the accordion.
And finally create one more section inside of the section with class accordion and give it a class of definition.

Our code will look something like this.

<section class="accordion active">
        <section class="heading">
          <div class="text">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio, earum!
          </div>
          <div class="icon">
            <i class="fa fa-caret-down" aria-hidden="true"></i> 
          </div>
        </section>
        <section class="definition">
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita laboriosam, natus atque laudantium iure delectus, sapiente deleniti optio dolorum officiis a vero dicta corrupti assumenda accusamus, fugit et aspernatur sequi dolores recusandae. Expedita, tempora quam dicta dolores voluptatum, quasi temporibus, reiciendis laudantium incidunt exercitationem possimus perspiciatis. Reiciendis beatae dolor ex neque, eum nesciunt sunt nisi deserunt, doloribus tempore ipsa commodi. Ducimus quam, accusamus provident quisquam asperiores dolor illum expedita odit. Quia quas neque deserunt, odit libero ab dolorem iste, error est rem dolorum, voluptates incidunt optio architecto. Consequuntur incidunt facilis optio rem suscipit porro, tenetur, animi maxime aliquam modi ex!
       </section>
</section>

<section class="accordion active">
        <section class="heading">
          <div class="text">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio, earum!
          </div>
          <div class="icon">
            <i class="fa fa-caret-down" aria-hidden="true"></i> 
          </div>
        </section>
        <section class="definition">
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita laboriosam, natus atque laudantium iure delectus, sapiente deleniti optio dolorum officiis a vero dicta corrupti assumenda accusamus, fugit et aspernatur sequi dolores recusandae. Expedita, tempora quam dicta dolores voluptatum, quasi temporibus, reiciendis laudantium incidunt exercitationem possimus perspiciatis. Reiciendis beatae dolor ex neque, eum nesciunt sunt nisi deserunt, doloribus tempore ipsa commodi. Ducimus quam, accusamus provident quisquam asperiores dolor illum expedita odit. Quia quas neque deserunt, odit libero ab dolorem iste, error est rem dolorum, voluptates incidunt optio architecto. Consequuntur incidunt facilis optio rem suscipit porro, tenetur, animi maxime aliquam modi ex!
       </section>
</section>    

<section class="accordion active">
        <section class="heading">
          <div class="text">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio, earum!
          </div>
          <div class="icon">
            <i class="fa fa-caret-down" aria-hidden="true"></i> 
          </div>
        </section>
        <section class="definition">
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita laboriosam, natus atque laudantium iure delectus, sapiente deleniti optio dolorum officiis a vero dicta corrupti assumenda accusamus, fugit et aspernatur sequi dolores recusandae. Expedita, tempora quam dicta dolores voluptatum, quasi temporibus, reiciendis laudantium incidunt exercitationem possimus perspiciatis. Reiciendis beatae dolor ex neque, eum nesciunt sunt nisi deserunt, doloribus tempore ipsa commodi. Ducimus quam, accusamus provident quisquam asperiores dolor illum expedita odit. Quia quas neque deserunt, odit libero ab dolorem iste, error est rem dolorum, voluptates incidunt optio architecto. Consequuntur incidunt facilis optio rem suscipit porro, tenetur, animi maxime aliquam modi ex!
       </section>
</section>

I hope its clear now. lets get to the styling part.

in our style.css paste the following code.

@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
header h1 {
  background: coral;
  color: #fff;
  text-align: center;
  padding: 10px;
}
body {
  background: #f6f6f6;
}
main {
  width: 90%;
  min-height: calc(100vh - 90px);
  margin: 10px auto;
  background: #fff;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}
main section.container {
  padding: 15px 25px;
}
h3 {
  margin-top: 10px;
}
section.accordion {
  margin-top: 10px;
}
section.accordion .heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: coral;
  padding: 10px;
  cursor: pointer;
}
section.accordion .heading div.text {
  flex: 10;
  font-weight: 600;
}
section.accordion .heading div.icon {
  flex: 1;
  text-align: center;
}
section.accordion.active .heading,
section.acordion.active .icon {
  color: #fff;
}
section.accordion .heading div.icon i {
  font-size: 1.5em;
  cursor: pointer;
}
section.accordion.active .definition {
  display: block;
  transition: display 0.3s ease-in;
}
section.accordion .definition {
  display: none;
  padding: 10px;
  transition: display 1s ease-in-out;
}

Now open index.html in your browser it should look like below

lets open our script.js and start writing some JavaScript code.


let accIcons = document.querySelectorAll(".accordion .icon i")

accIcons.forEach((accIcon) => {
  addEventListener("click", expand)
})

function expand(e) {  e.target.parentNode.parentNode.parentNode.classList.toggle("active");
}

lets try to understand the code.

in the first line we are grabbing all the icons and placing them in a vairable accIcons .
in the second line we are adding a click event to all the icons which will when clicked run a function named expand
this function will toggle the active class on the targeted accordion. And this event will be fired whenever we click caret-down icon.

I want to add 2 more functionalities to these.

Collapse all
expand all

let open our index.html create 2 buttons and add some stylings

in the container below <h3> write the below code.

<div class="btns">
   <button class="collapseAll" id="collapseAll"> 
       Collapse All
   </button>
   <button class="expandAll" id="expandAll">
       Expand All
   </button>
</div>

lets style them

div.btns {
  margin-top: 20px;
  text-align: center;
}
button {
  padding: 2px 7px;
  cursor: pointer;
  border-radius: 15px;
  font-size: 0.75em;
  outline: none;
  border: 0.5px solid black;
}
button#collapseAll {
  background: cyan;
}
button#expandAll {
  background: firebrick;
  color: #f3f3f3;
}

our webpage should look like this now:

When i click collapse all button all the accordions should collapse.
and when i click expand all button all the accordions should expand.
so lets write the code in our script.js

let accordions = document.querySelectorAll(".accordion");
let expandBtn = document.querySelector("#expandAll");
let collapseBtn = document.querySelector("#collapseAll");

expandBtn.addEventListener("click", expandAll);
collapseBtn.addEventListener("click", collapseAll);

function collapseAll() {
  accordions.forEach((accordion) => {
    accordion.classList.remove("active");
  });
}

function expandAll() {
  accordions.forEach((accordion) => {
    accordion.classList.add("active");
  });
}

lets understand whats happening here.
we are grabbing all the accordions with the class accordion and placing them in accordions
next we are grabbing the two buttons we just created and placing them in collapseBtn and expandBtn;
Then we are adding a click even for each of this buttons. which then will run different functions.

When we click on collapseBtn it will run function collapseAll, which will collapse all the accordions with className accordion we achieve this by classList.remove() method.

when we click on expandBtn it wil run function expandAll, which will expand all the accordions with className accordion we achieve this by classList.add() method.

The link to the codepen is below, which has the full code. if you have any doubts or any questions please feel free to post them in the discussion below.
If you liked this post please like and follow me for more cool stuffs like this.

Link: https://codepen.io/shameerchagani/full/vYpZZqL

Cheers!!

Click on Image to Expand

Shameer Chagani — Tue, 29 Mar 2022 10:45:57 +0000

Hello Guys,

How are you all doing today?
Am back again with yet another cool project using HTML CSS and JavaScript.
It is a very simple project where we have 5 images in a row, and when you click on any image it will expand and other images squeeze to small size.
Inspired from how to make image gallery using captions by easytutorials on youtube. This is a minified version of it.
Here is a codepen link to the project. Please like it and comment if you fell it was worth your time.

https://codepen.io/shameerchagani/full/PoEjmWx

Let me know in the comment section, if you would be interested to see more cool stuff like this.

BlurImageLoading...

Shameer Chagani — Mon, 28 Mar 2022 14:24:43 +0000

Hey guys,

I have created this cool project using HTML, CSS and JavaScript.
Shows percentage loading...
and as the percentage gets closer to 100% the image starts showing up. If you want to know how i've create it comment below for the codepen Link..