w3collective’s gists

w3collective / sidebar-navigation-menu,html

Created April 26, 2023 02:26

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Sidebar Navigation Menu</title>
	<style>
	nav {
	background-color: #ccc;
	position: fixed;

w3collective / geolocation.html

Created February 14, 2023 06:22

Using the HTML Geolocation API to display a users location on a map

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<title>Using the HTML Geolocation API to display a users location on a map</title>
	<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
	</head>

w3collective / bootstrap-resume.html

Created November 25, 2022 00:04

Single page HTML resume using Bootstrap 5

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Develop a single page HTML resume using Bootstrap 5</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
	</head>
	<body>
	<header class="bg-primary bg-gradient text-white py-5">

w3collective / screenshot.js

Created September 15, 2022 06:38

Capture website screenshots using Node.js and Puppeteer

	const puppeteer = require("puppeteer");
	const capture = async () => {
	const browser = await puppeteer.launch();
	const page = await browser.newPage();
	await page.setViewport({ width: 1024, height: 768 });
	await page.goto("https://www.wikipedia.org/");
	await page.screenshot({ path: "./screenshot.png" });
	await browser.close();
	};
	capture();

w3collective / css-tabs.html

Created August 4, 2022 06:32

CSS Tabs (No JavaScript required)

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>CSS Tabs</title>
	<style>
	.tabs {
	list-style: none;
	position: relative;

w3collective / js-scroll-to-top-button.html

Created May 23, 2022 06:43

How to create a scroll to top button with JavaScript

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<title>How to create a scroll to top button with JavaScript</title>
	<style>
	html,
	body {
	padding: 0;

w3collective / restrict-file-upload-size.html

Created May 21, 2022 23:40

Restrict file upload size using JavaScript

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Restrict file upload size using JavaScript</title>
	<link rel="stylesheet" href="style.css" />
	</head>
	<body>
	<form>

w3collective / autocomplete-search-javascript.html

Created March 23, 2022 23:26

Autocomplete search using vanilla JavaScript

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Create an autocomplete search using vanilla JavaScript</title>
	</head>
	<body>
	<div>
	<input type="text" id="autocomplete" placeholder="Select a color..."></input>

w3collective / currency-converter.html

Created March 18, 2022 00:28

Currency converter with HTML & JavaScript

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Currency converter with HTML & JavaScript</title>
	<link rel="stylesheet" href="style.css" />
	</head>
	<body>
	<form>

w3collective / file-extension-javascript.html

Created March 8, 2022 05:25

How to get file extensions using JavaScript

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Get file extension using JavaScript</title>
	<link rel="stylesheet" href="style.css" />
	</head>
	<body>
	<form>