JS1k: The JavaScript code golfing competition

b.bgColor=i=j=0;'H9xc#He3yk#Li0zmBe1y9B8w5C9sdNqt#Op8#F2qg#Ne3mm#Na0nbMg1jvAl7k6Si8g5P9h1ScyCl2f9#Ar3kn#K0b6Ca16sSc6d8Tie7VfmCrbgMnciFe7xCo9dNi1lCu7zZn5yGa7awGe8bvAsb4Se9f9Br2aq~Kr3eg#Rb0bzSr1auY67bZr6mNb47Mo5jTc3vRu5jRh3jPd66Ag33Cd8lIn786SnbvSb8d8TemcI2daXe3id#Cs0frBa1kxLa4i7CeegPr9jNdboPm6fSmegEubsGdjdTbgxDyjqHojdEriqTmg9Yb5vLu443Hf66rTa6hW7eRe6vOsaxIr9cPta6Au8bHgb9~Tl7eoPbfeBid8Po64At21tRn3s4#Fr0nsRa1p1Ac5kpThriPahmUtxNpk3PuwgAmmkCmqlBkjhCfniEsj6Fmq0MdloNohcLr5tqRf6peDbl3SgmbBhcfHsotMtkiDslrRghfCnioNh7edFlflMc8hLvciTs287Og313#X'.replace(/(..*?)(\d)?(..)(#)?(~)?(?=[A-Z])/g,(u,v,w,x,y,z)=>{b.innerHTML+=`<center style=color:#fff;font:.8vw/.2vw'arial';width:2.6vw;padding:.5vw;position:absolute;margin:${~~(j/18)*3.8+2}vw+${j%18*3.8+14}vw;background:hsl(${w?t=w*35:t},70%,40%)>${i+1} ${y?'G':z?'L':'S'}<h2 style=text-shadow:2px+2px#222>${v}</h2>`+((parseInt(x,36)+256*i-(68<i?570:1100))/100).toFixed(2)+["83121"[i]]+'* '[42!=i^60!=i^83>i];j+={0:17,3:11,11:11,69:-68,55:54,87:54,101:-68}[i++]|1});b.style.height="42vw"

Yi5iZ0NvbG9yPWk9aj0wOydIOXhjI0hlM3lrI0xpMHptQmUxeTlCOHc1QzlzZE5xdCNPcDgjRjJxZyNOZTNtbSNOYTBuYk1nMWp2QWw3azZTaThnNVA5aDFTY3lDbDJmOSNBcjNrbiNLMGI2Q2ExNnNTYzZkOFRpZTdWZm1DcmJnTW5jaUZlN3hDbzlkTmkxbEN1N3pabjV5R2E3YXdHZThidkFzYjRTZTlmOUJyMmFxfktyM2VnI1JiMGJ6U3IxYXVZNjdiWnI2bU5iNDdNbzVqVGMzdlJ1NWpSaDNqUGQ2NkFnMzNDZDhsSW43ODZTbmJ2U2I4ZDhUZW1jSTJkYVhlM2lkI0NzMGZyQmExa3hMYTRpN0NlZWdQcjlqTmRib1BtNmZTbWVnRXVic0dkamRUYmd4RHlqcUhvamRFcmlxVG1nOVliNXZMdTQ0M0hmNjZyVGE2aFc3ZVJlNnZPc2F4SXI5Y1B0YTZBdThiSGdiOX5UbDdlb1BiZmVCaWQ4UG82NEF0MjF0Um4zczQjRnIwbnNSYTFwMUFjNWtwVGhyaVBhaG1VdHhOcGszUHV3Z0FtbWtDbXFsQmtqaENmbmlFc2o2Rm1xME1kbG9Ob2hjTHI1dHFSZjZwZURibDNTZ21iQmhjZkhzb3RNdGtpRHNsclJnaGZDbmlvTmg3ZWRGbGZsTWM4aEx2Y2lUczI4N09nMzEzI1gnLnJlcGxhY2UoLyguLio/KShcZCk/KC4uKSgjKT8ofik/KD89W0EtWl0pL2csKHUsdix3LHgseSx6KT0+e2IuaW5uZXJIVE1MKz1gPGNlbnRlciBzdHlsZT1jb2xvcjojZmZmO2ZvbnQ6Ljh2dy8uMnZ3J2FyaWFsJzt3aWR0aDoyLjZ2dztwYWRkaW5nOi41dnc7cG9zaXRpb246YWJzb2x1dGU7bWFyZ2luOiR7fn4oai8xOCkqMy44KzJ9dncrJHtqJTE4KjMuOCsxNH12dztiYWNrZ3JvdW5kOmhzbCgke3c/dD13KjM1OnR9LDcwJSw0MCUpPiR7aSsxfSAke3k/J0cnOno/J0wnOidTJ308aDIgc3R5bGU9dGV4dC1zaGFkb3c6MnB4KzJweCMyMjI+JHt2fTwvaDI+YCsoKHBhcnNlSW50KHgsMzYpKzI1NippLSg2ODxpPzU3MDoxMTAwKSkvMTAwKS50b0ZpeGVkKDIpK1siODMxMjEiW2ldXSsnKiAnWzQyIT1pXjYwIT1pXjgzPmldO2orPXswOjE3LDM6MTEsMTE6MTEsNjk6LTY4LDU1OjU0LDg3OjU0LDEwMTotNjh9W2krK118MX0pO2Iuc3R5bGUuaGVpZ2h0PSI0MnZ3Ig==

// ===================
//  PERIOD1k reloaded
// ===================

// A periodic table of chemical elements in just 1kb of HTML & JS (ES6).

// The attributes "bgcolor=0" sets the page background in black. Also:
// initialize i (element counter: 0 to 117).
// initialize j (cell counter: 0 to 187. This count include elements (in colors), and the holes (in black).
b.bgColor = i = j = 0;

// Dataset:
// Let's store 4 pieces of information about eact of the the 118 known elements into a big string.
// Each line represents an element (line breaks are added here for more readability), and contains:
// - The element's abbreviated name (1 to 2 characters, starting with a capital letter).
// - The element's type, but only if it's different from the previous element, (1 digit 0-9, optional).
// - The element's relative atomic mass (encoded on two characters).
// - The element's state at room temperature ("~" for liquid or "#" for gas, optional: solid by default).

'H9xc#\
He3yk#\
Li0zm\
Be1y9\
B8w5\
C9sd\
Nqt#\
Op8#\
F2qg#\
Ne3mm#\
Na0nb\
Mg1jv\
Al7k6\
Si8g5\
P9h1\
Scy\
Cl2f9#\
Ar3kn#\
K0b6\
Ca16s\
Sc6d8\
Tie7\
Vfm\
Crbg\
Mnci\
Fe7x\
Co9d\
Ni1l\
Cu7z\
Zn5y\
Ga7aw\
Ge8bv\
Asb4\
Se9f9\
Br2aq~\
Kr3eg#\
Rb0bz\
Sr1au\
Y67b\
Zr6m\
Nb47\
Mo5j\
Tc3v\
Ru5j\
Rh3j\
Pd66\
Ag33\
Cd8l\
In786\
Snbv\
Sb8d8\
Temc\
I2da\
Xe3id#\
Cs0fr\
Ba1kx\
La4i7\
Ceeg\
Pr9j\
Ndbo\
Pm6f\
Smeg\
Eubs\
Gdjd\
Tbgx\
Dyjq\
Hojd\
Eriq\
Tmg9\
Yb5v\
Lu43\
Hf66r\
Ta6h\
W7e\
Re6v\
Osax\
Ir9c\
Pta6\
Au8b\
Hgb9~\
Tl7eo\
Pbfe\
Bid8\
Po64\
At21t\
Rn3s4#\
Fr0ns\
Ra1p1\
Ac5kp\
Thri\
Pahm\
Utx\
Npk3\
Puwg\
Ammk\
Cmql\
Bkjh\
Cfni\
Esj6\
Fmq0\
Mdlo\
Nohc\
Lrtq\
Rf6pe\
Dbl3\
Sgmb\
Bhcf\
Hsot\
Mtki\
Dslr\
Rghf\
Cnio\
Nh7ed\
Flfl\
Mc8h\
Lvci\
Ts287\
Og313#\
H'

// The last uppercase char ("H") is just here to let the parser below interpret the 118th element correctly.
// The code below uses a replace() with a RegEx to separate the 118 elements, retrieve each piece of information, and output each cell of the periodic table in HTML.
// For each element, the RegEx:
// - Captures 1 or 2 letters (".*?" = non-greedy capture) = the element's name, the result is stored in the variable v.
// - Captures 1 optional digit ("\d") = the element's type, the result is stored in the variable w.
// - Captures 2 letters ("..") = the atomic mass, the result is stored in the variable x.
// - Captures 1 optional character "#" = "Gas", the result is stored in the variable y.
// - Captures 1 optional character "~" = "Liquid", the result is stored in the variable z.
// - Stops before the next uppercase letter (with the lookahead "(?=[A-Z])" at the end).
// We could have avoided the final "H" in the string with the lookahead "(?=[A-Z]|$)" but it would have been 1 byte longer.
.replace(/(..*?)(\d)?(..)(#)?(~)?(?=[A-Z])/g,(u,v,w,x,y,z) => {
  
  // Insert a center element in the page's body.
  // Dimensions in vw unit make the table responsive.
  // An ES6 template literal is used to avoid many concatenations.
  // The "font" css property is used to set the Arial font-family and a responsive font-size and line-height to the text.
  // The width is used to make the cells responsive (the height is automatically identical everywhere).
  // The position absolute and the margins are used to place precisely each cell in the page.
  b.innerHTML += `<center style=color:#fff;font:.8vw/.2vw'arial';width:2.6vw;padding:.5vw;position:absolute;margin:${
  
    // Top offset of the current cell = (period * 3.8 + 2)vw.
    // The period is the current line of the table: ~~(j/18).
    ~~(j / 18) * 3.8 + 2
    
  }vw+${
  
    // Left offset of the current cell = (group * 3.8 + 14)vw.
    // The group is the current column of the table: j%18.
    // The 14vw left offset helps centering the table horizontally.
    j % 18 * 3.8 + 14
    
  }vw;background:hsl(${
  
    // The cell's background is defined in HSL. The Hue (H) is equal to w (the element's type) * 35.
    // Saturation (S) is set to 70% and Light (L) is set to 40%.
    // If w is not null, its value is saved in the variable t.
    // If w is null, reuse the value stored in t (reuse the color of the previous cell "for free").
    // Legend:
    // - 0 (purple): non-metals: H, C, N, O, P, S, Se.
    // - 1 (brown): Alkaline earth metals – Be, Mg, Ca, Sr, Ba, Ra.
    // - 2 (yellow-green): Halogens – F, Cl, Br, I, At.
    // - 3 (green): Noble gases – He, Ne, Ar, Kr, Xe, Rn.
    // - 4 (pale green): Lanthanoids – La, Ce, Pr, Nd, Pm, Sm, Eu, Gd, Tb, Dy, Ho, Er, Tm, Yb, Lu.
    // - 5 (pale blue): Actinoids – Ac, Th, Pa, U, Np, Pu, Am, Cm, Bk, Cf, Es, Fm, Md, No, Lr.
    // - 6 (blue): Transition metals – Elements in groups 3 to 12.
    // - 7 (dark blue): poor metals: Al, Ga, In, Sn, Tl, Pb, Bi, Po.
    // - 8 (dark purple): Metalloids – B, Si, Ge, As, Sb, Te.
    // - 9 (red): Alkali metals – Li, Na, K, Rb, Cs, Fr.
    w ? t = w * 35 : t
  
  },70%,40%)>${
  
    // Element's atomic number (1 to 118)
    i + 1
    
  } ${
  
    // Element's state at room temperature (G = Gas / L = Liquid / S = Solid)
    y ? 'G' : z ? 'L' : 'S'
    
  }<h2 style=text-shadow:2px+2px#222>${
  
    // Element's name, inside a <h2> element with text-shadow.
    // "2px+2px#222" is similar to "2px 2px #222", but contains no space.
    // This allows to omit the style attribute's quotes.
    // <H2> is a block-level element, and as a result, it adds a convenient line break before and after itself.
    v
    
  }</h2>`
  
  // Starting here, it's shorter to concatenate the last two pieces of information (with +... ) than to include them in the template literal (with ${...}).
  +
  
  // Element's relative atomic mass.
  // (average weight of the element and its isotopes, pondered by their abundance, and compared to 1/12 of the mass of a carbon-12 element).
  // How it was encoded:
  // - the mass is multiplied by 100 to get rid of the decimal part (ex: 1.00 => 100 ... 294.21 => 29421).
  // - the number is converted to 2 ASCII chars using this magic formula: x=>(x-i*256+(i>68?570:1100)).toString(36) (ex: 100 => "xc" ... 29421 => "13")
  // This formula exploits the fact that the mass * 100 is nearly equal to 256 times the atomic number plus 570 (when i>68) or 1100 (when i<68).
  // The difference (between the mass * 100 and the atomic number * 256 + 570 or 1100) is smaller than 1295, and so it can be encoded on only two chars in base 36.
  // Here, the mass is decoded by performing exactly the opposite operation:
  ((parseInt(x,36) + 256 * i - (68 < i ? 570 : 1100)) / 100).toFixed(2)
  
  // Add a decimal to the 5 first elements' atomic mass (respectively 8, 3, 1, 2 and 1)
  + ["83121"[i]]
  
  // Add a "*" if the element is unstable a.k.a. has no stable isotope (elements 43, 61 and 84 to 118).
  // The following code is similar to '[42==i||60==i||83>i]', but shorter.
  + '* '[42 != i ^ 60 != i ^ 83 > i];
  
  // Adjust j to the position of the next ellement on the grid, or increment it by 1 by default.
  // - jump 17 cells after element 1.
  // - jump 11 cells after elements 4 and 12.
  // - jump 54 cells after elements 56 and 88.
  // - jump -68 cells after elements 70 and 102.
  // And finally, increment i (next element's index).
  j += {0:17, 3:11, 11:11, 55:54, 87:54, 69:-68, 101:-68}[i++] | 1
});

// Make the body (b) a little higher than the table. (if the screen is too short, the page will be scrollable).
b.style.height="42vw"

// No JS packing required, the minified code takes 1023 bytes. (and trying to pack it makes it bigger, so it's not interesting)