<form>
<input type="text" class="input" required>
<input type="text" class="input" required>
<input type="text" class="input" required>
<button type="submit" class="form-btn">Отправить</button>
</form>
<button disabled type="button" class="btn">Просто кнопка</button>
const massivInput = document.querySelectorAll('.input');
const btnSubmit = document.querySelector('.form-btn');
const btnDisable = document.querySelector('.btn');
let allInputsFilled = false;
massivInput.forEach(element => {
element.addEventListener('input', () => {
allInputsFilled = true;
massivInput.forEach(input => {
if (!input.value) {
allInputsFilled = false;
}
});
if (allInputsFilled) {
btnDisable.disabled = false;
}
});
});
{
"source": ["tokens/**/*.json"],
"platforms": {
"css": {
"transformGroup": "css",
"buildPath": "build/",
"files": [
{
"destination": "animation.css",
"format": "css/variables",
"filter": {
"type": "animation",
"property": "keyframe"
},
"options": {
"outputReferences": true
}
}
]
}
},
"properties": {
"animation": {
"keyframe": {
"type": "animation",
"category": "asset",
"value": "@keyframes test { 0% { background-position: 0 } 100% { background-position: 100px } }"
}
}
},
"types": {
"animation": {
"type": "object",
"properties": {
"keyframe": {
"type": "string",
"transform": {
"type": "name",
"value": "animationKeyframe"
}
}
}
}
}
}
.my-animation {
animation-name: animationKeyframe;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
export default {
build: {
outDir: 'dist', // имя общей выходной директории
assetsDir: 'js' // имя директории со статикой
//assetsDir: './' // размещение статики внутри "dist"
}
}
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist/js'),
//path: path.resolve(__dirname, 'dist'), // размещение статики внутри "dist"
filename: 'bundle.js'
}
};
const swiper = new Swiper('.swiper-container', {
// параметры слайдера
pagination: {
el: '.swiper-pagination',
clickable: true,
renderCustom: function (swiper, current, total) {
let paginationHtml = "";
const maxVisible = 3; // максимальное количество видимых элементов
// добавляем первый элемент
paginationHtml += '<span class="swiper-pagination-bullet">' + 1 + '</span>';
// добавляем обрезанные числа, если их нужно показать
if (total > maxVisible) {
const start = current - 1;
const end = current + 1;
if (current < 2) {
end += 2 - current;
} else if (current > total - 2) {
start -= current - (total - 3);
}
if (start > 1) {
paginationHtml += '<span class="swiper-pagination-bullet">..</span>';
}
for (let i = start; i <= end; i++) {
if (i > 1 && i < total) {
paginationHtml += '<span class="swiper-pagination-bullet">' + i + '</span>';
}
}
if (end < total) {
paginationHtml += '<span class="swiper-pagination-bullet">..</span>';
}
} else {
// добавляем остальные элементы
for (let i = 2; i <= total - 1; i++) {
paginationHtml += '<span class="swiper-pagination-bullet">' + i + '</span>';
}
}
// добавляем последний элемент
paginationHtml += '<span class="swiper-pagination-bullet">' + total + '</span>';
return paginationHtml;
}
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Пример чтения и вывода текстового файла в HTML</title>
</head>
<body>
<div id="content"></div>
<script>
fetch('example.txt')
.then(response => response.text())
.then(text => {
const paragraphs = text.split('\n\n');
const contentElement = document.getElementById('content');
paragraphs.forEach(paragraph => {
const p = document.createElement('p');
p.textContent = paragraph;
contentElement.appendChild(p);
});
});
</script>
</body>
</html>
Как организовать и где хранить это все
Засунуть это все в сборку gulp думаю глупо так как будет храниться куча файлов которые мы не используем и потом это все еще придется отдать 3 лицам
Скопилось куча кусочков кода по верстке к примеру 20 карточек товара или 15 видов 404 страницы и прочего
(и насколько востребовано?)
Насколько сложно устроиться во Frontend начинающему в 2023?
Учитывая, что конкуренция стала еще больше, а вакансий все меньше и меньше
то каков шанс в 2023 году попасть на работу во Frontend
modal.style.display = "none";
Может что-то не так?
let today = new Date();
let dd = String(today.getDate()).padStart(2, '0');
today = dd;
let dayStart = document.querySelector(".js-text");
let dayStart2 = document.querySelector(".js-text2");
dayStart.innerHTML = `${dd}`;
dayStart2.innerHTML = `${dd}`;
Есть скрипт слайдера
нужно сделать так, чтобы он срабатывал только на определенной ширине
как это сделать на чистом javascript
Может есть вариант открывать например по 10 ссылок с интервалом 3 сек?