ИнтересноеИнтересное
Введи: cat, dog, nature и т.д.
![]()
0
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 0;
padding: 20px;
}
h1 {
margin-bottom: 10px;
}
#keyword-input {
padding: 5px;
font-size: 16px;
margin-right: 10px;
}
#search-button {
padding: 5px 10px;
font-size: 16px;
background-color: green;
color: white;
border: none;
cursor: pointer;
}
#search-button.clicked {
background-color: blue;
}
#image-container {
margin-top: 20px;
position: relative;
}
#result-image {
max-width: 40%;
height: auto;
}
#description-container {
margin-top: 20px;
text-align: left;
max-width: 80%;
margin-left: auto;
margin-right: auto;
}
#likes-container {
position: absolute;
bottom: 10px;
right: 10px;
}
#like-button {
background-color: transparent;
border: none;
font-size: 16px;
cursor: pointer;
}
const keywordInput = document.getElementById('keyword-input');
const searchButton = document.getElementById('search-button');
const imageContainer = document.getElementById('image-container');
const resultImage = document.getElementById('result-image');
const descriptionContainer = document.getElementById('description-container');
const likeButton = document.getElementById('like-button');
const likesCount = document.getElementById('likes-count');
const apiKey = 'qhmcCqMQ8xLEa8uuTKTc-jJStQwQp5yZ5hzsyDkMhj4';
const unsplashApiUrl = 'https://api.unsplash.com/photos/random';
const wikipediaApiUrl = 'https://en.wikipedia.org/api/rest_v1/page/summary/';
let isButtonClicked = false;
let likes = 0;
searchButton.addEventListener('click', () => {
if (!isButtonClicked) {
const keyword = keywordInput.value.trim();
if (keyword) {
fetchImage(keyword);
fetchDescription(keyword);
searchButton.textContent = 'Нажми еще раз';
searchButton.classList.add('clicked');
isButtonClicked = true;
}
} else {
resetState();
}
});
likeButton.addEventListener('click', () => {
likes++;
likesCount.textContent = likes;
});
function fetchImage(keyword) {
const url = `${unsplashApiUrl}?query=${keyword}&client_id=${apiKey}`;
fetch(url)
.then(response => response.json())
.then(data => {
const imageUrl = data.urls.regular;
resultImage.src = imageUrl;
})
.catch(error => {
console.error('Ошибка при загрузке изображения:', error);
});
}
function fetchDescription(keyword) {
const url = `${wikipediaApiUrl}${keyword}`;
fetch(url)
.then(response => response.json())
.then(data => {
const description = data.extract;
descriptionContainer.innerHTML = `
${description}
`;
})
.catch(error => {
console.error('Ошибка при загрузке описания:', error);
});
}
function resetState() {
keywordInput.value = '';
resultImage.src = '';
descriptionContainer.innerHTML = '';
searchButton.textContent = 'Жми';
searchButton.classList.remove('clicked');
isButtonClicked = false;
likes = 0;
likesCount.textContent = likes;
}
