JSFiddle - React, Tailwind, and code Playground

by kontrax

HTML

<input             id="num_start" value="10"/>
<input             id="num_end"   value="20"/>
<button            id="btn">Get Primes</button>
<h1>Results: <span id="result"></span></h1>
<!-- 
/*
This script goes through every number between '2' and '1 less than the number'
and tests if there is any number in which there is no remainder 

	if you divide the number by the increment. (øker)
	If there is any without a remainder, it is not prime. 
	If the number is less than 2, it is not prime. 

Otherwise, it is prime.
*/
 -->


<!--
			Det som kommer frem når en kjører koden i console vinduet er 5. 
			Så det går å kjøre koden. 
		
			Dette er fordi det ligger fra tidligere versjoner av javascript.
			Og da var ikke javascript ett strengt programerings spårk,
			slik at flere kunne bruke det. Og nå i dag, tar vi vare på kompatibilitet
			av den eldre versjonen. Får hadde vi endret for mye, ville ikke websider 
			laget før de nyere oppdateringene til javascript fungere.
			
			Det som står i console vinduet når en legger "use strict"; på toppen av koden er: 
			ReferenceError: myNumber is not defined. 
			Når en bruker "use strict"; gjør koden strengere. 
			Setter en god standard for vanene en har når en skriver kode. 
			Det gir god sikkerhet og reduserer fare error.

			
			--------------------
			
			Dette er ikke en error, men det som kommer frem i console vinduet er: undefined. 
			Dette er fordi, det står ikke noen objekter inne i variabelen. 
			Og da kan en ikke skrive ut myObj.name

			...., objectet har ingen property med navn 'name'

			-----------
	
	Dette er ikke en error,
			her får vi Infinity som svar på en umulig matematisk operasjon.
			men ett resultat av en umulig ligning. 
			Svaret som kom frem i consele vinduet er Infinity.
-->
<!--
					Dette er ingen error.
					Men denne blir heller ikke skrevet ut i console vinduet. 
					Men koden blir ikke kjørt, fordi 'I' ikke er større enn '10'. 
-->

CSS

Event handler's parameters, this binding, and the return value
When the event handler is specified as an HTML attribute, the specified code is wrapped into a function with the following parameters:

event - for all event handlers, except onerror.
event, source, lineno, colno, and error for the onerror event handler. Note that the event parameter actually contains the error message as string.
When the event handler is invoked, the this keyword inside the handler is set to the DOM element on which the handler is registered. For more details see the this keyword documentation.

The return value from the handler determines if the event is canceled. The specific handling of the return value depends on the kind of event, for details see "The event handler processing algorithm" in the HTML specification.


------------------------------------------------------------------------

canvas
{
	outline: 1px solid red;
	zoom: .6;
}
/*
	When we refer to elements on the webpage we most often use
	document.getElementById(id). This is a lot to write.

	Create a function so that we can refer to elements by writing this instead: $(id)

*/
/*
// writing this instead: $(id)

// init ------------------------------------------
$("btn")//.onclick = btnOnClick;
// btnOnClick ------------------------------------
//function btnOnClick() {
 $("txtOut")/*.innerHTML = * /$("txtIn")//.value
//}
*/
/*
	TASk TEXT
		 a- Explain the difference between an event handler function and an ordinary function.
		 b- When is an event handler called (run)?
		 c- Can it have any parameters?

	BeA
		a- Events handlers have to conform to the signature of the coresponding event,
			while regular function definitions are free to use its own signature
		b- When notified
		c- It can have up to the amount of parameters supplied by the calling event.
			But the order can not be changed.


	-? It can have any amount of parameters but the values recieved from the calling event
*/
/*...

JavaScript

//***************************************************************
// INIT

var elm_numStart = document.getElementById("num_start");
var elm_numEnd   = document.getElementById("num_end");
var elm_btn      = document.getElementById("btn");
var elm_result   = document.getElementById("result");

elm_btn.onclick = function () {
	var start  = parseInt(elm_numStart.value);
	var end    = parseInt(elm_numEnd.value);
	var result = primesInRange(start, end);
	elm_result.innerHTML = result.join(', ');
}

//***************************************************************
// PROGRAM

function isPrimeNumber (num) { // funksjone sjekker hver nummer mellom 2 og en mindre en 'num'
	if (num < 2) {  // hvis tallet er mindre enn 2, er det ikke ett primtall
		return false; // hvis num mindre enn 2 blir blir return false, og det er ikke ett primtall
	}
	for (var i = 2; i < num; i++) {  // hvis en deler nummeret med økningen, er det ikke ett primtall
		if(num % i == 0) { // Hvis num har 0 i rest er den ikke ett primtall
			return false; // er det ikke primtall blir det false
		}
	}
	return true; // hvis alle testene blir false, er det ett primtall
}

function primesInRange (start, end) {
	var primeNr = [];
	for (var i = start; i < end; i++)
	{ // lager en for loop, der 'i' er tallet som er i start input, og sjekker om 'i' er mindre enn end.
		if (isPrimeNumber(i)) { // en if test som spør om 'i' er et primtall
			primeNr.push(i); // legger primtallet 'i' til i arrayen primeNr
		}
	}
	return primeNr; // returnerer array primeNr med alle primtallene mellom inputfelt start og inputfelt end
}

// primesInRange (0, 10)
// > 2, 3, 5, 7




/*
function isPrimeNumber (num) {
	if(num < 2) {
		return false;
	}
	for (var i = 2; i < num; i++)
	{
		if(num % i == 0) {
			return false;
		}
	}
	return true;
}
*/