JSFiddle - React, Tailwind, and code Playground

by Mikhail Cheremukhin-Rerberg

HTML

<div class="map__pins">
      <div class="map__pinsoverlay"><h2>И снова Токио!</h2></div>

      <button class="map__pin map__pin--main">
        <img src="img/main-pin-image.png" width="40" height="44" draggable="false">
        <svg viewBox="0 0 70 70">
          <defs>
            <path d="M35,35m-23,0a23,23 0 1,1 46,0a23,23 0 1,1 -46,0" id="tophalf" />
          </defs>

          <ellipse cx="35" cy="35" rx="35" ry="35" fill="rgba(255, 86, 53, 0.7)" />
          <text><textPath xlink:href="#tophalf" startOffset="0">Поставь меня куда-нибудь</textPath></text>
        </svg>
      </button>
    </div>

JavaScript

// Создать массив [],состоящий из 8 сгенерированных объектов {}
var avatars = [
  'img/avatars/user01.png',
  'img/avatars/user02.png',
  'img/avatars/user03.png',
  'img/avatars/user04.png',
  'img/avatars/user05.png',
  'img/avatars/user06.png',
  'img/avatars/user07.png',
  'img/avatars/user08.png'
];

var titles = [
  'Большая уютная квартира',
  'Маленькая неуютная квартира',
  'Огромный прекрасный дворец',
  'Маленький ужасный дворец',
  'Красивый гостевой домик',
  'Некрасивый негостеприимный домик',
  'Уютное бунгало далеко от моря',
  'Неуютное бунгало по колено в воде'
];

var types = [
  'flat',
  'house',
  'bungalo'
];

var checkes = [
  '12:00',
  '13:00',
  '14:00'
];

var features = [
  'wifi',
  'dishwasher',
  'parking',
  'washer',
  'elevator',
  'conditioner'
];


// Нужно сгенерировать один объект с заданными свойствами
var numberOfAnnouncements = 8;

// получение рандомного значения свойства
var getRandomElement = function (massive) {
  var element = massive[Math.floor(Math.random() * massive.length)];
  return element;
};

var getRandomFromInterval = function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min)) + min;
};


// получение рандомного объекта из свойств
var getRandomAnnouncement = function () {
  var x = getRandomFromInterval(300, 900);
  var y = getRandomFromInterval(100, 500);

  var announcement = {
    author: {
      avatar: getRandomElement(avatars)
    },

    offer: {
      title: getRandomElement(titles),
      address: 'location.x, location.y',
      price: getRandomFromInterval(1000, 1000000),
      type: getRandomElement(types),
      rooms: getRandomFromInterval(1, 5),
      guests: getRandomFromInterval(1,20),
      checkin: getRandomElement(checkes),
      checkout: getRandomElement(checkes),
      features: getRandomElement(features),
      description: '',
      photos: []
    },

    location: {
      x: x,
      y: y
    }
  };

  return announcement;
};


// получение массива из...