` ````
<html>
<head>
<link rel="stylesheet" type="text/css" href="assets/stylesheets/css/main.css">
</head>
<body>
<div class="tdc-grid"></div>
<script src="assets/js/jquery-3.2.1.min.js"></script>
<script src="assets/js/underscore.js"></script>
<script src="assets/js/sieve.js"></script>
</body>
</html>
```

` ````
.tdc-grid {
&-item {
display: inline-block;
float: left;
margin: 5px;
padding: 10px;
width: 30px;
border-radius: 2px;
text-align: center;
background: #c5d8fc;
color: white;
box-shadow: 0 0 1px 1px rgba(0,0,0,.1);
&.active {
background: #7ca7f8;
}
}
}
```

` ````
// Up to which number would you like to see the preceding primes?
let limit = 1000;
let SELECTORS = {
grid: '.tdc-grid',
grid_item: 'tdc-grid-item'
}
let CLASSES = {
active: 'active'
}
/*
* Return a list of primes (or non_primes) up to a certain limit
*/
let sieve = (lim) => {
let primes = [];
let non_primes = [];
for(let number = 2; number < Math.sqrt(lim); number++) {
if(!_.contains(non_primes, number)) {
for(let unmarked = Math.pow(number, 2); unmarked < lim; unmarked += number) {
non_primes.push(unmarked);
}
}
}
non_primes = _.sortBy(_.uniq(non_primes), n => n);
return _.filter(_.range(2, lim), n => !_.contains(non_primes, n));
};
/*
* Draw as many grid items as set in the parameters
*/
let drawGrid = (lim) => {
_.each(_.range(2, lim), number => {
$(SELECTORS.grid).append(`<div class="${SELECTORS.grid_item} number-${number}"> ${number} </div>`);
});
};
/*
* Give each prime number an active class to distinguish
*/
let drawPrimes = (primes) => {
_.each(primes, prime => {
$(`.number-${prime}`).addClass(CLASSES.active);
});
};
drawGrid(limit);
drawPrimes(sieve(limit));
```

999px

Loading
..................

Alt F
Opt F
Find & Replace

Also see: Tab Triggers