<html>
<head>
<meta charset="UTF-8" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="./styles.css" />
</head>
<body>
<h1 class="myTitle"><a href="https://blog.sandbay.it/" target="_blank">Go to Blog SandBay</a></h1>
<div>
<p id="obscured-data" class="text-center">3331111111</p>
</div>
</body>
</html>
h1.myTitle {
background: #236965 url("https://tools.obyte.it/img/idrobyte/logo_sfera.svg")
no-repeat;
background-position: 2px 2px;
margin: 0 0 10px;
padding: 0 0 0 60px;
background-size: 45px;
line-height: 46px !important;
}
h1.myTitle a {
color: white;
font-family: Verdana;
font-size: 20px;
text-decoration: none;
}
View Compiled
function obscureData(visibleData, show = 3) {
return (visibleData && visibleData.length > show) ?
`*${new Array(visibleData.length - show).join('*')}${visibleData.substr(-show)}`
: '********';
}
document.getElementById('obscured-data')
.innerHTML = obscureData('3331111111');
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.