Here is a README file based on the information you provided:

# SVLN

This repository contains a web application that displays product information fetched from an API. The application is built using HTML, CSS, and JavaScript.

## Features

- Fetches product data from a remote API.
- Displays product information in a responsive table format.
- Allows users to delete products.
- Ensures that images are responsive and fit within the layout.

## Getting Started

To run the application locally, follow these steps:

1. Clone the repository:

   ```bash
   git clone https://github.com/krishnakanthpathi/svln.git
   cd svln

2. Open index.html in your web browser.

Code Overview

HTML

The main HTML file contains the structure of the web page including a table to display the products.

JavaScript

The JavaScript file fetches product data from the API and dynamically creates table rows to display the products.

const productsDiv = document.getElementById("pt");
const url = "https://6321f07afd698dfa29032037.mockapi.io/test/all/svln";

async function fetchProducts() {
  const response = await fetch(url);
  const data = await response.json();
  viewAllProducts(data);
}

function createProductElement(imgUrl, productName, productRate, content, cap, id) {
  return `
    <tr class="table-primary">
      <td>
        <img src="${imgUrl}" class="img-fluid img-thumbnail rounded-top" width="200" alt="${content}">
      </td>
      <td class="border border-2 fw-bold">
        ${productName}<br>
        ₹${productRate}<br>
        ${content}<br>
      </td>
      <td>
        <a href="#" class="btn m-1 ms-0 d-none btn-primary">Edit <i class="fa fa-edit" aria-hidden="true"></i></a>
        <a href="#" onclick="deleteProduct('${url}/${id}')" class="btn m-1 ms-0 btn-danger">Delete <i class="fa-solid fa-trash"></i></a>
      </td>
    </tr>
  `;
}

async function viewAllProducts(data) {
  data.forEach(product => {
    const productElement = createProductElement(product.avatar, product.productname, product.cost, product.content, product.cap, product.id);
    productsDiv.innerHTML += productElement;
  });
}

document.addEventListener('DOMContentLoaded', fetchProducts);

async function deleteProduct(url) {
  if (confirm("Do you want to delete this product?")) {
    await fetch(url, {
      method: "DELETE",
      headers: {
        'Content-type': 'application/json'
      }
    });
    alert("Product deleted successfully");
    window.location.reload();
  }
}

API

The application fetches product data from the following API endpoint:

https://6321f07afd698dfa29032037.mockapi.io/test/all/svln

Contributions

Contributions are welcome! Please open an issue or submit a pull request for any changes.

License

This project is licensed under the MIT License.

Feel free to customize this README file further to fit your project's specific needs.