DEV Community: Mbianou Bradon

What actually happens when you type google.com in your browser and press Enter

Mbianou Bradon — Mon, 16 Oct 2023 05:00:00 +0000

In today's world, you can literally get all what you need on the internet. All you have to do, is just "Google it", and instantly you have thousands of possible results that fits your search. Everyday, thousands of searches are done on the internet and many, not to say thousands of results are found, thanks to it's wide range of resources. Surprisingly, this happens in a fraction of a second, milliseconds to be specific.

I got curious, and asked myself, "What actually happens, when I type a or search for a something in a browser", and my findings were quite amazing, as I was fascinated about the different requests and interactions that happens in less than a fraction of a second.

Within the following few lines, I will be sharing with you my findings, and try as much as possible to be clear and break everything down for you. So sit down, tie your seat belt, and relax as we embark on a journey into the intricate world of internet technologies, where a simple web search transforms into a captivating dance of protocols, servers, and data.

Work flow

What really happens when we type a word on a browser and press Enter is a long, I mean it, very long sequence of events, and trying to explain it won't really fit in one blog post 😅. So we are going to focus mainly on key sectors so that we can have a clear general overview of the magic of the internet.
So I will be dividing this blog post into key points; we will talk about the following points

DNS request
TCP/IP
Firewall
HTTPS/SSL
Load-balancer
Web server
Application server
Database

For this blog post, we will focus on "when you type google.com in a browser and press Enter", I believe it's literally the same for all the other searches, So let's get started 😎

1. DNS Request: Finding the Address

The journey begins with a DNS (Domain Name System) request. Think of DNS as the internet's phonebook, translating human-friendly domain names like "google.com" into machine-friendly IP addresses. Your browser, acting as a diligent messenger, sends a DNS query to a DNS server, asking for the IP address associated with "google.com". Google IP address, For IPv4: 8.8.8.8 and/or 8.8.4.4 . For IPv6: 2001:4860:4860::8888 and/or 2001:4860:4860::8844, which is quite difficult to remember, so the DNS is very helpful. 💪

2. TCP/IP: Establishing the Connection

Armed with the IP address, your browser initiates a conversation with the Google server using TCP/IP (Transmission Control Protocol/Internet Protocol). TCP/IP is the internet's lingua franca, governing how data packets are exchanged between computers. It ensures that your request reaches the intended destination and that the server's response finds its way back to you.

3. Firewall: Guarding the Gates

Before reaching the Google server, your request encounters a firewall, a vigilant gatekeeper protecting the server from unwanted intrusions. The firewall scrutinizes your request, ensuring it adheres to security protocols and poses no threat. If the firewall deems your request safe, it grants passage, allowing it to proceed towards the web server. However, if the firewall detects any suspicious activity, it promptly blocks the request, preventing it from reaching the server and potentially compromising its security.

Firewalls play a critical role in maintaining the integrity and security of servers, ensuring that only legitimate requests are granted access. They act as the first line of defense against cyberattacks, protecting sensitive data and preventing unauthorized intrusions.

4. HTTPS/SSL: Securing the Communication

As your request enters the realm of the Google server, it enters a secure HTTPS (Hypertext Transfer Protocol Secure) connection. HTTPS, the secure version of HTTP, employs SSL (Secure Sockets Layer) to encrypt the communication, safeguarding your sensitive data from prying eyes.

The encryption process involves a complex exchange of digital keys between your browser and the server. These keys act as unique locks and keys, ensuring that only the intended recipient can unlock and understand the encrypted data.

HTTPS/SSL also provides data integrity, ensuring that the data you receive from the server hasn't been tampered with during transmission. Any attempt to alter the data would result in a mismatch between the encryption keys, alerting both parties to the potential breach. 🤓

5. Load Balancer: Distributing the Load

Imagine a bustling city, with vehicles streaming in and out, each seeking a destination. In the realm of the internet, load balancers play the role of traffic controllers, ensuring that the constant influx of requests doesn't overwhelm the servers and cause digital gridlock.

Google, being a popular destination on the internet, receives a constant stream of requests from users worldwide. To handle this immense traffic efficiently, it employs load balancers, the unsung heroes of internet infrastructure.

Load balancers act as intermediaries between users and servers, intelligently distributing incoming requests across multiple servers. They assess the workload of each server, ensuring that no single server becomes overloaded while others remain idle.

This load distribution strategy ensures optimal performance and responsiveness for users. By spreading the load evenly, load balancers prevent bottlenecks and delays, ensuring that users receive a seamless experience, even during peak traffic periods.

It's clearly visible that Load Balancer plays a very important role

6. Web Server: Fetching the Content

In a world teeming with information, libraries serve as repositories of knowledge, carefully organizing and preserving literary treasures. In the digital realm, web servers play a similar role, acting as the custodians of website content, ready to serve it to eager visitors.

When your request to access Google's website reaches a web server, it's like stepping into a vast digital library. The web server, upon receiving your request, diligently retrieves the requested web page, which may include HTML, CSS, JavaScript, and images.

The web server acts as a meticulous curator, carefully assembling the various components of the web page. It retrieves the HTML code, which provides the structure and content of the page, and the CSS code, which defines the page's visual style and layout.

In addition, the web server fetches any JavaScript files, which add interactivity and dynamic behavior to the page, and any images or media files that enrich the visual experience. It carefully packages all these elements into a cohesive whole, ready to be delivered to your browser.

7. Application Server: Processing the Data

In the intricate world of web applications, where dynamic content and complex interactions reign supreme, application servers stand as the masterminds behind the scenes. They act as the bridge between data and presentation, orchestrating the processing and delivery of dynamic content to web pages.

When you perform a search on Google, the web server may enlist the help of an application server to generate the personalized results you see. The application server, adept in data manipulation, retrieves relevant information from databases and processes it to create the dynamic content.

The application server acts as a skilled chef, carefully combining ingredients to create a delectable dish. It gathers data from various sources, such as user profiles, search history, and real-time information, and processes it according to complex algorithms and business logic.

The result of this data alchemy is the dynamic content that appears on your screen - personalized search results, tailored recommendations, or interactive elements that respond to your actions. The application server, working behind the scenes, brings these dynamic elements to life.

8. Database: The Data Storehouse

In a world awash with data, databases stand as the custodians of information, meticulously organizing and preserving the digital treasures that fuel our modern world. When you search for information on Google, databases play a crucial role in retrieving and delivering the relevant results.

Databases, the repositories of structured data, store vast amounts of information, ranging from user profiles to product catalogs to historical records. They provide a systematic way to store, organize, and retrieve data, ensuring that information is readily available when needed.

When the application server needs specific data to generate dynamic content, it queries the database, sending a request for the relevant information. The database, acting as a diligent archivist, searches its vast collection and retrieves the requested data.

Databases employ various techniques to optimize data retrieval, ensuring that requests are fulfilled efficiently. They use indexing strategies to quickly locate specific pieces of information, and they employ query optimization techniques to minimize the time it takes to extract the desired data.

The retrieved data, often in the form of tables or records, is then sent back to the application server, where it is further processed and transformed into the dynamic content that appears on your screen.

Additional steps

9. The Response: Delivering the Web Page

Once the web page is assembled, the web server sends it back to your browser, carefully packaged into TCP/IP packets. These packets travel back through the internet, following the same path they took to reach the server.

10. Your Browser: Rendering the Page

Your browser, eagerly awaiting the response, receives the packets and reassembles them into the web page. It then diligently interprets the HTML, CSS, and JavaScript, rendering the web page in all its glory on your screen.
And we are back to the browser, all this happens with a fraction of a second. Internet and technology is indeed magical 😏

Conclusion

As you navigate the internet, seamlessly accessing websites and retrieving information, remember the intricate dance of technologies that unfolds behind the scenes. From DNS requests to database queries, each step plays a crucial role in delivering the seamless online experience we often take for granted.

The next time you type a URL and press Enter, appreciate the hidden symphony that brings the internet to life. It's a testament to the ingenuity of human innovation, where a simple web search represents a complex interplay of protocols, servers, and data, all working in harmony to connect us to a world of information.

Hope you enjoyed the journey 😄.
Until next time, bye bye 👋.

How to build a Sign Up with Third-Parties Component Using TailwindCSS

Mbianou Bradon — Fri, 31 Mar 2023 21:50:14 +0000

Being part of the digital era, most of our physical businesses or services are now available online. In fact, we usually enjoy some services that are only available online.

To benefit from this service, we are generally required to Sign Up for it. Which is in most cases, creating an account on the site.

By definition, A sign-up form, is a web page, popup, or modal where users enter the information required to access that website’s services.

Some companies have grown and evolved to a point where they are very renounced and known by most if not all. These companies can be used as third-party services to register on other platforms, Such company includes; Google, Facebook, Twitter, GitHub etc.

In this section, we are going to build a Sign In UI component, that can be used for third-party Authentication.

Understanding the Task

We are required to build a Signup component using third parties, we will be using Google, Facebook and Twitter for this example.

It is important to note that this is just UIs, so no underline logic

Structure of Code

Here is how our code looks like

<body class="bg-[#dfeeff] flex items-center justify-center min-h-screen">
<!-- First Layer -->
    <div class="w-full sm:max-w-md bg-white text-center px-10 pt-5 pb-10 relative rounded-xl [&_*]:transition-all [&_*]:ease-linear [&_*]:duration-200">
<!-- Second Layer -->
        <div>
                    <!-- Cross Icon -->
            <div class="text-4xl text-slate-400 top-5 right-5 absolute cursor-pointer"><iconify-icon icon="radix-icons:cross-2"></iconify-icon></div>
                    <!-- Header -->
            <div class="mt-5 mb-8">
                <h2 class="text-3xl font-bold mb-2">Sign Up</h2>
                <p class="text-sm w-[70%] mx-auto">Create an account to unlock all the beneftisto easily,
                     like or submit your favorite content
                </p>
            </div>
                    <!-- Third Parties -->
            <div class="[&>*]:flex [&>*]:items-center [&>*]:w-fit [&>*]:rounded-md [&>*]:border [&>*]:pl-4 [&>*]:pr-20 [&>*]:py-2 [&>*]:mx-auto [&>*]:my-2 [&>*]:text-sm [&>*:hover]:bg-[#dfeeff] [&>*]:cursor-pointer">
                <div>
                    <div class="text-2xl mr-2">
                        <iconify-icon icon="flat-color-icons:google"></iconify-icon>
                    </div>
                    <div>Sign up with Google</div>
                </div>

                <div>
                    <div class="text-xl text-blue-900 mr-2">
                        <iconify-icon icon="fa-brands:facebook-f"></iconify-icon>
                    </div>
                    <div>Sign up with Facebook</div>
                </div>

                <div>
                    <div class="text-xl mr-2">
                        <iconify-icon icon="logos:twitter"></iconify-icon>
                    </div>
                    <div>Sign up with Twitter</div>
                </div>
            </div>

            <div class="flex items-center gap-1 my-10">
                <input type="checkbox" >
                <p class="text-sm">I'm not interested in update about products and services</p>
            </div>
                    <!-- Sign Buttons -->
            <div class="text-blue-400 border border-transparent px-4 py-2 w-fit mx-auto rounded-md cursor-pointer hover:bg-blue-400 hover:text-white"><h2>Sign In</h2></div>
        </div>
    </div>

<script src="https://code.iconify.design/iconify-icon/1.0.2/iconify-icon.min.js"></script>    
</body>

Before explaining the whole code, it is worth saying that you can get all the icons used in this tutorial are from iconify

Header

To the header, we gave font-size of text-3xl for the upper header, and font-size of text-sm and a width of w-[70%] for the lower header. To the container holding everything we gave it a margin-block-start of mt-5 and a margin-block-end of mb-8

Third Parties

We grouped all the different signup third parties in the same container and applied to each of them the same stylings. This was possible through the TailwindCSS properties [&>*].

If you are used to my posts, by now you surely know the meaning of [&>*] in tailwindcss.

But if you are new, The property [&>*] simply means “select each child individually”, this allows us to apply the same styling properties to all the immediate children.

To each child, we gave them a display of flex and align-items of items-center. We also gave it a width of w-fit, border-radius of rounded-md, padding-inline-start of pl-4, padding-inline-end of pr-20, padding-block of py-2. Lastly, we gave it a margin-block of my-2 and a hover effect which changes the background-color [&>*:hover]:bg-[#dfeeff]

To all the icons, we gave a font-size of text-2xl

Sign Up Button

                    <!-- Sign Buttons -->
<div class="text-blue-400 border border-transparent px-4 py-2 w-fit mx-auto rounded-md cursor-pointer hover:bg-blue-400 hover:text-white">                       
        <h2>Sign In</h2>
</div>

For this SignUp Button, We gave it a text color of text-blue-400, a border-width that is initially transparent. We gave it a padding-inline of px-4, padding-block of py-2, border-radius of rounded-md and background-color changes on hover to hover:bg-blue-500

And that's principally it for the whole tutorial.

Conclusion

We just built a simple and responsive Sign Up with Third Parties component without😃.

You can have a Live preview on Codepen or find the code on GitHub

Don’t hesitate to share with me if you were able to complete the tutorial on your end, I’d be happy to see any additions styling you added to your card.

If you have any worries or suggestions, don’t hesitate to leave them in the comment section! 😊

See ya! 👋

How to Build a Search Bar Using TailwindCSS

Mbianou Bradon — Fri, 31 Mar 2023 17:06:38 +0000

A search box, search field or search bar is a graphical control element used in computer programs, such as file managers or web browsers, and on websites. A search box is usually a single-line text box or search icon (which will transform into a search box on click activity) with the dedicated function of accepting user input to be searched for in a database. Search boxes on web pages are usually used to allow users to enter a query to be submitted to a Web search engine server-side script, where an index database is queried for entries that contain one or more of the user's keyword research.

Search boxes are commonly accompanied by a search button (sometimes indicated only by a magnifying glass symbol) to submit the search. However, the search button may be omitted as the user may press the enter key to submit the search, or the search may be sent automatically to present the user with real-time results.

We are going to build this very useful component so that you can include it in your next application, project or even your portfolio website.

Understanding the task

As earlier described, a search box or search bar is just a single line or component structure used to easily find our required document, file or item within a large collection or table. As simple as the description is, so will be our code.

Let's dive in straight away

Structure of Code

We can structure our code thus



<body>

 <div>
  <div>
        <!--
                Content Goes Here

        -->

  </div>
 </div>

</body>

Having a clear idea of what the structure of our code looks like, let's build this search bar.

Search Bar

We will be building our code using a form element so that we will be able to send our request to a server easily (It also allows us to use our keyboard to send the request by pressing ENTER)

Our code looks like this



<form class="relative flex items-centers justify-center">
                    <!-- Input Field-->
     <input type="text" id="search" placeholder="Enter your search here" class="border-0 focus:ring-0 focus:outline-0 w-[60%] bg-slate-600 rounded-l-lg pl-4 text-sm text-slate-200">
                    <!-- Submit Button -->
       <button class="ring-4 ring-slate-600 ring-offset-[0.55rem] shadow-transparent ring-offset-slate-800 hover:ring-offset-rose-500  hover:bg-rose-500 bg-transparent rounded-[50%] active:scale-95 cursor-pointer">
         <h2 class="rounded-full border-4 border-rose-500 w-16 h-16  text-rose-500 text-2xl text-center justify-center flex items-center font-semibold hover:border-slate-600 hover:text-slate-600">GO</h2>
      </button>
                    <!-- Filter -->
      <div class="absolute -bottom-8 left-[17%] text-sm flex border-0 focus:outline-0 focus:ring-0 text-rose-500 mt-1 cursor-pointer">
             <h2>filters</h2>
             <div class="text-lg">
          <iconify-icon icon="material-symbols:keyboard-arrow-down-rounded"></iconify-icon>
            </div>   
     </div>
</form>

So our search bar as a whole is made up of an input field, a submit button and optionally a filter option.

Let's focus on the main parts, which are the input field and the submit button.

To the input field, we remove all the default styling using border-0 focus:ring-0 focus:outline-0. In addition, we gave it a width of w-[60%], a background-color of bg-slate-600, a border-inline-start-radius of rounded-l-lg, and we push the input text a little bit inside with a padding-inline-start of pl-4, and we made it smaller with a font-size of text-sm and text color text-slate-200.



                    <!-- Input Field-->
     <input type="text" id="search" placeholder="Enter your search here" class="border-0 focus:ring-0 focus:outline-0 w-[60%] bg-slate-600 rounded-l-lg pl-4 text-sm text-slate-200">

To the submit button, we somehow made it in a two-layer form, the first one is the submit button itself and the inner layer is an h2 element. This is just to give that double circle effect, so it is purely decorative.



                    <!-- Submit Button -->
       <button class="ring-4 ring-slate-600 ring-offset-[0.55rem] shadow-transparent ring-offset-slate-800 hover:ring-offset-rose-500  hover:bg-rose-500 bg-transparent rounded-[50%] active:scale-95 cursor-pointer">
         <h2 class="rounded-full border-4 border-rose-500 w-16 h-16  text-rose-500 text-2xl text-center justify-center flex items-center font-semibold hover:border-slate-600 hover:text-slate-600">GO</h2>
      </button>

To the inner layer, that's the h2 tag, we gave it some nice stylings, that's a border-radius of rounded-full, a height and width of h-16 and w-16 respectively, a font-size of text-2xl, a color of text-rose-600, border-width and color of border-4 border-rose-500. We centered the text inside making this element a flexbox using flex justify-center items-center. Also, on hover, the border-color changes to border-slate-600 and the text color to text-slate-600

Now, moving outward to the button itself, we gave it a ring and ring color of ring-4 ring-slate-600, also, we gave it a ring-offset-[0.55rem]. On hover, the background-color changes from bg-transparent to bg-rose-500

We can say that's pretty much it for this two.

The form element container these two pieces were made a flexbox and were centered.

For the filter option, though optional, let's talk about its styling,



                    <!-- Filter -->
      <div class="absolute -bottom-8 left-[17%] text-sm flex border-0 focus:outline-0 focus:ring-0 text-rose-500 mt-1 cursor-pointer">
             <h2>filters</h2>
             <div class="text-lg">
          <iconify-icon icon="material-symbols:keyboard-arrow-down-rounded"></iconify-icon>
            </div>   
     </div>

It was positioned absolutely to the parent container and was placed at the position where it is using -bottom-8 and left-[17%], the icon use there is from iconify

And that's pretty much it.

The whole code looks like this



<body class="bg-slate-800 flex items-center justify-center min-h-screen [&_*]:transition-all [&_*]:ease-linear [&_*]:duration-150">
    <div class="w-full max-w-3xl">
        <div>
            <form class="relative flex items-centers justify-center">
                <input type="text" id="search" placeholder="Enter your search here" class="border-0 focus:ring-0 focus:outline-0 w-[60%] bg-slate-600 rounded-l-lg pl-4 text-sm text-slate-200">
                <button class="ring-4 ring-slate-600 ring-offset-[0.55rem] shadow-transparent ring-offset-slate-800 hover:ring-offset-rose-500  hover:bg-rose-500 bg-transparent rounded-[50%] active:scale-95 cursor-pointer">
                    <h2 class="rounded-full border-4 border-rose-500 w-16 h-16  text-rose-500 text-2xl text-center justify-center flex items-center font-semibold hover:border-slate-600 hover:text-slate-600">GO</h2>
                </button>

                <div class="absolute -bottom-8 left-[17%] text-sm flex border-0 focus:outline-0 focus:ring-0 text-rose-500 mt-1 cursor-pointer">
                    <h2>filters</h2>
                    <div class="text-lg">
                        <iconify-icon icon="material-symbols:keyboard-arrow-down-rounded"></iconify-icon>
                    </div>   
                </div>
            </form>   
        </div>
    </div>

    <script src="https://code.iconify.design/iconify-icon/1.0.3/iconify-icon.min.js"></script>
</body>

Conclusion

The wonderful thing about Building UI is that there’s not only one way to build a component.

For example in this situation, we made use of a form element, and someone else will use a different approach, don't hesitate to try a different way and share it with us

You can have a Live preview on Codepen or find the code on GitHub of what we just built.

If you have any worries or suggestions, don’t hesitate to leave them in the comment section! 😊

See ya! 👋

How to Build a Multi-Toggle Component Using TailwindCSS

Mbianou Bradon — Fri, 31 Mar 2023 13:23:23 +0000

When building a web application, toggling an element is one of the key features you are likely to come across and may need to implement in your project.

There are various ways you can toggle an element. In this section, we will be working on a multi-toggle component. That's we will be able to toggle the design of multiple elements in a structure.

Without wasting too much time, let's get started

Understanding the Task

We will be building a multi-toggle component, we can toggle or select multiple elements. For this exercise, we will be using TailwindCSS and a small piece of JavaScript. This session will be very short and straightforward.

Structure of Code

Our code root code is still the same as in all our tutorials.

<body>
<!-- First Layer -->
 <div>
<!-- Second Layer -->
  <div>
        <!--   
              Here Goes the content
          -->
  </div>
 </div>

</body>

We will be building this component as one, all the different categories will be inside a big container and general styling will be added to them from the parent container as follows

 <div>
                    <!-- Header -->
    <div class="text-center mb-5">
         <h2 class="text-2xl mb-3">Browse by Interest</h2>
         <p class="w-[80%] sm:w-[50%] text-sm mx-auto">Select some interest to help us personalize your experience on Edmondo</p>
    </div>
                    <!-- Categories -->
    <div class="grid grid-cols-2 md:grid-cols-3 gap-4 sm:gap-10 mb-10 [&>*]:px-4 [&>*]:h-14 [&>*]:flex [&>*]:items-center [&>*]:justify-center [&>*]:bg-[#16181f] [&>*]:border-2 [&>*]:border-[#171920] [&>*]:text-xs [&>*]:sm:text-sm [&>*]:text-slate-400 [&>*]:rounded-sm [&>*]:cursor-pointer [&>*:hover]:border-rose-500 [&>*:hover]:shadow-[0rem_0rem_0.3rem_0.2rem_rgba(244,63,94,0.8)] [&>*:hover]:text-slate-100">
                <div class="element">
                    <h2>Math</h2>
                </div>
                <div class="element">
                    <h2>Science</h2>
                </div>
                <div class="element border-rose-500 shadow-[0rem_0rem_0.3rem_0.2rem_rgba(244,63,94,0.8)] text-slate-100">
                    <h2>English</h2>
                </div>
                <div class="element">
                    <h2>World Languages</h2>
                </div>
                <div class="element border-rose-500 shadow-[0rem_0rem_0.3rem_0.2rem_rgba(244,63,94,0.8)] text-slate-100">
                    <h2>Health & PE</h2>
                </div>
                <div class="element">
                    <h2>Special Education</h2>
                </div>
                <div class="element">
                    <h2>Development</h2>
                </div>
                <div class="element">
                    <h2>Technology</h2>
                </div>
                <div class="element border-rose-500 shadow-[0rem_0rem_0.3rem_0.2rem_rgba(244,63,94,0.8)] text-slate-100">
                    <h2>Social Studies</h2>
                </div>
 </div>

To the header of this design, we applied some basic stylings font-size of text-2xl for the topmost header and text-sm for the lower header

The majority of the styling was applied to the different categories. To apply general styling to the different categories from the parent container, we made use of the [&>*] property of TailwindCSS.

The property [&>*] simply means “select each child individually”, this allows us to apply the same styling properties to all the immediate children.

To each of the different categories, we gave it a padding-inline of px-4 and a height of h-14. We gave each of them a display of flex and centered their content by using flex items-center justify-center. We also gave them background-color of bg-[#16181f], a border-width, border-radius and color of border-2 border-[#171920] rounded-sm respectively. Each of these categories has a hover effect of [&>*:hover]:border-rose-500 [&>*:hover]:shadow-[0rem_0rem_0.3rem_0.2rem_rgba(244,63,94,0.8)] [&>*:hover]:text-slate-100

Trust me, that's pretty much it for the Styling, and the UI of our component.

The whole code looks like this

<body class="bg-[#22242c] flex justify-center items-center min-h-screen">
                <!-- First layer -->
    <div class="bg-[#1b1d25] w-full sm:max-w-3xl py-9 px-9 text-slate-200 relative">
                <!-- Close icon -->
        <div class="absolute top-2 right-2 w-10 h-10 rounded-full text-2xl bg-[#16181f] text-slate-400 flex items-center justify-center cursor-pointer hover:text-slate-100 ">
            &times;
        </div>

        <div>
                <!-- Header -->
            <div class="text-center mb-5">
                <h2 class="text-2xl mb-3">Browse by Interest</h2>
                <p class="w-[80%] sm:w-[50%] text-sm mx-auto">Select some interest to help us personalize your experience on Edmondo</p>
            </div>
                <!-- Categories container -->
            <div class="grid grid-cols-2 md:grid-cols-3 gap-4 sm:gap-10 mb-10 [&>*]:px-4 [&>*]:h-14 [&>*]:flex [&>*]:items-center [&>*]:justify-center [&>*]:bg-[#16181f] [&>*]:border-2 [&>*]:border-[#171920] [&>*]:text-xs [&>*]:sm:text-sm [&>*]:text-slate-400 [&>*]:rounded-sm [&>*]:cursor-pointer [&>*:hover]:border-rose-500 [&>*:hover]:shadow-[0rem_0rem_0.3rem_0.2rem_rgba(244,63,94,0.8)] [&>*:hover]:text-slate-100">
                <div class="element">
                    <h2>Math</h2>
                </div>
                <div class="element">
                    <h2>Science</h2>
                </div>
                <div class="element border-rose-500 shadow-[0rem_0rem_0.3rem_0.2rem_rgba(244,63,94,0.8)] text-slate-100">
                    <h2>English</h2>
                </div>
                <div class="element">
                    <h2>World Languages</h2>
                </div>
                <div class="element border-rose-500 shadow-[0rem_0rem_0.3rem_0.2rem_rgba(244,63,94,0.8)] text-slate-100">
                    <h2>Health & PE</h2>
                </div>
                <div class="element">
                    <h2>Special Education</h2>
                </div>
                <div class="element">
                    <h2>Development</h2>
                </div>
                <div class="element">
                    <h2>Technology</h2>
                </div>
                <div class="element border-rose-500 shadow-[0rem_0rem_0.3rem_0.2rem_rgba(244,63,94,0.8)] text-slate-100">
                    <h2>Social Studies</h2>
                </div>
            </div>

                <!-- Navigation Buttons -->
            <div class="flex gap-5 justify-center [&>*]:px-6 [&>*]:py-2 [&>*]:border [&>*]:rounded-lg [&>*]:cursor-pointer">
                <div class="border-slate-900 hover:bg-slate-800 hover:text-white">
                    <h2>Skip</h2>
                </div>

                <div class="border-rose-500 bg-rose-500 text-white hover:text-rose-500 hover:bg-transparent">
                    <h2>Save</h2>
                </div>
            </div>
        </div>
    </div>

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

It is worth mentioning that we gave every category a custom class = "element", this is the class we will use to add the toggling effect to the different categories.

JavaScript

The JavaScript here is mainly to add a toggling effect to the different categories when clicked.

const elem = document.querySelectorAll(".element");

console.log(elem);

elem.forEach(item => {
    item.addEventListener("click", ()=> {
        item.classList.toggle("shadow-[0rem_0rem_0.3rem_0.2rem_rgba(244,63,94,0.8)]");

    })

})

We started by selecting all the node elements having the class="element" using the document.querySelectorAll(".element") method and store them in the constant elem.

elem is now a nodeArray having all the different categories.

Using the forEach method in this array, to each of these categories, we applied an on-click event to it, such that when clicked, the shadow-[0rem_0rem_0.3rem_0.2rem_rgba(244,63,94,0.8)] is toggled.

And that's pretty much it for this tutorial session.

Conclusion

We just built a Help Center Component 🤩. And I bet you realized it was very easy than we thought in the beginning 😏.

You can have a Live preview on Codepen or find the code on GitHub

Don’t hesitate to share with me if you were able to complete the tutorial on your end, I’d be happy to see any additional component and styling you added to your work

If you have any worries or suggestions, don’t hesitate to bring them up! 😊

See ya! 👋

How to Make a Help Center Component Using TailwindCSS

Mbianou Bradon — Fri, 31 Mar 2023 10:30:00 +0000

A Help Center is a website where customers can find answers to their questions and solutions to their problems. Designed to resolve many common queries that a brand receives, a Help Center should make it simple for customers to find the answers they’re looking for.

Good Help Centers are well organized and carefully presented, making it easy for customers to navigate the site and find what they’re searching for.

Help Centers should always be easily searchable, providing customers with an accessible version of a brand’s knowledge base that has been created with users in mind. The site will often incorporate FAQs, articles and a good variety of instructions, all of which should be of digestible length.

In this tutorial, we will be building a basic help center, that you can always use in your future project, or incorporate into your website.

Understanding the task

As earlier mentioned, a Help center is just a place where a customer can find the answer to all the questions s/he needs. S/he can do it in two possible ways, either through a search or through a predefined question.

So our Help center will have 2 parts.

Search Bar
Defined Sections

Let's build this awesome component

Structure of Code

Our main Structure looks like this

<body>
<!-- First Layer -->
 <div>
<!-- Second Layer -->
  <div>
        <!--   
              Here Goes the content
          -->
  </div>
 </div>

</body>

Let's start by Building the first part of the Help Center, that's the Search Bar and Header

Header And Search Bar

                        <!-- Header --> 
<h2 class="text-3xl font-semibold text-center">Help Center</h2>

 <div class="w-[55%] flex items-center border rounded-full p-2 mt-6 mb-12 mx-auto">
                <!-- Search Icon -->
      <div class="w-[10%] bg-red-600"></div>
      <input type="text" name="search" class="w-full h-4/5 border-0 focus:border-0 focus:outline-none focus:ring-0" placeholder="search">
</div>

Very easy section, same as its styling. For the header, we gave it a font-size of text-3xl, font-weight of font-semibold and positioned it at the center using text-center

Going to the search bar, we use an input field and a div. We gave it the possibility to add an icon. For in this one we didn't include one

To the container holding the input field and icon, we gave it a width of w-[55%] the parent container, made it a flexbox with a border-radius of rounded-full

To the input field, we removed all predefined styles using border-0 focus:border-0 focus:outline-none focus:ring-0

And that is pretty much it for the first part

Defined Sections

These defined sections are usually links to already answered questions grouped into specific categories.

Here is how the code looks like

<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-0.5 bg-slate-200 [&>*]:h-24 [&>*]:px-3 [&>*]:bg-white [&>*]:flex [&>*]:items-center [&>*]:justify-center [&>*]:cursor-pointer [&>*:hover]:scale-105 [&>*:hover]:shadow-sm [&>*:hover]:shadow-slate-800/80">
                <div><h2>Biling and Membership</h2></div>
                <div><h2>Managing and Organizing</h2></div>
                <div><h2>Uploading</h2></div>
                <div><h2>Uploading</h2></div>
                <div><h2>Video Enterprise</h2></div>
                <div><h2>Creators</h2></div>
                <div><h2>Enterprise</h2></div>
                <div><h2>Features</h2></div>
                <div><h2>Sales</h2></div>
                <div><h2>Embeding and Sharing</h2></div>
                <div><h2>FAQs</h2></div>
                <div><h2>Developers</h2></div>
</div>

Having a clear idea of the structure of our code, we gave general stylings to the different categories directly from their parent container.

To give this general style, we made use of the [&>*] property from TailwindCSS.

The property [&>*] simply means “select each child individually”, this allows us to apply the same styling properties to all the immediate children.

To each of the children, we gave the height of h-24, padding-inline of px-3. Also, we made each of them a flex container and centered their content using flex items-center justify-center . Hover effects were also added, on hover, the child scales and a shadow is added [&>*:hover]:scale-105 [&>*:hover]:shadow-sm [&>*:hover]:shadow-slate-800/80

For the main container holding this different category, we made it a grid container with 1 column on mobile screens, 2 columns on small screens and 3 columns from medium screens and above grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-0.5

And that's pretty much it for this tutorial

Conclusion

We just built a Help Center Component 🤩. And I bet you realized it was very easy than we thought in the beginning 😏. We did all of this without any stress and without leaving our HTML file.

You can have a Live preview on Codepen or find the code on GitHub

Don’t hesitate to share with me if you were able to complete the tutorial on your end, I’d be happy to see any additional component and styling you added to your work

If you have any worries or suggestions, don’t hesitate to bring them up! 😊

See ya! 👋

How to Build a Responsive One Fold Accordion Using Purely TailwindCSS

Mbianou Bradon — Fri, 31 Mar 2023 08:00:00 +0000

In web design, an accordion is a type of menu that displays a list of headers stacked on top of one another. When clicked on (or triggered by a keyboard interaction or screen reader), these headers will either reveal or hide associated content.

This design pattern is ideal for breaking down long-form or complex content into digestible chunks. It’s also ideal for mobile sites since it reduces how much a user has to scroll. This kind of component is commonly used on a FAQ page of a website.

This gives people control over what to read, and when, which can enhance their user experience.

In this Section, we will be building one of these amazing One Fold Accordion components purely using TailwindCSS.

Understanding the Task

You might be wondering, what's a one-fold accordion? This is simply one where you can read the content of one accordion at a time.

When you open(Unfold) one, the other folds itself automatically. And we will be building this using TailwindCSS only.

As with every other accordion, it consists of 3 parts.

Header
Icon
Content

Let's get to see how this is built.

Structure of Code

Since the accordion consists of multiple identical folds, we will focus on one, then simply coping and paste, and change the content for the others.

Here is how our code will be structured,

<body>
<!-- First Layer-->
    <div>
<!-- Second Layer-->
        <div>
                    <!-- Main Header -->
                        <div></div>
                    <!-- Accordion Container -->
                    <div>
                    <!-- FOld one -->
                        <div></div>

                    <!-- Fold two -->
                        <div></div>

                    <!-- Fold three -->
                        <div></div>
                    <div>
        </div>

    </div>
</body>

As earlier mentioned, we will focus one fold, then modify it accordingly to suit the others

Code of one Fold

<!-- Fold One-->
<div class="my-[0.8rem] overflow-hidden border-l-[0.4rem] border-orange-400 bg-orange-200/20 shadow-md rounded">
    <input type="radio" name="faq" id="faq_1" class="sr-only peer">
    <label for="faq_1" class="peer-checked:[&>section]:font-semibold peer-checked:[&>section]:bg-orange-400 peer-checked:[&>section]:text-white peer-checked:[&>section>div>h2]:rotate-45 peer-checked:[&>div]:max-h-screen peer-checked:[&>div]:p-[1rem]">
                        <!-- Header-->
        <section class="p-[0.7em] cursor-pointer flex items-center bg-transparent gap-3">
                        <!-- Icon -->
         <div class="text-4xl flex items-center justify-center">
         <h2 class="block rotate-0 transition-all duration-200">&plus;</h2>
         </div>
       <h2 class="w-[80%] text-xs">Facts and Knowledge about COVID-19</h2>

       </section>
                        <!-- Accordion Content -->
      <div class="max-h-0 mx-7 p-[0.001rem] [&>p]:mb-3 transition-all duration-[1s] text-[0.8rem]">
         <p>Social distance, quarantine and insolation</p>
         <p>Hand hygiene, cough etiquete, cleaning and laundry</p>
         <p>When children have acute respiratory tract infections</p>
         <p>Risk groups and their relatives</p>
      </div>
   </label>
 </div>

Let’s understand the code we just wrote. we will discuss the different parts first, then we will talk about how we made this functional.

Header

Principally our header just contains a text whose width is w-[80%], that’s 80% of the parent container. It is important to emphasize that its parent container is a flex container containing both the header and the icons.

 <h2 class="w-[80%] text-xs">Facts and Knowledge about COVID-19</h2>

Icons

Here, to avoid imports or adding SVG files, we just used ASCII values to add “+” and rotate it depending on the state of the accordion, and it just serves the purpose of our task.

                        <!-- Icon -->
<div class="text-4xl flex items-center justify-center">
   <h2 class="block rotate-0 transition-all duration-200">&plus;</h2>
</div>

Both the header and the icon are found in the same container (Same section). So from our code, we grouped them together.

                        <!-- Header-->
<section class="p-[0.7em] cursor-pointer flex items-center bg-transparent gap-3">
                        <!-- Icon -->
   <div class="text-4xl flex items-center justify-center">
    <h2 class="block rotate-0 transition-all duration-200">&plus;</h2>
   </div>

   <h2 class="w-[80%] text-xs">Facts and Knowledge about COVID-19</h2>

</section>

We didn't apply much styling here, just gave the container a padding of p-[0.7rem], background-color of bg-transparent, and since it is a flex container, we gave it's content a gap of gap-3

Accordion Content

                        <!-- Accordion Content -->
<div class="max-h-0 mx-7 p-[0.001rem] [&>p]:mb-3 transition-all duration-[1s] text-[0.8rem]">
       <p>Social distance, quarantine and insolation</p>
       <p>Hand hygiene, cough etiquete, cleaning and laundry</p>
       <p>When children have acute respiratory tract infections</p>
       <p>Risk groups and their relatives</p>
</div>

We didn't do much styling here, we gave it a max-height of max-h-0, padding of p-[0.001rem] and a margin-inline of mx-7

Please note this max-h-0 and p-[0.001rem] carefully as we will need this particular property soon

This is basically the structure of an accordion.

Now! How do we make it functional?

We achieve this with the help of two things, an input checkbox and a label.

We grab all of our accordions into the labels, and we use the state of the radio input to alter the characteristics of other properties.

<input type="radio" name="faq" id="faq_1" class="sr-only peer">
<label for="faq_1" class="peer-checked:[&>section]:font-semibold peer-checked:[&>section]:bg-orange-400 peer-checked:[&>section]:text-white peer-checked:[&>section>div>h2]:rotate-45 peer-checked:[&>div]:max-h-screen peer-checked:[&>div]:p-[1rem]">

For the first accordion, we gave it a name=”faq_1" and id=”faq_1". it is important to also give the properties sr-only and peer to the input field.

Peer class adds functionality to a website in HTML. It’s almost like JS where things work using an input radio. It depends on what the value of the input is set to.

While Screen-reader-only elements (sr-only) hide an element visually without hiding it from screen readers:

I believe these two classes make a lot more sense now.

We made use of peer-checked to alter different properties within the label component. For example, peer-checked:[&>section]:text-white peer-checked:[&>section]:bg-orange-500, simply means, if the radio button is checked, change the text color of the section part to text-white, and also background-color to bg-orange-500

Similarly, we also use peer-checked:[&>section>div>h2]:rotate-45, saying that, if the radio button is checked, rotate our "+" icon 45deg, giving us that "x" when the accordion is unfolded.

Do you remember our max-h-0? We made use of the same logic above to change its value, peer-checked:[&>div]:max-h-screen , On checked, change max-h-0 to max-h-screen

The same idea goes for all the others.

It is worth noting that, you can not change properties that weren’t initially defined. For example, You can challenge the background-color of the section part if the section part didn’t have bg-white.

If max-h-0 was not defined or was named something else like min-h-0 or just h-0, the peer-checked won't work.

And that’s basically how you can build an accordion using TailwindCSS.

Of Course, this was just one of the 3 accordions, this is how the whole code looks like,

<div>
   <div class="my-[0.8rem] overflow-hidden border-l-[0.4rem] border-orange-400 bg-orange-200/20 shadow-md rounded">
     <input type="radio" name="faq" id="faq_1" class="sr-only peer">
     <label for="faq_1" class="peer-checked:[&>section]:font-semibold peer-checked:[&>section]:bg-orange-400 peer-checked:[&>section]:text-white peer-checked:[&>section>div>h2]:rotate-45 peer-checked:[&>div]:max-h-screen peer-checked:[&>div]:p-[1rem]">
       <section class="p-[0.7em] cursor-pointer flex items-center bg-transparent gap-3">
         <div class="text-4xl flex items-center justify-center">
        <h2 class="block rotate-0 transition-all duration-200">&plus;</h2>
         </div>
         <h2 class="w-[80%] text-xs">Facts and Knowledge about COVID-19</h2>
       </section>

       <div class="max-h-0 mx-7 p-[0.001rem] [&>p]:mb-3 transition-all duration-[1s] text-[0.8rem]">
            <p>Social distance, quarantine and insolation</p>
            <p>Hand hygiene, cough etiquete, cleaning and laundry</p>
            <p>When children have acute respiratory tract infections</p>
            <p>Risk groups and their relatives</p>
       </div>
      </label>
  </div>

  <div class="my-[0.8rem] overflow-hidden border-l-[0.4rem] border-violet-400 bg-violet-200/20 rounded shadow-md">
    <input type="radio" name="faq" id="faq_2" class="sr-only peer" checked>
    <label for="faq_2" class="peer-checked:[&>section]:font-semibold peer-checked:[&>section]:bg-violet-400 peer-checked:[&>section]:text-white peer-checked:[&>section>div>h2]:rotate-45 peer-checked:[&>div]:max-h-screen peer-checked:[&>div]:p-[1rem]">
      <section class="p-[0.7em] cursor-pointer bg-transparent flex items-center gap-3">
       <div class="text-4xl flex items-center justify-center">
       <h2 class="rotate-0 transition-all duration-200">&plus;</h2>
       </div>
       <h2 class="w-[80%] text-xs">For the public</h2>
      </section>

      <div class="max-h-0 mx-6 p-[0.001rem] [&>p]:mb-3 transition-all duration-[1s] text-[0.8rem]">
            <p>Social distance, quarantine and insolation</p>
            <p>Hand hygiene, cough etiquete, cleaning and laundry</p>
            <p>When children have acute respiratory tract infections</p>
            <p>Risk groups and their relatives</p>
        </div>
      </label>
  </div>

   <div class="my-[0.8rem] overflow-hidden border-l-[0.4rem] border-rose-400 bg-rose-300/20 shadow-md rounded">
      <input type="radio" name="faq" id="faq_3" class="sr-only peer">
      <label for="faq_3" class="peer-checked:[&>section]:font-semibold peer-checked:[&>section]:bg-rose-400 peer-checked:[&>section]:text-white peer-checked:[&>section>div>h2]:rotate-45 peer-checked:[&>div]:max-h-screen peer-checked:[&>div]:p-[1rem]">
       <section class="p-[0.7em] cursor-pointer flex items-center gap-3">
       <div class="text-4xl flex items-center justify-center">
       <h2 class="block rotate-0 transition-all duration-200">&plus;</h2>
       </div>
       <h2 class="w-[80%] text-xs">Facts and Knowledge about COVID-19</h2>
       </section>

       <div class="max-h-0 mx-7 p-[0.001rem] [&>p]:mb-3 transition-all duration-[1s] text-[0.8rem]">
           <p>Social distance, quarantine and insolation</p>
           <p>Hand hygiene, cough etiquete, cleaning and laundry</p>
           <p>When children have acute respiratory tract infections</p>
           <p>Risk groups and their relatives</p>
        </div>
     </label>
    </div>
</div>

We obviously added some styling to the different layers of the different and to the body in order to achieve the end product as thus,

<body class="bg-slate-50 flex items-center justify-center min-h-screen">
<!-- First Layer -->
    <div class="w-[22rem] p-5 bg-white rounded-md shadow-md">
<!-- Second Layer -->
        <div>
                    <!-- Main Header -->
            <div class="font-bold">
                <h2>Coronavirus - Facts, advice and measures</h2>
            </div>

                <!-- Accordion Container -->
                    <div></div>
        </div>
       </div>
</body>

And that’s pretty much all about it.

Conclusion

We just built a fully functional One Fold Accordion Component and in the process, we also had more insight about Tailwindcss.

Many employers will need such components to be added to their websites, and for sure you know how simple it is to create it straight from your HTML document.

You can have a Live preview on Codepen or find the code on GitHub

Don’t hesitate to share with me if you were able to complete the tutorial on your end, I’d be happy to see any additional components.

If you have any worries or suggestions, don’t hesitate to bring them up! 😊

See ya! 👋

How to Create a Blog Widget Components Using TailwindCSS

Mbianou Bradon — Wed, 29 Mar 2023 16:30:00 +0000

The term widget refers to any tool or content that you add, arrange or remove from the sidebar(s) of your blog — these are the blocks that make up your sidebar. It is very common in most blogs and other types of websites like E-learning platforms and e-commerce websites.

In this tutorial, we will be building different blog widgets like Tags, Recent Post and Search bar.

Without wasting too much time, let's get started.

Understanding the Task

In this session, we will be building three different commonly use blog widgets.

Tags
Recent Posts
Search

So we will be building each of these components separately using HTML and TailwindCSS.

Structure of Code

The structure of the code will be quite straightforward, let's go straight to the code

1. Tags

<div class="md:row-start-1 tags w-full max-w-2xl h-fit place-self-end">
     <div class="text-3xl font-bold mb-3"><h2>Tags</h2></div>
     <ul class="flex gap-3 flex-wrap [&>*]:bg-white [&>*]:px-3 [&>*]:py-2 [&>*]:rounded-full [&>*:hover]:bg-slate-900 [&>*:hover]:text-white [&>*>a]:flex [&>*>a]:items-center [&>*>a]:gap-2">
         <li><a href="">
             <h2>Blender</h2>
             <iconify-icon icon="system-uicons:cross"></iconify-icon>
             </a></li>

          <li><a href="">
              <h2>Browser</h2>
              <iconify-icon icon="system-uicons:cross"></iconify-icon>
              </a></li>

          <li><a href="">
              <h2>Cross-platform</h2>
              <iconify-icon icon="system-uicons:cross"></iconify-icon>    
             </a></li>

          <li><a href="">
              <h2>HoloLens</h2>
              <iconify-icon icon="system-uicons:cross"></iconify-icon>
              </a></li>

           <li><a href="">
              <h2>Microsoft</h2>
              <iconify-icon icon="system-uicons:cross"></iconify-icon>    
              </a></li>

           <li><a href="">
              <h2>Mixed Reality</h2>
              <iconify-icon icon="system-uicons:cross"></iconify-icon>
              </a></li>

           <li><a href="">
               <h2>Modeling</h2>
              <iconify-icon icon="system-uicons:cross"></iconify-icon>
              </a></li>

           <li><a href="">
               <h2>MR</h2>
              <iconify-icon icon="system-uicons:cross"></iconify-icon>
                </a></li>

           <li><a href="">
                <h2>nodejs</h2>
              <iconify-icon icon="system-uicons:cross"></iconify-icon>
                </a></li>

           <li><a href="">
               <h2>streamsocket</h2>
              <iconify-icon icon="system-uicons:cross"></iconify-icon>
                </a></li>

           <li><a href="">
                <h2>unity</h2>
              <iconify-icon icon="system-uicons:cross"></iconify-icon>    
                </a></li>

           <li><a href="">
               <h2>unity3D</h2>
              <iconify-icon icon="system-uicons:cross"></iconify-icon>
                </a></li>

           <li><a href="">
               <h2>unreal engine</h2>
              <iconify-icon icon="system-uicons:cross"></iconify-icon>
                </a></li>

           <li><a href="">
               <h2>VR</h2>
              <iconify-icon icon="system-uicons:cross"></iconify-icon>
                </a></li>

           <li><a href="">
               <h2>websockets</h2>
              <iconify-icon icon="system-uicons:cross"></iconify-icon>
              </a></li>
            </ul>
        </div>

For the tags component, we made it in the form of an ordered list, in which the different list items are the different tags.

We applied general styling to them using the TailwindCSS property [&>*], at the level of the parent container.

The property [&>*] simply means “select each child individually”, this allows us to apply the same styling properties to all the immediate children.

To each of the list items, we gave a background-color of bg-white, a padding-inline of px-3, padding-block of py-2, also, we gave each of them a border-radius of rounded-full, we also gave them hover effects, on hover, the background-color changes to bg-slate-900 and the color of the text changes to text-white. Similarly, we targeted the a-tags within the list item and gave them a display of flex items-center gap-2

And this are the major styles given to the tags.

2.Recent Post Widget

The recent post widget is the quite easy, let's see how it looks like

<div class="md:row-start-2 recent-posts w-full max-w-xl h-fit">
    <div class="text-3xl font-bold"><h2>Recent posts</h2></div>
       <div class="[&>*:hover]:bg-white [&>*]:px-4 [&>*]:py-4 [&>*]:rounded-xl [&>*]:my-3 [&>*]:mx-3 [&>*]:cursor-pointer">
            <div>Azure Speech Studio for Mixed Reality</div>
            <div>HoloLens 2 Unreal Project Template</div>
            <div>Simplygon in Azure</div>
            <div>Blender in Azure</div>
            <div>AAD Login on HoloLens</div>
       </div>
</div>

This section styling isn't different from the one we use at the level of the Tags widget. we make use of [&>*] property.

To each post, we gave a a padding-inline of px-4, padding-block py-4, margin-block of my-3, also, we gave each of them a border-radius of rounded-xl, we also gave them hover effects, on hover, the background-color changes to bg-white

3. Search Bar

<div class=" md:row-start-2 search-bar w-full max-w-xl h-fit">
    <div class="flex items-center gap-5 flex-wrap">
        <div class="flex items-center bg-white rounded-2xl px-2">
            <div class="text-4xl mt-1">
  <iconify-icon icon="material-symbols:search-rounded"></iconify-icon>
            </div>
      <input type="text" placeholder="Search articles topics, etc" class="min-w-0 border-0 focus:border-0 focus:ring-0 focus:ring-offset-0 text-slate-900 sm:mr-20">
         </div>

      <div class="hover:bg-white hover:text-slate-900 text-sm px-4 py-3 rounded-xl border border-slate-900 bg-slate-900 text-white cursor-pointer">
           <h2>Search</h2>
       </div>
   </div>
</div>

The last blog widget component we will be working on in this session is the Sear bar components. we principally have an icon, an input field and a search button.

Styling here isn't any different from what we discuss already, you can definitely understand it.

And that's pretty it for this tutorial session.

Conclusion.

We just learned how to create Blog widgets. You have enough knowledge to make a personal widget for your Blog.

You can have a live preview on Codepen and have the source code on GitHub

Don’t hesitate to share with me if you were able to complete the tutorial on your end.

If you have any worries or suggestions, don’t hesitate to bring them up! 😊

See ya! 👋

How to build Alert Messages using TailwindCSS and JavaScript

Mbianou Bradon — Thu, 23 Mar 2023 21:14:16 +0000

Alert messaging (or alert notification) is machine-to-person communication that is important or time-sensitive. An alert may be a calendar reminder or a notification of a new message.

This tutorial will be quite fast and easy. Without taking too much time, let's jump right in and build a fully responsive alert message generator

Understanding the task

We are required to build an alert message generator, these alerts are generated when triggered.

For now, we will be restricting our messages to either "Your object was successfully created" or "Your object couldn't be created"

And to make it fun, we will make it random. That's we won't know which alert is generated at a given moment. We will leave random() to do the work.

Structure of Code

We will dive our work into 2 main parts, the UI, where the alerts are rendered, and the Logic, where the random alerts are produced.

Let's get started with the UI first. We will be building it using HTML and of course TailwindCSS.

UI (HTML and TailwindCSS)

The UI of the alert is very simple, it consists of a message, and icons (The icons are just to make it look beautiful, it is very optional)

Here is how our code looks like

<body class="bg-[#00969f] flex items-center justify-center min-h-screen [&_*]:transition-all [&_*]:ease-linear">
    <div id="root" class="flex flex-col items-center gap-10 w-full px-3 sm:px-0"> 
        <div class="w-full max-w-md bg-white shadow-[0.8rem_1rem_0.5rem_rgba(0,0,0,0.1)]">

            <div class="flex items-center justify-between px-4 py-4 gap-2">
                <div class="text-green-500 text-2xl"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10s10-4.5 10-10S17.5 2 12 2m-2 15l-5-5l1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9Z"/></svg></div>
                <h2 class="text-sm text-green-500 font-semibold">Your object was successfully created</h2>
                <div class="close"><iconify-icon class="text-2xl text-slate-300 hover:text-slate-500 hover:scale-110 rounded cursor-pointer mt-1" icon="system-uicons:cross"></iconify-icon></div>
            </div>

        </div>

        <div class="w-full max-w-md bg-white shadow-[0.8rem_1rem_0.5rem_rgba(0,0,0,0.1)]">
            <div class="flex items-center justify-between px-4 py-4 gap-2">
                <div class="text-red-500 text-2xl"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="m10.25 5.75l-4.5 4.5m0-4.5l4.5 4.5"/><circle cx="8" cy="8" r="6.25"/></g></svg></div>
                <h2 class="text-sm text-red-500 font-semibold">Your object couldn't been created</h2>
                <div class="close"><iconify-icon class="text-2xl text-slate-300 hover:text-slate-500 hover:scale-110 rounded cursor-pointer mt-1" icon="system-uicons:cross"></iconify-icon></div>
            </div>
        </div>
    </div>

<div id="newAlert" class="absolute top-[20%] bg-slate-900 hover:bg-white border border-slate-900 shadow-lg shadow-slate-800 px-4 py-2 rounded-full text-center text-white hover:text-slate-800 cursor-pointer active:scale-90"><h2>Click Me for More 😁 !</h2></div>

<div id="cool" class="absolute top-[12.4%] hidden"><p class="text-sm relative text-white bg-slate-900 px-4 py-2 rounded before:content-[''] before:w-3 before:h-3 before:bg-slate-900 before:absolute before:rotate-45 before:-bottom-1 before:left-1/2">Bradon! Your coding Buddy😎</p></div>
    <script src="https://code.iconify.design/iconify-icon/1.0.2/iconify-icon.min.js"></script>
    <script src="index.js"></script>
</body>

In this UI, we have 2 alerts, each for the different types of alerts earlier mentioned.

So explaining one automatically applies to the other.

Let's choose the Positive Message alert

                        <!-- Alert Container -->
<div class="w-full max-w-md bg-white shadow-[0.8rem_1rem_0.5rem_rgba(0,0,0,0.1)]">
                        <!-- Tick icon -->
     <div class="flex items-center justify-between px-4 py-4 gap-2">
     <div class="text-green-500 text-2xl"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10s10-4.5 10-10S17.5 2 12 2m-2 15l-5-5l1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9Z"/></svg></div>
                        <!-- Alert Message -->
    <h2 class="text-sm text-green-500 font-semibold">Your object was successfully created</h2>
                             <!-- Cross icon -->
<div class="close"><iconify-icon class="text-2xl text-slate-300 hover:text-slate-500 hover:scale-110 rounded cursor-pointer mt-1" icon="system-uicons:cross"></iconify-icon></div>
            </div>

</div>

So our alert message has 2 things, 2 icons and the alert message itself.

For the icons, you can get them at iconify

The styles applied here are, to the main alert container, we gave it a width of w-full and a max-width of max-w-md, a background-color of bg-white and a box-shadow of shadow-[0.8rem_1rem_0.5rem_rgba(0,0,0,0.1)]

For the tick icon, we just gave it a font-size of text-2xl and color of text-green-500 (For the positive alert message)

The alert message itself has a font-size of text-sm, font-weight of font-semibold

And for the cross icon, we gave it a font-size of text-2xl, a color of text-slate-300 which changes to hover:text-slate-500 on hover and also scale to scale-110 border-radius of rounded and cursor of cursor-pointer

That's quite it for the UI. Now we can work on the trigger

<div id="newAlert" class="absolute top-[20%] bg-slate-900 hover:bg-white border border-slate-900 shadow-lg shadow-slate-800 px-4 py-2 rounded-full text-center text-white hover:text-slate-800 cursor-pointer active:scale-90"><h2>Click Me for More 😁 !</h2></div>

This is the button you click to generate new alert messages.

We gave it an id="newAlet", and we position it absolutely at the top using absolute top-[20%]. We styled it by giving a background-color of bg-slate-900, which changes to bg-white on hover:bg-white with a box-shadow of shadow-slate-800 , a padding-inline of px-4, padding-block py-2 and border-radius of rounded-full

Logic (JavaScript)

This is where the new alerts are randomly generated and sent to the front through the root, (Container with id="root").

const root = document.getElementById('root')
const newAlert = document.getElementById('newAlert')
const close = document.querySelectorAll(".close")
const tooltip = document.getElementById("cool");

const moreAlert = [
    {
     color : 'green-500',
     textMessage : `Your object was successfully Created !`,
     icon : `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10s10-4.5 10-10S17.5 2 12 2m-2 15l-5-5l1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9Z"/></svg>`   
    },
    {
        color : `red-500`,
        textMessage : "Your object couldn't be Created !",
        icon : `
        <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="m10.25 5.75l-4.5 4.5m0-4.5l4.5 4.5"/><circle cx="8" cy="8" r="6.25"/></g></svg>`
    }
]

newAlert.addEventListener("click", () => {
    generateAlert();
    tooltip.classList.add("hidden")
});

function generateAlert(givenAlert) {
    const div = document.createElement("div");

    const type = givenAlert || moreAlert[Math.floor(Math.random() * moreAlert.length)];

    div.className = `w-full max-w-md bg-white shadow-[0.8rem_1rem_0.5rem_rgba(0,0,0,0.1)] opacity-100 transition`;
    console.log(type);
    div.innerHTML = `
        <div class="flex items-center justify-between px-4 py-4 gap-2">
            <div class="text-${type.color} text-2xl mt-1">${type.icon}</div>
            <h2 class="text-sm text-${type.color} font-semibold">${type.textMessage}</h2>
            <div><iconify-icon class="text-2xl text-slate-300 hover:text-slate-500 hover:scale-110 rounded cursor-pointer mt-1" icon="system-uicons:cross"></iconify-icon></div>
        </div>
    `;

    root.appendChild(div);

    setTimeout(() => {

        div.classList.remove("opacity-100");
        div.classList.add("opacity-0")

        setTimeout(() => {
            div.remove();
        }, 1000)

    }, 3000);
}

close.forEach((remove) => {
  remove.addEventListener('click', () => {
    remove.parentNode.remove();
  });
})


newAlert.addEventListener("mouseenter", ()=>{
    tooltip.classList.remove("hidden")
})


newAlert.addEventListener("mouseleave", ()=>{
    tooltip.classList.add("hidden")
})

Each alert message is an object stored in the moreAlert array. As earlier mentioned, we just have 2 main objects, a positive and a negative alert.

We started by defining our variables at the top of the file.

Each new alert is generated by the generateAlert(), this function generates a completely new HTML element and injects it into the document through the root.

It also has a setTimeout() which removes it after 3000ms (3s).

We added an event listener to newAlert, and on click, it generates a random alert message from the object array. (You can always customize your messages per your need)

And that's pretty much it for this tutorial.

Conclusion

We just built a very nice Alert Message using HTML, TailwindCSS and Javascript.

You can always customize it at your convenience, and of course share with us the different adjustments you did.

You can have a live preview on Codepen and have the source code on GitHub

Don’t hesitate to share with me if you were able to complete the tutorial on your end, I’d be happy to see any additional components and styling you added to your Countdown.

If you have any worries or suggestions, don’t hesitate to bring them up! 😊

See ya! 👋

How to Build a Fully Responsive and Functional Calculator Using TailwindCSS and JavaScript

Mbianou Bradon — Wed, 22 Mar 2023 20:06:04 +0000

A Calculator, by definition, is something used for making mathematical calculations, in particular a small electronic device with a keyboard and a visual display. This calculation ranges from basic operations like addition, subtraction, division and multiplication, to complex mathematical operations like cosine, sine functions, and logarithmic functions too.

With the evolvement of tech, we can now build calculators and use them right in our browsers.

In this tutorial, we will be building a basic calculator that we can use right in our browser.

Understanding the task

The calculator we will be building will be able to make basic operations like addition, subtraction, division and also multiplication. We will divide our work into 2 parts, Frontend (the UI of the calculator) and the Logic (Using Javascript)

Structure of Code

Our code will be divided into 2 parts. The frontend( implemented using HTML and TailwindCSS) and the Logic (Using JavaScript)

Without taking too much time, let's do this.

Frontend (HTML and TailwindCSS)

For the UI, we will simply divide it into 2 sections, the display screen, then the keyboard pad.

Here is what the code looks like,

<body class="bg-slate-400 text-[#3651c4] flex items-center justify-center min-h-screen">
   <main class="w-full max-w-md select-none px-4 md:px-0">  

    <div class="flex flex-col items-center gap-3 font-bold">
            <!-- Display Screen -->
       <div class="w-full h-28 sm:h-32 bg-white rounded-lg mt-5 md:mt-0 flex flex-col justify-evenly items-end pr-2">
          <div class="place-self-center py-1 text-xs md:text[1rem]">Bradon ! Your Coding Buddy😎</div>
             <div id="previous-operation"></div>

             <div id="current-operation"  class=" text-2xl md:text-3xl font-semibold" ></div>
         </div>
                    <!-- Keyboard pad container -->
  <div class="bg-white text-xl w-full p-1 rounded-lg">
                    <!-- Clear and DEL-->
    <div class="flex justify-around items-center my-5 [&>*]:px-4 [&>*]:py-1 [&>*]:rounded [&>*:active]:scale-95">
      <button id="clear" class="text-white bg-red-600">Clear</button>
      <button id="delete" class="border border-black text-black">DEL</button>
    </div>

    <div class="grid grid-cols-12">
                    <!-- Numeric pad -->
     <div class="number col-span-9 grid grid-cols-3 gap-2 [&>*:hover]:bg-blue-900 [&>*]:rounded [&>*:hover]:text-white [&>*:active]:scale-90">

           <button data-number>7</button>
           <button data-number>8</button>
           <button data-number>9</button>
           <button data-number>4</button>
           <button data-number>5</button>
           <button data-number>6</button>
           <button data-number>1</button>
           <button data-number>2</button>
           <button data-number>3</button>
           <button data-number>0</button>
           <button data-number>00</button>
           <button data-number>.</button>
    </div>
                    <!-- Symbols-->
    <div class="basic-operations col-span-3 grid grid-cols-2 [&>*]:py-5 [&>*]:px-2.5 [&>*]:sm:px-6 gap-2 [&>*:hover]:bg-blue-900 [&>*]:rounded [&>*:hover]:text-white [&>*:active]:scale-90">

           <button data-operation="/">÷</button>
           <button data-operation="*">x</button>
           <button data-operation="-">-</button>
           <button data-operation="+">+</button>
           <button data-bracket>(</button>
           <button data-bracket>)</button>
           <button id="equal" class="col-span-2 bg-[#3651c4] text-white">=</button>
     </div>

   </div>
  </div>

</div>

</main>

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

Display Screen

<div class="w-full h-28 sm:h-32 bg-white rounded-lg mt-5 md:mt-0 flex flex-col justify-evenly items-end pr-2">
          <div class="place-self-center py-1 text-xs md:text[1rem]">Bradon ! Your Coding Buddy😎</div>
             <div id="previous-operation"></div>

             <div id="current-operation"  class=" text-2xl md:text-3xl font-semibold" ></div>
</div>

The display screen is a container (Flex container) with the flex-direction of flex-col a width of w-full and a flexible height of h-28 on the mobile screen and sm:h-32 from small screens and above.

Within the container, we have two principal divs, and these two divs have ids, we have one div with id="previous-operation", and the other has an id="current-operation".

The container with the id="previous-operation", is responsible to display the different inputs down by the user, while the one with the id="current-operation" is responsible to display the result of the computation

Since the container with id="current-operation" is responsible for displaying results, we gave its text content a font-size of text-2xl on mobile screens, and a text-3xl from medium screens and above

That's pretty much it for the display screen.

Keyboard pad

<div class="bg-white text-xl w-full p-1 rounded-lg">
                    <!-- Clear and DEL-->
    <div class="flex justify-around items-center my-5 [&>*]:px-4 [&>*]:py-1 [&>*]:rounded [&>*:active]:scale-95">
      <button id="clear" class="text-white bg-red-600">Clear</button>
      <button id="delete" class="border border-black text-black">DEL</button>
    </div>

    <div class="grid grid-cols-12">
                    <!-- Numeric pad -->
     <div class="number col-span-9 grid grid-cols-3 gap-2 [&>*:hover]:bg-blue-900 [&>*]:rounded [&>*:hover]:text-white [&>*:active]:scale-90">

           <button data-number>7</button>
           <button data-number>8</button>
           <button data-number>9</button>
           <button data-number>4</button>
           <button data-number>5</button>
           <button data-number>6</button>
           <button data-number>1</button>
           <button data-number>2</button>
           <button data-number>3</button>
           <button data-number>0</button>
           <button data-number>00</button>
           <button data-number>.</button>
    </div>
                    <!-- Symbols-->
    <div class="basic-operations col-span-3 grid grid-cols-2 [&>*]:py-5 [&>*]:px-2.5 [&>*]:sm:px-6 gap-2 [&>*:hover]:bg-blue-900 [&>*]:rounded [&>*:hover]:text-white [&>*:active]:scale-90">

           <button data-operation="/">÷</button>
           <button data-operation="*">x</button>
           <button data-operation="-">-</button>
           <button data-operation="+">+</button>
           <button data-bracket>(</button>
           <button data-bracket>)</button>
           <button id="equal" class="col-span-2 bg-[#3651c4] text-white">=</button>
     </div>

   </div>
  </div>

Essentially, we demarcated different parts in this section, we have the Clear and DEL, Numeric pad, and lastly, we have the Symbols

Clear and DEL

<div class="flex justify-around items-center my-5 [&>*]:px-4 [&>*]:py-1 [&>*]:rounded [&>*:active]:scale-95">
      <button id="clear" class="text-white bg-red-600">Clear</button>
      <button id="delete" class="border border-black text-black">DEL</button>
</div>

It is two buttons, with ids describing their functions, that's id="clear" for Clear and id="delete" for DEL

We gave them some common styling using the [&>*] property from TailwindCSS.

If you are used to my posts, by now you surely know the meaning of [&>*] in tailwindcss.

But if you are new, The property [&>*] simply means “select each child individually”, this allows us to apply the same styling properties to all the immediate children.

For each of the buttons, we gave them a padding-inline of px-4 padding-block of py-1 a border-radius of rounded, and we also gave a clicking effect using [&>*:active]:scale-95

Numeric Pad

                    <!-- Numeric pad -->
<div class="number col-span-9 grid grid-cols-3 gap-2 [&>*:hover]:bg-blue-900 [&>*]:rounded [&>*:hover]:text-white [&>*:active]:scale-90">

           <button data-number>7</button>
           <button data-number>8</button>
           <button data-number>9</button>
           <button data-number>4</button>
           <button data-number>5</button>
           <button data-number>6</button>
           <button data-number>1</button>
           <button data-number>2</button>
           <button data-number>3</button>
           <button data-number>0</button>
           <button data-number>00</button>
           <button data-number>.</button>
</div>

we use a similar approach to the Clear and DEL section to give some styling to the numeric pad. We gave them individual background-color of bg-blue-900 a border-radius of rounded and clicking effect using active:scale-90

It is worth saying that the main container in which this numeric pad and symbol are found, was made a grid container, with 12 columns using grid grid-cols-12

And we gave 9 columns to the numeric pad (You can see col-span-9 ) and gave 3 columns to the symbol section.

Symbol

                   <!-- Symbols-->
    <div class="basic-operations col-span-3 grid grid-cols-2 [&>*]:py-5 [&>*]:px-2.5 [&>*]:sm:px-6 gap-2 [&>*:hover]:bg-blue-900 [&>*]:rounded [&>*:hover]:text-white [&>*:active]:scale-90">

           <button data-operation="/">÷</button>
           <button data-operation="*">x</button>
           <button data-operation="-">-</button>
           <button data-operation="+">+</button>
           <button data-bracket>(</button>
           <button data-bracket>)</button>
           <button id="equal" class="col-span-2 bg-[#3651c4] text-white">=</button>
     </div>

Nothing much to say here right, all the styles applied here were initially used in the other sections.

Logic (JavaScript)

To make our calculator functional on the web, we made use of the Javascript programming language.

I choose the one-class approach, Creating a class, with various methods, that perform different functions per the need.

class Computation {

    constructor (previousOperation, currentOperation){
        this.previousOperation = previousOperation;
        this.currentOperation = currentOperation;
        this.clear()
    }

  clear(){
    previousOperation.innerText = '0'
    currentOperation.innerText = '0'
}

  updateDisplay(value){

    if (previousOperation.innerText === '0')
         previousOperation.innerText = value.toString()
    else 
    previousOperation.innerText = previousOperation.innerText.toString() + value.toString()


  }

  delete(){
    previousOperation.innerText = previousOperation.innerText.slice(0, -1)

  }

  result(){
    let result = previousOperation.innerText.split('')
    let cleanResult = result.map(number => {


       if (number === 'x'){
         return '*'
       }
       if(number === '÷') return '/'
        else return number;    

    });
    result = cleanResult.join('')
    console.log(eval(result))
    currentOperation.innerText = eval(result)
  }

}

const numbers = document.querySelectorAll('[data-number]')
const operation = document.querySelectorAll('[data-operation]')
const bracket = document.querySelectorAll('[data-bracket]')
const specialOperation = document.querySelectorAll('[data-special-operation]')
const deleteButton = document.getElementById('delete')
const equal = document.getElementById('equal')
const clear = document.getElementById('clear')
const previousOperation = document.getElementById('previous-operation')
const currentOperation= document.getElementById('current-operation')


const computation = new Computation (previousOperation, currentOperation)


numbers.forEach(button => {

    button.addEventListener('click', ()=>{
        let value = button.innerText
        console.log(value);
        computation.updateDisplay(value);
    })

})

operation.forEach(button =>{

    button.addEventListener('click', ()=>{
     let  operant = button.innerText
     computation.updateDisplay(operant)
    })

})

deleteButton.addEventListener ('click', ()=> {
    computation.delete()
})

equal.addEventListener('click', ()=>{
    computation.result()
})

clear.addEventListener('click', ()=>{
  computation.clear()
})

bracket.forEach(button => {
  button.addEventListener('click', ()=>{
    let brackets = button.innerText
    computation.updateDisplay(brackets)
  })
})

Our big class is called Computation, this class has various methods, namely

clear(): To clear and reset the previous-operation and current-operation to zero
updateDisplay(): As the name implies, it is responsible for updating the content of the previous-operation and current-operation.
delete(): Helps to delete the last input at the level of previous-operation
result(): performs all the required operations, then passes its result pt updateDisplay() to update the current-operation content.

We made use of the eval() javascript function to ease our calculations.

You might want to read more about the eval() method in Javascript

After our class Computation, we did some declarations, we referenced all the different ids and attributes in the HTML to some constants in the Javascript file, then when forward to add event listeners to each button and pass the appropriate method to them for appropriate computation.

And that's pretty much it for this tutorial

Conclusion

We just built a fully responsive, beautiful and functional Basic Web calculator.

It is definitely something you can add to your portfolio or your next project that may need some calculations.

You can have a live preview on Codepen and have the source code on GitHub

Don’t hesitate to share with me if you were able to complete the tutorial on your end, I’d be happy to see any additional components and styling you added to your Countdown.

If you have any worries or suggestions, don’t hesitate to bring them up! 😊

See ya! 👋

How to Build a Big Menu Component Using TailwindCSS

Mbianou Bradon — Tue, 21 Mar 2023 22:01:33 +0000

While visiting an eCommerce or an e-Learning website, you may have seen a lot of categories in the menu bar. After hovering over a specific category, you will see a large drop-down menu with more categories. This drop-down menu with more categories is called the mega menu.

A mega menu can be defined as a "web element used to guide users to navigate a website’s lower-level sub-pages, categories, and subcategories." Most of the big websites like eCommerce, news, e-Learnings and hotels, are using the mega menu.

A mega menu improves your website's UX design and attached users for a long time. However, you can also add content blocks, sliders, images, icons, videos, etc to the modern-day mega menu.

As you might have guessed, we are going to build a Big Menu. We won't really focus on making it as a drop-down, but Just build the big Menu itself.

Let's Get Started!!!!

Understanding the Task

We are building a Big Menu component. The word Big is just to indicate it has a lot of information.

Basically, we just have a lot of information. Let’s build that up.

Structure of code

The structure of our code is very simple and straight to the point.

Let’s have a look at the code, then we have an explanation for it.

<body class="bg-slate-200 flex items-center justify-center min-h-screen">
<!-- First Layer -->
  <div class="w-full md:max-w-3xl p-8 bg-white rounded shadow-md [&_*]:transition-all [&_*]:ease-linear [&_*]:duration-200">
<!-- Second Layer -->
   <div>
<!-- Big List Component -->
      <ul class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-y-4 [&>*>div]:w-10 [&>*>div]:h-10 [&>*>div]:rounded-full [&>*>div:hover]:bg-slate-900/90 [&>*>div]:flex [&>*>div]:items-center [&>*>div]:justify-center [&>*>div]:mb-2 [&>*>div:hover]:text-slate-100 [&>*>div]:cursor-pointer [&>*>ul>h2]:text-sm [&>*>ul>h2]:font-semibold [&>*>ul>h2]:text-[1rem] [&>*>ul>h2]:mb-2 [&>*>ul>li:hover]:underline [&>*>ul>li]:cursor-pointer [&>*>ul>li]:w-fit [&>*>ul>li]:text-xs [&>*>ul>li]:mb-2">
          <li>
           <div class="text-blue-400 bg-blue-100/70"><iconify-icon icon="heroicons:newspaper-20-solid"></iconify-icon></div>
              <ul>
                   <h2>News</h2>
                   <li>Clothes</li>
                   <li>Shoes and accessories</li>
               </ul>
           </li>

           <li>
             <div class="text-purple-600 bg-purple-100/70"><iconify-icon icon="mdi:gift"></iconify-icon></div>
              <ul>
                    <h2>Gifts</h2>
                    <li>Gift Cards</li>
               </ul>
           </li>

           <li>
             <div class="text-red-400 bg-red-100/70"><iconify-icon icon="ph:squares-four-fill"></iconify-icon></div>
             <ul>
                    <h2>Shop by Product</h2>
                    <li>Dresses</li>
                    <li>Cardigan and sweaters</li>
                    <li>Shoe</li>
                    <li>Underwear</li>
                    <li>Shorts</li>
                    <li id="extra" class="hidden">T-shirts</li>
                    <li id="more" class="text-blue-500">More...</li>
             </ul>
            </li>

            <li>
              <div class="text-yellow-400 bg-yellow-100/70"><iconify-icon icon="ion:megaphone"></iconify-icon></div>
              <ul>
                   <h2>Promotion</h2>
                   <li>Party essentials</li>
                   <li>Walking into 2023</li>
              </ul>
            </li>
            </ul>
        </div>
    </div>

    <script src="https://code.iconify.design/iconify-icon/1.0.3/iconify-icon.min.js"></script>
    <script src="index.js"></script>
</body>

Let's understand this code of ours.

Before we begin, all the icons used in this component is accessible at iconify

Now, Let's dive into our code. Keeping the First and second Layer aside, let's look at the "Big List Container" first, as it contains the majority of the code.

Firstly, we made this container a grid container, with 4 columns for medium screens and above, two columns for small screens and one column for Mobile devices using styling properties grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-y-4.

Also, we use a general styling method, that's to be applied to all the different children of the Big List component. The TailwindCSS property that helps us to perform this wonderful operation is [&>*]

If you are used to my posts, by now you surely know the meaning of [&>*] in tailwindcss.

But if you are new, The property [&>*] simply means “select each child individually”, this allows us to apply the same styling properties to all the immediate children.

It is worth noting that before using this approach, you should have a clear understanding of the structure of your code.

Turns out that we decided to use a big list, so the children somehow have the same structure.

We will be using a similar approach to style each part of the list of items. For example, to style the icons of each list of items, we used [&>*>div]

Using this approach, we gave it a width and height of w-10 and h-10 respectively, gave it a border-radius of rounded-full, to center the icon within this circle, we made it flexbox using [&>*>div]:flex [&>*>div]:items-center [&>*>div]:justify-center

To this icon container, we also gave it a hover effect that changes background-color and text-color [&>*>div:hover]:bg-slate-900/90 [&>*>div:hover]:text-slate-100

Using a similar approach as above, we styled the sub-list within each list item(Remember, they all have the same structure).

The header in the sub-list was given [&>*>ul>h2]:text-sm [&>*>ul>h2]:font-semibold [&>*>ul>h2]:text-[1rem] [&>*>ul>h2]:mb-2

Now, lastly, for the List items of the sub-list items, we just gave them hover effects, small margin-block-end and cursor-pointer [&>*>ul>li:hover]:underline [&>*>ul>li]:cursor-pointer [&>*>ul>li]:w-fit [&>*>ul>li]:text-xs [&>*>ul>li]:mb-2

And that's pretty much it for the major styling. Pretty easy and straightforward right?

Talking about styling, we gave some extra styling to the First Layer, and Body tags.

For the First Layer

<div class="w-full md:max-w-3xl p-8 bg-white rounded shadow-md [&_*]:transition-all [&_*]:ease-linear [&_*]:duration-200">

We gave it a width of w-full from Mobile devices to Medium screen devices, and from medium screens, we have a max-width of max-w-3xl, a background-color of bg-white and a box-shadow of shadow-md

You might be wondering what [&_*]: actually means or what it is used for? Well! I invite you to check on it and share with us what you found in the comment section. I will be very happy to hear from you

Also, for the Body styling, we gave it some styling to center the whole design. Using

<body class="bg-slate-200 flex items-center justify-center min-h-screen">

One Last thing, you might have noticed we gave some ids to two sub-list items, that show on click. this was done with the following code

const more = document.getElementById("more")
const extra = document.getElementById("extra")

more.addEventListener("click", ()=>{
    extra.classList.toggle("hidden")
    const text = "More..."
    if(more.innerText === text){
        return more.innerText = "Less..."
    }
    if (more.innerText != text){
        return more.innerText = "More..."
    }
})

And we are done! Congratulation on coming this far!

Conclusion

The wonderful thing about Building UI is that there's not only one way to build a component.

For example, in our situation, I decided to put all the different sections into an unordered list, then later on made a sub-list inside each list item.

Someone else will have of course used a different approach to build this component, and we still result in the same visual component.

You can have a Live preview on Codepen or find the code on GitHub of what we just built.

If you have any worries or suggestions, don’t hesitate to leave them in the comment section! 😊

See ya! 👋

How to Build a Fully Responsive Big Footer Component Using TailwindCSS

Mbianou Bradon — Tue, 21 Mar 2023 13:00:00 +0000

Have you ever been unable to find what you're looking for in the main navigation of a website? Have you ever been considering a product on an e-commerce site but been unable to find the return policy? The frustration that this causes prompts some users to leave and find a site that is more transparent or intuitive.

This instance of user behavior is exactly why your site needs a well-designed website footer.

The website footer is the section of content at the very bottom of a web page. It typically contains a copyright notice, link to a privacy policy, sitemap, logo, contact information, social media icons, and an email sign-up form. In short, a footer contains information that improves a website’s overall usability.

Guess what? We are building a Big Footer Fully using TailwindCSS

Understanding the Task

We are building a big Footer component. The word Big is just to indicate it has a lot of information.

Basically, we just have a lot of information. Let's build that up.

Structure of code

The structure of our code is very simple and straight to the point.

Let's have a look at the code, then we have an explanation for it.

<body class="bg-[#3a4d7c] flex justify-center items-center min-h-screen">

<!-- First Layer -->
 <div class="bg-[#1e3161] space-y-6 text-white mx-auto rounded-xl shadow-md w-full max-w-6xl p-5 sm:px-10 [&_*]:transition [&_*]:ease-linear [&_*]:duration-200">
<!-- Second Layer -->
  <div>
    <div class="grid grid-cols-1 sm:grid-cols-2  md:grid-cols-3 [&>*>h1]:text-2xl [&>*>h1]:font-semibold [&>*>h1]:my-5 [&>*>h1]:px-4">
<!-- Navigation -->
      <div>
           <h1>About the store</h1>
           <ul class="[&>*]:mb-2  [&>*]:px-4 [&>*]:py-2 [&>*]:rounded-md [&>*]:cursor-pointer [&>*:hover]:bg-blue-400 [&>*]:w-fit">
              <li><a href="">Home</a></li>
              <li><a href="">Become a customer</a></li>
              <li><a href="">About us</a></li>
              <li><a href="">FAQ</a></li>
              <li><a href="">Return policy</a></li>
              <li><a href="">Contact us</a></li>
           </ul>
      </div>
    <!-- Languages -->
      <div>
         <h1>Language</h1>
         <ul class="flex items-center flex-wrap  [&>*]:px-4 [&>*]:py-2 [&>*]:rounded-md [&>*]:cursor-pointer [&>*:hover]:bg-blue-400 [&>*]:font-semibold [&>*:hover]:font-bold [&>*]:w-fit">
             <li>Deutsch</li>
             <li>English</li>
             <li>Espanol</li>
             <li>Francais</li>
             <li>Indonesian</li>
             <li>italian</li>
             <li>Nederlands</li>
             <li>Polnisch</li>
             <li>Portugues</li>
             <li>pyccknn</li>
             <li>Tieng viiet</li>
             <li>Tukkce</li>
         </ul>
    </div>
    <!-- Social Media -->
    <div>
       <h1>Get in touch</h1>
       <div class="flex items-center gap-8 px-4 sm:px-10 text-2xl mb-4 font-semibold [&>*]:cursor-pointer [&>*:hover]:text-blue-400">
          <div>
             <iconify-icon icon="lucide:facebook"></iconify-icon>
          </div>

          <div>
             <iconify-icon icon="lucide:twitter"></iconify-icon>
          </div>

          <div>
             <iconify-icon icon="lucide:linkedin"></iconify-icon>
          </div>
     </div>
  </div>
</div>
    <!-- Policy and Privacy -->
 <div>
    <ul class="flex items-center justify-center flex-wrap gap-4 [&>*]:cursor-pointer text-slate-500 [&>*:hover]:text-white">
        <li>Terms of purchase</li>
        <li>Security and privacy</li>
        <li>Newsletter</li>
    </ul>
  </div>
</div>
</div>

    <script src="https://code.iconify.design/iconify-icon/1.0.2/iconify-icon.min.js"></script>
</body>

Before we start, you can get the icons used in this tutorial and more from iconify

Now, let's understand this code we just wrote.

We have four parts here, Navigation, Language, Social Media and Policy & Privacy

Let's start with the Navigation

Navigation

<div>
   <h1>About the store</h1>
   <ul class="[&>*]:mb-2 [&>*]:px-4 [&>*]:py-2 [&>*]:rounded-md [&>*]:cursor-pointer [&>*:hover]:bg-blue-400 [&>*]:w-fit">
       <li><a href="">Home</a></li>
       <li><a href="">Become a customer</a></li>
       <li><a href="">About us</a></li>
       <li><a href="">FAQ</a></li>
       <li><a href="">Return policy</a></li>
       <li><a href="">Contact us</a></li>
   </ul>
</div>

This section has a heading, h1 tag,(styling to this was done at the level of the parent container, as each section has a heading).

For the navigation section, we made it using an unordered list. For the styling part, we made use of the TailwindCSS property [&>*].

Using this property, we gave each child, a padding-inline of px-4, padding-block of py-2, border-radius of rounded-md and change of background-color on hover using [&>*:hover]:bg-blue-500

Language

 <!-- Languages -->
      <div>
         <h1>Language</h1>
         <ul class="flex items-center flex-wrap  [&>*]:px-4 [&>*]:py-2 [&>*]:rounded-md [&>*]:cursor-pointer [&>*:hover]:bg-blue-400 [&>*]:font-semibold [&>*:hover]:font-bold [&>*]:w-fit">
             <li>Deutsch</li>
             <li>English</li>
             <li>Espanol</li>
             <li>Francais</li>
             <li>Indonesian</li>
             <li>italian</li>
             <li>Nederlands</li>
             <li>Polnisch</li>
             <li>Portugues</li>
             <li>pyccknn</li>
             <li>Tieng viiet</li>
             <li>Tukkce</li>
         </ul>
    </div>

Similar to the navigation section, we use the same styling approach to style this list of items. that's we gave each child, a padding-inline of px-4, padding-block of py-2, border-radius of rounded-md and change of background-color on hover using [&>*:hover]:bg-blue-500 In addition to this style, we made the container a flexbox, and we align-items center using items-center

Social Media

<!-- Social Media -->
    <div>
       <h1>Get in touch</h1>
       <div class="flex items-center gap-8 px-4 sm:px-10 text-2xl mb-4 font-semibold [&>*]:cursor-pointer [&>*:hover]:text-blue-400">
          <div>
             <iconify-icon icon="lucide:facebook"></iconify-icon>
          </div>

          <div>
             <iconify-icon icon="lucide:twitter"></iconify-icon>
          </div>

          <div>
             <iconify-icon icon="lucide:linkedin"></iconify-icon>
          </div>
     </div>
  </div>
</div>

For the icons we gave them font-size of text-2xl, in a flex container with a gap of gap-8

Policy and Privacy

Nothing new in this section, we have a flexbox container that wraps at different breakpoints.

<!-- Policy and Privacy -->
 <div>
    <ul class="flex items-center justify-center flex-wrap gap-4 [&>*]:cursor-pointer text-slate-500 [&>*:hover]:text-white">
        <li>Terms of purchase</li>
        <li>Security and privacy</li>
        <li>Newsletter</li>
    </ul>
  </div>

Extra Styling

We did give some extra styling to some layers and components.

To the container holding the Navigation, Language and Social Media, we made it a grid container with 3 columns using grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 [&>*>h1]:text-2xl [&>*>h1]:font-semibold [&>*>h1]:my-5 [&>*>h1]:px-4

The first layer also has styling, bg-[#1e3161] space-y-6 text-white mx-auto rounded-xl shadow-md w-full max-w-6xl p-5 sm:px-10 [&_*]:transition [&_*]:ease-linear [&_*]:duration-200

And we also applied some stylings to the body in order to center our components.

And that's pretty much it.

Conclusion

We just built a very simple, yet very important component, found in every website

You can have a live preview on Codepen and have the source code on GitHub

Don’t hesitate to share with me if you were able to complete the tutorial on your end, I’d be happy to see any additional components and styling you added to your Countdown.

If you have any worries or suggestions, don’t hesitate to bring them up! 😊

See ya! 👋

How to Build a CountDown Component Using TailwindCSS and JavaScript

Mbianou Bradon — Mon, 20 Mar 2023 20:30:00 +0000

A countdown timer is a virtual clock on a landing page that counts down from a certain number or date to indicate the beginning or end of an event or offer. This page element helps create urgency in generating more conversions because “time is running out.” Countdown timers can also be used to count down to when an offer becomes available at a specific date and time.

During this tutorial, we are going to build a countdown that counts down to Next year.

Understanding the task

We will be building a countdown timer, that counts down to New Year. We will build the UI using TailwindCSs, then make it functional using JavaScript.

Structure of Code

Our code will be divided into two parts, the UI section, where we will be using HTML and TailwindCSS, and The Logic section, where it is essentially JavaScript.

UI (HTML & TailwindCSS)

This section is responsible for what the users see.

Our code structure for this section is as follows.

<body class="bg-slate-700 flex items-center justify-center min-h-screen">
<!-- First Layer -->
 <div class="w-full sm:max-w-2xl bg-slate-900 text-white h-[25rem] px-4 rounded py-4">
<!-- Second Layer -->
   <div id="new" class="bg-[url('https://static01.nyt.com/images/2022/01/21/us/00xp-Lava-vid-cove-mike-ives-is-has-answers/00xp-Lava-vid-cove-mike-ives-is-has-answers-superJumbo.jpg')] rounded h-full bg-cover">

    <h2 class="text-2xl text-center font-semibold mb-10 pt-7">Until New Beginning</h2>
    <div class="flex justify-around text-center [&>*>h2]:text-xl [&>*>h2]:sm:text-4xl [&>*>h2]:font-bold [&>*>p]:text-sm [&>*>p]:font-semibold">
     <div>
         <h2 id="month">10</h2>
         <p>Month</p>
     </div>

      <div>
          <h2 id="day">30</h2>
          <p>days</p>
      </div>

      <div>
          <h2 id="hour">20</h2>
          <p>Hours</p>
      </div>

      <div>
          <h2 id="minute">59</h2>
          <p>Minutes</p>
      </div>

      <div>
          <h2 id="second">40</h2>
          <p>Seconds</p>
      </div>
   </div>
</div>
    </div>

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

Our countdown component consists of a Header, Saying "Until New Begining". I just believe a new year is a New Beginning, a new start. Of course, you can always customize it to your liking.

We gave the container holding our text a background-image bg-[url('https://static01.nyt.com/images/2022/01/21/us/00xp-Lava-vid-cove-mike-ives-is-has-answers/00xp-Lava-vid-cove-mike-ives-is-has-answers-superJumbo.jpg')] a border-radius of rounded

Within this container, we have a container holding different time lengths, that's Months, days, Hours, Minutes and Seconds.

This container holds the stylings of each of the above-mentioned time lengths. We were able to achieve this using the TailwindCSS property [&>*], I invite you to read more about it.

To give you a little idea about it, The property [&>*] simply means “select each child individually”, this allows us to apply the same styling properties to all the immediate children.

For each child, we selected the paragraph tag inside(p), and we gave it a font-size of text-sm and font-weight of font-semibold. Similarly, we selected the h2 tags and gave them a font-weight and font-size.

You can also see that we gave some stylings to the first and second layers of our design. This is just to it fix the width and height. And a for the body, the styling properties given there are to center our component.

It is also worth mentioning that we gave each of our time lengths an id, and each of the ids given is self-explanatory.

JavaScript

Our Javascript file looks like this

var countDownDate = new Date("Jan 01, 2024 00:00:00").getTime();
const monthsElement = document.getElementById('month');
const daysElement = document.getElementById('day');
const hoursElement = document.getElementById('hour');
const minutesElement = document.getElementById('minute');
const secondsElement = document.getElementById('second');


// Update the count down every 1 second
var x = setInterval(function () {

    // Get today's date and time
    let today = new Date().getTime();

    // Find the distance between now and the count down date
    let interval = countDownDate - today;

    // Time calculations for days, hours, minutes and seconds
    let months = Math.floor(interval / (1000 * 60 * 60 * 24 * 30))
    let days = 30 % Math.floor(interval / (1000 * 60 * 60 * 24));
    let hours = Math.floor((interval % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    let minutes = Math.floor((interval % (1000 * 60 * 60)) / (1000 * 60));
    let seconds = Math.floor((interval % (1000 * 60)) / 1000);

    monthsElement.innerHTML = months;
    daysElement.innerHTML = days;
    hoursElement.innerHTML = hours;
    minutesElement.innerHTML = minutes;
    secondsElement.innerHTML = seconds;


    // If the count down is finished, write some text
    if (interval < 0) {
        clearInterval(x);
        document.getElementById("new").innerHTML = "HAPPY NEW YEAR ! TIME FOR A NEW BEGINNING";
    }
}, 1000);

We started by setting a New Date, this date is the date we want to set the count down to, and for this exercise, we set it to

var countDownDate = new Date("Jan 01, 2024 00:00:00").getTime();

Now, we accessed each of the length dates through the defined ids and attributed them to some elements we can easily use

const monthsElement = document.getElementById('month');
const daysElement = document.getElementById('day');
const hoursElement = document.getElementById('hour');
const minutesElement = document.getElementById('minute');
const secondsElement = document.getElementById('second');

Next, we went forward to use the setInterval function to run our function every 1000ms, and decrement our timer by 1s.

var x = setInterval(function () {
    // Get today's date and time
    let today = new Date().getTime();

    // Find the distance between now and the count down date
    let interval = countDownDate - today;

    // Time calculations for days, hours, minutes and seconds
    let months = Math.floor(interval / (1000 * 60 * 60 * 24 * 30))
    let days = 30 % Math.floor(interval / (1000 * 60 * 60 * 24));
    let hours = Math.floor((interval % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    let minutes = Math.floor((interval % (1000 * 60 * 60)) / (1000 * 60));
    let seconds = Math.floor((interval % (1000 * 60)) / 1000);

    monthsElement.innerHTML = months;
    daysElement.innerHTML = days;
    hoursElement.innerHTML = hours;
    minutesElement.innerHTML = minutes;
    secondsElement.innerHTML = seconds;


    // If the count down is finished, write some text
    if (interval < 0) {
        clearInterval(x);
        document.getElementById("new").innerHTML = "HAPPY NEW YEAR ! TIME FOR A NEW BEGINNING";
    }
}, 1000);

Not that we converted each date length (Months, Days, Hours, Minutes) into a common base, that's Seconds. then we use the starting day too, using

 let today = new Date().getTime();

And once the interval reaches 0s, The message displaced is "HAPPY NEW YEAR! TIME FOR A NEW BEGINNING"

And that's principally it.

We just built a responsive fully functional CountDown Component

Conclusion

We just built a very simple, yet functional and effective countdown component.

You can definitely add it to your portfolio, website or the next Project your will be building.

You can have a live preview on Codepen and have the source code on GitHub

Don’t hesitate to share with me if you were able to complete the tutorial on your end, I’d be happy to see any additional components and styling you added to your Countdown.

If you have any worries or suggestions, don’t hesitate to bring them up! 😊

See ya! 👋