JSFiddle - React, Tailwind, and code Playground

by wstolarski_consdata

HTML

<h1>Scenariusz If/else</h1>

<label for="ifElseBrandInput">Wprowadź markę samochodową</label>
<input type="text" id="ifElseBrandInput">
<button onclick="setCarDescriptionBasedOnBrandIfElse()">Zatwierdź</button>


<hr>
<h1>Scenariusz witch case </h1>
<label for="switchCaseBrandInput">Wprowadź markę samochodową</label>
<input type="text" id="switchCaseBrandInput">
<button onclick="setCarDescriptionBasedOnBrandSwitchCase()">Zatwierdź</button>

<hr>
<h1>Scenariusz lookup Table	 </h1>
<label for="brandInput">Wprowadź markę samochodową</label>
<input type="text" id="brandInput">
<button onclick="setCarDescription()">Zatwierdź</button>

<hr>
<h2>Wynik:</h2>
<span id="carDescription"></span>

JavaScript

const setCarDescriptionBasedOnBrandIfElse = () => {
  const brandInput = document.getElementById('ifElseBrandInput').value;

	let carDesc = '';
  
	if(brandInput === 'toyota') {
		carDesc = 'Toyota - Reliable and Fuel Efficient'
	} else if(brandInput === 'ford') {
		carDesc = 'Ford - American Toughness';
	} else if(brandInput === 'honda') {
		carDesc = 'Honda - Innovative and Efficient';
	} else if(brandInput === 'bmw') {
		carDesc = 'BMW - Ultimate Driving Machine';
	} else {
		carDesc = 'Unknown Car Brand';
	}

  document.getElementById('carDescription').innerText = carDesc;
};

//--------------------------------------------------------

const setCarDescriptionBasedOnBrandSwitchCase = () => {
  const brandInput = document.getElementById('switchCaseBrandInput').value;

	let carDesc = '';
  
  switch (brandInput) {
    case 'toyota':
      carDesc = 'Toyota - Reliable and Fuel Efficient';
      break;
    case 'ford':
      carDesc = 'Ford - American Toughness';
      break;
    case 'honda':
      carDesc = 'Honda - Innovative and Efficient';
      break;
    case 'bmw':
      carDesc = 'BMW - Ultimate Driving Machine';
      break;
    default:
      carDesc = 'Unknown Car Brand';
  }

  document.getElementById('carDescription').innerText = carDesc;
};

//--------------------------------------------------------

const carBrandsDesctipion = {
	'toyota'   : 'Toyota - Reliable and Fuel Efficient',
	'ford'  : 'Ford - American Toughness',
	'honda' : 'Honda - Innovative and Efficient',
	'bmw'   : 'BMW - Ultimate Driving Machine',
	'default': 'Unknown Car Brand'
};

const setCarDescription = () => {
  const brandName = document.getElementById('brandInput').value;
	document.getElementById('carDescription').innerText = carBrandsDesctipion[brandName]
		? carBrandsDesctipion[brandName]
		: carBrandsDesctipion['default'];
};


//--------------------------------------------------------
const classifyEngineWithIfElse = (horsepower) => {
  if (horsepower >= 500) {
    return...