document.addEventListener('DOMContentLoaded', () => {
function translateElement(el) {
if (
el.matches('.wc-block-components-totals-item__label') &&
el.textContent.trim() === 'Delivery'
) {
el.textContent = 'Szállítás';
}
if (el.matches('.wc-block-components-totals-shipping-address-summary')) {
el.innerHTML = el.innerHTML.replace(/^Delivers to/, 'Szállítva ide');
}
if (
el.matches('.wc-block-components-shipping-address-check') &&
el.textContent.trim() === 'Enter address to check delivery options'
) {
el.textContent =
'Add meg a címet a szállítási lehetőségek ellenőrzéséhez';
}
}
// Initial pass
document
.querySelectorAll(
'.wc-block-components-totals-item__label, .wc-block-components-totals-shipping-address-summary, .wc-block-components-shipping-address-check'
)
.forEach(translateElement);
// Observe only new nodes
new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
mutation.addedNodes.forEach((node) => {
if (node.nodeType === Node.ELEMENT_NODE) {
translateElement(node);
node
.querySelectorAll(
'.wc-block-components-totals-item__label, .wc-block-components-totals-shipping-address-summary, .wc-block-components-shipping-address-check'
)
.forEach(translateElement);
}
});
});
}).observe(document.body, { childList: true, subtree: true });
});
JavaScript
Tab Panel with JavaScript
Hamburger menu for WordPress custom theme
Accordion for ACF Repeater Field
PHP
JS
SCSS
How to enqueue JavaScript Asynchronously in WordPress?
functions.php
Hide If Empty WooCommerce Notification on Cart Page
Redirect after MailPoet subscription
This snippet will redirect the visitor after three seconds to a specific thank you page.
const submit = document.querySelector('.wysija-submit'); submit.addEventListener('click', () => { setTimeout(() => window.location.replace("YOUR_CUSTOM_URL"), 3000); });
Receive data from external API (Chuck Norris jokes)
Generate Chuck Norris jokes asynchronously from external API of Internet Chuck Norris Database.
https://api.icndb.com/jokes/random/

HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.css" /> <link rel="icon" href="#"> <title>Chuck Norris API</title> <style> .imgBx img{ border-radius: 50%; display: block; margin: auto; max-width: 200px; } button{ display: block; margin: 30px auto; } .text-center{ text-align: center; margin-top: 20px; } form input{ display: block; margin: auto; } form label{ text-align: center; } </style> </head> <body> <div class="container"> <div class="imgBx"> <img src="norris.jpg" alt="Chuck Norris"> </div> <div class="txtBx"> <h1 class="text-center">Chuck Norris API</h1> </div> <form> <div> <label for="number">Number of jokes</label> <input type="number" id="number"> </div> </form> <button id="button">Get Jokes</button> <ul class="jokes"></ul> </div> <script src="app.js"></script> </body> </html>
JavaScript
document.getElementById('button').addEventListener('click', getJokes); function getJokes(e) { const number = document.querySelector('input[type="number"]').value; const xhr = new XMLHttpRequest(); xhr.open('GET', `http://api.icndb.com/jokes/random/${number}`, true); xhr.onload = function(){ if(this.status === 200){ const response = JSON.parse(this.responseText); let output = ''; if(response.type === 'success'){ response.value.forEach(function(joke){ output += ` <li>${joke.joke}</li> `; }); } else{ output += '<li>Something went wrong</li>'; } document.querySelector('ul.jokes').innerHTML = output; } } xhr.send(); e.preventDefault(); }
Receive data from JSON file with Ajax
document.getElementById('button1').addEventListener('click', loadCustomer); document.getElementById('button2').addEventListener('click', loadCustomers); // Load Single Customer // Create a function named LoadCustomer and passing the Event Object function loadCustomer(e){ const xhr = new XMLHttpRequest(); xhr.open('GET', 'customer.json', true); xhr.onreadystatechange = function(){ if(this.readyState === 4 && this.status === 200){ const customer = JSON.parse(this.responseText); const output = ` <ul> <li>ID: ${customer.id}</li> <li>Name: ${customer.name}</li> <li>Company: ${customer.company}</li> <li>Phone: ${customer.phone}</li> </ul> `; document.getElementById('customer').innerHTML = output; } } xhr.send(); e.preventDefault(); } // Load Customers function loadCustomers(e){ const xhr = new XMLHttpRequest(); xhr.open('GET', 'customers.json', true); xhr.onreadystatechange = function(){ if(this.readyState === 4 && this.status === 200){ const customers = JSON.parse(this.responseText); let output = ''; // We can't just output the data, we need to loop through customers.forEach(function(customer) { output += ` <ul> <li>ID: ${customer.id}</li> <li>Name: ${customer.name}</li> <li>Company: ${customer.company}</li> <li>Phone: ${customer.phone}</li> </ul> `; }); document.getElementById('customers').innerHTML = output; } } xhr.send(); e.preventDefault(); }
Book List Application with JavaScript ES6
HTML
JavaScript
Book List Application with JavaScript ES5
I have created a simple book list application with JavaScript ES5.
HTML
JavaScript
Number Guesser JavaScript app with Skeleton UI
HTML
JavaScript
Simple Calculator with Vanilla JavaScript
Loan calculator with Bootstrap UI
HTML
JavaScript
[Read more…] about Simple Calculator with Vanilla JavaScriptTask List Application with Vanilla JavaScript
Swiper Plugin for WordPress
Simple Bar – Scroll Bar
funtcions.php
// ========================================================================= // SIMPLE BAR // ========================================================================= function simple_bar() { if(is_front_page()){ wp_enqueue_style('simple_bar_css', 'https://unpkg.com/simplebar@latest/dist/simplebar.min.css'); wp_enqueue_script('simple_bar_js', 'https://unpkg.com/simplebar@latest/dist/simplebar.js', array(), '4.1.0', true ); } } add_action( 'wp_enqueue_scripts', 'simple_bar' );
HTML
<div class="demo1" data-simplebar> <h2>Scroll me!</h2> <p>Some more content</p> <p class="odd">Some content</p> <p>Some more content</p> <p class="odd">Some content</p> <p>Some more content</p> <p class="odd">Some content</p> <p>Some more content</p> <p class="odd">Scroll me!</p> <p>Some more content</p> <p class="odd">Some content</p> <p>Some more content</p> <p class="odd">Some content</p> <p>Some more content</p> <p class="odd">Some content</p> <p>Some more content</p> <p class="odd">Scroll me!</p> <p>Some more content</p> <p class="odd">Some content</p> <p>Some more content</p> <p class="odd">Some content</p> <p>Some more content</p> <p class="odd">Some content</p> <p>Some more content</p> <p class="odd">Some content</p> <p>Some more content</p> <p class="odd">Some content</p> <p>Some more content</p> </div>
CSS
.demo1 { height: 376px; max-width: 100%; }
Get videos from channel by YouTube Data API
Hide header when scrolling down, show it when scrolling up in Genesis
JavaScript
// ========================================================================= // SMART HEADER // ========================================================================= add_action('wp_footer','header_sticky_script'); function header_sticky_script() { ?> <script> // Hide Header on Scroll Down but Show when Scroll Up var didScroll; var lastScrollTop = 0; var delta = 5; var navbarHeight = ''; jQuery(window).load( function() { navbarHeight = jQuery('header.site-header').outerHeight(); jQuery('body').css('paddingTop',navbarHeight); }); jQuery(window).scroll(function(event){ didScroll = true; }); setInterval(function() { if (didScroll) { ghasScrolled(); didScroll = false; } }, 250); function hasScrolled() { var st = jQuery(this).scrollTop(); // Make sure to scroll more than delta if(Math.abs(lastScrollTop - st) <= delta) return; // If scrolled down and are past the navbar // This is necessary so you never see what is "behind" the navbar. if (st > lastScrollTop && st > navbarHeight){ // Scroll Down jQuery('header.site-header').css('top',-navbarHeight).removeClass('shadow'); } else { // Scroll Up if(st + jQuery(window).height() < jQuery(document).height()) { jQuery('header.site-header').css('top',0).addClass('shadow'); } } if (st < 15){ jQuery('header.site-header').css('top',0).removeClass('shadow'); } lastScrollTop = st; } </script> <?php }
CSS
/* Smart Header */ header.site-header { position: fixed; top: 0; transition: top 0.3s ease-in-out; width: 100%; z-index: 9; left: 0; right: 0; } header.site-header.shadow { -webkit-box-shadow: 0 0 50px rgba(0,0,0,.15); box-shadow: 0 0 50px rgba(0,0,0,.15); } body.admin-bar header.site-header{ top: 32px; } @media only screen and (max-width: 780px) { body.admin-bar header.site-header{ top: 46px; } }
Remove only the clicked list item from unordered list – parentNode
const toggleList = document.getElementById('toggleList'); const listDiv = document.querySelector('.list'); const descriptionInput = document.querySelector('input.description'); const descriptionP = document.querySelector('p.description'); const descriptionButton = document.querySelector('button.description'); const listUl = listDiv.querySelector('ul'); const addItemInput = document.querySelector('input.addItemInput'); const addItemButton = document.querySelector('button.addItemButton'); listUl.addEventListener('click', (event) => { if (event.target.tagName == 'BUTTON') { let li = event.target.parentNode; let ul = li.parentNode; ul.removeChild(li); } }); toggleList.addEventListener('click', () => { if (listDiv.style.display == 'none') { toggleList.textContent = 'Hide list'; listDiv.style.display = 'block'; } else { toggleList.textContent = 'Show list'; listDiv.style.display = 'none'; } }); descriptionButton.addEventListener('click', () => { descriptionP.innerHTML = descriptionInput.value + ':'; descriptionInput.value = ''; }); addItemButton.addEventListener('click', () => { let ul = document.getElementsByTagName('ul')[0]; let li = document.createElement('li'); li.textContent = addItemInput.value; ul.appendChild(li); addItemInput.value = ''; });
Add class only to clicked element with JS
jQuery(document).on('click', function() { jQuery('.collapse').removeClass("show"); }); jQuery(".collapse").click(function(event) { // remove classes from all jQuery('.show').removeClass('show'); // add class to the one we clicked jQuery('.collapse', this).addBack(this).addClass("show"); event.stopPropagation(); });