https://github.com/avi2492/javascript-projects

Code repository for JavaScript Projects During Course
https://github.com/avi2492/javascript-projects

Last synced: 7 days ago
JSON representation

Code repository for JavaScript Projects During Course

• Host: GitHub
• URL: https://github.com/avi2492/javascript-projects
• Owner: Avi2492
• Created: 2023-12-13T05:24:35.000Z (11 months ago)
• Default Branch: main
• Last Pushed: 2024-01-12T09:03:40.000Z (10 months ago)
• Last Synced: 2024-01-12T21:33:43.837Z (10 months ago)
• Language: CSS
• Size: 31.3 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# JavaScript-projects

Code repository for JavaScript Projects During Course

## APi handle code 

```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();

```