{"id":4908,"date":"2025-01-08T10:22:38","date_gmt":"2025-01-08T15:22:38","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=4908"},"modified":"2025-01-08T10:22:39","modified_gmt":"2025-01-08T15:22:39","slug":"sharing-a-variable-across-html-css-and-javascript","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/sharing-a-variable-across-html-css-and-javascript\/","title":{"rendered":"Sharing a Variable Across HTML, CSS, and JavaScript"},"content":{"rendered":"\n

My kid is in a little phase where word search puzzles are really fun. She likes doing them, and then possibly because we share blood, she immediately started to want to make<\/em> them. I figured it would be a fun little recreational coding job to build a maker, so I did that: Word Search Puzzle Maker<\/a>. It’s not fancy, you just write in your words then a button click will fill in the un-filled spaces with random letters and you’re good to print it out.<\/p>\n\n\n\n

One of the configuration options for the “maker” is how big you want to build the grid. A 10\u00d710 grid is the default, but it’s settable by just setting a variable in one place<\/strong>. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

It turns out it’s useful to have this variable in all three of the important front-end technologies at play: the HTML, CSS, and JavaScript. The relevant variable here is size<\/code>, which represents the number of cells across and tall the grid is. <\/p>\n\n\n\n

    \n
  • HTML<\/strong> \u2014 Well, Pug, actually. Pug generates HTML, and having the size<\/code> there means I can write a loop that generates the number of elements in the grid the way I need.<\/li>\n\n\n\n
  • CSS<\/strong> \u2014 Having the size<\/code> there means I can set up the CSS grid with the appropriate columns\/rows. <\/li>\n\n\n\n
  • JavaScript <\/strong>\u2014 By having the size<\/code> variable available there, I was able to implement arrow key navigation fairly easily which helped the experience of setting new words.<\/li>\n<\/ul>\n\n\n\n

    It all starts with that Pug code, so, ya know, sorry if that’s cheating. But here’s the rub:<\/p>\n\n\n

    - const<\/span> size = 10<\/span>;\nscript \n  | window.size = #{size};<\/span>\n  | document.documentElement.style.setProperty('--size'<\/span>, #{size});<\/span><\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
    The dash (-<\/code>) in that Pug code essentially means “this is JavaScript”, and the Node process that runs to create the HTML runs it. That means I can use the variable later to create the grid.<\/p>\n\n\n
    .grid\n  - for (let i = 0; i < size<\/span>**2<\/span>; i<\/span>++)\n    .letter<\/span>(data-index<\/span>=i)<\/span>\n      input<\/span>(maxlength<\/span>=1,<\/span> matches<\/span>=\"[A-Za-z]\"<\/span>)<\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
    The variable gets passed from Pug into client-side JavaScript by making a script tag and creating a variable off the window<\/code> object. A little variable interpolation makes that possible. <\/p>\n\n\n\n
    The variable gets passed to CSS in a similar fashion, using client-side JavaScript to call setProperty<\/code> on the documentElement<\/code>. That CSS custom property will then cascade to wherever we need it. I can use it on another element like this:<\/p>\n\n\n
    .grid<\/span> {\n  display<\/span>: grid;\n  grid-template-columns<\/span>: repeat<\/span>(var(--size), 1<\/span>fr);\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
    That’s it really. I just got a kick out of setting a variable in one place and making use of it in three languages. <\/p>\n\n\n\n