This example show how easy it is to display a result from an API call with VanJS
import v from "./van.js"
const {span, h1, div, img } = v.tags
const add = (base) => (elt) => v.add(base, elt)
const target = document.getElementById("app")
const title = document.getElementById("title")
const style_user_pict = `
border:1px solid orange;
padding: 3px;
margin:10px`;
function User (user) {
return (
// User wrapper
div ({style:"display:flex; align-items:center;width:90%;"},
// User picture
div({style:"margin-right:10px"},
img({style:style_user_pict, src:user.picture.thumbnail})
),
// User name
div (
span(user.name.first, " "),
span(user.name.last)
)
)
)
}
function toJson(r) {
return r.json()
}
function displayUsers (users) {
add(title)(div("Random Users API"))
users.results.map(user => add(target)(
User(user))
)
}
fetch("https://randomuser.me/api?results=5")
.then(toJson)
.then(displayUsers)
Top comments (0)