Potherca/index.html

## index.html
<!DOCTYPE html>
<html>

<head>
    <title>All tags on dev.to</title>
    <style>
        body {
            font-family: -apple-system,
            BlinkMacSystemFont,
            "Segoe UI",
            Roboto,
            Helvetica,
            Arial,
            sans-serif,
            "Apple Color Emoji",
            "Segoe UI Emoji",
            "Segoe UI Symbol";
        }

        span::after {
            content: ")"
        }

        span::before {
            content: "("
        }

        div {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-evenly;
        }

        a {
            --size: 0.3em;
            border: 1px solid;
            border-radius: var(--size);
            color: inherit;
            margin: var(--size);
            padding: var(--size);
            text-decoration: none;
        }
    </style>
</head>

<body>
    <h1>
        All tags on dev.to
        <span>0</span>
    </h1>

    <div></div>

    <script>
        /*global fetch*/
        const listElement = document.querySelector('div')
        const countElement = document.querySelector('span')
        const url = 'https://dev.to/api/tags?per_page=1000&page='

        const fetchPage = async pageNumber =>
            fetch(url + pageNumber)
            .then(response => {
                if (response.ok) {
                    return response.json();
                }
                throw new Error('Oh-no');
            })
            .then(json => {
                countElement.textContent = parseInt(countElement.textContent, 10) + json.length

                json.forEach(item => {
                    listElement.insertAdjacentHTML('beforeend', `
                        <a
                            data-tag="${item.name}"
                            href="https://dev.to/t/${item.name}"
                            style="color:${item.bg_color_hex};background-color:${item.text_color_hex};"
                            title="${item.id}"
                        >#${item.name}</a>
                `)
                })
                console.log(json.length)
                return json.length
            })
            .catch(error => console.log('There has been a problem fetching tags', error))
            .then(count => {
                console.log(count)
                if (count > 0) {
                    fetchPage(++pageNumber)
                }
            })

        fetchPage(1)
    </script>
</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<title>All tags on dev.to</title>
	<style>
	body {
	font-family: -apple-system,
	BlinkMacSystemFont,
	"Segoe UI",
	Roboto,
	Helvetica,
	Arial,
	sans-serif,
	"Apple Color Emoji",
	"Segoe UI Emoji",
	"Segoe UI Symbol";
	}

	span::after {
	content: ")"
	}

	span::before {
	content: "("
	}

	div {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	}

	a {
	--size: 0.3em;
	border: 1px solid;
	border-radius: var(--size);
	color: inherit;
	margin: var(--size);
	padding: var(--size);
	text-decoration: none;
	}
	</style>
	</head>

	<body>
	<h1>
	All tags on dev.to
	<span>0</span>
	</h1>

	<div></div>

	<script>
	/global fetch/
	const listElement = document.querySelector('div')
	const countElement = document.querySelector('span')
	const url = 'https://dev.to/api/tags?per_page=1000&page='

	const fetchPage = async pageNumber =>
	fetch(url + pageNumber)
	.then(response => {
	if (response.ok) {
	return response.json();
	}
	throw new Error('Oh-no');
	})
	.then(json => {
	countElement.textContent = parseInt(countElement.textContent, 10) + json.length

	json.forEach(item => {
	listElement.insertAdjacentHTML('beforeend', `
	<a
	data-tag="${item.name}"
	href="https://dev.to/t/${item.name}"
	style="color:${item.bg_color_hex};background-color:${item.text_color_hex};"
	title="${item.id}"
	>#${item.name}</a>
	`)
	})
	console.log(json.length)
	return json.length
	})
	.catch(error => console.log('There has been a problem fetching tags', error))
	.then(count => {
	console.log(count)
	if (count > 0) {
	fetchPage(++pageNumber)
	}
	})

	fetchPage(1)
	</script>
	</body>

	</html>