📜JavaScript developer.
🐲RPG fan.
📚Storyteller and 🕹game developer.
👨Father and Husband.
Published
Edited
Oct 27, 2021
Importers
2 stars
user = await fetch("https://randomuser.me/api").then((result)=>result.json())
card = html`
<div class="example">
${user.results[0].name.first} ${user.results[0].name.last}
</div>
`
style = html`
<style type="text/css">
aside {
padding: 8px;
margin: 4px;
font-family: sans-serif;
}
.card {
display: flex;
border: 1px solid black;
box-shadow: 4px 4px 4px;
width: 50%;
}
.portrait {
display: inline-block;
margin: 4px;
}
.portrait img {
border: 1px dotted blue;
}
.card ul {
list-style-type: none;
}
</style>
`
userData = ({
firstname: user.results[0].name.first,
lastname: user.results[0].name.last,
picture: user.results[0].picture.medium,
email: user.results[0].email,
street: user.results[0].location.street.name,
city: user.results[0].location.city,
state: user.results[0].location.state,
country: user.results[0].location.country
})
cardHTML = html`
<aside>
<div class="card">
<div class="portrait">
<img src="${userData.picture}" />
</div>
<div class="info">
<ul>
<li><a href="mailto: ${userData.email} ">${userData.firstname} ${userData.lastname}</a></li>
<li>${userData.street}</li>
<li>${userData.city}, ${userData.state}</li>
<li>${userData.country}</li>
</ul>
</div>
</div>
</aside>
`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
