<svg class="hero-blob-1" viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(300,300)">
<path d="M120,-157.6C152.7,-141.5,174.3,-102.6,194.8,-58.8C215.3,-14.9,234.6,33.8,228.4,80.8C222.2,127.8,190.4,173.1,148.1,184C105.8,195,52.9,171.5,-2.4,174.8C-57.8,178.2,-115.6,208.4,-137.5,190.9C-159.3,173.3,-145.3,108,-153,56.3C-160.7,4.6,-190.2,-33.4,-178.3,-54.2C-166.4,-75.1,-113.2,-78.8,-76.6,-93.6C-40,-108.3,-20,-134.2,11.9,-150.5C43.7,-166.8,87.4,-173.6,120,-157.6Z" fill="#0055fe">
<animate attributeName="d" values="
M120,-157.6C152.7,-141.5,174.3,-102.6,194.8,-58.8C215.3,-14.9,234.6,33.8,228.4,80.8C222.2,127.8,190.4,173.1,148.1,184C105.8,195,52.9,171.5,-2.4,174.8C-57.8,178.2,-115.6,208.4,-137.5,190.9C-159.3,173.3,-145.3,108,-153,56.3C-160.7,4.6,-190.2,-33.4,-178.3,-54.2C-166.4,-75.1,-113.2,-78.8,-76.6,-93.6C-40,-108.3,-20,-134.2,11.9,-150.5C43.7,-166.8,87.4,-173.6,120,-157.6Z;
M67.8,-97.1C87.8,-78.8,103.8,-58.9,117.4,-34.1C130.9,-9.4,142,20.2,139.5,50.7C137,81.2,120.8,112.6,95.3,150.1C69.8,187.7,34.9,231.3,3.3,226.8C-28.2,222.2,-56.4,169.3,-91.6,134.9C-126.8,100.5,-169,84.6,-179.6,57.1C-190.2,29.7,-169.3,-9.3,-155.2,-49.7C-141,-90.1,-133.7,-132,-109,-148.8C-84.2,-165.6,-42.1,-157.3,-9.1,-144.8C23.9,-132.2,47.8,-115.5,67.8,-97.1Z;
M137.1,-191.3C172,-163.4,190.6,-115.7,197.2,-70.1C203.8,-24.4,198.5,19.2,178.9,51.5C159.3,83.9,125.5,105,93.3,129.6C61.1,154.1,30.6,182.1,1.1,180.6C-28.4,179.1,-56.8,148.2,-81.2,121.1C-105.6,94.1,-126.1,70.8,-141.6,41.6C-157.2,12.4,-168,-22.9,-153.9,-45C-139.8,-67,-100.7,-76,-70.9,-105.5C-41.1,-135,-20.6,-185,15.3,-206C51.1,-227.1,102.3,-219.1,137.1,-191.3Z;
M123.7,-157.1C162.4,-142.2,197.2,-108.8,202.8,-70.8C208.3,-32.9,184.5,9.7,169,54.2C153.6,98.7,146.4,145.2,119.7,162.7C92.9,180.2,46.4,168.6,-1.9,171.1C-50.2,173.7,-100.3,190.4,-122.2,171.3C-144.1,152.3,-137.7,97.5,-144.1,52.7C-150.6,7.9,-169.9,-26.8,-170.5,-64.8C-171,-102.8,-152.8,-144,-121.3,-161.3C-89.7,-178.5,-44.9,-171.8,-1.2,-170.1C42.5,-168.5,85,-172,123.7,-157.1Z;
M120,-157.6C152.7,-141.5,174.3,-102.6,194.8,-58.8C215.3,-14.9,234.6,33.8,228.4,80.8C222.2,127.8,190.4,173.1,148.1,184C105.8,195,52.9,171.5,-2.4,174.8C-57.8,178.2,-115.6,208.4,-137.5,190.9C-159.3,173.3,-145.3,108,-153,56.3C-160.7,4.6,-190.2,-33.4,-178.3,-54.2C-166.4,-75.1,-113.2,-78.8,-76.6,-93.6C-40,-108.3,-20,-134.2,11.9,-150.5C43.7,-166.8,87.4,-173.6,120,-157.6Z
" keyTimes="0; 0.25; 0.5; 0.75; 1" calcMode="spline" keySplines="0 0 1 1; 0 0 1 1; 0 0 1 1; 0 0 1 1" repeatCount="indefinite" dur="15s" fill="freeze"/>
</path>
</g>
</svg>gulp.task('build:html', () => {
return gulp.src('src/*.html')
.pipe(nunjucks.compile())
.pipe(gulp.dest('dist/'));
});const render = (tag, properties = null, children = null) => {
const element = document.createElement(tag);
if (properties !== null) {
for (let [key, value] of Object.entries(properties)) {
if (key in element) {
element[key] = value;
} else {
element.setAttribute(key, value);
}
}
}
if (children !== null) {
if (children instanceof Array) {
element.append(...children);
} else {
element.append(children);
}
}
return element;
};
const element = render('div', { className: 'article' }, [
render('header', { className: 'article__header' }, render('h1', {
className: 'article__title',
textContent: 'Article'
})),
render('main', { className: 'article__body' }, Array(12).fill(null).map(() => render('p', {
className: 'article__text',
textContent: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit tenetur, voluptate tempora illum, sed exercitationem! Minima quasi, doloremque quos hic blanditiis commodi non dolorum. Assumenda ex aperiam voluptatibus laborum dolor.'
})))
]);<div class="article">
<header class="article__header">
<h1 class="article__title">Article</h1>
</header>
<main class="article__body">
<p class="article__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit tenetur, voluptate tempora illum, sed exercitationem! Minima quasi, doloremque quos hic blanditiis commodi non dolorum. Assumenda ex aperiam voluptatibus laborum dolor.</p>
<p class="article__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit tenetur, voluptate tempora illum, sed exercitationem! Minima quasi, doloremque quos hic blanditiis commodi non dolorum. Assumenda ex aperiam voluptatibus laborum dolor.</p>
<p class="article__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit tenetur, voluptate tempora illum, sed exercitationem! Minima quasi, doloremque quos hic blanditiis commodi non dolorum. Assumenda ex aperiam voluptatibus laborum dolor.</p>
<p class="article__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit tenetur, voluptate tempora illum, sed exercitationem! Minima quasi, doloremque quos hic blanditiis commodi non dolorum. Assumenda ex aperiam voluptatibus laborum dolor.</p>
<p class="article__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit tenetur, voluptate tempora illum, sed exercitationem! Minima quasi, doloremque quos hic blanditiis commodi non dolorum. Assumenda ex aperiam voluptatibus laborum dolor.</p>
<p class="article__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit tenetur, voluptate tempora illum, sed exercitationem! Minima quasi, doloremque quos hic blanditiis commodi non dolorum. Assumenda ex aperiam voluptatibus laborum dolor.</p>
<p class="article__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit tenetur, voluptate tempora illum, sed exercitationem! Minima quasi, doloremque quos hic blanditiis commodi non dolorum. Assumenda ex aperiam voluptatibus laborum dolor.</p>
<p class="article__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit tenetur, voluptate tempora illum, sed exercitationem! Minima quasi, doloremque quos hic blanditiis commodi non dolorum. Assumenda ex aperiam voluptatibus laborum dolor.</p>
<p class="article__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit tenetur, voluptate tempora illum, sed exercitationem! Minima quasi, doloremque quos hic blanditiis commodi non dolorum. Assumenda ex aperiam voluptatibus laborum dolor.</p>
<p class="article__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit tenetur, voluptate tempora illum, sed exercitationem! Minima quasi, doloremque quos hic blanditiis commodi non dolorum. Assumenda ex aperiam voluptatibus laborum dolor.</p>
<p class="article__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit tenetur, voluptate tempora illum, sed exercitationem! Minima quasi, doloremque quos hic blanditiis commodi non dolorum. Assumenda ex aperiam voluptatibus laborum dolor.</p>
<p class="article__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit tenetur, voluptate tempora illum, sed exercitationem! Minima quasi, doloremque quos hic blanditiis commodi non dolorum. Assumenda ex aperiam voluptatibus laborum dolor.</p>
</main>
</div>let inputValue = document.querySelector('input');
let btn = document.getElementsByTagName('button');
let ulListPlan = document.getElementById('plan');
let clearComleted = document.getElementById('completed');
clearComleted.addEventListener('click', function () {
let completed = document.querySelectorAll('input[type="checkbox"]:checked');
for (let entry of completed) {
entry.parentNode.remove();
}
});
function createTodo(value) {
let li = document.createElement('li')
let checkBox = document.createElement('input');
let close = document.createElement('button');
let text = document.createTextNode(value);
close.textContent = "X";
checkBox.type = "checkBox";
checkBox.addEventListener('input', function () {
if (checkBox.checked) {
li.style.userSelect = 'none';
li.style.backgroundColor = 'grey'
} else {
li.style.backgroundColor = 'white';
li.style.userSelect = "text";
}
});
close.addEventListener('click', function () {
li.remove();
});
li.append(checkBox, text, close);
ulListPlan.append(li);
}
inputValue.addEventListener('keyup', function (event) {
if (event.keyCode == 13 && inputValue.value.length > 0) {
createTodo(inputValue.value);
inputValue.value = '';
}
});