In this practice project, I added the functionality of a payment gateway through Stripe to a cart of products. Here's a step-by-step overview of what I did:

• Installation and Initial Setup:

  Installed a Next.js app.

  Removed unnecessary default code.

• 
  

1. Create Account:

   • Registered for a testing account on Stripe.
   • 
     

2. Add Product:

   • Added three products using Stripe's product section.
   • Set pricing and other details for these products.
   • 
     

3. Package Installation:

   • Installed npm packages for Stripe and Axios.
   • 
     

4. Get Keys:

   • Obtained Secret and Public keys from Stripe.
   • Stored these keys in the .env file.
   • 
     

5. API Routes:

   • Created API routes in the api folder.
   • Implemented a post request route in a file related to payments.
   • Set up a get request route in a file related to products.
   • These routes allowed me to retrieve product names and prices from Stripe.
   • 
     

6. Product UI:

   • Designed a UI component in the Component folder named "pricing.js".
   • Utilized Tailwind CSS for styling.
   • Used Axios for making API calls in the pricing.js component to fetch and display data on cards.
   • 
     

7. Hosting:

   • After testing, deployed the project on Vercel for hosting.

I created a CRUD application using MongoDB and Next.js 13 for performing Create, Read, Update, and Delete operations on data. Here's a step-by-step breakdown of what I did:

Installation and Initial Setup:

1. First, I installed Next.js.
2. Removed the default data that comes with a new project.
3. Created an .env file and defined the MongoDB URI in it.
4. 
   

Creating a Schema:

4. Defined a schema based on the data structure.

5. Connected the schema to the MongoDB database within the app.
6. 
   

Creating API Routes:

6. Defined API routes for CRUD operations:

• Created API routes for different HTTP methods (GET, POST, PUT, DELETE) to handle corresponding CRUD actions.
• 
  

Creating the Create API:

7. Created an API route for the "create" operation

• Defined a POST route to handle the creation of new data.
• Used the appropriate HTTP method and handled the data creation logic.
• 
  

Building the User Interface (UI):

8. Designed and created the UI components to interact with the CRUD operations.

9. Designed forms, buttons, and elements for each operation to allow users to perform CRUD actions easily.
10. 
    

API Calls:

10. Within the UI component files, made API calls to the defined routes: - Used various API methods (like fetch or libraries like Axios) to perform CRUD actions. - Integrated these API calls into the UI components to ensure that user interactions trigger the correct API requests.

Hosting:

11. After thorough testing, built the application.

12. Deployed the built application to a hosting platform (like Vercel) to make it accessible online.

In this project, I used Replit to fetch data from a crypto coin API by creating an app with Next.js 13. Let me break down the steps I followed:

1. Installation and Structure:

   • Installed Next.js.
   • Created an "app" folder and added sub-folders named "api" and "components."
   • 
     

2. Component Files:

3. • In the "components" folder, I created three component files: "Coin.jsx," "CoinData.jsx," and "SearchCoin.js."
   • 
     

4. API Route:

   • Inside the "api" folder, I created a sub-folder with the coin's name.
   • Within the coin's sub-folder, I created a file named "route.js" to define the API route for fetching coin data.
   • Inside "route.js," I imported the necessary modules, and I defined an async function named fetchCoins to fetch data from the crypto coin API.
   • I made a fetch request to the API endpoint with appropriate headers, including the "X-RapidAPI-Key" and "X-RapidAPI-Host."
   • After receiving the response, I parsed the JSON data and returned it.
   • 
     

javascriptCopy code
import { NextResponse } from "next/server";

async function fetchCoins() {
  // Fetch data from API with appropriate headers
  const response = await fetch("API_ENDPOINT_URL", {
    headers: {
      "X-RapidAPI-Key": "YOUR_API_KEY",
      "X-RapidAPI-Host": "coinranking1.p.rapidapi.com",
    },
  });

  const coins = await response.json();
  return coins;
}

export async function GET(request) {
  const coins = await fetchCoins();
  // Filter data based on search query
  // Return filtered data as JSON response
  return NextResponse.json(filterCoins);
}

4. 
   

5. Search Functionality:

6. I added a "search" sub-folder within the coin's name sub-folder.

   • Inside the "search" sub-folder, I created a file named "route.js" to define the API route for searching coin data.
   • Inside "route.js," similar to the previous API route, I imported modules and defined the fetchCoins function to fetch data.
   • Additionally, I extracted the query parameter from the request URL and filtered the coins data based on the query.
   • Finally, I returned the filtered data as a JSON response.
   • 
     

7. Styling:

   • For styling, I used Tailwind CSS.
   • 
     

8. Component Usage:

   • In the "components" files, I fetched data from the defined API routes and implemented search functionality using the "SearchCoin.js" component.

I explain step by step how I managed the state of a product using React Redux Toolkit.
Note: This practice project is not mobile-responsive.

Step 1: First, I installed the React app and then removed the default data that comes with it. After that, I installed React-Redux.

Step 2: I created a "components" folder and defined component files within it: "cart.js", "home.js", "navbar.js", and "product.js".

Step 3: In the "navbar.js" file, I created a navbar component with links to "Home" and "Cart", and also added functionality to count the CartItems.

Step 4: In the "product.js" file, I added code to display product-related information such as title, image, price, and an "Add to Cart" button.

Step 5: On the home page, I imported and called the product component to display products. Step 6: In the "Cart.js" component, I displayed the added-to-cart products, and also added accounting CSS.

Step 6: I created a "store" folder alongside the "components" folder and within it, I created three files: "cartSlice.js", "productSlice.js", and "store.js". These files are used to manage the state.

Step 7: In the "productSlice.js" file, I fetched product data from the API "https://fakestoreapi.com/products" and stored it in the Redux store.

Step 8: In the "App.js" file, I imported the Redux Provider and the store using the following code:

jsxCopy code
import { Provider } from 'react-redux';
import store from './store/store';

<Provider store={store}>
    <div className='App'>
        <BrowserRouter>
            <NavBar />
            <Routes>
                <Route path='/' element={<Home />} />
                <Route path='/cart' element={<Cart />} />
            </Routes>
        </BrowserRouter>
    </div>
</Provider>

Then, I fetched data from the store in the "Product.js" component, which I was previously fetching from the API, and rendered it on the page.

I created a text analyzer using React.js, and I will define the process step by step.

Step 1: First, I installed the React app by using the npm install create-react-app command. Then, I removed some unnecessary elements from the App.js file that are included by default.

Step 2: Next, I created a folder name component. Inside this folder, I defined React components named Home.js, Navbar.js, Error.js, and Alert.js. I also created corresponding CSS files for each component and defined the necessary styling.

Step 3: In the component files, I wrote code for Home.js to define a textarea. I also created buttons that, when clicked, change the text and I added the functionality of counting the number of words, sentences, characters, Reading Time, and Speaking Time.

Step 4: In the Alert.js file, I implemented functionality to display an alert message according to the action triggered by a button click.

Step 5: In the Navbar.js file, I created a responsive navbar using Bootstrap CSS. I ensured that the navbar is mobile-responsive by utilizing Bootstrap classes and I also added a back and white toggle button functionality

Step 6: Finally, I created a blog page and make a build and deploy it on Netlify.

I have developed a CRUD application using React.js and MockAPI, that provides APIs for testing purposes. Here's the breakdown of the steps I followed:

Step 1: I started by installing React.js using the command "npm install create-react-app" and then proceeded to remove the default data from the App.js file, which is provided by default.

Step 2: I created a "components" folder where I organized my code. Inside this folder, I created three sub-folders named Data.js, Input.js, and Update.js.

Step 3: For styling purposes, I also generated CSS files within the "components" folder. I used CSS within JSX to design my components.

Step 4: I installed the Axios library using npm. I used Axios to make API calls.

Step 5: In the "Input" file, I developed an input form to manage data using the useState hook. I used the Axios library to send a POST request to the MockAPI server upon submitting the form. Later, in the "Update" file, I retrieved data from the browser's local storage using the useState hook and displayed it in input fields. I used a PUT request to update data. In the "Data" file, I fetched and displayed the saved data from the server using the useEffect hook to avoid frequent API calls. Finally, I implemented the option to delete data using a DELETE request.

how to create a functional input form with regex validation using HTML, CSS, and JavaScript

1. HTML File (index.html):
2. 
   

3. This is the structure of your web page. It contains the form elements and provides the basic layout for your input form. Here's how it's organized:

4. • The <head> section includes necessary meta tags, title, external CSS and JavaScript files, and fonts for styling.
   • The <body> section is divided into a <div> with a class of container. This is where your form resides.

   Inside the <div class="container">, you've structured your form as follows:

5. • You have a <form> element that encloses your form content.
   • You've included a heading, labels, input fields, and radio buttons to collect user information.
   • You've added the necessary attributes like id, placeholder, and name to your input fields for identification and functionality.
   • You've also included a script that enables the preview of uploaded images.
   • 
     

6. CSS File (style.css):

7. 
   

8. This file provides the styling and visual appearance for your input form. It uses various classes to target and style specific elements within your HTML. Let's break down some of the key parts:

   • You set global styles using * to reset margins and paddings and ensure box-sizing consistency.
   • The .container class styles your form container, including background color, border-radius, and positioning.
   • Different elements such as headings, labels, and inputs are styled for fonts, colors, and spacing.
   • You've created specific styles for radio buttons, file uploads, and phone number input fields.
   • Classes like .success and .error handle the appearance of success and error states for inputs.
   • Media queries adjust styles for different screen widths, ensuring a responsive design.
   • 
     

9. JavaScript File (app.js):

10. 
    

11. Your JavaScript file adds functionality to your form, including form validation and handling of user interactions:

    • You've declared variables to store references to form elements using document.getElementById and document.getElementsByClassName.
    • 
      
    • You've defined functions to handle success messages, error messages, and form submission.
    • The setData function displays a success message when the form is submitted successfully.
    • The setSuccess function checks if all input fields are in a success state before displaying the success message.
    • The validation function checks user inputs against predefined rules, showing error or success states as appropriate.
    • Regular expressions (isEmail, regex, cnicRegex) are used to validate email, phone numbers, and CNIC numbers.
    • Event listeners are set up to trigger validation on form submission and phone number input.
    • The previewImage function previews uploaded images and displays their sizes.

Create a stylish and functional clock webpage that showcases both analog and digital time displays. This project involves HTML, CSS, and JavaScript to bring the clock to life. Follow these steps to create your own clock:

Step 1: Set Up the HTML Structure

• Begin by creating a basic HTML structure with a <!DOCTYPE html> declaration and <html>, <head>, and <body> tags.
• Inside the <head>, set the document's character encoding, viewport settings, and include a title for the webpage.
• Link an external CSS stylesheet using the <link> tag within the <head>.
• 
  

Step 2: Design the Clock Using CSS

• Define the styles for the clock's appearance using CSS. This includes setting up a container to hold the clock elements.
• Create circular divs with different classes to represent the clock hands for seconds, minutes, and hours.
• Position these circular divs using CSS to create the analog clock face.
• Add twelve <span> elements, each with a nested <b> element, to represent the hour markers on the clock.
• 
  

Step 3: JavaScript for Real-Time Updates

• Use JavaScript to update the clock's hands in real-time. Set up a function to be called at intervals using setInterval().
• Inside the function, use the getHours(), getMinutes(), and getSeconds() functions to calculate the rotation angles for the clock hands.
• Apply these angles to the clock hands using the CSS transform property to achieve the analog clock's animation.
• 
  

Step 4: Display Digital Time

• Create a digital clock below the analog clock using HTML elements, such as <div>s, to display hours, minutes, seconds, and AM/PM.
• In the JavaScript function, extract the current time using getHours(), getMinutes(), and getSeconds() and convert it to 12-hour format.
• Add leading zeros to single-digit values for proper formatting.
• 
  

Step 5: Styling for Visual Appeal

• Use CSS to style the digital clock's appearance. Design the font size, colors, and positioning of the time elements.
• Apply box shadows, gradients, and border-radius to create a visually appealing clock design.
• Implement media queries to ensure your clock webpage is responsive and adapts to different screen sizes.
• 
  

Step 6: Testing and Refining

• Test the clock webpage in various browsers to ensure compatibility.
• Make adjustments to the code and styles as needed to achieve the desired look and functionality.

Experience the power of calculations at your fingertips with our Interactive Calculator built using HTML, CSS, and JavaScript. This web-based calculator offers a seamless and user-friendly platform to perform a wide range of mathematical operations with ease.

Key Features:

• User-Friendly Interface: Our calculator boasts an intuitive interface designed for effortless navigation, ensuring users of all skill levels can make the most of its capabilities.

• 
  

• Basic and Advanced Functions: From simple addition and subtraction to complex operations like logarithms and square roots, our calculator covers a comprehensive range of mathematical functions.

• 
  

• Real-Time Updates: As you input numbers and perform operations, our calculator provides real-time updates, making it easy to track your calculations as you go.

• 
  

• Responsive Design: Whether you're using a desktop, tablet, or smartphone, our calculator adapts to various screen sizes, ensuring a consistent and optimal experience across devices.

• Toggle Mode:  black and white Embrace simplicity and customize your calculator experience with the integrated toggle mode. Switch between a classic black or white theme, aligning the calculator's aesthetics with your preference.