<section class="section">
<div class="container">
<div class="box">
<img id="myimage" src="">
<div class="is-clipped">
<div id="mytitle" class="has-text-weight-bold"></div>
<div id="mydescription" class="mt-2"></div>
<div id="myurl" class="mt-2 is-size-7"></div>
</div>
</div>
</div>
</section>.box{
width: 700px;
height: 150px;
}
img#myimage {
height: 90px;
}
.is-clipped {
overflow: hidden!important;
display: inline-block;
position: absolute;
}
div#mydescription {
width: 500px;
margin-left: 15px;
}
div#mytitle {
margin-left: 15px;
}
div#myurl {
margin-left: 15px;
}var data = { key: "6deecf06e6abcbcdcdffee2d7c77f845", q: "http://www.italia.it" };
fetch("https://api.linkpreview.net", {
method: "POST",
mode: "cors",
body: JSON.stringify(data)
})
.then((res) => res.json())
.then((response) => {
document.getElementById("mytitle").innerHTML = response.title;
document.getElementById("mydescription").innerHTML = response.description;
document.getElementById("myimage").src = response.image;
document.getElementById("myurl").innerHTML = response.url;
});
External CSS
External JavaScript
This Pen doesn't use any external JavaScript resources.