deadhunter,
вариант...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>calculator</title>
<style>
.container {
display: block;
background: green;
width: 500px;
height:350px;
}
.plan {
width:100px;
}
.value-breakfast {
text-align: center;
margin-top: -138px;
}
.value-breakfast div a{
margin: 35px;
}
.value-supper {
text-align: center;
margin-top: 28px;
}
.value-supper div a{
margin: 35px;
}
.value-dinner {
text-align: center;
margin-top: 28px;
}
.value-dinner div a{
margin: 35px;
}
.cost {
background: red;
width: 150px;
height: 25px;
margin-top:20px;
margin-left:125px;
}
.container .active {
color: #FFFFFF;
background-color: #FF1493;
}
.container a {
padding: 8px 12px;
cursor: pointer;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="container">
<div class="plan">
<h2>Breakfast</h2>
<h2>Supper</h2>
<h2>Dinner</h2>
</div>
<div class="value-breakfast">
<div><a>S</a> <a>M</a> <a>L</a></div>
</div>
<div class="value-supper">
<div><a>S</a> <a>M</a> <a>L</a></div>
</div>
<div class="value-dinner">
<div><a>S</a> <a>M</a> <a>L</a></div>
</div>
<div id="cost" class="cost"></div>
</div>
<script>
window.addEventListener("DOMContentLoaded", function() {
var d = document.querySelector(".container"),
e = document.querySelector(".cost"),
f = {S: 1000, M: 2000, L: 3000
};
d.addEventListener("click", function(b) {
var a = b.target;
a.tagName && "A" == a.tagName && (b.preventDefault(),
[].forEach.call(a.parentNode.querySelectorAll("a"), function(c) {
c != a && c.classList.remove("active")
}),
a.classList.toggle("active"),
e.innerHTML = "Итого: " +
[].reduce.call(document.querySelectorAll(".container .active"), function(a,
b) {
return a + (f[b.text] || 0)
}, 0))
})
});
</script>
</body>
</html>