Skip to content

Instantly share code, notes, and snippets.

@ryanpcmcquen

ryanpcmcquen/index.html

Created June 11, 2021 23:10
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 ryanpcmcquen/ca0a6a4af224777fe050f31ae19f645c to your computer and use it in GitHub Desktop.
Save ryanpcmcquen/ca0a6a4af224777fe050f31ae19f645c to your computer and use it in GitHub Desktop.
Download ZIP
Get all CSS colors as a HashMap directly from W3.
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="script.js"></script>
<pre class="css_color_map"></pre>
</body>
</html>
Raw
script.js
document.addEventListener('DOMContentLoaded', async () => {
const w3_color_page = await fetch('https://www.w3.org/TR/css-color-4/');
const parser = new DOMParser();
const new_doc = parser.parseFromString(
await w3_color_page.text(),
'text/html'
);
const color_table_rows = Array.from(
new_doc.querySelectorAll('.named-color-table tr')
);
const color_names = color_table_rows.slice(1).reduce((acc, row) => {
acc[row.querySelector('th').textContent.trim()] = row
.querySelector('td:nth-child(4)')
.textContent.trim();
return acc;
}, {});
console.log(color_names);
document.querySelector('.css_color_map').textContent =
JSON.stringify(color_names, null, '\t');
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment