JSFiddle - React, Tailwind, and code Playground

by scurrilus

HTML

<a href="https://www.morgenpost.de/berlin/article229101297/So-funktioniert-Berlins-neue-Corona-Ampel.html" target="_blank">Covid19 Ampel Berlin</a>

<div id="app"></div>

CSS

.ampel {
  display: block;
  float: left;
  margin: 0.5rem;
}

.lamp {
  font-family: Arial;
  width: 50px;
  height: 50px;
  margin-bottom: 0.25rem;
  border-radius: 50%;
  text-align: center;
  line-height: 50px;
}

.red {
  background: red;
}

.yellow {
  background: yellow;
}

.green {
  background: green;
}

JavaScript

const app = document.querySelector('#app');

// Aktuelle Werte der Ampel
const ampeln = [0.79, 30, 18]

// Limits der Ampeln
const limits = [[1.1, 1.2], [20, 30], [15, 25]]


const handleColor = (item, index) => {
  	if (item < limits[index][0]) {
    	return "green";
    }
    if (item > limits[index][0] && item < limits[index][1]) {
    	return "yellow";
    }
    else {
    	return "red";
    }
}

app.innerHTML = '<div>' + ampeln.map((item, index) => {
  const getColor = handleColor(item, index);
  
	return `<div id=ampel${index} class="ampel">
  					<div class="lamp red">${getColor === "red" ? item : ''}</div>
            <div class="lamp yellow">${getColor === "yellow" ? item : ''}</div>
            <div class="lamp green">${getColor === "green" ? item : ''}</div>
          </div>`;
}).join('') + '</div>';