Orangenhain/sieve.html

## sieve.html
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>
            Sieve of Eratosthenes using CSS3 selectors (+ some JS)
        </title>
        <style type="text/css">
            #sieve {
                background-color: #EEE;
                padding:30px;
            }
            .number {
                background-color: darkorange;
                display: inline-block;
                border: 1px solid black;
                padding: 15px;
            }
            input[type="text"] {
                width: 50px;
            }
        </style>

        <style type="text/css" title="sieveRules">
            .number:first-child {
                background-color: white;
            }
            .number:nth-of-type(2n+4) {
                background-color: white;
            }
        </style>

        <script type="text/javascript">
            var lastNumber = 0;

            function getStyleSheet(){
                for(var i=0; i < document.styleSheets.length; i++) {
                    var sheet = document.styleSheets[i]
                    if (sheet.title == 'sieveRules') {
                        return sheet
                    }
                }
            }

            function findNextMarked(lastKnownPrime){
                var step = (lastKnownPrime >= 3 ? 2 : 1 )
                var candidate = lastKnownPrime + step;

                numbers = document.getElementById('sieve').children
                while(candidate <= numbers.length) {
                    if (window.getComputedStyle(numbers[candidate - 1])["background-color"] != "rgb(255, 255, 255)" ) {
                        return candidate
                    }
                    candidate += step
                }
            }

            function startProgressIndicator(){
                console.log(new Date().getTime())
            }

            function stopProgressIndictator(){
                console.log(new Date().getTime())
            }

            function addNewRule(lastPrime, lastNumberToCheck) {
                newPrime = findNextMarked(lastPrime)

                if (newPrime > lastNumberToCheck) {
                    stopProgressIndictator()
                    return
                }

                var rule = ".number:nth-of-type("+ newPrime + "n+" + 2*newPrime + ") { background-color: white; }"
                getStyleSheet().insertRule(rule, 2)

                setTimeout(function() {
                    addNewRule(newPrime, lastNumberToCheck)
                }, 100)
            }

            function createSieve(){
                var sieve = document.getElementById("sieve")
                var stylesheet = getStyleSheet()
                var maxNumber = document.getElementById("maxNumberInput").value
                var lastNumberToCheck = Math.ceil(Math.sqrt(maxNumber))

                // empty sieve
                while (sieve.hasChildNodes()) { sieve.removeChild(sieve.firstChild) }

                // empty CSS rules
                if(typeof stylesheet.deleteRule == "undefined"){
                    while (stylesheet.rules.length > 2) { stylesheet.removeRule(2) }        // Safari
                } else {
                    while (stylesheet.cssRules.length > 2) { stylesheet.deleteRule(2) }     // FF
                }

                // create all number divs & add all of them at once
                var frag = document.createDocumentFragment()
                for (var i = 1; i <= maxNumber ; i++) {
                    var div = document.createElement("div")
                    div.innerHTML = i
                    div.className = "number"
                    frag.appendChild(div)
                }
                sieve.appendChild(frag)

                lastNumber = maxNumber

                // generate CSS rules
                startProgressIndicator()
                addNewRule(1, lastNumberToCheck)
             }
        </script>
    </head>
    <body onload="createSieve()">
        <form action="javascript:createSieve()">
            <label for="maxNumberInput">Show prime numbers up to: </label>
            <input type="text" name="ceil" value="100" id="maxNumberInput">
            <input type="submit" value="Compute &rarr;">
        </form>
        <div id="sieve">
        </div>
    </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>
	Sieve of Eratosthenes using CSS3 selectors (+ some JS)
	</title>
	<style type="text/css">
	#sieve {
	background-color: #EEE;
	padding:30px;
	}
	.number {
	background-color: darkorange;
	display: inline-block;
	border: 1px solid black;
	padding: 15px;
	}
	input[type="text"] {
	width: 50px;
	}
	</style>

	<style type="text/css" title="sieveRules">
	.number:first-child {
	background-color: white;
	}
	.number:nth-of-type(2n+4) {
	background-color: white;
	}
	</style>

	<script type="text/javascript">
	var lastNumber = 0;

	function getStyleSheet(){
	for(var i=0; i < document.styleSheets.length; i++) {
	var sheet = document.styleSheets[i]
	if (sheet.title == 'sieveRules') {
	return sheet
	}
	}
	}

	function findNextMarked(lastKnownPrime){
	var step = (lastKnownPrime >= 3 ? 2 : 1 )
	var candidate = lastKnownPrime + step;

	numbers = document.getElementById('sieve').children
	while(candidate <= numbers.length) {
	if (window.getComputedStyle(numbers[candidate - 1])["background-color"] != "rgb(255, 255, 255)" ) {
	return candidate
	}
	candidate += step
	}
	}

	function startProgressIndicator(){
	console.log(new Date().getTime())
	}

	function stopProgressIndictator(){
	console.log(new Date().getTime())
	}

	function addNewRule(lastPrime, lastNumberToCheck) {
	newPrime = findNextMarked(lastPrime)

	if (newPrime > lastNumberToCheck) {
	stopProgressIndictator()
	return
	}

	var rule = ".number:nth-of-type("+ newPrime + "n+" + 2*newPrime + ") { background-color: white; }"
	getStyleSheet().insertRule(rule, 2)

	setTimeout(function() {
	addNewRule(newPrime, lastNumberToCheck)
	}, 100)
	}

	function createSieve(){
	var sieve = document.getElementById("sieve")
	var stylesheet = getStyleSheet()
	var maxNumber = document.getElementById("maxNumberInput").value
	var lastNumberToCheck = Math.ceil(Math.sqrt(maxNumber))

	// empty sieve
	while (sieve.hasChildNodes()) { sieve.removeChild(sieve.firstChild) }

	// empty CSS rules
	if(typeof stylesheet.deleteRule == "undefined"){
	while (stylesheet.rules.length > 2) { stylesheet.removeRule(2) } // Safari
	} else {
	while (stylesheet.cssRules.length > 2) { stylesheet.deleteRule(2) } // FF
	}

	// create all number divs & add all of them at once
	var frag = document.createDocumentFragment()
	for (var i = 1; i <= maxNumber ; i++) {
	var div = document.createElement("div")
	div.innerHTML = i
	div.className = "number"
	frag.appendChild(div)
	}
	sieve.appendChild(frag)

	lastNumber = maxNumber

	// generate CSS rules
	startProgressIndicator()
	addNewRule(1, lastNumberToCheck)
	}
	</script>
	</head>
	<body onload="createSieve()">
	<form action="javascript:createSieve()">
	<label for="maxNumberInput">Show prime numbers up to: </label>
	<input type="text" name="ceil" value="100" id="maxNumberInput">
	<input type="submit" value="Compute →">
	</form>
	<div id="sieve">
	</div>
	</body>
	</html>