Всем добрый вечер. Нужна помощь. Есть как бы виджет курса валют, но высвечиваются все сразу. Хотелось бы, что бы каждая валютная пара, появлялась по клику на кнопку. При загрузке страницы, Должна сразу появляться первая валютная пара, а ниже 4 кнопки. И соответственно, когда нажимаешь на другую кнопку, виджет перерисовывается. Ниже кот js, и разметка HTML. То, что у меня не получается находится в loadCourse()
Заранее всем спасибо.
class CoursView {
constructor() {
this.courseList = document.querySelector('#exchange_rates');
this.courseWidget = document.querySelector('.course_widget');
}
renderCours(ccy, base_ccy, buy, sale) {
let li = document.createElement("li");
let currency = document.createElement("h3");
let course = document.createElement("p");
let courseUsd = document.querySelector('.usd');
let courseEuro = document.querySelector('.euro');
let courseRur = document.querySelector('.rur');
let courseBtc = document.querySelector('.btc');
currency.innerText = ccy;
course.innerText = `Продажа: ${(buy*1).toFixed(2)}${base_ccy} / Покупка: ${(sale*1).toFixed(2)}${base_ccy}`;
this.courseList.append(li);
li.append(currency, course);
}
courseError(msg) {
this.clearCourse();
let li = document.createElement("li");
li.innerText = `Ошибка: ${msg}`;
this.courseList.appendChild(li);
}
clearCourse() {
this.courseList.innerHTML = '';
}
}
class CoursModel {
constructor() {
this.courses = [];
}
setCourses(courses) {
this.courses = courses;
}
clear() {
this.courses = [];
}
}
class CoursControler {
constructor(model, view) {
this.model = model;
this.view = view;
this.loadCourse = this.loadCourse;
}
handle() {
this.loadCourse();
setInterval(this.loadCourse, 3600000);
}
loadCourse = () => {
this.model.clear();
fetch('https://api.privatbank.ua/p24api/pubinfo?json&exchange&coursid=5')
.then(res => res.json())
.then(result => {
this.model.setCourses(result);
})
.catch(err => {
console.log(err);
})
.finally(() => {
this.view.clearCourse();
if(this.model.courses.length === 0) return this.view.courseError('Нет данных');
this.view.courseWidget.addEventListener('click', function(e) {
if (e.target.className == '.usd') {
this.model.courses.forEach(item => this.view.renderCours(item.ccy, item.base_ccy, item.buy, item.sale)[0]);
}
else if (e.target.className =='.euro') {
this.model.courses.forEach(item => this.view.renderCours(item.ccy, item.base_ccy, item.buy, item.sale)[1]);
}
else if (e.target.className =='.rur') {
this.model.courses.forEach(item => this.view.renderCours(item.ccy, item.base_ccy, item.buy, item.sale)[2]);
}
else if (e.target.className =='.btc') {
this.model.courses.forEach(item => this.view.renderCours(item.ccy, item.base_ccy, item.buy, item.sale)[3]);
}
})
});
}
}
const coursView = new CoursView();
const coursModel = new CoursModel();
const coursController = new CoursControler(coursModel, coursView);
coursController.handle();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather App</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAcvZd2PPPPz3OD3VHpl_X9xOxesl80-cU&libraries=places&callback=initMap">
</script>
<script defer src="googleMaps.js"></script>
<script defer src="app.js"></script>
<script defer src="userWeather.js"></script>
<script defer src="course.js"></script>
</head>
<body>
<div class="container">
<h1>Погода</h1>
<header>
<input type="text" class="city" placeholder="Введите город" required>
<button type="submit" class="cityBtn">Показать</button>
</header>
<section class="dateNow">
<h3 class="date"></h3>
</section>
<section>
<ul id="weather"></ul>
<div class="block_weather">
<ul id="user_weather">
<li id="current_weather">
<h2>Ваш город</h2>
<h3 id="current_city">Неизвестно</h3>
<div id="temperature">null</p>
</li>
</ul>
</div>
<div class="course_widget">
<h2>Курс валют</h2>
<ul id="exchange_rates"></ul>
<button class="usd">USD</button>
<button class="euro">EURO</button>
<button class="rur">RUR</button>
<button class="btc">BTC</button>
</div>
</section>
</div>
</body>
</html>