Skip to content

Instantly share code, notes, and snippets.

@ArunNehra

ArunNehra/index.html

Created May 21, 2021 15:19
Show Gist options
  • Save ArunNehra/48a3a10588e307f5bd8483ad4424bea2 to your computer and use it in GitHub Desktop.
Save ArunNehra/48a3a10588e307f5bd8483ad4424bea2 to your computer and use it in GitHub Desktop.
Download ZIP
CSD Test // source https://jsbin.com/wufufa
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSD Test</title>
<meta content="width=device-width, initial-scale=1" name="viewport" />
<link rel="stylesheet" href="style1.css">
<script src="api.js"></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<style id="jsbin-css">
.widget {
width: 31.33%;
position: relative;
float: left;
display: block;
margin: 0 0 2% 0;
margin-left: 2%;
}
@media screen and (min-width: 0px) and (max-width: 500px) {
.widget {
width: 97.99%;
}
}
#widget {
width: auto;
margin-left: -2%;
}
p {
margin: auto;
}
img {
width: 100%;
}
.widget .title {
font-family: 'Montserrat', sans-serif;
font-size: 16.0px;
font-weight: bold;
text-decoration: none;
color: #333333;
height: 88px;
line-height: 22.0px;
}
a {
text-decoration: none;
}
.widget .title .f3 {
font-size: 11px;
color: #999999;
text-transform: capitalize;
}
.header {
font-family: 'Montserrat', sans-serif;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 16.0px;
font-weight: bold;
padding: 0 0 6px 0;
}
.disclosure {
font-size: 11px;
color: #000000;
font-weight: normal;
}
.f2{
margin-top: 0.2em;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.f2:hover, .f3:hover{
text-decoration: underline;
}
</style>
</head>
<body>
<div id="widgetlang"> - User's Language </div><br/>
<div class="header"> <span> You May Like </span>
<span>
<a class="disclosure"
href="https://popup.taboola.com/en/?template=colorbox&utm_source=funniestindian&utm_medium=referral&utm_content=thumbnails-a:below-article:">
Sponsored Links by Taboola</a>
</span>
</div>
<div id="widget"></div>
<script id="jsbin-javascript">
function getWidget() {
fetch(
"https://api.taboola.com/1.2/json/apitestaccount/recommendations.get?app.type=web&app.apikey=7be65fc78e52c11727793f68b06d782cff9ede3c&source.id=%2Fdigiday-publishing-summit%2F&source.url=https%3A%2F%2Fblog.taboola.com%2Fdigiday-publishing-summit%2F&source.type=text&amp;placement.organic-type=mix&amp;placement.visible=true&amp;placement.available=true&placement.rec-count=6&placement.name=Below%20Article%20Thumbnails&placement.thumbnail.width=640&placement.thumbnail.height=480&user.session=init"
)
.then((response) => {
return response.json();
})
.then((data) => {
console.log(data);
var userLang = navigator.language || navigator.userLanguage;
console.log(userLang);
const html = data.list
.map((user) => {
return `
<div class="widget">
<div class="user">
<a href="${user.url}">
<p class="f1"><img src="${user.thumbnail[0].url}" /></p>
</a>
<a href="${user.url}">
<div class="title">
<p class="f2">${user.name}</p>
<p class="f3">${user.branding} | ${user.origin} | ${user.categories[0]}</p>
</div>
</a>
</div>
</div>
`;
})
.join("");
document.querySelector("#widget").insertAdjacentHTML("afterbegin", html);
document.querySelector("#widgetlang").insertAdjacentHTML("afterbegin", userLang);
})
.catch((error) => {
console.log(error);
});
}
// function call
getWidget();
</script>
<script id="jsbin-source-css" type="text/css">.widget {
width: 31.33%;
position: relative;
float: left;
display: block;
margin: 0 0 2% 0;
margin-left: 2%;
}
@media screen and (min-width: 0px) and (max-width: 500px) {
.widget {
width: 97.99%;
}
}
#widget {
width: auto;
margin-left: -2%;
}
p {
margin: auto;
}
img {
width: 100%;
}
.widget .title {
font-family: 'Montserrat', sans-serif;
font-size: 16.0px;
font-weight: bold;
text-decoration: none;
color: #333333;
height: 88px;
line-height: 22.0px;
}
a {
text-decoration: none;
}
.widget .title .f3 {
font-size: 11px;
color: #999999;
text-transform: capitalize;
}
.header {
font-family: 'Montserrat', sans-serif;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 16.0px;
font-weight: bold;
padding: 0 0 6px 0;
}
.disclosure {
font-size: 11px;
color: #000000;
font-weight: normal;
}
.f2{
margin-top: 0.2em;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.f2:hover, .f3:hover{
text-decoration: underline;
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">function getWidget() {
fetch(
"https://api.taboola.com/1.2/json/apitestaccount/recommendations.get?app.type=web&app.apikey=7be65fc78e52c11727793f68b06d782cff9ede3c&source.id=%2Fdigiday-publishing-summit%2F&source.url=https%3A%2F%2Fblog.taboola.com%2Fdigiday-publishing-summit%2F&source.type=text&amp;placement.organic-type=mix&amp;placement.visible=true&amp;placement.available=true&placement.rec-count=6&placement.name=Below%20Article%20Thumbnails&placement.thumbnail.width=640&placement.thumbnail.height=480&user.session=init"
)
.then((response) => {
return response.json();
})
.then((data) => {
console.log(data);
var userLang = navigator.language || navigator.userLanguage;
console.log(userLang);
const html = data.list
.map((user) => {
return `
<div class="widget">
<div class="user">
<a href="${user.url}">
<p class="f1"><img src="${user.thumbnail[0].url}" /></p>
</a>
<a href="${user.url}">
<div class="title">
<p class="f2">${user.name}</p>
<p class="f3">${user.branding} | ${user.origin} | ${user.categories[0]}</p>
</div>
</a>
</div>
</div>
`;
})
.join("");
document.querySelector("#widget").insertAdjacentHTML("afterbegin", html);
document.querySelector("#widgetlang").insertAdjacentHTML("afterbegin", userLang);
})
.catch((error) => {
console.log(error);
});
}
// function call
getWidget();
</script></body>
</html>
Raw
jsbin.wufufa.css
.widget {
width: 31.33%;
position: relative;
float: left;
display: block;
margin: 0 0 2% 0;
margin-left: 2%;
}
@media screen and (min-width: 0px) and (max-width: 500px) {
.widget {
width: 97.99%;
}
}
#widget {
width: auto;
margin-left: -2%;
}
p {
margin: auto;
}
img {
width: 100%;
}
.widget .title {
font-family: 'Montserrat', sans-serif;
font-size: 16.0px;
font-weight: bold;
text-decoration: none;
color: #333333;
height: 88px;
line-height: 22.0px;
}
a {
text-decoration: none;
}
.widget .title .f3 {
font-size: 11px;
color: #999999;
text-transform: capitalize;
}
.header {
font-family: 'Montserrat', sans-serif;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 16.0px;
font-weight: bold;
padding: 0 0 6px 0;
}
.disclosure {
font-size: 11px;
color: #000000;
font-weight: normal;
}
.f2{
margin-top: 0.2em;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.f2:hover, .f3:hover{
text-decoration: underline;
}
Raw
jsbin.wufufa.js
function getWidget() {
fetch(
"https://api.taboola.com/1.2/json/apitestaccount/recommendations.get?app.type=web&app.apikey=7be65fc78e52c11727793f68b06d782cff9ede3c&source.id=%2Fdigiday-publishing-summit%2F&source.url=https%3A%2F%2Fblog.taboola.com%2Fdigiday-publishing-summit%2F&source.type=text&amp;placement.organic-type=mix&amp;placement.visible=true&amp;placement.available=true&placement.rec-count=6&placement.name=Below%20Article%20Thumbnails&placement.thumbnail.width=640&placement.thumbnail.height=480&user.session=init"
)
.then((response) => {
return response.json();
})
.then((data) => {
console.log(data);
var userLang = navigator.language || navigator.userLanguage;
console.log(userLang);
const html = data.list
.map((user) => {
return `
<div class="widget">
<div class="user">
<a href="${user.url}">
<p class="f1"><img src="${user.thumbnail[0].url}" /></p>
</a>
<a href="${user.url}">
<div class="title">
<p class="f2">${user.name}</p>
<p class="f3">${user.branding} | ${user.origin} | ${user.categories[0]}</p>
</div>
</a>
</div>
</div>
`;
})
.join("");
document.querySelector("#widget").insertAdjacentHTML("afterbegin", html);
document.querySelector("#widgetlang").insertAdjacentHTML("afterbegin", userLang);
})
.catch((error) => {
console.log(error);
});
}
// function call
getWidget();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment