ptorrel/JS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

new class js -advanced

Browse Source
This commit is contained in:
Philippe Torrel
2026-06-29 11:35:03 +02:00
parent ee8a87bf2a
commit 31c13250b0
104 changed files with 2632 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
02_advanced/MATERIAL/advanced-js/lesson_05/examples/displayPosts.html Normal file
View File

@@ -0,0 +1,45 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Display Posts</title>
</head>
<body>
<h1>List of Posts</h1>
<ul id="post-list"></ul>
<script>
'use strict';
async function displayPosts() {
const postList = document.querySelector('#post-list');
try {
const response = await fetch('https://dummyjson.com/posts');
if (!response.ok) {
throw new Error('Network response was not ok');
}
const data = await response.json();
data.posts.forEach((post) => {
const listItem = document.createElement('li');
listItem.textContent = post.title; // Display the title of each post
postList.appendChild(listItem);
});
} catch (error) {
console.error('Error fetching posts:', error);
const errorItem = document.createElement('li');
errorItem.textContent = 'Error loading posts.';
postList.appendChild(errorItem);
}
}
displayPosts();
</script>
</body>
</html>

73
02_advanced/MATERIAL/advanced-js/lesson_05/examples/displayPostsDetails.html Normal file
View File

@@ -0,0 +1,73 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Display Post Details</title>
</head>
<body>
<h1>List of Posts</h1>
<ul id="post-list"></ul>
<div
id="post-details"
style="
display: none;
border: 1px solid #ccc;
padding: 1em;
margin-top: 1em;
"
>
<h2 id="post-title"></h2>
<p id="post-body"></p>
<button id="close-details">Close Details</button>
</div>
<script>
'use strict';
async function loadAndDisplayPosts() {
const postList = document.getElementById('post-list');
const postDetails = document.getElementById('post-details');
const postTitle = document.getElementById('post-title');
const postBody = document.getElementById('post-body');
const closeDetailsButton = document.getElementById('close-details');
try {
const response = await fetch('https://dummyjson.com/posts');
if (!response.ok) {
throw new Error('Network response was not ok');
}
const posts = await response.json();
posts.forEach((post) => {
const listItem = document.createElement('li');
listItem.textContent = post.title;
listItem.style.cursor = 'pointer';
// Add click event listener to display post details
listItem.addEventListener('click', () => {
postTitle.textContent = post.title;
postBody.textContent = post.body;
postDetails.style.display = 'block';
});
postList.appendChild(listItem);
});
} catch (error) {
console.error('Error fetching posts:', error);
const errorItem = document.createElement('li');
errorItem.textContent = 'Error loading posts.';
postList.appendChild(errorItem);
}
// Close details when the button is clicked
closeDetailsButton.addEventListener('click', () => {
postDetails.style.display = 'none';
});
}
loadAndDisplayPosts();
</script>
</body>
</html>

16
02_advanced/MATERIAL/advanced-js/lesson_05/examples/fetchAPIData.js Normal file
View File

@@ -0,0 +1,16 @@
'use strict';
async function fetchData() {
try {
const response = await fetch('https://dummyjson.com/posts');
if (!response.ok) {
throw new Error('Network response was not ok');
}
const data = await response.json();
console.log(data);
} catch (error) {
console.error('Problem with the fetch operation:', error);
}
}
fetchData();

21
02_advanced/MATERIAL/advanced-js/lesson_05/examples/jsonToObj.js Normal file
View File

@@ -0,0 +1,21 @@
'use strict';
const person = {
name: 'John Doe',
age: 30,
profession: 'Web Developer',
};
// Convert JavaScript object to JSON string
const jsonString = JSON.stringify(person);
console.log(jsonString);
// => {"name":"John Doe","age":30,"profession":"Web Developer"}
try {
// Convert JSON string back to JavaScript object
const parsedPerson = JSON.parse(jsonString);
console.log(parsedPerson.name); // => John Doe
console.log(parsedPerson.age); // => 30
} catch (error) {
console.error('Invalid JSON:', error);
}

31
02_advanced/MATERIAL/advanced-js/lesson_05/examples/try_catch.js Normal file
View File

@@ -0,0 +1,31 @@
'use strict';
async function getData(url) {
try {
const response = await fetch(url);
if (!response.ok) {
// Handle HTTP errors by throwing an exception
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
return data;
} catch (error) {
// Centralized error logging and fallback behavior
console.error('Error fetching data:', error);
// Optionally, return a default value or handle the error gracefully
return null;
}
}
// Usage
getData('https://dummyjson.com/posts')
.then((data) => {
if (data) {
console.log('Data:', data);
} else {
console.log('No data received');
}
})
.catch((error) => {
console.error('Error in getData:', error);
});

14
02_advanced/MATERIAL/advanced-js/lesson_05/solutions/fetchUsers/index.js Normal file
View File

@@ -0,0 +1,14 @@
'use strict';
async function fetchUsers() {
try {
const response = await fetch('https://dummyjson.com/users');
const data = await response.json();
console.log(data.users);
} catch (error) {
console.log(error);
}
}
// Call the function
fetchUsers();

14
02_advanced/MATERIAL/advanced-js/lesson_05/solutions/jsonBook/index.js Normal file
View File

@@ -0,0 +1,14 @@
'use strict';
const book = {
title: 'The Great Gatsby',
author: 'F. Scott Fitzgerald',
year: 1925,
};
const jsonString = JSON.stringify(book);
console.log(jsonString);
const jsonObject = JSON.parse(jsonString);
console.log(jsonObject.title);
console.log(jsonObject.author);