Skip to content

Commit

Permalink
modif comms
Browse files Browse the repository at this point in the history
  • Loading branch information
@Kherset
Kherset committed Oct 5, 2023
1 parent 8e24ddc commit ec10494
Show file tree
Hide file tree
Showing 3 changed files with 106 additions and 84 deletions.
47 changes: 24 additions & 23 deletions scripts/pages/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,34 +1,35 @@
/* eslint-disable no-undef */
async function getPhotographers() {
try {
const response = await fetch('data/photographers.json');
if (!response.ok) {
throw new Error('Impossible de récupérer les données des photographes.');
}
const data = await response.json();
return data.photographers;
} catch (error) {
console.error(error);
return [];
}
try {
const response = await fetch("data/photographers.json");
if (!response.ok) {
throw new Error("Impossible de récupérer les données des photographes.");
}
const data = await response.json();
return data.photographers;
} catch (error) {
console.error(error);
return [];
}
}

async function displayData(photographers) {
const photographersSection = document.querySelector(".photographer_section");
const photographersSection = document.querySelector(".photographer_section");

photographers.forEach((photographer) => {
const photographerModel = homepageTemplate(photographer);
const userCardDOM = photographerModel.getUserCardDOM();
photographersSection.appendChild(userCardDOM);
});
photographers.forEach((photographer) => {
const photographerModel = homepageTemplate(photographer);
const userCardDOM = photographerModel.getUserCardDOM();
photographersSection.appendChild(userCardDOM);
});
}

async function init() {
try {
const photographers = await getPhotographers();
displayData(photographers);
} catch (error) {
console.error(error);
}
try {
const photographers = await getPhotographers();
displayData(photographers);
} catch (error) {
console.error(error);
}
}

init();
103 changes: 54 additions & 49 deletions scripts/pages/photographer.js
View file
Original file line number Diff line number Diff line change
@@ -1,86 +1,91 @@
/* eslint-disable no-undef */
// Globals variables
let jsonData = null;
const id = getIdFromUrl();

// Function to retrieve ID from URL
function getIdFromUrl() {
const params = new URL(document.location).searchParams;
const id = parseInt(params.get('id'));
return id;
const params = new URL(document.location).searchParams;
const id = parseInt(params.get("id"));
return id;
}

// Function to fetch data
async function fetchData() {
try {
const response = await fetch('data/photographers.json');
if (!response.ok) {
throw new Error('Unable to retrieve data.');
}
jsonData = await response.json();
} catch (error) {
console.error(error);
jsonData = null;
}
try {
const response = await fetch("data/photographers.json");
if (!response.ok) {
throw new Error("Unable to retrieve data.");
}
jsonData = await response.json();
} catch (error) {
console.error(error);
jsonData = null;
}
}

// Function to retrieve photographers
async function getPhotographers() {
if (jsonData === null) {
await fetchData();
}
if (jsonData === null) {
await fetchData();
}

return jsonData ? jsonData.photographers : [];
return jsonData ? jsonData.photographers : [];
}

// Function to retrieve a photographer by ID
async function getPhotographerById(id) {
try {
const photographers = await getPhotographers();
return photographers.find(photographer => photographer.id === id) || null;
} catch (error) {
console.error("Photographer not found");
return null;
}
try {
const photographers = await getPhotographers();
return photographers.find(photographer => photographer.id === id) || null;
} catch (error) {
console.error("Photographer not found");
return null;
}
}

/**************************************** Medias ****************************************/
/**************************************** Medias ****************************************/

// Function to retrieve medias
async function getMedias() {
try {
const response = await fetch('data/photographers.json');
if (!response.ok) {
throw new Error('Unable to retrieve media data.');
}
const data = await response.json();
return data.media || [];
} catch (error) {
console.error(error);
return [];
}
try {
const response = await fetch("data/photographers.json");
if (!response.ok) {
throw new Error("Unable to retrieve media data.");
}
const data = await response.json();
return data.media || [];
} catch (error) {
console.error(error);
return [];
}
}

// Function to retrieve medias by photographer ID
// eslint-disable-next-line no-unused-vars
async function getMediasByPhotographerId(id) {
const medias = await getMedias();
return medias.filter(media => media.photographerId === id);
const medias = await getMedias();
return medias.filter(media => media.photographerId === id);
}

// Function to build photographer page
async function buildPhotographerPage() {
const photographer = await getPhotographerById(id);
if (photographer) {
photographerHeader(photographer);
createMedia(photographer);
} else {
console.error("Photographer not found");
}
const photographer = await getPhotographerById(id);
if (photographer) {
// eslint-disable-next-line no-undef
photographerHeader(photographer);
// eslint-disable-next-line no-undef
createMedia(photographer);
} else {
console.error("Photographer not found");
}
}

// eslint-disable-next-line no-redeclare
function buildPhotographerPage() {
photographerHeader()
likesAndPriceCard()
headerModal()
photographerHeader();
likesAndPriceCard();
headerModal();
}

buildPhotographerPage()
buildPhotographerPage();
40 changes: 28 additions & 12 deletions scripts/templates/homepage.js
View file
Original file line number Diff line number Diff line change
@@ -1,46 +1,62 @@
// eslint-disable-next-line no-unused-vars
function homepageTemplate(data) {
const { name, portrait, city, country, tagline, price} = data;
// Destructure data object for easier access
const { name, portrait, city, country, tagline, price } = data;

// Construct the path to the photographer's portrait image
const picture = `assets/medias/IDPhotos/${portrait}`;

// Function to create and return a DOM element for the photographer's card
function getUserCardDOM() {
const article = document.createElement( "article" );
article.setAttribute("aria-label", `Carte du photographe ${name}`);
const img = document.createElement( "img" );
// Create a new <article> element for the photographer's card
const article = document.createElement("article");
article.setAttribute("aria-label", `Photographer's card for ${name}`);

// Create an <img> element for the photographer's portrait
const img = document.createElement("img");
img.setAttribute("src", picture);
img.setAttribute("alt", `Photo du photographe ${name}`);
img.setAttribute("alt", `Photographer ${name}'s photo`);

// Create a <div> to hold photographer's identity information
const photographer = document.createElement("div");
photographer.className = "photographer_identity";
const h2 = document.createElement( "h2" );
const h3 = document.createElement( "h3" );
const p = document.createElement( "p" );
const p2 = document.createElement( "p" );

// Create <h2>, <h3>, <p>, and <p> elements to display photographer's details
const h2 = document.createElement("h2");
const h3 = document.createElement("h3");
const p = document.createElement("p");
const p2 = document.createElement("p");
p2.className = "price";

// Populate the elements with photographer's information
h2.textContent = name;
h3.textContent = `${city}, ${country} `;
p.textContent = tagline;
p2.textContent = `${price}Є/jour`;
p2.textContent = `${price}Є/day`;

// Create a link to the photographer's dedicated page
const linkPhotographer = document.createElement("a");
linkPhotographer.setAttribute("href", `photographer.html?id=${data.id}`);

// Append elements to the DOM hierarchy
linkPhotographer.appendChild(photographer);
photographer.appendChild(img);
photographer.appendChild(h2);

// Create a <div> to hold additional photographer's information
const infoPhotographer = document.createElement("div");
infoPhotographer.className = "info_photographer";
infoPhotographer.appendChild(h3);
infoPhotographer.appendChild(p);
infoPhotographer.appendChild(p2);


// Append elements to the article and return the whole card
article.appendChild(linkPhotographer);
article.appendChild(infoPhotographer);
return (article);

return article;
}

// Return relevant data and the function to generate the photographer's card
return { name, picture, getUserCardDOM };
}

0 comments on commit ec10494

Please sign in to comment.