JSFiddle - React, Tailwind, and code Playground

by Juan Sebastian Faccio

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3&amp;amp;sensor=false"></script>
<script src="https://npmcdn.com/[email protected]/dist/react.min.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/react-dom.min.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/GoogleMapReact.js"></script>
<div id="app"></div>

CSS

.map {
  width: 400px;
  height: 400px;
}

body, html {
  width: 100%;
  height: 100%;
}

.listings-inner {
  margin-bottom: 20px;
  border-bottom: 1px solid #000;
  padding-bottom: 10px;
  padding: 2px;
}

.listing-highlight {
  border: 1px solid red;
}

.address {
  width: 50%;
  float: left;
  text-align: left;
}

.price {
  width: 50%;
  float: left;
  text-align: right;
}

.marker {
  cursor: pointer;
}

React

let vObject = [
{
    Listing:{
      ID:123,
      Type:"Exclusive",
      Transaction:"Sale",
      Price:1000000,
      OpenHouses:[
        {
          Date:"15/10/2020",
          StartTime:"8:00",
          EndTime:"14:00"
        },
        {
          Date:"14/10/2020",
          StartTime:"9:00",
          EndTime:"15:00"
        },
        {
          Date:"15/10/2010",
          StartTime:"8:00",
          EndTime:"14:00"
        }
      ]
    },
    Property:{
      Address:{
        StreetNumber:660,
        StreetName:"Madison Avenue",
        City: "New York"
      }
    }
  },
  {
    Listing:{
      ID:124,
      Type:"Open",
      Transaction:"Rent",
      Price:10000,
      OpenHouses:[
        {
          Date:"15/10/2020",
          StartTime:"8:00",
          EndTime:"14:00"
        },
        {
          Date:"14/10/2020",
          StartTime:"9:00",
          EndTime:"15:00"
        },
        {
          Date:"15/10/2010",
          StartTime:"8:00",
          EndTime:"14:00"
        }
      ]
    },
    Property:{
      Address:{
        StreetNumber:860,
        StreetName:"Madison Avenue",
        City: "New York"
      }
    }
  }
];



// Helpers
function formatPriceHelper(data) {
  let price = '$' + data.Price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  
  if (data.Transaction == "Rent") {
  	price += ' per month';
  }
  
  return price;
}

function formatMonthHelper(date) {
		let dSplit = date.split("/");
    let d = new Date(dSplit[2], dSplit[1] - 1, dSplit[0]);
    let month = [];
    month[0] = "Jan";
    month[1] = "Feb";
    month[2] = "March";
    month[3] = "April";
    month[4] = "May";
    month[5] = "June";
    month[6] = "July";
    month[7] = "Aug";
    month[8] = "Sep";
    month[9] = "Oct";
    month[10] = "Nov";
    month[11] = "Dec";
 
    return  month[d.getMonth()];
}

function formatDateHelper(date) {
	let dSplit = date.split("/");
  let d = new Date(dSplit[2], dSplit[1] - 1, dSplit[0]);
	return...