Skip to content

Instantly share code, notes, and snippets.

View steveshead's full-sized avatar
💭
Inspired by genius - driven by passion

Steve Shead steveshead

💭
Inspired by genius - driven by passion
5 followers · 1 following
View GitHub Profile
@steveshead
steveshead / index.html
Created July 3, 2021 14:44
[ Ajax - show sub-categories based on category selected ] - Use ajax to show the sub-categories based on the primary category selected
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/6b773fe9e4.js" crossorigin="anonymous"></script>
<title>Ajax Template</title>
<style>
@steveshead
steveshead / favorite.php
Created July 3, 2021 14:40
[Ajax - favorite a blog post ] - Using ajax to update without page refresh
<?php
session_start();
if(!isset($_SESSION['favorites'])) { $_SESSION['favorites'] = []; }
function is_ajax_request() {
return isset($_SERVER['HTTP_X_REQUESTED_WITH']) &&
$_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest';
}
@steveshead
steveshead / script.js
Created April 26, 2021 02:08
[Javascript - Highlight nav item on scroll ] - vanilla javascript scroll spy
window.addEventListener('DOMContentLoaded', () => {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
const id = entry.target.getAttribute('id');
if (entry.intersectionRatio > 0) {
document.querySelector(`nav li a[href="#${id}"]`).parentElement.classList.add('active');
} else {
document.querySelector(`nav li a[href="#${id}"]`).parentElement.classList.remove('active');
}
@steveshead
steveshead / index.html
Created February 27, 2021 16:12
[Javascript - simple, dismissable popup] - a simple, dismissable popup on page load example
<!-- Not my work - edited for my use -->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
@steveshead
steveshead / index.html
Last active February 21, 2021 02:00
[Javascript - Promisifying the Geolocation API] - promisifying the geolocation API to show country details in HTML, and location details in the console.
<!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="style.css" />
<script defer src="script.js"></script>
<script defer src="assignments.js"></script>
<title>Asynchronous JavaScript</title>
@steveshead
steveshead / script.js
Created February 6, 2021 23:44
[Javascript Lazy Loading Images] Lazy loading images with vanilla javascript and the Intersection Observer API
const imgTargets = document.querySelectorAll('img[data-src]');
const loadImg = function (entries, observer) {
const [entry] = entries;
if (!entry.isIntersecting) return;
entry.target.src = entry.target.dataset.src;
entry.target.addEventListener('load', function () {
entry.target.classList.remove('lazy-img');
@steveshead
steveshead / script.js
Last active February 6, 2021 18:11
[Javascript Sticky Nav] vanilla javascript sticky nav with offset using the Intersection Observer API
const header = document.querySelector('.header');
const navHeight = nav.getBoundingClientRect().height;
const stickyNav = function (entries) {
const [entry] = entries;
if (!entry.isIntersecting) nav.classList.add('sticky');
else nav.classList.remove('sticky');
};
@steveshead
steveshead / script.js
Created January 31, 2021 04:27
[Javascript function to format currency] - using Intl formatting to convert currency and locale
const formatCurrency = function (value, locale, currency) {
new Intl.NumberFormat(locale, {
style: 'currency',
currency: currency,
}).format(value);
};
@steveshead
steveshead / script.js
Last active January 30, 2021 05:08
[Javascript Random Number Generator] - create a constant that takes two number inputs to generate a random number between those two number
const randomInt = (min, max) => Math.floor(Math.random() * (max - min) + 1) + min;
console.log(randomInt(10, 20));
// Used floor instead of trunc so negative numbers can be used
@steveshead
steveshead / script.js
Created January 16, 2021 19:04
[Javascript - convert and append] - using a textarea and button, convert underscore_case to camelCase, pad and append
document.body.append(document.createElement('textarea'));
document.body.append(document.createElement('button'));
document.querySelector('button').addEventListener('click', function () {
const text = document.querySelector('textarea').value;
const rows = text.split('\n');
for (const [i, row] of rows.entries()) {
const [first, second] = row.toLowerCase().trim().split('_');
const output = `${first}${second.replace(second[0], second[0].toUpperCase())}`;