Stylize Stories
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 - 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");
});

Developer | Joo Vctor De Oliveira Santos |
Username | jvhti |
Uploaded | August 27, 2022 |
Rating | 3 |
Size | 2,465 Kb |
Views | 36,414 |
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!
Name | Size |
Portfolio Flat | 3,642 Kb |
Markdown Previewer | 11,087 Kb |
Personal Portfolio | 3,604 Kb |
Love Letter | 3,237 Kb |
JQuery UI Playground | 5,215 Kb |
Testimonial Gallery | 3,887 Kb |
Wikipedia Viewer | 2,624 Kb |
Youtube Random Video With Cover Image | 2,600 Kb |
Twitch JSON API | 2,808 Kb |
Random Quote Machine | 2,611 Kb |
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!
Name | Username | Size |
Blog Concept 2 | JGallardo | 2,994 Kb |
Super Discount | Orrinward | 3,225 Kb |
Elon Musk - Tribute Page - FreeCodeCamp | Yunnimun | 8,615 Kb |
GrcJS | Vino6 | 2,047 Kb |
BenU Maintenance Site | Ksherman | 4,893 Kb |
AngularJS Datalist Directive | M-e-conroy | 2,366 Kb |
PNotify Demo | Adittmar | 1,731 Kb |
Kut D3 | Jellevrswk | 3,687 Kb |
Two tables and header with jspdf-autotable | Someatoms | 2,245 Kb |
A Pen by Ben Babics | Benbabics | 2,957 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!