marcsolanadal/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="example of a simple progress bar">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style id="jsbin-css">
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.box {
  width: 100px;
  height: 20px;
  background-color: tomato;
  border: 1px solid lightgray;
}

.line {
  flex-grow: 3;
  margin: 0 10px;
  height: 1px;
  background-color: black;
}
</style>
</head>
<body>
  <div class="container">
    <div class="box"></div>
    <div class="line"></div>
    <div class="box"></div>
    <div class="line"></div>
    <div class="box"></div>
  </div>
<script id="jsbin-javascript">
'use strict';

console.clear();

var steps = [{ id: 0 }, { id: 1 }, { id: 2 }];

var result = [];

steps.map(function (step, index) {
  result.push(step.id);
  if (index < steps.length - 1) result.push('line');
});

console.log(result);
</script>


<script id="jsbin-source-css" type="text/css">.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.box {
  width: 100px;
  height: 20px;
  background-color: tomato;
  border: 1px solid lightgray;
}

.line {
  flex-grow: 3;
  margin: 0 10px;
  height: 1px;
  background-color: black;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">console.clear()

const steps = [
  { id: 0 },
  { id: 1 },
  { id: 2 }
]

const result = []

steps.map((step, index) => {
  result.push(step.id)
  if (index < steps.length -1) result.push('line')
})

console.log(result)</script></body>
</html>

## jsbin.comimeq.css
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.box {
  width: 100px;
  height: 20px;
  background-color: tomato;
  border: 1px solid lightgray;
}

.line {
  flex-grow: 3;
  margin: 0 10px;
  height: 1px;
  background-color: black;
}

## jsbin.comimeq.js
'use strict';

console.clear();

var steps = [{ id: 0 }, { id: 1 }, { id: 2 }];

var result = [];

steps.map(function (step, index) {
  result.push(step.id);
  if (index < steps.length - 1) result.push('line');
});

console.log(result);
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="example of a simple progress bar">
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<style id="jsbin-css">
	.container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	}

	.box {
	width: 100px;
	height: 20px;
	background-color: tomato;
	border: 1px solid lightgray;
	}

	.line {
	flex-grow: 3;
	margin: 0 10px;
	height: 1px;
	background-color: black;
	}
	</style>
	</head>
	<body>
	<div class="container">
	<div class="box"></div>
	<div class="line"></div>
	<div class="box"></div>
	<div class="line"></div>
	<div class="box"></div>
	</div>
	<script id="jsbin-javascript">
	'use strict';

	console.clear();

	var steps = [{ id: 0 }, { id: 1 }, { id: 2 }];

	var result = [];

	steps.map(function (step, index) {
	result.push(step.id);
	if (index < steps.length - 1) result.push('line');
	});

	console.log(result);
	</script>


	<script id="jsbin-source-css" type="text/css">.container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	}

	.box {
	width: 100px;
	height: 20px;
	background-color: tomato;
	border: 1px solid lightgray;
	}

	.line {
	flex-grow: 3;
	margin: 0 10px;
	height: 1px;
	background-color: black;
	}</script>

	<script id="jsbin-source-javascript" type="text/javascript">console.clear()

	const steps = [
	{ id: 0 },
	{ id: 1 },
	{ id: 2 }
	]

	const result = []

	steps.map((step, index) => {
	result.push(step.id)
	if (index < steps.length -1) result.push('line')
	})

	console.log(result)</script></body>
	</html>