Advanced Search
Search Results
213 total results found
Form Validation
What is Form Validation ? Sometimes people forget to fill in the form properly. Form validation will help them by adding some basic checks to make sure that people will fill the form correctly. We use Regex (Regular Expression) to validate our data. The r...
Advance form handling with YUP & React-hook-form
yup and react-hook-form is your life saver. Yup are powerful tools in the React ecosystem for form validation and form handling. Let's explore it together. Installation : Go to your project and run this command. npm install react-hook-form @hookform/...
Single Page Application
What is single page application ? A Single Page Application (SPA) is a web application or website that interacts with the user by dynamically rewriting the current page rather than loading entire new pages from the server. In SPAs, the page does not reload ...
Introduction
When you create React app, it does not include the page routing function. React Router is one of the popular solution to make routing in React application. It allows you to define routes in your application and navigate between different views or components ...
Basic Navigation
You can read full guide and tutorial here Basic Navigation in React Page creation In page folder, we will have two page Home page and About page In main.tsx file, we will defined two paths "/" and "/about" when you direct to "localhost:5173/" , it wi...
Dynamic Routing
Dynamic routing is a powerful technique used in web development to handle navigation and rendering of pages based on changing parameters. Unlike traditional static routing, where pages are created and rendered component by component, dynamic routing allows for...
What is API ?
API (Application Programming Interface) API stands for Application Programming Interface, it's a set of defined rules that acts as an intermediary layer that enables the exchange of information and functionality between different systems, such as between a ...
React Fetching
In this course for the data, we have used is the API endpoint from https://reqres.in/api/users Fetch method The fetch() is a method in JavaScript is used to request to the server and load the information in the webpages. The request can be of any APIs th...
RESTful API
REST (Representational State Transfer) What is RESTful API? RESTful API is an interface design based on REST architecture that enable two computer systems exchange information securely over the internet either used to fetch or give some information from a ...
Deck of Cards API
Shuffle the Cards: Add deck_count as a GET or POST parameter to define the number of Decks you want to use. Blackjack typically uses 6 decks. The default is 1. Draw a Card: The count variable defines how many cards to draw from the deck. Be sure to replac...
Free Dictionary API
Search word definition and some other details. with this request format it would provide many word's details such: word - how word spell phonetic - how to pronounce word according to the phonetic principle origin - source or beginning of this word partO...
Fetching via Axios
Axios Axios package is a Javascript library not API. Axios use promise-based HTTP client designed for Node.js and browsers. so, we can easily send asynchronous HTTP requests to REST APIs and perform create, read, update and delete operations (CRUD). It is an ...
RPG theme TODO App
Now we're gonna try to do some Lab about what we've learn so far. Please follow the given instruction until the end. Objective: Understand the use of useState and Manage the state Understand concept of Component in React Understand to import and export...
Simplest Calculator
In this assessment, your goal is to build a simple calculator app. The app should be fully functional. For the CSS you don't need to do it by yourself, copy the code below and paste it on App.css in the src folder, before you paste it make sure you delete...
Bank App Home Page
Throughout this course we will try to create full stack bank app web application that fully functioning Creating Home Page The final result of this lab should look like this The home page should consist of Deposit/transfer/ withdraw card : original...
Introduce Flex box / Grid Layout Systems
Flex Box What is Flexbox? Flexbox is a layout model that allows you to distribute space and align elements within a container, even when the sizes of the elements are unknown or dynamic. Unlike traditional layout models, such as floats and positioning, F...
Bank Assignment Cont.
History Page Example of large breakpoint view. (desktop) Example of Extra small , Medium breakpoint view (Mobile) 1.Create the History page (follow this User interface) create deposit component create withdraw component create the transaction...
CSS Unit
Absolute Lengths The absolute length units are fixed and a length expressed in any of these will appear as exactly that size. Relative Lengths Relative length units specify a length relative to another length property. Relative length units scale better b...