<!DOCTYPE html>
<html>

  <head>
    <script data-require="ramda@*" data-semver="0.22.1" src="https://unpkg.com/ramda@0.22.1/dist/ramda.min.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div id="output"></div>
    <script src="script.js"></script>
  </body>

</html>
// const R = require('ramda')

const person = {
  id: 1,
  name: 'Joe'
}

const generateUrl = (id) => `https://img.socialnetwork.com/avatar/${id}.png`
const getUrlFromPerson = R.compose(generateUrl, R.propOr('default', 'id'))
// const getUpdatedPerson = (person) => R.assoc('avatar', getUrlFromPerson(person), person)
const getUpdatedPerson = R.converge(R.assoc('avatar'), [getUrlFromPerson, R.identity])

const result = getUpdatedPerson(person)
console.log(result)

document.getElementById('output').innerHTML = `${JSON.stringify(result)}`

/* Styles go here */