From 0ce45ed12b43adda27c9e7c09c402f4bb2586e16 Mon Sep 17 00:00:00 2001 From: Kunal Mishra Date: Sat, 28 Sep 2024 21:52:19 +0530 Subject: [PATCH 1/8] add fetch api title on click --- index.html | 23 +++++++++++++++++++++++ script.js | 22 ++++++++++++++++++++++ 2 files changed, 45 insertions(+) create mode 100644 index.html create mode 100644 script.js diff --git a/index.html b/index.html new file mode 100644 index 0000000..d7194ff --- /dev/null +++ b/index.html @@ -0,0 +1,23 @@ + + + + + + Document + + + + +
+

API Titles

+
+ + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..a39b386 --- /dev/null +++ b/script.js @@ -0,0 +1,22 @@ +async function fetchTodo() { + try { + const response = await fetch('https://jsonplaceholder.typicode.com/todos'); + if (!response.ok) { + throw new Error('Network response was not ok'); + } + const json = await response.json(); + json.forEach((item) => { + const container = document.querySelector('.append-titles') + const newTitle = document.createElement('span') + newTitle.innerHTML = item.title; + container.appendChild(newTitle) + + }); + } catch (error) { + console.error('There was a problem with the fetch operation:', error); + } +} + + +const button = document.getElementById('fetch-api-button'); +button.addEventListener('click', () => fetchTodo()) \ No newline at end of file From 79bbf69b72ecb9b58b815333c3c272dfca775fc7 Mon Sep 17 00:00:00 2001 From: Kunal Mishra Date: Mon, 30 Sep 2024 20:38:31 +0530 Subject: [PATCH 2/8] updated marked changes --- script.js | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/script.js b/script.js index a39b386..db373f5 100644 --- a/script.js +++ b/script.js @@ -5,18 +5,20 @@ async function fetchTodo() { throw new Error('Network response was not ok'); } const json = await response.json(); - json.forEach((item) => { - const container = document.querySelector('.append-titles') - const newTitle = document.createElement('span') - newTitle.innerHTML = item.title; - container.appendChild(newTitle) - - }); + json.forEach((item) => appendData(item.title)); } catch (error) { console.error('There was a problem with the fetch operation:', error); } } +const appendData = (title) => { + const container = document.querySelector('.append-titles') + const newTitle = document.createElement('span') + newTitle.innerHTML = title; + container.appendChild(newTitle) +} -const button = document.getElementById('fetch-api-button'); -button.addEventListener('click', () => fetchTodo()) \ No newline at end of file +window.onload = () => { + const button = document.getElementById('fetch-api-button'); + button.addEventListener('click', () => fetchTodo()) +} From 5125c950af1c6acc901337bd432460f9a4ba6dd9 Mon Sep 17 00:00:00 2001 From: Kunal Mishra Date: Mon, 30 Sep 2024 23:42:43 +0530 Subject: [PATCH 3/8] updated changes --- script.js | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/script.js b/script.js index db373f5..ab0af6a 100644 --- a/script.js +++ b/script.js @@ -1,3 +1,5 @@ + + async function fetchTodo() { try { const response = await fetch('https://jsonplaceholder.typicode.com/todos'); @@ -5,20 +7,22 @@ async function fetchTodo() { throw new Error('Network response was not ok'); } const json = await response.json(); - json.forEach((item) => appendData(item.title)); + appendData(json) } catch (error) { console.error('There was a problem with the fetch operation:', error); } } -const appendData = (title) => { - const container = document.querySelector('.append-titles') - const newTitle = document.createElement('span') - newTitle.innerHTML = title; - container.appendChild(newTitle) +const appendData = (data) => { + data.forEach((item) => { + const container = document.querySelector('.append-titles') + const newTitle = document.createElement('span') + newTitle.innerHTML = item.title; + container.appendChild(newTitle) + }) } window.onload = () => { const button = document.getElementById('fetch-api-button'); - button.addEventListener('click', () => fetchTodo()) + button.addEventListener('click', fetchTodo()) } From 74b4ee9a615116b5edae982030375e7061272463 Mon Sep 17 00:00:00 2001 From: Kunal Mishra Date: Mon, 30 Sep 2024 23:47:49 +0530 Subject: [PATCH 4/8] fixed --- script.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/script.js b/script.js index ab0af6a..33eceda 100644 --- a/script.js +++ b/script.js @@ -7,14 +7,14 @@ async function fetchTodo() { throw new Error('Network response was not ok'); } const json = await response.json(); - appendData(json) + appendData(json); } catch (error) { console.error('There was a problem with the fetch operation:', error); } } -const appendData = (data) => { - data.forEach((item) => { + async function appendData(data) { + await data.forEach((item) => { const container = document.querySelector('.append-titles') const newTitle = document.createElement('span') newTitle.innerHTML = item.title; @@ -24,5 +24,5 @@ const appendData = (data) => { window.onload = () => { const button = document.getElementById('fetch-api-button'); - button.addEventListener('click', fetchTodo()) + button.addEventListener('click', fetchTodo) } From 3239ec31f9556d335e390e591facf39dae76533d Mon Sep 17 00:00:00 2001 From: Kunal Mishra Date: Wed, 2 Oct 2024 11:36:02 +0530 Subject: [PATCH 5/8] updated appenddata function to get data from fetchTodo --- script.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/script.js b/script.js index 33eceda..427d89a 100644 --- a/script.js +++ b/script.js @@ -1,5 +1,3 @@ - - async function fetchTodo() { try { const response = await fetch('https://jsonplaceholder.typicode.com/todos'); @@ -7,13 +5,14 @@ async function fetchTodo() { throw new Error('Network response was not ok'); } const json = await response.json(); - appendData(json); + return json } catch (error) { console.error('There was a problem with the fetch operation:', error); } } - async function appendData(data) { + async function appendData() { + const data = await fetchTodo(); await data.forEach((item) => { const container = document.querySelector('.append-titles') const newTitle = document.createElement('span') @@ -24,5 +23,5 @@ async function fetchTodo() { window.onload = () => { const button = document.getElementById('fetch-api-button'); - button.addEventListener('click', fetchTodo) + button.addEventListener('click', appendData) } From a8583119e669ba35a3baa4a0c6ebe6bbe1a9f9bc Mon Sep 17 00:00:00 2001 From: Kunal Mishra Date: Thu, 3 Oct 2024 20:14:54 +0530 Subject: [PATCH 6/8] added a helper method to pass data to appendData function --- script.js | 35 +++++++++++++++++++++++------------ 1 file changed, 23 insertions(+), 12 deletions(-) diff --git a/script.js b/script.js index 427d89a..667dc86 100644 --- a/script.js +++ b/script.js @@ -1,27 +1,38 @@ -async function fetchTodo() { + +const postApi = "https://jsonplaceholder.typicode.com/todos"; + +// Fetch API Function +async function fetchTodo(apiUrl) { try { - const response = await fetch('https://jsonplaceholder.typicode.com/todos'); + const response = await fetch(apiUrl); if (!response.ok) { throw new Error('Network response was not ok'); } const json = await response.json(); - return json + return json; } catch (error) { console.error('There was a problem with the fetch operation:', error); } } - async function appendData() { - const data = await fetchTodo(); - await data.forEach((item) => { - const container = document.querySelector('.append-titles') - const newTitle = document.createElement('span') - newTitle.innerHTML = item.title; - container.appendChild(newTitle) - }) + +// Append data in DOM +async function appendData(data) { + const container = document.querySelector('.append-titles'); + data.forEach((item) => { + const newTitle = document.createElement('span'); + newTitle.innerHTML = item.title; + container.appendChild(newTitle); + }); +} + +// Helper function to store data from fetch function and pass on to appendData function +const getData = async () => { + const data = await fetchTodo(postApi); + await appendData(data); } window.onload = () => { const button = document.getElementById('fetch-api-button'); - button.addEventListener('click', appendData) + button.addEventListener('click', getData); } From a7daa00b475e09829ee88016979448e0778935bc Mon Sep 17 00:00:00 2001 From: Kunal Mishra Date: Thu, 3 Oct 2024 21:49:48 +0530 Subject: [PATCH 7/8] removed async --- script.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/script.js b/script.js index 667dc86..f8899c7 100644 --- a/script.js +++ b/script.js @@ -17,7 +17,7 @@ async function fetchTodo(apiUrl) { // Append data in DOM -async function appendData(data) { +function appendData(data) { const container = document.querySelector('.append-titles'); data.forEach((item) => { const newTitle = document.createElement('span'); @@ -29,7 +29,7 @@ async function appendData(data) { // Helper function to store data from fetch function and pass on to appendData function const getData = async () => { const data = await fetchTodo(postApi); - await appendData(data); + appendData(data); } window.onload = () => { From 7a75e4b188b6b4e5c4943087d74d80c5c3799252 Mon Sep 17 00:00:00 2001 From: Satyam Seth Date: Thu, 3 Oct 2024 22:17:59 +0530 Subject: [PATCH 8/8] add basic styling for post tile --- index.html | 19 ++++++++++++++++++- script.js | 7 ++++--- 2 files changed, 22 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index d7194ff..2c70619 100644 --- a/index.html +++ b/index.html @@ -6,15 +6,32 @@ Document +

API Titles

-

API Titles

diff --git a/script.js b/script.js index f8899c7..afb898c 100644 --- a/script.js +++ b/script.js @@ -20,19 +20,20 @@ async function fetchTodo(apiUrl) { function appendData(data) { const container = document.querySelector('.append-titles'); data.forEach((item) => { - const newTitle = document.createElement('span'); + const newTitle = document.createElement('div'); + newTitle.className = 'post'; newTitle.innerHTML = item.title; container.appendChild(newTitle); }); } // Helper function to store data from fetch function and pass on to appendData function -const getData = async () => { +async function clickHandler() { const data = await fetchTodo(postApi); appendData(data); } window.onload = () => { const button = document.getElementById('fetch-api-button'); - button.addEventListener('click', getData); + button.addEventListener('click', clickHandler); }