Ankhena Ankhena
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
Ankhena
/ colorBlocks.js
Last active
September 25, 2021 09:49
Colors the selected elements in random colors. Launch: colorBlocks ('. random');
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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'); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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
/ _check-webp.js
Created
January 21, 2023 09:38
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function checkWebP(callback){ | |
| let webP = new Image(); | |
| webP.onload = webP.onerror = function(){ | |
| callback(webP.height == 2); | |
| }; | |
| webP.src = 'data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA'; | |
| }; | |
| checkWebP(function(support){ | |
| if(support) document.body.classList.add("webp"); | |
| else document.body.classList.add("no-webp"); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { | |
| --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)); | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="contacts__map" id="map"> | |
| <div class="contacts__map-image no-js"> | |
| <picture> | |
| <source type="image/webp" media="(max-width: 767px)" | |
| srcset="img/map/map-mobile.webp 1x, img/map/map-mobile@2x.webp 2x"> | |
| <source type="image/webp" media="(max-width: 1023px)" | |
| srcset="img/map/map-tablet.webp 1x, img/map/map-tablet@2x.webp 2x"> | |
| <source type="image/webp" srcset="img/map/map-desktop.webp 1x, img/map/map-desktop@2x.webp 2x"> | |
| <source media="(max-width: 767px)" srcset="img/map/map-mobile.jpg 1x, img/map/map-mobile@2x.jpg 2x"> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <ul class="colors"> | |
| <li class="colors__item">1</li> | |
| <li class="colors__item">2</li> | |
| <li class="colors__item">3</li> | |
| <li class="colors__item">4</li> | |
| <li class="colors__item">5</li> | |
| </ul> |
OlderNewer