Posts

Showing posts with the label 2024

2. NextJS: Create custom modal with TS and Tailwind CSS

Image
We'll need a button to launch our custom modal, so when we click the "Open Modal" button, our custom modal should appear. <button className="rounded-md border h-10 px-4 text-white bg-blue-600 hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2  focus-visible:outline-blue-600" type="button" onClick={() => setModalClose(!modalClose)} >Open Modal</button> We will create a state to manage the opening and closing of modal. By default the modal is closed. 'use client' import { useState } from 'react' ... const [modalClose, setModalClose] = useState(true); Ok, now let's create our custom modal Install a package clsx, it will help us dynamically add or remove className at run time based on state change. npm i clsx Following is modal <div></div>: {/* Modal */}       <div id="custom-modal" tab-index="-1" aria-hidden="true"         className=
Post a Comment
Read more

1. NextJS: Create project with TS and Tailwind CSS

Image
Follow the 2 step to Create Next JS app on current location and host it locally at port 3000. Steps 1. npx create-next-app@latest ./ As seen in the image below, make sure you choose Yes for required option. Run your NextJS app 2. npm run dev In console: Output: (Go to http://localhost:3000 in your browser)
Post a Comment
Read more

CSS: Types of Selectors

Image
  what is selectors? CSS selectors allow you to target specific HTML elements. You can select elements by tag name (e.g., h1, p), class (e.g., .container, .button), ID (e.g., #header, #footer), or other attributes. There are several important types of selectors in CSS: 1. Element Selector 2.  ID Selector 3. Class Selector 4. Pseudo-Class Selector 5. Pseudo-Elements Selector 6. Descendant Selector 7. Child Selector 8. Adjacent Selector 9. General Sibling Selector 10. Attribute Selector 1. Element Selector The simplest kind of selection targets HTML components based on their tag name. EX.  index.html <!DOCTYPE html>  <html lang="en">  <head>  <title>My First WebPage</title> <link href="./main.css" rel="stylesheet"></link> </head> <body>     <p>PARA 1</p>     <span>SPAN</span>      <p>PARA 2</p> </body> </html> main.css p {     color: red } Output: Oh no! Fan
Post a Comment
Read more