| import * as luxon from 'luxon'; | |
| document.addEventListener('DOMContentLoaded', () => { | |
| console.log('page is ready'); | |
| let output = document.querySelector('.output'); | |
| let DateTime = luxon.DateTime; | |
| let today = DateTime.local(); | |
| let f = { month: 'long', day: '2-digit' }; | |
| let newDt = today.set({ month: 12 }); | |
| output.textContent = newDt.setLocale('fr-CA').toLocaleString(f); | |
| }); |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
| <meta name="viewport" content="width=device-width,initial-scale=1.0" /> | |
| <link rel="stylesheet" href="main.css" /> | |
| <title>Cool Website</title> | |
| </head> | |
| <body> | |
| <header> | |
| <h1>Import Modules with Import Maps</h1> | |
| </header> | |
| <main> | |
| <h2>Import Map for Luxon</h2> | |
| <p class="output"></p> | |
| <p>Luxon Video: https://www.youtube.com/watch?v=vAuUzEwTbck</p> | |
| </main> | |
| <footer> | |
| <p>©</p> | |
| </footer> | |
| <script type="importmap"> | |
| { | |
| "imports": { | |
| "luxon": "./node_modules/luxon/src/luxon.js" | |
| } | |
| } | |
| </script> | |
| <script src="./app.js" type="module"></script> | |
| </body> | |
| </html> |
| *, | |
| *::before, | |
| *::after { | |
| padding: 0; | |
| margin: 0; | |
| box-sizing: border-box; | |
| } | |
| html { | |
| font-size: 20px; | |
| font-weight: 300; | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, | |
| Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; | |
| line-height: 1.5; | |
| } | |
| body { | |
| min-height: 100vh; | |
| background-color: #333; | |
| color: #eee; | |
| } | |
| header, | |
| main, | |
| footer { | |
| width: 80vw; | |
| padding: 1rem 2rem; | |
| margin: 0 auto; | |
| } | |
| header h1 { | |
| color: orange; | |
| } | |
| header h2 { | |
| color: orangered; | |
| } | |
| p { | |
| line-height: 1.7; | |
| margin: 1.5rem 0; | |
| } |