w3collective’s gists

w3collective / script.js

Last active September 7, 2022 07:47

Get the domain name from a URL in JavaScript

	const url = "https://www.example.com/blog?search=hello&world";
	let domain = (new URL(url));

	domain = domain.hostname;
	console.log(domain); //www.example.com

	// OR strip the www

	domain = domain.hostname.replace('www.','');
	console.log(domain); //example.com

w3collective / tailwind-login-form.html

Last active January 20, 2021 04:24

Login form with Tailwind CSS

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Tailwind CSS Login Form</title>
	<link rel="stylesheet" href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" />
	</head>
	<body class="flex h-screen bg-indigo-700">
	<div class="w-full max-w-xs m-auto bg-indigo-100 rounded p-5">

w3collective / tailwind-responsive-navbar.html

Last active September 9, 2023 00:49

Responsive navbar component with Tailwind CSS

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<title>Style a responsive navbar component with Tailwind CSS</title>
	<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />
	</head>
	<body>
	<nav class="flex flex-wrap items-center justify-between p-5 bg-blue-200">

w3collective / mouse-scroll-icon-css.html

Last active February 4, 2021 04:57

Animated scrolling mouse icon with CSS

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<title>Animated mouse scroll icon with CSS</title>
	<style>
	html {
	height: 100%;
	}
	body {

w3collective / cookie-track-returning-visitor.html

Created February 5, 2021 05:10

Using a cookie to track returning website visitors

w3collective / dynamic-favicon.js

Last active February 10, 2021 07:06

Change a website favicon dynamically using JavaScript

	const [month, day] = new Date().toLocaleDateString("en-US").split("/");

	let favicon;
	switch (month + day) {
	case "214":
	favicon = "💕";
	break;
	case "1031":
	favicon = "🎃";
	break;

w3collective / reading-progress-indicator.html

Created February 9, 2021 05:20

Reading progress indicator (on scroll) in JavaScript

	<!DOCTYPE html>
	<html lang="en" >
	<head>
	<meta charset="UTF-8">
	<title>Create a reading progress indicator (on scroll) in JavaScript</title>
	<style>
	#progress-bar {
	position: fixed;
	top: 0;
	left: 0;

w3collective / tailwind-pricing-table.html

Last active March 17, 2022 13:48

Responsive pricing table with Tailwind CSS

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<title>Responsive Pricing Table - Tailwind CSS</title>
	<link
	href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
	rel="stylesheet"
	/>

w3collective / pricing-table-flexbox.html

Created February 10, 2021 07:04

3 column pricing table layout with CSS flexbox

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<title>3 column pricing table layout with CSS flexbox</title>
	<style>
	body {
	background-color: #181b1d;
	font-family: sans-serif;
	}

w3collective / html-form-validation.html

Created February 18, 2021 04:47

Client side HTML form validation without JavaScript

	<!DOCTYPE html>
	<html lang="en" >
	<head>
	<meta charset="UTF-8">
	<title>HTML Form Validation</title>
	<style>
	body {
	font-family: sans-serif;
	}
	legend {