https://github.com/avi2492/domcrud

Basic crud app
https://github.com/avi2492/domcrud

Last synced: 7 days ago
JSON representation

Basic crud app

• Host: GitHub
• URL: https://github.com/avi2492/domcrud
• Owner: Avi2492
• Created: 2023-12-10T17:48:31.000Z (11 months ago)
• Default Branch: main
• Last Pushed: 2024-01-20T08:51:34.000Z (10 months ago)
• Last Synced: 2024-01-20T09:39:28.233Z (10 months ago)
• Language: JavaScript
• Size: 1.95 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
```JavaScript

const apiUrl = "https://jsonplaceholder.typicode.com/posts";

// const title = document.querySelector("#title");

// fetch(apiUrl)

//   .then((res) => {

//     if (!res.ok) {

//       throw new Error("Network response was not ok");

//     }

//     return res.json();

//   })

//   .then((data) => {

//     console.log(data);

//     data.forEach((item) => {

//       const p = document.createElement("p");

//       p.textContent = item.title;

//       title.appendChild(p);

//     });

//   })

//   .catch((error) => {

//     console.log(error);

//   });

async function fetchData(){

  try{

    const res = await fetch(apiUrl);

    if(!res.ok){

      throw new Error("Network response was not ok");

    }

    const data = await res.json();

    const filterData = data.filter((item) => (item.userId === 1 || item.userId === 3));

    console.log(filterData);

    // filterData.map((item)=>{

    //   const p = document.createElement("h3");

    //   p.textContent = `Title: ${item.title}`;

      

    //   title.appendChild(p);

    // });

    showInCard(filterData);

  }catch(error){

    console.log(error);

  }

}

function showInCard(filterData){

  const cardContainer = document.getElementById("cardContainer");

  cardContainer.innerHTML = '';

  filterData.map((item)=>{

    const card = document.createElement('div');

    card.classList = 'card';

    card.innerHTML = `

      
Title: ${item.title}

      
UserId: ${item.userId}

      
Body: ${item.body}

      `;


    cardContainer.appendChild(card);

  });

}

fetchData();

```