Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
VanillaJS — index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Link Content Previewer</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="wrapper">
<p>Hi there! 👋</p>
<p>I would like to share some frontend tips and tricks that
I have already applied to some of my projects.</p>
<p>Happily coming back with <br/> my
<a href="https://dev.to/ilonacodes/frontend-shorts-vue-js-vanilla-js-digital-dices-og"
onmouseover="showLinkPreview()"
onmouseleave="hideLinkPreview()"
class="link-with-preview"
data-image="https://dev-to-uploads.s3.amazonaws.com/i/3zp478dfafzy1mgfaevn.jpg"
data-title="Frontend Shorts: Vue.js + Vanilla.js — Digital Dices"
data-text="Let me show you how you can implement a dice-rolling simulator in less than 30 minutes of your time on the front-end."
>frontend shorts</a>
series on
<a href="https://dev.to"
onmouseover="showLinkPreview()"
onmouseleave="hideLinkPreview()"
class="link-with-preview"
data-image="https://thepracticaldev.s3.amazonaws.com/i/6hqmcjaxbgbon8ydw93z.png"
data-title="DEV Community 👩‍💻👨‍💻"
data-text="Where programmers share ideas and help each other grow—A constructive and inclusive social network."
>
dev.to.
</a>
Let me show you how...
</p>
</div>
<div class="card">
<img src="" class="card-img-top">
<div class="card-body">
<h5 class="card-title"></h5>
<p class="card-text"></p>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
@harryheman

This comment has been minimized.

Copy link

@harryheman harryheman commented May 1, 2020

we don't need onmouseover="showLinkPreview()" onmouseleave="hideLinkPreview()" here

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment