Skip to content

Instantly share code, notes, and snippets.

View w3collective's full-sized avatar

w3collective

28 followers · 0 following
View GitHub Profile
@w3collective
w3collective / alpine-modal.html
Created August 2, 2021 04:06
Modal dialog with Alpine.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Alpine.js Modal Dialog</title>
<style>
[x-cloak] {
display: none !important;
}
@w3collective
w3collective / percentage-calculator-javascript.html
Last active July 25, 2021 23:44
3 percentage calculators using JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>JavaScript Percentage Calculators</title>
</head>
<body>
<h3>X is what % of Y?</h3>
<form id="calc1">
@w3collective
w3collective / preview-input-file-image.html
Created June 28, 2021 23:46
Preview selected image (input type=”file”) using JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Preview selected image (input type=”file”) using JavaScript</title>
<style>
body {
padding: 1em 0 0 1em;
}
@w3collective
w3collective / alpine-dropdown.html
Created June 28, 2021 05:46
Building a dropdown menu using Alpine.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Alpine.js - Dropdown menu</title>
<style>
.rotated {
transform: rotate(90deg);
display: inline-block;
@w3collective
w3collective / copy-clipboard-js.html
Created June 21, 2021 04:58
Copy text to the system clipboard on click with JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>JavaScript copy text to clipboard on click</title>
</head>
<body>
<label for="key-txt">Secret Key</label>
<input
@w3collective
w3collective / bootstrap-landing-page.html
Created June 2, 2021 01:01
<!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"
@w3collective
w3collective / save-data-localstorage.html
Created May 31, 2021 01:10
Save data in localStorage using JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Save data in localStorage using JavaScript</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<form id="note-form">
@w3collective
w3collective / html-css-tooltip.html
Last active April 13, 2021 00:15
HTML tooltip on hover using CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Tooltip</title>
<style>
body {
padding: 10%;
}
@w3collective
w3collective / skeleton-loading-screen.html
Created March 25, 2021 04:57
CSS skeleton loading screen animation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Skeleton loading screen</title>
<style>
.video:empty {
width: 315px;
height: 250px;
@w3collective
w3collective / dropdown-mega-menu.html
Last active January 27, 2022 20:20
Dropdown mega menu with pure CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dropdown mega menu with pure CSS</title>
<style>
.menu {
display: flex;
margin: 0;