export default function App() {
const [originalItems, setOriginalItems] = React.useState([
{ name: "Valerka", id: 1 },
{ name: "Vasya", id: 2 },
]);
const [items, setItems] = React.useState(originalItems);
const [search, setSearch] = React.useState("");
const [name, setName] = React.useState("");
const createNewItem = () => {
const user = {
name,
id: Date.now(),
};
setOriginalItems([...originalItems, user]);
setItems([...originalItems, user]);
setName("");
};
const deleteItem = (id) => {
setOriginalItems(originalItems.filter((item) => item.id !== id));
setItems(items.filter((item) => item.id !== id));
};
const searchItems = (searchText, users) => {
if (!searchText) {
return users;
}
return users.filter(({ name }) =>
name.toLowerCase().includes(searchText.toLowerCase())
);
};
React.useEffect(() => {
const debouncedSearch = setTimeout(() => {
const filteredItems = searchItems(search, originalItems);
setItems(filteredItems);
}, 500);
return () => {
clearTimeout(debouncedSearch);
};
}, [search, originalItems]);
return (
<div className="App">
<input
value={search}
onChange={(e) => setSearch(e.target.value)}
type="text"
placeholder="Find item by name"
></input>
<input
value={name}
onChange={(e) => setName(e.target.value)}
type="text"
placeholder="Enter your name"
></input>
<button onClick={createNewItem}>Submit</button>
{items.map((item) => (
<div key={`${item.id} + ${item.name}`} className="block">
<div className="information">
<div>{item.name}</div>
<div>{item.id}</div>
</div>
<button onClick={() => deleteItem(item.id)}>Delete</button>
</div>
))}
</div>
);
}
// Функция для конвертации валюты
function сonvertCurrency() {
fetch('https://v6.exchangerate-api.com/v6/353aabff81d47df9512e9535/latest/RUB')
.then(function (response) {
return response.json();
})
.then(function (data) {
console.log(data);
// Получение значения из поля ввода и преобразование его в число
let inputValue = parseFloat(document.querySelector('.value').value);
// Получение выбранной валюты из селектора
let currency = document.querySelector('.currency-selector').value;
// Проверка на NaN (не число)
if (!isNaN(inputValue)) {
// Умножение числа на соответствующий курс конвертации
let result;
if (currency === 'USD') {
result = inputValue * data.conversion_rates.USD;
} else if (currency === 'EUR') {
result = inputValue * data.conversion_rates.EUR;
}
// Вывод результата с двумя знаками после запятой
document.querySelector('.dollar').innerHTML = result.toFixed(2);
} else {
// Вывод сообщения об ошибке в случае некорректного ввода
document.querySelector('.dollar').innerHTML = "Некорректное значение";
}
})
.catch(function (error) {
// Обработка ошибок fetch
console.log("Ошибка при получении данных:", error);
});
}
// Обработчик изменения значения селектора
document.querySelector('.currency-selector').addEventListener('change', сonvertCurrency);
if( $categories ){
foreach( $categories as $category ){
}
}