Skip to content

Instantly share code, notes, and snippets.

@peterc

peterc/index.html

Created October 13, 2023 13:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save peterc/eacf1b80cd0db85192951715241f3491 to your computer and use it in GitHub Desktop.
Save peterc/eacf1b80cd0db85192951715241f3491 to your computer and use it in GitHub Desktop.
Download ZIP
Basic example of using import maps and TailwindCSS in a buildless fashion
Raw
index.html
<!DOCTYPE html>
<!-- A totally pointless and overkill use of import maps
and Moment.js, in order to simply use the technology and
see it in action.. -->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Buildless example</title>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<script type="importmap">
{
"imports": {
"moment": "https://cdn.skypack.dev/moment@2.29.4"
}
}
</script>
<script src="main.js" type="module"></script>
</head>
<body class="bg-gray-200 flex justify-center items-center h-screen">
<div class="bg-white p-8 rounded-lg shadow-lg text-4xl w-1/2 text-center">
<span id="time"></span>
</div>
</body>
</html>
Raw
main.js
import moment from 'moment';
function displayTime() {
const timeDiv = document.getElementById('time');
timeDiv.innerHTML = moment().format('MMMM Do YYYY, h:mm:ss a');
}
function doStuff(e) {
displayTime();
setInterval(displayTime, 1000);
}
window.addEventListener("DOMContentLoaded", (e) => doStuff(e));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment