Created
October 28, 2018 11:35
-
-
Save theBig-oh/378e2ce5f1420ace76d25bd2fb3916b6 to your computer and use it in GitHub Desktop.
JS Bin // source https://jsbin.com/fedeqov
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>JS Bin</title> | |
| <style id="jsbin-css"> | |
| @import url("https://fonts.googleapis.com/css?family=Open+Sans"); | |
| .bodyContain { | |
| display: flex; | |
| justify-content: center; | |
| height: 100vh; | |
| align-items: center; | |
| font-family: "Open Sans", sans-serif; | |
| } | |
| .bodyContain .tabBase { | |
| display: flex; | |
| flex-direction: row; | |
| flex-wrap: wrap; | |
| width: 45%; | |
| height: 60%; | |
| padding: 2% 1% 1% 1%; | |
| background: #fdfafa; | |
| } | |
| .bodyContain .tabBase .tabHeader { | |
| width: 100%; | |
| text-transform: capitalize; | |
| } | |
| .bodyContain .tabBase .tabHeader span:first-of-type { | |
| font-weight: bold; | |
| font-size: 16px; | |
| } | |
| .bodyContain .tabBase .tabHeader span:last-of-type { | |
| float: right; | |
| } | |
| .bodyContain .tabBase .tabOuterContain { | |
| width: 31%; | |
| height: 50%; | |
| padding: 1%; | |
| color: black; | |
| margin-bottom: 3%; | |
| text-decoration: none !important; | |
| } | |
| .bodyContain .tabBase .tabOuterContain:hover { | |
| cursor: pointer; | |
| } | |
| .bodyContain .tabBase .tabOuterContain:hover .tabTitle { | |
| text-decoration: underline; | |
| } | |
| .bodyContain .tabBase .tabOuterContain:hover .tabBrand { | |
| text-decoration: none !important; | |
| } | |
| .bodyContain .tabBase .tabOuterContain:hover .tabImage .tabCat { | |
| visibility: visible; | |
| opacity: 1; | |
| } | |
| .bodyContain .tabBase .tabOuterContain .tabImage { | |
| height: 70%; | |
| display: flex; | |
| align-items: flex-end; | |
| margin-bottom: 2.5%; | |
| } | |
| .bodyContain .tabBase .tabOuterContain .tabImage .tabCat { | |
| border: 1px solid black; | |
| background: rgba(0, 0, 0, 0.65); | |
| color: white; | |
| text-transform: capitalize; | |
| width: 100%; | |
| padding: 1% 1% 0.5% 1%; | |
| opacity: 0; | |
| visibility: hidden; | |
| transition: all 0.3s ease; | |
| font-weight: bold; | |
| letter-spacing: 2px; | |
| } | |
| .bodyContain .tabBase .tabOuterContain .tabTitle { | |
| font-weight: bold; | |
| font-size: 16px; | |
| display: -webkit-box; | |
| -webkit-line-clamp: 3; | |
| -webkit-box-orient: vertical; | |
| overflow: hidden; | |
| margin-bottom: 2%; | |
| } | |
| .bodyContain .tabBase .tabOuterContain .tabBrand { | |
| color: #a8a8a8 !important; | |
| font-size: 12px; | |
| } | |
| @media (max-width: 990px) and (min-width: 500px) { | |
| .bodyContain { | |
| align-items: normal; | |
| } | |
| .bodyContain .tabBase { | |
| width: 98%; | |
| } | |
| } | |
| @media (max-width: 500px) { | |
| .bodyContain { | |
| align-items: normal; | |
| padding-top: 2%; | |
| } | |
| .bodyContain .tabBase { | |
| width: 70%; | |
| } | |
| .bodyContain .tabBase::after { | |
| bottom: 355%; | |
| } | |
| .bodyContain .tabBase .tabOuterContain { | |
| width: 100%; | |
| margin-bottom: 15%; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script id="jsbin-javascript"> | |
| function MakeElement(){ | |
| this.createEle = function(type,name,gridsize,custom) { | |
| let newElement = document.createElement(type); | |
| newElement.id = name; | |
| let classStuff = ['noPadding']; | |
| if(Array.isArray(custom)) { | |
| custom.forEach(function(clas){ | |
| classStuff.push(clas); | |
| }) | |
| } else { | |
| classStuff.push(custom); | |
| } | |
| if(!gridsize) { | |
| } else { | |
| gridsize.forEach(function(siz,i){ | |
| let multiSize = ['xs','sm','md','lg']; | |
| if(parseInt(siz) == 0) { | |
| classStuff.push(`hidden-${multiSize[i]}`); | |
| } else { | |
| classStuff.push(`col-${multiSize[i]}-${siz}`); | |
| } | |
| }) | |
| } | |
| classStuff.forEach(function(clas){ | |
| newElement.classList.add(clas); | |
| }); | |
| return newElement; | |
| } | |
| } | |
| function RenderSite(){ | |
| 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&placement.organic-type=mix&placement.visible=true&placement.available=true&placement.rec-count=6&placement.name=Below%20Article%20Thumbnails&placement.thumbnail.width=640&placement.thumbnail.height=480&user.session=init',{ | |
| method: 'GET'}) | |
| .then(results => { | |
| console.log(results) | |
| return results.json(); | |
| }).then(data => { | |
| let makeEle = new MakeElement; | |
| let bodyContainer = makeEle.createEle('div','bodyContainer',null,'bodyContain'); | |
| let taboolaBaseContainer = makeEle.createEle('div','tab_base_container',null,'tabBase'); | |
| let taboolaHeader = makeEle.createEle('div','tabHeader',null,'tabHeader'); | |
| taboolaHeader.innerHTML = `<span> You may also like...</span> <span> sponsered links by Taboola</span>`; | |
| taboolaBaseContainer.append(taboolaHeader); | |
| let taboolaGallery = data.list.map((listData,i) => { | |
| const altTextStuff = listData.description ? listData.description : listData.name; | |
| let initialContainer = makeEle.createEle('a','tab_outer_container_'+i,null,'tabOuterContain'); | |
| console.log(listData); | |
| let tabImage = makeEle.createEle('div','tabImage'+i,null,'tabImage'); | |
| let tabTitle = makeEle.createEle('div','tabTitle'+i,null,'tabTitle'); | |
| let tabBrand = makeEle.createEle('div','tabBrand'+i,null,'tabBrand'); | |
| if(listData.categories) { | |
| let tabCat = makeEle.createEle('div','tabCat'+i,null,'tabCat'); | |
| listData.categories.forEach((cat,x) => { | |
| let cato = makeEle.createEle('div','cat'+i,null,'catergory'); | |
| cato.innerHTML = cat; | |
| tabCat.append(cato); | |
| }) | |
| tabImage.append(tabCat); | |
| } | |
| tabImage.style.cssText = `background:url(${listData.thumbnail[0].url})no-repeat; background-size: 100% 100%;`; | |
| tabTitle.innerHTML = listData.name; | |
| tabBrand.innerHTML = listData.branding; | |
| initialContainer.title = altTextStuff; | |
| initialContainer.href = listData.url; | |
| initialContainer.append(tabImage,tabTitle, tabBrand); | |
| taboolaBaseContainer.append(initialContainer); | |
| }) | |
| bodyContainer.append(taboolaBaseContainer); | |
| document.querySelector('body').append(bodyContainer); | |
| }); | |
| } | |
| RenderSite(); | |
| </script> | |
| <script id="jsbin-source-css" type="text/css">@import url("https://fonts.googleapis.com/css?family=Open+Sans"); | |
| .bodyContain { | |
| display: flex; | |
| justify-content: center; | |
| height: 100vh; | |
| align-items: center; | |
| font-family: "Open Sans", sans-serif; | |
| } | |
| .bodyContain .tabBase { | |
| display: flex; | |
| flex-direction: row; | |
| flex-wrap: wrap; | |
| width: 45%; | |
| height: 60%; | |
| padding: 2% 1% 1% 1%; | |
| background: #fdfafa; | |
| } | |
| .bodyContain .tabBase .tabHeader { | |
| width: 100%; | |
| text-transform: capitalize; | |
| } | |
| .bodyContain .tabBase .tabHeader span:first-of-type { | |
| font-weight: bold; | |
| font-size: 16px; | |
| } | |
| .bodyContain .tabBase .tabHeader span:last-of-type { | |
| float: right; | |
| } | |
| .bodyContain .tabBase .tabOuterContain { | |
| width: 31%; | |
| height: 50%; | |
| padding: 1%; | |
| color: black; | |
| margin-bottom: 3%; | |
| text-decoration: none !important; | |
| } | |
| .bodyContain .tabBase .tabOuterContain:hover { | |
| cursor: pointer; | |
| } | |
| .bodyContain .tabBase .tabOuterContain:hover .tabTitle { | |
| text-decoration: underline; | |
| } | |
| .bodyContain .tabBase .tabOuterContain:hover .tabBrand { | |
| text-decoration: none !important; | |
| } | |
| .bodyContain .tabBase .tabOuterContain:hover .tabImage .tabCat { | |
| visibility: visible; | |
| opacity: 1; | |
| } | |
| .bodyContain .tabBase .tabOuterContain .tabImage { | |
| height: 70%; | |
| display: flex; | |
| align-items: flex-end; | |
| margin-bottom: 2.5%; | |
| } | |
| .bodyContain .tabBase .tabOuterContain .tabImage .tabCat { | |
| border: 1px solid black; | |
| background: rgba(0, 0, 0, 0.65); | |
| color: white; | |
| text-transform: capitalize; | |
| width: 100%; | |
| padding: 1% 1% 0.5% 1%; | |
| opacity: 0; | |
| visibility: hidden; | |
| transition: all 0.3s ease; | |
| font-weight: bold; | |
| letter-spacing: 2px; | |
| } | |
| .bodyContain .tabBase .tabOuterContain .tabTitle { | |
| font-weight: bold; | |
| font-size: 16px; | |
| display: -webkit-box; | |
| -webkit-line-clamp: 3; | |
| -webkit-box-orient: vertical; | |
| overflow: hidden; | |
| margin-bottom: 2%; | |
| } | |
| .bodyContain .tabBase .tabOuterContain .tabBrand { | |
| color: #a8a8a8 !important; | |
| font-size: 12px; | |
| } | |
| @media (max-width: 990px) and (min-width: 500px) { | |
| .bodyContain { | |
| align-items: normal; | |
| } | |
| .bodyContain .tabBase { | |
| width: 98%; | |
| } | |
| } | |
| @media (max-width: 500px) { | |
| .bodyContain { | |
| align-items: normal; | |
| padding-top: 2%; | |
| } | |
| .bodyContain .tabBase { | |
| width: 70%; | |
| } | |
| .bodyContain .tabBase::after { | |
| bottom: 355%; | |
| } | |
| .bodyContain .tabBase .tabOuterContain { | |
| width: 100%; | |
| margin-bottom: 15%; | |
| } | |
| }</script> | |
| <script id="jsbin-source-javascript" type="text/javascript"> | |
| function MakeElement(){ | |
| this.createEle = function(type,name,gridsize,custom) { | |
| let newElement = document.createElement(type); | |
| newElement.id = name; | |
| let classStuff = ['noPadding']; | |
| if(Array.isArray(custom)) { | |
| custom.forEach(function(clas){ | |
| classStuff.push(clas); | |
| }) | |
| } else { | |
| classStuff.push(custom); | |
| } | |
| if(!gridsize) { | |
| } else { | |
| gridsize.forEach(function(siz,i){ | |
| let multiSize = ['xs','sm','md','lg']; | |
| if(parseInt(siz) == 0) { | |
| classStuff.push(`hidden-${multiSize[i]}`); | |
| } else { | |
| classStuff.push(`col-${multiSize[i]}-${siz}`); | |
| } | |
| }) | |
| } | |
| classStuff.forEach(function(clas){ | |
| newElement.classList.add(clas); | |
| }); | |
| return newElement; | |
| } | |
| } | |
| function RenderSite(){ | |
| 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&placement.organic-type=mix&placement.visible=true&placement.available=true&placement.rec-count=6&placement.name=Below%20Article%20Thumbnails&placement.thumbnail.width=640&placement.thumbnail.height=480&user.session=init',{ | |
| method: 'GET'}) | |
| .then(results => { | |
| console.log(results) | |
| return results.json(); | |
| }).then(data => { | |
| let makeEle = new MakeElement; | |
| let bodyContainer = makeEle.createEle('div','bodyContainer',null,'bodyContain'); | |
| let taboolaBaseContainer = makeEle.createEle('div','tab_base_container',null,'tabBase'); | |
| let taboolaHeader = makeEle.createEle('div','tabHeader',null,'tabHeader'); | |
| taboolaHeader.innerHTML = `<span> You may also like...</span> <span> sponsered links by Taboola</span>`; | |
| taboolaBaseContainer.append(taboolaHeader); | |
| let taboolaGallery = data.list.map((listData,i) => { | |
| const altTextStuff = listData.description ? listData.description : listData.name; | |
| let initialContainer = makeEle.createEle('a','tab_outer_container_'+i,null,'tabOuterContain'); | |
| console.log(listData); | |
| let tabImage = makeEle.createEle('div','tabImage'+i,null,'tabImage'); | |
| let tabTitle = makeEle.createEle('div','tabTitle'+i,null,'tabTitle'); | |
| let tabBrand = makeEle.createEle('div','tabBrand'+i,null,'tabBrand'); | |
| if(listData.categories) { | |
| let tabCat = makeEle.createEle('div','tabCat'+i,null,'tabCat'); | |
| listData.categories.forEach((cat,x) => { | |
| let cato = makeEle.createEle('div','cat'+i,null,'catergory'); | |
| cato.innerHTML = cat; | |
| tabCat.append(cato); | |
| }) | |
| tabImage.append(tabCat); | |
| } | |
| tabImage.style.cssText = `background:url(${listData.thumbnail[0].url})no-repeat; background-size: 100% 100%;`; | |
| tabTitle.innerHTML = listData.name; | |
| tabBrand.innerHTML = listData.branding; | |
| initialContainer.title = altTextStuff; | |
| initialContainer.href = listData.url; | |
| initialContainer.append(tabImage,tabTitle, tabBrand); | |
| taboolaBaseContainer.append(initialContainer); | |
| }) | |
| bodyContainer.append(taboolaBaseContainer); | |
| document.querySelector('body').append(bodyContainer); | |
| }); | |
| } | |
| RenderSite();</script></body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import url("https://fonts.googleapis.com/css?family=Open+Sans"); | |
| .bodyContain { | |
| display: flex; | |
| justify-content: center; | |
| height: 100vh; | |
| align-items: center; | |
| font-family: "Open Sans", sans-serif; | |
| } | |
| .bodyContain .tabBase { | |
| display: flex; | |
| flex-direction: row; | |
| flex-wrap: wrap; | |
| width: 45%; | |
| height: 60%; | |
| padding: 2% 1% 1% 1%; | |
| background: #fdfafa; | |
| } | |
| .bodyContain .tabBase .tabHeader { | |
| width: 100%; | |
| text-transform: capitalize; | |
| } | |
| .bodyContain .tabBase .tabHeader span:first-of-type { | |
| font-weight: bold; | |
| font-size: 16px; | |
| } | |
| .bodyContain .tabBase .tabHeader span:last-of-type { | |
| float: right; | |
| } | |
| .bodyContain .tabBase .tabOuterContain { | |
| width: 31%; | |
| height: 50%; | |
| padding: 1%; | |
| color: black; | |
| margin-bottom: 3%; | |
| text-decoration: none !important; | |
| } | |
| .bodyContain .tabBase .tabOuterContain:hover { | |
| cursor: pointer; | |
| } | |
| .bodyContain .tabBase .tabOuterContain:hover .tabTitle { | |
| text-decoration: underline; | |
| } | |
| .bodyContain .tabBase .tabOuterContain:hover .tabBrand { | |
| text-decoration: none !important; | |
| } | |
| .bodyContain .tabBase .tabOuterContain:hover .tabImage .tabCat { | |
| visibility: visible; | |
| opacity: 1; | |
| } | |
| .bodyContain .tabBase .tabOuterContain .tabImage { | |
| height: 70%; | |
| display: flex; | |
| align-items: flex-end; | |
| margin-bottom: 2.5%; | |
| } | |
| .bodyContain .tabBase .tabOuterContain .tabImage .tabCat { | |
| border: 1px solid black; | |
| background: rgba(0, 0, 0, 0.65); | |
| color: white; | |
| text-transform: capitalize; | |
| width: 100%; | |
| padding: 1% 1% 0.5% 1%; | |
| opacity: 0; | |
| visibility: hidden; | |
| transition: all 0.3s ease; | |
| font-weight: bold; | |
| letter-spacing: 2px; | |
| } | |
| .bodyContain .tabBase .tabOuterContain .tabTitle { | |
| font-weight: bold; | |
| font-size: 16px; | |
| display: -webkit-box; | |
| -webkit-line-clamp: 3; | |
| -webkit-box-orient: vertical; | |
| overflow: hidden; | |
| margin-bottom: 2%; | |
| } | |
| .bodyContain .tabBase .tabOuterContain .tabBrand { | |
| color: #a8a8a8 !important; | |
| font-size: 12px; | |
| } | |
| @media (max-width: 990px) and (min-width: 500px) { | |
| .bodyContain { | |
| align-items: normal; | |
| } | |
| .bodyContain .tabBase { | |
| width: 98%; | |
| } | |
| } | |
| @media (max-width: 500px) { | |
| .bodyContain { | |
| align-items: normal; | |
| padding-top: 2%; | |
| } | |
| .bodyContain .tabBase { | |
| width: 70%; | |
| } | |
| .bodyContain .tabBase::after { | |
| bottom: 355%; | |
| } | |
| .bodyContain .tabBase .tabOuterContain { | |
| width: 100%; | |
| margin-bottom: 15%; | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function MakeElement(){ | |
| this.createEle = function(type,name,gridsize,custom) { | |
| let newElement = document.createElement(type); | |
| newElement.id = name; | |
| let classStuff = ['noPadding']; | |
| if(Array.isArray(custom)) { | |
| custom.forEach(function(clas){ | |
| classStuff.push(clas); | |
| }) | |
| } else { | |
| classStuff.push(custom); | |
| } | |
| if(!gridsize) { | |
| } else { | |
| gridsize.forEach(function(siz,i){ | |
| let multiSize = ['xs','sm','md','lg']; | |
| if(parseInt(siz) == 0) { | |
| classStuff.push(`hidden-${multiSize[i]}`); | |
| } else { | |
| classStuff.push(`col-${multiSize[i]}-${siz}`); | |
| } | |
| }) | |
| } | |
| classStuff.forEach(function(clas){ | |
| newElement.classList.add(clas); | |
| }); | |
| return newElement; | |
| } | |
| } | |
| function RenderSite(){ | |
| 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&placement.organic-type=mix&placement.visible=true&placement.available=true&placement.rec-count=6&placement.name=Below%20Article%20Thumbnails&placement.thumbnail.width=640&placement.thumbnail.height=480&user.session=init',{ | |
| method: 'GET'}) | |
| .then(results => { | |
| console.log(results) | |
| return results.json(); | |
| }).then(data => { | |
| let makeEle = new MakeElement; | |
| let bodyContainer = makeEle.createEle('div','bodyContainer',null,'bodyContain'); | |
| let taboolaBaseContainer = makeEle.createEle('div','tab_base_container',null,'tabBase'); | |
| let taboolaHeader = makeEle.createEle('div','tabHeader',null,'tabHeader'); | |
| taboolaHeader.innerHTML = `<span> You may also like...</span> <span> sponsered links by Taboola</span>`; | |
| taboolaBaseContainer.append(taboolaHeader); | |
| let taboolaGallery = data.list.map((listData,i) => { | |
| const altTextStuff = listData.description ? listData.description : listData.name; | |
| let initialContainer = makeEle.createEle('a','tab_outer_container_'+i,null,'tabOuterContain'); | |
| console.log(listData); | |
| let tabImage = makeEle.createEle('div','tabImage'+i,null,'tabImage'); | |
| let tabTitle = makeEle.createEle('div','tabTitle'+i,null,'tabTitle'); | |
| let tabBrand = makeEle.createEle('div','tabBrand'+i,null,'tabBrand'); | |
| if(listData.categories) { | |
| let tabCat = makeEle.createEle('div','tabCat'+i,null,'tabCat'); | |
| listData.categories.forEach((cat,x) => { | |
| let cato = makeEle.createEle('div','cat'+i,null,'catergory'); | |
| cato.innerHTML = cat; | |
| tabCat.append(cato); | |
| }) | |
| tabImage.append(tabCat); | |
| } | |
| tabImage.style.cssText = `background:url(${listData.thumbnail[0].url})no-repeat; background-size: 100% 100%;`; | |
| tabTitle.innerHTML = listData.name; | |
| tabBrand.innerHTML = listData.branding; | |
| initialContainer.title = altTextStuff; | |
| initialContainer.href = listData.url; | |
| initialContainer.append(tabImage,tabTitle, tabBrand); | |
| taboolaBaseContainer.append(initialContainer); | |
| }) | |
| bodyContainer.append(taboolaBaseContainer); | |
| document.querySelector('body').append(bodyContainer); | |
| }); | |
| } | |
| RenderSite(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment