Project Euler Problem #1

https://projecteuler.net/problem=1

by klenwell

HTML

<div id="banner-message" class="banner">
  <p>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.</p>
  <p>Find the sum of all the multiples of 3 or 5 below 1000.</p>
  <button>Solve</button>
</div>

<div id="result" class="banner">
  <p>Solution: <span id="solution">?</span></p>
  <p id="feedback"></p>
</div>

CSS

body {
  background: #20262E;
  padding: 12px;
  font-family: Helvetica;
}

.banner {
  background: #fff;
  border-radius: 4px;
  padding: 16px;
  font-size: 14px;
  text-align: center;
  transition: all 0.2s;
  margin: 4px auto;
  width: 300px;
}

div#result {
  font-size: 24px;
  font-weight: bold;
}

p#feedback {
  font-size: 14px;
  font-weight: normal;
}

.success { color: green; }
.failure { color: red; }

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

JavaScript

var $button = $("button");
var $banner = $("div#banner-message");
var $solution = $('span#solution');
var $feedback = $('p#feedback');
var expectedAnswer = 233168;

// Event Listener
$button.on("click", function(){
  var solution = solve();
  $solution.text(solution);
  
  if ( solution === expectedAnswer ) {
    $feedback.removeClass().addClass('success');
    $feedback.text('Congratulations! That is correct.');
  }
  else {
    $feedback.removeClass().addClass('failure');
    $feedback.text('Sorry. That is not correct.');
  }
});

// Functions
var solve = function() {
  var multiplesSum = 0;
  
  for ( var i=1; i<=1000; i++ ) {
  	var isMultiple3 = i % 3 == 0;
    var isMultiple5 = i % 5 == 0;
  	if ( isMultiple3 || isMultiple5 ) {
    	multiplesSum += i;
    }
  }
  
  return multiplesSum;
}