Skip to content

Instantly share code, notes, and snippets.

@Ankhena
Ankhena / equalHeight.js
Created Oct 9, 2021
equalHeight vanilla javascript
View equalHeight.js
const equalHeight = (selector) => {
const blocks = document.querySelectorAll(selector);
let maxHeight = 0;
let blockHight;
blocks.forEach(block => {
block.style.setProperty('height', 'unset');
})
blocks.forEach(block => {
blockHight = block.clientHeight;
@Ankhena
Ankhena / colorBlocks.js
Last active Sep 25, 2021
Colors the selected elements in random colors. Launch: colorBlocks ('. random');
View colorBlocks.js
const colorBlocks = (block) => {
const items = document.querySelectorAll(block);
items.forEach(item => {
let color = (Math.random().toString(16) + '000000').substring(2, 8).toUpperCase();
item.style.setProperty('--bg-color', '#' + color);
})
}
colorBlocks('.random');
@Ankhena
Ankhena / outline.scss
Created Aug 23, 2021
Scroll search outline
View outline.scss
* {
--out-width: 2px;
outline: var(--out-width) solid red;
outline-offset: calc(0px - var(--out-width));
&::before, &::after {
outline: var(--out-width) solid lime;
outline-offset: calc(0px - var(--out-width));
}
}
@Ankhena
Ankhena / index.html
Created May 20, 2021
Styling the input file
View index.html
<p>
<input id="file" class="visually-hidden" type="file">
<label for="file">Загрузить файл</label>
</p>
<p>
<input id="file2" class="visually-hidden" type="file">
<label for="file2">Загрузить файл</label>
</p>
View tooltip.html
<div class="tooltip">
<button class="tooltip__btn" type="button" aria-label="Подробности"></button>
<div class="tooltip__text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, deserunt, distinctio dolorum eaque eius eveniet ipsam mollitia nostrum pariatur quibusdam quisquam quo quod reprehenderit velit voluptas? Magnam sequi totam voluptate!
</div>
</div>
View details.js
// toggle details
let detailsBtns = document.querySelectorAll('.details__btn');
if (detailsBtns) {
detailsBtns.forEach(btn => btn.addEventListener('click', (e) => {
this.closest('.details').classList.toggle('details--open');
}))
}
// end toggle details