Отправить ajax запрос и вывести данные на страницу?

Модератор, у меня не получается вывести само имя персинажа на страницу, в консоль смогла добраться до свойства:

const URL = 'https://ajax.test-danit.com/api/swapi/';
const root = document.querySelector('#root');

class Requests {
	constructor(url) {
		this.url = url;
	}

	getEntity(entity) {
		return fetch(this.url + `${entity}`).then(response => {
			return response.json();
		});
	}
	// getDeepEntity(entity, keyword) {
	// 	return fetch(this.url + `${entity}?search=${keyword}`).then(response => {
	// 		return response.json();
	// 	});
	// }
}

class StarWars {
	constructor(root) {
		this.root = root;
	}

	renderEntity(data) {
		const infoEntity = document.createElement('div');

		const infoItems = data.map(({ name, episodeId, openingCrawl, characters }) => {
			const entityContainer = document.createElement('div');
			const title = document.createElement('h4');
			title.textContent = `Film name: "${name}"`;
			// const people = characters.map(elem => {
			// 	console.log(elem);
			// });
			const id = document.createElement('p');
			id.textContent = `Episode: ${episodeId}`;
			id.style.fontStyle = 'italic';
			const description = document.createElement('p');
			description.textContent = `Description:${openingCrawl}`;
			entityContainer.append(title, starWarsChar, id, description);
			return entityContainer;
		});
		infoEntity.append(...infoItems);
		this.root.append(infoEntity);
	}
}

class StarWarsChar {
	renderChar(data) {
		const listChar = document.createElement('ul');
		data.forEach(elem => {
			//console.log(elem.name);
			let li = document.createElement('li');
			li.textContent = elem.name;
			listChar.append(li);
			console.log(listChar);
		});
	}
}

const request = new Requests(URL);
const starWars = new StarWars(root);
const starWarsChar = new StarWarsChar();

// request
// 	.getEntity('films')
// 	.then(data => {
// 		console.log(data);
// 		starWars.renderEntity(data);
// 	})
// 	.catch(e => {
// 		console.log(e);
// 	});
request.getEntity('films').then(data => {
	//console.log(data);
	starWars.renderEntity(data);
	//console.log(starWarsChar.renderChar(data));
});
request.getEntity('people').then(data => {
	console.log(data);
	starWarsChar.renderChar(data);
});

Как разместить проект на GitHub Pages?

Спасибо большое, увидела. Я немного по-другому искала. Ранее этот раздел был возле Denger zone. Спасибо))))

Почему страница скроллится при нажатии правой кнопки слайдера при расширении экрана 768?

Спасибо большое))) Сработало, а я задавала это свойство блоку слайдера.

Как по клику на кнопку поменять цвет темы ,используя localStorage?

RikoDiGray, Огромное спасибо, работает))))

Как по клику на кнопку поменять цвет темы ,используя localStorage?

Спасибо большое за ответ. Может я что-то не так делаю, но при повторном клике у меня тема не меняется на исходную. Исходную тему мне также нужно записать в local?

Как по клику на кнопку поменять цвет темы ,используя localStorage?

edward_freedom, но при перезагрузке данные не сохраняются и при повторном клике на кнопку тема на исходную также не меняется

Как заменить картинки через определенное время в JS (не меняя src изображения)?

moreqa, огромное спасибо))))

Как заменить картинки через определенное время в JS (не меняя src изображения)?

Помогите, пожалуйста, ещё с кнопками разобраться. Я добавила две кнопки:

<div class="btns">
    <button class="stop" >Stop</button>
    <button class="continue" >Continue</button>
    </div>

Для Stop установила остановку анимации, а как возобновить с помощью Continue?

document.querySelector('.stop').addEventListener('click', function() {
  clearInterval(timer)
 })
stop.disabled = true

Как заменить картинки через определенное время в JS (не меняя src изображения)?

Спасибо большое))))))) Работает)))