type
:type BaseColumn = { label: string; props: string }
type Column = { type: 'text' } & BaseColumn
type LinkColumn = { type: 'link'; path: string } & BaseColumn
type TableColumn = Column | LinkColumn
keyof
для юниона объектов показывает только те поля, которые есть в каждом из них. Это логично, т.к. к типу TableColumn
ты не можешь обратиться по полую .link
предварительно не сузив тип. union
- строгий. // Не пишите тут лишних типов. Юзаете картинку, оставьте только тип картинки
const img = ref<HTMLImageElement | null>(null);
if (img.value) {
observer.value.observe(img.value);
}
ref
на какой либо DOM элемент или же компонент, это не значит, что он существует в DOM дереве. TS не умеет определять, существует ли html или нет.Что надо делать.?
Не понимаю, с чего начать.
double[] x, double[]y
position: relative
совместно со свойствами top
, right
, bottom
или left
смещает элемент относительно его естественного расположения на странице. Поэтому все работает так, как и должно. Ваш main
естественным образом расположен в верхней части родителя и смещен на 0px. Ну то есть никуда не смещен.position: absolute
. // get DOM elements
const searchInput = document.getElementById('searchInput');
const resultsContainer = document.getElementById('resultsContainer');
// search from array
function searchBooks(query) {
return CLASS5.filter(book => {
return book.query.toLowerCase().includes(query.toLowerCase())
|| book.athor.toLowerCase().includes(query.toLowerCase())
|| book.pages.toLowerCase().includes(query.toLowerCase())
|| book.age.toLowerCase().includes(query.toLowerCase())
|| book.classn.toLowerCase().includes(query.toLowerCase());
});
}
// print
function displayResults(results) {
resultsContainer.innerHTML = '';
if (results.length === 0) {
resultsContainer.innerHTML = '<p>Ничего не найдено...</p>';
return;
}
results.forEach(book => {
const bookCard = document.createElement('div');
bookCard.innerHTML = `
<h2>${book.query}</h2>
<p>${book.athor}</p>
<p>${book.pages}</p>
<p>${book.age}</p>
<p>${book.classn}</p>
<img src="${book.images}" alt="Book Image">
`;
resultsContainer.appendChild(bookCard);
});
}
// handler
searchInput.addEventListener('input', (event) => {
const query = event.target.value;
const results = searchBooks(query);
displayResults(results);
});
Или например при выполнении скрипта на бэке записывать в базу результат а фронт будет через 5 минут спрашивать бэк все ли готово?
vue({
style: {
preprocessOptions: {
additionalData: globalScssData // @import 'some-path/mixins.scss'; для глобального импорта
},
preprocessLang: 'scss' // используемый препроцессор: 'less' | 'sass' | 'scss' | 'styl' | 'stylus'
}
}),
Как начать зарабатывать начинающему web-разработчику в 17 лет?
зарабатывать на вебе
Хочу устроиться джуном в веб-студию удаленно
Может устроиться к кому-нибудь на фриланс
Как начать зарабатывать на фрилансе?
const containerSelector = '.selectboxss';
const itemClass = 'selectoption';
const itemSelector = `${containerSelector} .${itemClass}`;
const getClasses = el => Array.prototype.filter.call(el.classList, n => n !== itemClass);
//const getClass = el => el.className.match(RegExp(`${itemClass}-\\d+`))[0];
function updateClasses(item) {
const container = item.closest(containerSelector);
const { classList: cl } = container;
cl.remove(...Array.prototype.flatMap.call(container.querySelectorAll(itemSelector), getClasses));
cl.add(...getClasses(item));
//cl.remove(...Array.from(container.querySelectorAll(itemSelector), getClass));
//cl.add(getClass(li));
}
document.querySelectorAll(itemSelector).forEach(function(n) {
n.addEventListener('click', this);
}, e => updateClasses(e.currentTarget));
document.addEventListener('click', e => {
const item = e.target.closest(itemSelector);
if (item) {
updateClasses(item);
}
});