Skip to content

Instantly share code, notes, and snippets.

Avatar

w3collective

View GitHub Profile
@w3collective
w3collective / js-scroll-to-top-button.html
Created May 23, 2022
How to create a scroll to top button with JavaScript
View js-scroll-to-top-button.html
<!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
w3collective / restrict-file-upload-size.html
Created May 21, 2022
Restrict file upload size using JavaScript
View restrict-file-upload-size.html
<!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
w3collective / autocomplete-search-javascript.html
Created Mar 23, 2022
Autocomplete search using vanilla JavaScript
View autocomplete-search-javascript.html
<!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
w3collective / currency-converter.html
Created Mar 18, 2022
Currency converter with HTML & JavaScript
View currency-converter.html
<!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 &amp; JavaScript</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<form>
@w3collective
w3collective / file-extension-javascript.html
Created Mar 8, 2022
How to get file extensions using JavaScript
View file-extension-javascript.html
<!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>
@w3collective
w3collective / tailwind-card-component.html
Created Mar 2, 2022
Style a material design card component with Tailwind CSS
View tailwind-card-component.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Style a material design card component with Tailwind CSS</title>
<link rel="stylesheet" href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" />
</head>
<body class="p-4 pt-16 bg-gray-200">
<div class="bg-white rounded shadow max-w-md mx-auto">
@w3collective
w3collective / toggle-password.html
Created Feb 28, 2022
Toggle password visibility using JavaScript
View toggle-password.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Add a “Show Password” checkbox to a login form with JavaScript</title>
<style>
#password {
background-image: url("https://img.icons8.com/material-sharp/20/000000/visible.png");
background-position: 97% center;
@w3collective
w3collective / keyboard-shortcut.js
Last active Feb 28, 2022
How to create keyboard shortcuts for web apps with JavaScript
View keyboard-shortcut.js
let keyDown = {
'c': false,
'p': false,
's': false,
'Meta': false,
'Control': false
};
document.addEventListener('keydown', handleKeydown);
function handleKeydown(e) {
e.preventDefault();
@w3collective
w3collective / digital-clock.js
Created Feb 9, 2022
Digital clock using JavaScript
View digital-clock.js
const clock = document.createElement("div");
document.body.appendChild(clock);
const getTime = () => {
const date = new Date();
let hour = date.getHours();
let min = date.getMinutes();
let sec = date.getSeconds();
hour = (hour < 10) ? "0" + hour : hour;
min = (min < 10) ? "0" + min : min;
@w3collective
w3collective / alpine-accordion.html
Last active Mar 23, 2022
Accordion component built with Alpine.js & Tailwind CSS
View alpine-accordion.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Alpine.js Accordion</title>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />
<script src="https://unpkg.com/alpinejs" defer></script>
</head>
<body>