Project Euler Top 10

In this example below you will see how to do a Project Euler Top 10 with some HTML / CSS and Javascript

Solution to Project Euler's top 10

Thumbnail
This awesome code was written by DavidArchibald, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright DavidArchibald ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Project Euler Top 10</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div ng-app="app" ng-controller="eulerController as euler">
  <span class="container">
    <slick dots="true" draggable="false" focus-on-select="false" class="projects-slideshow">
      <div>
        <p class="h1">Project 1</p>
        <p class="h3">Multiples of 3 and 5</p>
        <blockquote>If we list all the natural numbers below 10 that are multiples of 3 or 5, we get 3, 5, 6 and 9. The sum of these multiples is 23. Find the sum of all the multiples of 3 or 5 below 1000.
          <footer class="blockquote-footer"><a href="https://projecteuler.net/problem=1" target="_blank">ProjectEuler</a></footer>
        </blockquote>
        <p>Answer: {{euler.answers[0]}}.</p>
        <p class="alert alert-warning"><strong>Note:</strong> The solution is being computed, not pregenerated. See line 75.</p>
      </div>
      <div>
        <p class="h1">Project 2</p>
        <p class="h3">Even Fibonacci numbers</p>
        <blockquote>Each new term in the Fibonacci sequence is generated by adding the previous two terms. By starting with 1 and 2, the first 10 terms will be: 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, ... By considering the terms in the Fibonacci sequence whose values do not exceed four million, find the sum of the even-valued terms.
          <footer class="blockquote-footer"><a href="https://projecteuler.net/problem=2" target="_blank">ProjectEuler</a></footer>
        </blockquote>
        <p>Answer: {{euler.answers[1]}}.</p>
        <p class="alert alert-warning"><strong>Note:</strong> The solution is being computed, not pregenerated. See line 87.</p>
      </div>
      <div>
        <p class="h1">Project 3</p>
        <p class="h3">Largest prime factor</p>
        <blockquote>The prime factors of 13195 are 5, 7, 13 and 29. What is the largest prime factor of the number 600851475143?
          <footer class="blockquote-footer"><a href="https://projecteuler.net/problem=3" target="_blank">ProjectEuler</a></footer>
        </blockquote>
        <p>Answer: {{euler.answers[2]}}.</p>
        <p class="alert alert-warning"><strong>Note:</strong> The solution is being computed, not pregenerated. See line 101.</p>
      </div>
      <div>
        <p class="h1">Project 4</p>
        <p class="h3">Largest palindrome product</p>
        <blockquote>A palindromic number reads the same both ways. The largest palindrome made from the product of two 2-digit numbers is 9009 = 91 × 99. Find the largest palindrome made from the product of two 3-digit numbers.
          <footer class="blockquote-footer"><a href="https://projecteuler.net/problem=4" target="_blank">ProjectEuler</a></footer>
        </blockquote>
        <p>Answer: {{euler.answers[3]}}.</p>
        <p class="alert alert-warning"><strong>Note:</strong> The solution is being computed, not pregenerated. See line 109.</p>
      </div>
      <div>
        <p class="h1">Project 5</p>
        <p class="h3">Smallest multiple</p>
        <blockquote>2520 is the smallest number that can be divided by each of the numbers from 1 to 10 without any remainder. What is the smallest positive number that is evenly divisible by all of the numbers from 1 to 20?
          <footer class="blockquote-footer"><a href="https://projecteuler.net/problem=5" target="_blank">ProjectEuler</a></footer>
        </blockquote>
        <p>Answer: {{euler.answers[4]}}.</p>
        <p class="alert alert-warning"><strong>Note:</strong> The solution is being pregenerated to prevent lag. The code is still there at line 117.</p>
      </div>
      <div>
        <p class="h1">Project 6</p>
        <p class="h3">Sum square difference</p>
        <blockquote>The sum of the squares of the first ten natural numbers is, 1<sup>2</sup> + 2<sup>2</sup> + ... + 10<sup>2</sup> = 385. The square of the sum of the first ten natural numbers is, (1 + 2 + ... + 10)<sup>2</sup> = 55<sup>2</sup> = 3025. Hence the difference between the sum of the squares of the first ten natural numbers and the square of the sum is 3025 − 385 = 2640. Find the difference between the sum of the squares of the first one hundred natural numbers and the square of the sum.
          <footer class="blockquote-footer"><a href="https://projecteuler.net/problem=6" target="_blank">ProjectEuler</a></footer>
        </blockquote>
        <p>Answer: {{euler.answers[5]}}.</p>
        <p class="alert alert-warning"><strong>Note:</strong> The solution is being computed, not pregenerated. See line 129.</p>
      </div>
      <div>
        <p class="h1">Project 7</p>
        <p class="h3">10001st prime</p>
        <blockquote>By listing the first six prime numbers: 2, 3, 5, 7, 11, and 13, we can see that the 6th prime is 13. What is the 10,001st prime number?
          <footer class="blockquote-footer"><a href="https://projecteuler.net/problem=7" target="_blank">ProjectEuler</a></footer>
        </blockquote>
        <p>Answer: {{euler.answers[6]}}.</p>
        <p class="alert alert-warning"><strong>Note:</strong> The solution is being pregenerated to prevent lag. The code is still there at line 138.</p>
      </div>
      <div>
        <p class="h1">Project 8</p>
        <p class="h3">Largest product in a series</p>
        <blockquote>The four adjacent digits in the 1000-digit number that have the greatest product are 9 × 9 × 8 × 9 = 5832.
          </span>
        Find the thirteen adjacent digits in the 1000-digit number that have the greatest product. What is the value of this product?
        <footer class="blockquote-footer"><a href="https://projecteuler.net/problem=8" target="_blank">ProjectEuler</a></footer>
        </blockquote>
      <p>Answer: {{euler.answers[7]}}.</p>
      <p class="alert alert-warning"><strong>Note:</strong> The solution is being computed, not pregenerated. See line 149. For space reasons the 1000 digit number has been omitted see <a href="https://projecteuler.net/problem=8" target="_blank">ProjectEuler</a> for the number.</p>
      </div>
    <div>
      <p class="h1">Project 9</p>
      <p class="h3">Special Pythagorean triplet</p>
      <blockquote>A Pythagorean triplet is a set of three natural numbers, a &lt; b &lt; c, for which, a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>. For example, 3<sup>2</sup> + 4<sup>2</sup> = 9 + 16 = 25 = 52. There exists exactly one Pythagorean triplet for which a + b + c = 1000. Find the product abc.
        <footer class="blockquote-footer"><a href="https://projecteuler.net/problem=9" target="_blank">ProjectEuler</a></footer>
      </blockquote>
      <p>Answer: {{euler.answers[8]}}.</p>
      <p class="alert alert-warning"><strong>Note:</strong> The solution is being computed, not pregenerated. See line 162.</p>
    </div>
    <div>
      <p class="h1">Project 10</p>
      <p class="h3">Summation of primes</p>
      <blockquote>The sum of the primes below 10 is 2 + 3 + 5 + 7 = 17. Find the sum of all the primes below two million.
        <footer class="blockquote-footer"><a href="https://projecteuler.net/problem=10" target="_blank">ProjectEuler</a></footer>
      </blockquote>
      <p>Answer: {{euler.answers[9]}}.</p>
      <p class="alert alert-warning"><strong>Note:</strong> The solution is being pregenerated to prevent lag. The code is still there at line 171.</p>
    </div>
    </slick>
  </span>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js'></script>
<script src='https://cdn.rawgit.com/devmark/angular-slick-carousel/master/dist/angular-slick.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/DavidArchibald/project-euler-top-10-aBamwP */
html, body {
  height: 100%;
  width: 100%;
}

.container {
  display: flex;
  justify-content: center;
  margin: 0 auto;
  height: 100vh;
}
.container .projects-slideshow {
  min-height: 100px;
  width: 90%;
}
.container .projects-slideshow .h1, .container .projects-slideshow .h3 {
  text-align: center;
}
.container .projects-slideshow .number .number-line {
  margin: 0;
  font-size: 10px;
  linehiehgt: 1.5em;
}
.container .projects-slideshow .steps .step {
  text-indent: 20px;
}
.container .projects-slideshow .slick-arrow {
  top: calc(100% - 25px);
}
.container .projects-slideshow .slick-arrow:before {
  color: grey;
}
.container .projects-slideshow .slick-dots {
  bottom: 10px;
}
.container .projects-slideshow .slick-slide:not(.slick-slide.slick-current) {
  display: none;
}


/*Downloaded from https://www.codeseek.co/DavidArchibald/project-euler-top-10-aBamwP */
var ProjectEuler;
(function (ProjectEuler) {
    var EulerController = /** @class */ (function () {
        function EulerController() {
            this.answers = [];
            this.start();
        }
        EulerController.prototype.start = function () {
            this.answers[0] = this.projectOne(1000); //multiples of 3 and 5
            this.answers[1] = this.projectTwo(4000000); //sum of even fibonacci numbers less than 4000000
            this.answers[2] = this.projectThree(600851475143); //largest prime factor
            this.answers[3] = this.projectFour(3); //generate palindrome number from only 2 3 digit numbers
            this.answers[4] = this.projectFive(1, 20);
            this.answers[5] = this.projectSix(1, 100); //calculate the difference in the sum of numbers squared and each number squared added together.
            this.answers[6] = this.projectSeven(10001); //find the nth prime(in this case 1001)
            this.answers[7] = this.projectEight(13);
            this.answers[8] = this.projectNine(1000);
            this.answers[9] = this.projectTen(2000000);
        };
        EulerController.prototype.findFactors = function (number) {
            var factors = [];
            for (var index = 0; index <= Math.sqrt(number); index++) {
                if (number % index === 0 && index !== 1)
                    factors.push(index);
            }
            return factors;
        };
        EulerController.prototype.isPrime = function (number) {
            return this.findFactors(number).length === 0;
        };
        EulerController.prototype.findPrimeFactors = function (number) {
            var primeFactors = [];
            for (var i = 2; i <= number; i++) {
                while (number % i === 0) {
                    primeFactors.push(i);
                    number /= i;
                }
            }
            if (!primeFactors.length)
                primeFactors.push(number);
            return primeFactors;
        };
        EulerController.prototype.numberOfOccurences = function (sourceArray, selector) {
            if (!sourceArray.length)
                return sourceArray;
            var count = 0;
            for (var i in sourceArray) {
                if (sourceArray[i] === selector) {
                    count++;
                }
            }
            return count;
        };
        EulerController.prototype.multiplyArray = function (sourceArray) {
            if (!sourceArray.length)
                return sourceArray;
            return sourceArray.reduce(function (a, b) { return a * b; });
        };
        EulerController.prototype.findPrimes = function (below) {
            if (below < 0)
                return;
            var primes = [];
            for (var i = 1; i <= below; i++) {
                if (this.findFactors(i) === 0)
                    primes.push(i);
            }
            return primes;
        };
        EulerController.prototype.factorial = function (n) {
            var factorials = [];
            if (!n)
                return 1;
            if (factorials[n] > 0)
                return factorials[n];
            return factorials[n] = this.factorial(n - 1) * n;
        };
        EulerController.prototype.projectOne = function (max) {
            var result = [], multipleOf = function (number, multiple) {
                return number % multiple === 0;
            };
            for (var i = 1; i <= max; i++) {
                if (multipleOf(i, 3) || multipleOf(i, 5))
                    result.push(i);
            }
            return result
                .reduce(function (a, b) { return a + b; });
        };
        EulerController.prototype.projectTwo = function (lessThan) {
            var fibonacci = [1, 2], nextFibonacci;
            for (;;) {
                var nextFibonacci_1 = fibonacci[fibonacci.length - 1] + fibonacci[fibonacci.length - 2];
                if (nextFibonacci_1 >= lessThan)
                    break;
                fibonacci.push(nextFibonacci_1);
            }
            return fibonacci
                .reduce(function (a, b) {
                return (a % 2 === 0 ? a : 0) + (b % 2 === 0 ? b : 0);
            });
        };
        EulerController.prototype.projectThree = function (number) {
            var factors = this.findFactors(number), largestPrime;
            for (var _i = 0, factors_1 = factors; _i < factors_1.length; _i++) {
                var factor = factors_1[_i];
                if (this.isPrime(factor))
                    largestPrime = Math.max(factor, largestPrime || 0);
            }
            return largestPrime;
        };
        EulerController.prototype.projectFour = function (digitNumber) {
            for (var i = Math.pow(10, digitNumber - 1); i < Math.pow(10, digitNumber); i++) {
                var indexSquared = (i * i).toString();
                if (indexSquared === Array.from(indexSquared).reverse().join(''))
                    var result = i + " \u00D7 " + i + " = " + indexSquared; //Allow it to continue looping to allow it to be overridden for a larger palindrome
            }
            return result;
        };
        EulerController.prototype.projectFive = function (start, end) {
            return 232792560; //prevent lag
            var factorial = this.factorial(end - start);
            for (var index = Math.cbrt(factorial); index <= factorial; index += end) {
                for (var i = start; i <= end; i++) {
                    if (index % i === 0 && i === end)
                        return index;
                    else if (index % i !== 0)
                        break;
                }
            }
        };
        EulerController.prototype.projectSix = function (min, max) {
            var squaredSum = 0, sum = 0;
            for (var i = min; i <= max; i++) {
                squaredSum += Math.pow(i, 2);
                sum += i;
            }
            return Math.pow(sum, 2) - squaredSum;
        };
        EulerController.prototype.projectSeven = function (primeNumber) {
            return 104743; //to prevent lag.
            var primeIndex = 0;
            for (var i = 1; primeIndex < primeNumber; i++) {
                if (this.isPrime(i)) {
                    var prime = i;
                    primeIndex++;
                }
            }
            return prime;
        };
        EulerController.prototype.projectEight = function (adjacent) {
            var series = '7316717653133062491922511967442657474235534919493496983520312774506326239578318016984801869478851843858615607891129494954595017379583319528532088055111254069874715852386305071569329096329522744304355766896648950445244523161731856403098711121722383113622298934233803081353362766142828064444866452387493035890729629049156044077239071381051585930796086670172427121883998797908792274921901699720888093776657273330010533678812202354218097512545405947522435258490771167055601360483958644670632441572215539753697817977846174064955149290862569321978468622482839722413756570560574902614079729686524145351004748216637048440319989000889524345065854122758866688116427171479924442928230863465674813919123162824586178664583591245665294765456828489128831426076900422421902267105562632111110937054421750694165896040807198403850962455444362981230987879927244284909188845801561660979191338754992005240636899125607176060588611646710940507754100225698315520005593572972571636269561882670428252483600823257530420752963450', largest = 0;
            for (var index in series) {
                if (index === 0 || series.length - index < adjacent)
                    break;
                var integer = parseInt(series[index]), selected = series.substring(index, parseInt(index) + adjacent), selectedSum = this.multiplyArray(Array.from(selected));
                largest = largest > selectedSum ? largest : selectedSum;
            }
            return largest;
        };
        EulerController.prototype.projectNine = function (pythagoreanSum) {
            for (var a = 1; a <= pythagoreanSum / 3; a++) { //the variables are from a^2 + b^2 = c^2
                for (var b = a; b < pythagoreanSum / 2; b++) { //b is greater than a and c is greater than b.
                    var c = pythagoreanSum - a - b; //b takes up the rest of the sum.
                    if (Math.pow(a, 2) + Math.pow(b, 2) === Math.pow(c, 2))
                        return a * b * c;
                }
            }
        };
        EulerController.prototype.projectTen = function (primesBelow) {
            return 142913828922; //to prevent lag this is here. It gets too laggy to use otherwise.
            return this.findPrimes(primesBelow).reduce(function (a, b) { return a + b; });
        };
        return EulerController;
    }());
    ProjectEuler.EulerController = EulerController;
})(ProjectEuler || (ProjectEuler = {}));
angular
    .module('app', ['slickCarousel'])
    .controller('eulerController', ProjectEuler.EulerController);

Comments