Любимый цвет

by Станислав Некрасов

HTML

<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;700&display=swap" rel="stylesheet">

CSS

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  background: #2c3e50;
  font-family: 'Roboto Slab', serif;
  font-size: 20px;
  color: #2c3e50;
}

.app {
  position: absolute;
  top: calc(50vh - 180px);
  left: calc(50vw - 240px);
  width: 480px;
  height: 360px;
  border-radius: 10px;
  background: #fff;
  text-align: center;
  overflow: hidden;
}

.btn {
  color: #fff;
  background: #2c3e50;
  outline: none;
  border-radius: 5px;
  border: none;
  font-size: 32px;
  padding: 5px 30px;
  margin: 10px;
  transition: background-color 0.25s;
}
.btn:hover {
  cursor: pointer;
  background: #34495e;
}

#start {
  padding: 15px 5px;
}

#game {
  padding-top: 10px;
}

#end {
  padding: 30px 10px;
}

.color1, .color2 {
  position: absolute;
  bottom: 0;
  display: block;
  width: 230px;
  height: 230px;
  background: #8a8eff;
}

.color1:hover, .color2:hover {
  cursor: pointer;
  border: 2px solid #f1c40f;
}

.header {
  font-size: 2em;
  font-weight: bold;
  letter-spacing: 0.05em;
}

.color1 {
  left: 0;
  border-radius: 0 10px 0 10px;
}

.color2 {
  right: 0;
  border-radius: 10px 0 10px 0;
}

.colors-line {
  font-size: 0;
  border-radius: 5px;
  overflow: hidden;
}

.colors-line > div {
  display: inline-block;
  font-size: 20px;
  color: #fff;
}

.c-r {
  background: #e74c3c;
}

.c-g {
  background: #2ecc71;
}

.c-b {
  background: #2980b9;
}

.like-colors {
  font-size: 0;
  border-radius: 5px;
  overflow: hidden;
  height: 50px;
}

.like-colors > div {
  width: 50%;
  display: inline-block;
  height: 50px;
}

JavaScript

function randint(min, max) {
  return Math.floor(min + Math.random() * (max + 1 - min));
}

function setRandColor (obj) {
	obj.dataset.r = randint(0, 255);
  obj.dataset.g = randint(0, 255);
  obj.dataset.b = randint(0, 255);
  obj.style.backgroundColor = 'rgb('+obj.dataset.r+','+obj.dataset.g+','+obj.dataset.b+')';
}

function start () {
	let colors = {
  	r: 0, g: 0, b: 0
  }, step = 1, maxSteps = 25;
  
  function addColors (obj) {
  	let r = obj.dataset.r,
    	g = obj.dataset.g,
      b = obj.dataset.b;
    if (r > g && r > b) colors.r++;
    else if (g > r && g > b) colors.g++;
    else colors.b++;
  }
  
  function updateSteps () {
  	header.innerHTML = step + '/' + maxSteps;
  }

	let body = document.body;
	let app = document.createElement('div');
  app.classList.toggle('app', 1);
  app.id = 'start';
  app.innerHTML = 'Привет!<br>Это мини-приложение поможет тебе определить твой любимый цвет, наверное.<br>Ведь определение твоего любимого цвета - это очень важное и ответственное занятие, и не у всех получается это сделать.<br>Поэтому команда Метлика в составе одного человека создала этот тест.<br>Тебе будут показываться два цвета, выбирай их них тот, который тебе больше нравится.<br>';
  body.appendChild(app);
  
  let color1 = document.createElement('div');
  color1.classList.toggle('color1', 1);
  let color2 = document.createElement('div');
  color2.classList.toggle('color2', 1);
  let header = document.createElement('div');
  header.classList.toggle('header', 1);
  let subHeader = document.createElement('div');
  subHeader.classList.toggle('sub-header', 1);
  subHeader.innerHTML = 'Выберите цвет!';
  
  let btn = document.createElement('button');
  btn.classList.toggle('btn', 1);
  btn.innerHTML = 'Начать';
  btn.onclick = function () {
  	app.id = 'game';
    app.innerHTML = '';
    updateSteps();
    setRandColor(color1);
    setRandColor(color2);
    app.appendChild(header);
    app.appendChild(subHeader);
    app.appendChild(color1);
   ...