Dotson-Show/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <title>Mini App</title>

    <style>

      body {
        background: lavender;
        margin: 0px;
        overflow: hidden;
      }

      h2 {
        text-align: center;
        margin-bottom: 70px;
        text-transform: capitalize;
      }

      div.user-photo {
        width: 150px;
        height: 150px;
        margin: 1em auto;
        background: #fff;
        border-radius: 50%;
        overflow: hidden;
      }

      div.user-photo img {
        width: 100%;
        height: 100%;
        display: block;
      }

      div.details {
        font-size: 2.3em;
        margin: 2.5em 0.2em 0.2em 0.2em;
        color: #fff;
        padding: 1.1em;
        min-height: 6em;
        background: #6200ee;
      }

      footer {
        width: calc(100% - 2em);
        z-index: 500;
        position: absolute;
        bottom: 0;
        overflow: hidden;
        display: flex;
        justify-content: space-between;
        margin: 0 1em;
      }

      footer button.mdc-icon-button {
        margin: 0.5em;
        color: #fff;
      }

    </style>
  </head>
  <body>
    <h2>john buh</h2>
    <div class = "user-photo mdc-elevation--z3">
      <img src= "https://via.placeholder.com/150.png">
    </div>
    <div class = "details mdc-elevation--z3"></div>
    <div class = "messages"></div>
    <footer>
        <button class="mdc-icon-button material-icons" id="btn-birthdate">date_range</button>
        <button class="mdc-icon-button material-icons" id="btn-address">contacts</button>
        <button class="mdc-icon-button material-icons" id="btn-phone">phone</button>
    </footer>

    <script>
      const extraInfo = document.querySelector('.details');

      const displayBirthdate = ({dob = 'dob'}) => {
        var {date, age} = dob;
        extraInfo.textContent = `${age} years old`;
      }

      const displayPhone = ({phone = 'phone', cell = 'cell'}) => {
        extraInfo.textContent = `${phone} / ${cell}`;
      }

      const displayAddress = ({location = 'location'}) => {
        var {street, city, state} = location;
        extraInfo.textContent = `${street}, ${city}, ${state}`;
      }

      const displayExtraUserInfo = (param) => {
        document.querySelector('#btn-birthdate').addEventListener('click', () => {
          displayBirthdate(param);
        });

        document.querySelector('#btn-phone').addEventListener('click', () => {
          displayPhone(param);
        });

        document.querySelector('#btn-address').addEventListener('click', () => {
          displayAddress(param);
        });
      }

      const notify = (msg) => {
        const toastr = document.querySelector('.messages');
        if(!toastr) return;

        toastr.textContent = msg;
        if(!toastr.classList.contains('on')) {
          toastr.classList.add('on');
        }
      };

      const clearNotice = () => {
        const toastr = document.querySelector('.messages');
        if(!toastr) return;

        toastr.textContent = '';
        toastr.classList.remove('on');
      };

      const displayUserPhotoAndName = (data) => {
        if(!data) return;

        // add your code here
        var {results, info} = data;
        var [profile] = results;

        document.querySelector('.user-photo img').src = profile.picture.large;
      	document.querySelector('h2').textContent = `${profile.name.title} ${profile.name.last} ${profile.name.first}`;

        displayExtraUserInfo(profile);

        clearNotice();
      };

      const getAUserProfile = () => {
        const api = 'https://randomuser.me/api/';

        // make API call here
        fetch(api)
          .then(response => response.json())
          .then(data => displayUserPhotoAndName(data))

        notify(`requesting profile data ...`);
      };

      const startApp = () => {
        // invoke the getAUserProfile here
        getAUserProfile();
      };

      startApp();
    </script>


</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />

	<title>Mini App</title>

	<style>

	body {
	background: lavender;
	margin: 0px;
	overflow: hidden;
	}

	h2 {
	text-align: center;
	margin-bottom: 70px;
	text-transform: capitalize;
	}

	div.user-photo {
	width: 150px;
	height: 150px;
	margin: 1em auto;
	background: #fff;
	border-radius: 50%;
	overflow: hidden;
	}

	div.user-photo img {
	width: 100%;
	height: 100%;
	display: block;
	}

	div.details {
	font-size: 2.3em;
	margin: 2.5em 0.2em 0.2em 0.2em;
	color: #fff;
	padding: 1.1em;
	min-height: 6em;
	background: #6200ee;
	}

	footer {
	width: calc(100% - 2em);
	z-index: 500;
	position: absolute;
	bottom: 0;
	overflow: hidden;
	display: flex;
	justify-content: space-between;
	margin: 0 1em;
	}

	footer button.mdc-icon-button {
	margin: 0.5em;
	color: #fff;
	}

	</style>
	</head>
	<body>
	<h2>john buh</h2>
	<div class = "user-photo mdc-elevation--z3">
	<img src= "https://via.placeholder.com/150.png">
	</div>
	<div class = "details mdc-elevation--z3"></div>
	<div class = "messages"></div>
	<footer>
	<button class="mdc-icon-button material-icons" id="btn-birthdate">date_range</button>
	<button class="mdc-icon-button material-icons" id="btn-address">contacts</button>
	<button class="mdc-icon-button material-icons" id="btn-phone">phone</button>
	</footer>

	<script>
	const extraInfo = document.querySelector('.details');

	const displayBirthdate = ({dob = 'dob'}) => {
	var {date, age} = dob;
	extraInfo.textContent = `${age} years old`;
	}

	const displayPhone = ({phone = 'phone', cell = 'cell'}) => {
	extraInfo.textContent = `${phone} / ${cell}`;
	}

	const displayAddress = ({location = 'location'}) => {
	var {street, city, state} = location;
	extraInfo.textContent = `${street}, ${city}, ${state}`;
	}

	const displayExtraUserInfo = (param) => {
	document.querySelector('#btn-birthdate').addEventListener('click', () => {
	displayBirthdate(param);
	});

	document.querySelector('#btn-phone').addEventListener('click', () => {
	displayPhone(param);
	});

	document.querySelector('#btn-address').addEventListener('click', () => {
	displayAddress(param);
	});
	}

	const notify = (msg) => {
	const toastr = document.querySelector('.messages');
	if(!toastr) return;

	toastr.textContent = msg;
	if(!toastr.classList.contains('on')) {
	toastr.classList.add('on');
	}
	};

	const clearNotice = () => {
	const toastr = document.querySelector('.messages');
	if(!toastr) return;

	toastr.textContent = '';
	toastr.classList.remove('on');
	};

	const displayUserPhotoAndName = (data) => {
	if(!data) return;

	// add your code here
	var {results, info} = data;
	var [profile] = results;

	document.querySelector('.user-photo img').src = profile.picture.large;
	document.querySelector('h2').textContent = `${profile.name.title} ${profile.name.last} ${profile.name.first}`;

	displayExtraUserInfo(profile);

	clearNotice();
	};

	const getAUserProfile = () => {
	const api = 'https://randomuser.me/api/';

	// make API call here
	fetch(api)
	.then(response => response.json())
	.then(data => displayUserPhotoAndName(data))

	notify(`requesting profile data ...`);
	};

	const startApp = () => {
	// invoke the getAUserProfile here
	getAUserProfile();
	};

	startApp();
	</script>


	</body>
	</html>