Steve Shead steveshead

💭

Inspired by genius - driven by passion

Just a creative guy playing around with code.

steveshead / index.html

Created January 9, 2021 02:25

[Javascript Numbers Game] - numbers guessing game built in javascript

	<!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" />
	<title>Guess My Number!</title>
	</head>
	<body>

steveshead / index.html

Created January 9, 2021 17:22

[Javascript Guessing Game] - javascript two player number guessing game #javascript #game

	<!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" />
	<title>Pig Game</title>
	</head>
	<body>

steveshead / script.js

Last active January 16, 2021 16:04

[Javascript - Mask Credit Card Numbers] - basic - function to mask all but the last 4 numbers of a 16 digit credit card number

	const maskCreditCard = function (number) {
	const str = number + '';
	const last = str.slice(-4);
	if (str.length !== 16) {
	return ('The credit card number is incorrect');
	} else {
	return last.padStart(str.length, '*');
	}
	}

steveshead / script.js

Last active January 16, 2021 16:05

[Javascript - Captialize Names] - function to capitalize the first letter of each word in a string

	const capitaliizeName = function (name) {
	const names = name.split(' ');
	const namesUpper = [];

	for (const n of names) {
	// namesUpper.push(n[0].toUpperCase() + n.slice(1));
	namesUpper.push(n.replace(n[0], n[0].toUpperCase()));
	}
	return (namesUpper.join(' '));
	};

steveshead / script.js

Last active January 16, 2021 16:07

[Javascript - find specific words] - function to find specific words in a string and respond accordingly

	const checkBaggage = function (items) {
	const baggage = items.toLowerCase();
	if (baggage.includes('knife') \|\| baggage.includes('gun')) {
	return ('You are NOT allowed on board');
	} else {
	return ('Welcome aboard');
	}

	};

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())}`;

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 / 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 / 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 / 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');