Stylize Stories

Developer
Joo Vctor De Oliveira Santos
Size
2,465 Kb
Views
36,414

How do I make an stylize stories?

What is a stylize stories? How do you make a stylize stories? This script and codes were developed by Joo Vctor De Oliveira Santos on 27 August 2022, Saturday.

Stylize Stories Previews
IQ Test

Stylize Stories - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Stylize Stories</title> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css'>
</head>
<body> <div class="jumbotron"> <div class="container"> <div class="row"> <div class="page-title text-center"> <h1>Camper News Hot Stories</br><small><a href="www.freecodecamp.com">FreeCodeCamp.com</a></small></h1> </div> </div> </br> <div class="row"> <div class="col-md-8 col-md-offset-2"> <div class="progress" id="loadingBar" > <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"> Loading... </div> </div> <div id="list" class="list-group"> </div> </div> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Stylize Stories - Script Codes JS Codes

var template = '<a id="{ID}" href="{LINK_POST}" target="_blank" class="list-group-item list-group-item-info"><table><tr><td rowspan="2"><img src="{IMAGE}" class="img-responsive img-circle" style="width: 60px" /></td><td style="padding-left:2em"><h4 class="list-group-item-heading"><strong>{TITLE} </strong><span class="label label-success"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span> {LIKES}</span></h4></td></tr><tr><td style="padding-left:3em;"><p class="list-group-item-text"><small>Posted on {DATE} by <a target="_blank" href="http://www.freecodecamp.com/{USERNAME}">{USERNAME}</a></small></p></td></tr></table></a>';
function generateItem(id, title, username, likes, image, date, link) { var item = template.replace(/{TITLE}/g, title).replace(/{ID}/g, id).replace(/{IMAGE}/g, image).replace(/{USERNAME}/g, username).replace(/{LINK_POST}/g, link).replace(/{LIKES}/g, likes).replace(/{DATE}/g, date.toDateString()); return item;
}
function addItem(value){ var item = generateItem(value.id,value.headline, value.author.username, value.rank, value.author.picture, new Date(value.timePosted), value.link); $("#list").html($("#list").html() + item); $("#"+value.id).addClass("animated zoomIn");
}
//$("#list").html($("#list").html() + generateItem("Testing title", "jvhti", 32, 34, "https://avatars.githubusercontent.com/u/7606025?v=3", new Date(1452731915396)));
$.get("http://www.freecodecamp.com/news/hot", function(json) { json.forEach(addItem); $('#loadingBar').addClass("animated fadeOut");
});
Stylize Stories - Script Codes
Stylize Stories - Script Codes
Home Page Home
Developer Joo Vctor De Oliveira Santos
Username jvhti
Uploaded August 27, 2022
Rating 3
Size 2,465 Kb
Views 36,414
Do you need developer help for Stylize Stories?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Joo Vctor De Oliveira Santos (jvhti) Script Codes
Name
Portfolio Flat
Markdown Previewer
Personal Portfolio
Love Letter
JQuery UI Playground
Testimonial Gallery
Wikipedia Viewer
Youtube Random Video With Cover Image
Twitch JSON API
Random Quote Machine
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!