Skip to content

Instantly share code, notes, and snippets.



Last active Nov 26, 2018
What would you like to do?
Profile view with editing
<!doctype html>
<meta charset="utf8">
<title>IPNS Profile App</title>
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="" integrity="sha384-wnAC7ln+XN0UKdcPvJvtqIH3jOjs9pnKnq9qX68ImXvOGz2JuFoEiCjT8jyZQX2z"
<link rel="stylesheet" href="" integrity="sha384-nT8r1Kzllf71iZl81CdFzObMsaLOhqBU1JD2+XoAALbdtWaXDOlWOZTR4v1ktjPE"
<link rel="stylesheet" href="" integrity="sha384-HbmWTHay9psM8qyzEKPc8odH4DsOuzdejtnr+OFtDmOcIVnhgReQ4GZBH7uwcjf6"
<div id="loader" data-bind="visible: state.loading"></div>
<div id="main" style="display: none;" data-bind="visible: !state.loading()">
<div id="image" data-bind="style: { 'backgroundImage': `url(${pic.url()})` }"></div>
<div id="profile">
<h1 id="name">
<span id="first" data-bind="lazy: name.first, editable: state.editing"></span>
<span id="last" data-bind="lazy: name.last, editable: state.editing"></span>
<div id="work" >
<ul data-bind="foreach: work">
<h2 class="job">
<span class="title" data-bind="lazy: title, editable: $root.state.editing"></span> at
<span class="employer" data-bind="lazy: employer, editable: $root.state.editing"></span>
<div id="bio" data-bind="lazy: bio, editable: state.editing"></div>
<div id="social">
<ul data-bind="foreach: social">
<a data-bind="attr: { href: url() }">
<i data-bind="attr: { class: `fab fa-${service()}` }"></i>
<button id="edit" title="Edit and save profile data" data-bind="click: handleEdit">
<i class="fas" data-bind="css: {'fa-pencil-alt': !state.editing(), 'fa-save': state.editing()}"></i>
<script src="bundle.js"></script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment