JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<div class="container">
  <h2>How to get first 5 even numbers from a list</h2>

  <p>Let's say we have a database with an unknown number of users and we only want to get the first x evenones</p>

  <h4>Result</h4>
	
  <div id="result">
		
    <div class="all">
      <p>All the numbers in the array:</p>
    </div>
		
    <div class="numbers">
      <p>The first 5 even numbers are:</p>
    </div>
		
		<div class="total-even">
      <p>Total even numbers in array:</p>
    </div>
		
  </div>
	
</div>

<div class="container">
  <h2>Get first X numbers in Fibonacci Sequence</h2>

<p>
	How many Fibonacci numbers do you need?
</p>
<div class="form">
		<input type="text" name="value" id="number" value="10">
	<button id="btn"> Generate </button>
</div>

	<h4>Output:</h4>
	<span id="fiboResult"></span>

	
    
	
</div>

SCSS

* {box-sizing: border-box;}

body {

  background: #eee;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  min-height: 100vh;
  font-family: "TrebuchetMS", sans-serif;


}

.container {
  margin: 100px 0 0 0;
  width: 100%;
  max-width: 700px;
  background: #fff;
  box-shadow: 3px 2px 15px 0px rgba(0, 0, 0, 0.3);
  padding: 30px;
  border-radius: 14px;
}

h2,
h4 {
  font-weight: bold;
  margin-bottom: 20px;
}

h2 {
  font-size: 24px;
}

h4 {
  margin-top: 30px;
}

p {
  margin-bottom: 10px;
}

#result {

  >div {
    margin-bottom: 20px;
  }

  .totals {

    display: flex;
    align-items: center;

    p {
      margin: 0;
    }

    span {
      margin-left: 10px;
    }
  }

  span {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    margin: 0 6px 6px 0;
    border-radius: 6px;
    font-size: 14px;
    font-weight: bold;

  }

  .all span.even {
    box-shadow: inset 0px 0px 0px 2px #00c388;
  }

  .all span.odd {
    box-shadow: inset 0px 0px 0px 2px #fe5858;
    opacity: 0.5;
  }

  .numbers span.even {
    background: #00c388;
  }

}

.form {
  display: flex;
	align-items: center;

  input,
  button {
    height: 50px;
    min-height: 50px;
		border: none;
		background: #eee;
		padding: 4px 10px;
		display: block;
		outline: none;
		margin-right: 10px;
		border-radius: 10px;
		&:focus {
			outline: none;
		}
  }
	
	input {
		text-align: center;
		max-width: 100px;

	}
	
	button {
		background: #00c388;
	}
}

#fiboResult {
	display: block;
	min-height: 40px;
	
	> span {
    width: 60px;
    height: 60px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eee;
    margin: 0 6px 6px 0;
    border-radius: 6px;
    font-size: 14px;
    font-weight: bold;
		position: relative;
		
		span {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			text-align:...

JavaScript

/* const allNumbers = [48,81,22,9,3,88,54,96,99,29,42,98,28,52,56,66,78,10,9,44,1,2,23,52];

let totals = allNumbers.length;

$("#result .totals").append("<span>" + totals + "</span>"); */



let totalEven = 0;

for (let i = 0; i <= 100; i++) {

	if (i % 2 == 0) {
		$("#result .all").append("<span class='even'>" + i + "</span>");
		totalEven++;
		
	} else {
		$("#result .all").append("<span class='odd'>" + i + "</span>");
	}

}

$("#result .total-even").append("<span>" + totalEven + "</span>");




let counter = 0;
for (let i = 0; i < 100; i++) {

	if (i % 2 == 0 && counter<37) {
		$("#result .numbers").append("<span class='even'>" + i + "</span>");
		counter++;
	}

}


$('input').focus();


$("#btn").click(function() {
				var first_number = 0;
				var second_number = 1;

				var size = $("#number").val();
				result = $("#fiboResult");
				var output = '0,1';

				for (i = 0; i < size - 2; i++) {
					var next_number = first_number + second_number;
					output = (output + '<span> <span class="how">' + first_number + "+" + second_number + '</span>' + next_number + '</span>' );
					first_number = second_number;
					second_number = next_number;
				}
				$("#fiboResult").html(output);
			});