Camper News
How do I make an camper news?
Objective: Build a CodePen.io app that is functionally similar to this: http://codepen.io/FreeCodeCamp/full/pgNRoJ.. What is a camper news? How do you make a camper news? This script and codes were developed by Sam Koshy on 06 November 2022, Sunday.
Camper News - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Camper News</title> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href='https://fonts.googleapis.com/css?family=Abel|Oswald|Roboto:400,500' rel='stylesheet' type='text/css'>
<div class="container-fluid text-center title"> <h2>freeCodeCamp (<i class="fa fa-fire"></i>)</h2> <h1> Camper News</h1> <br> <div class='camperNews'></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Camper News - Script Codes CSS Codes
body { background: #90A5A6; //url(https://c2.staticflickr.com/4/3355/3424524099_837bb70486_b.jpg) center fixed;
}
.title h2 { font-family: 'Abel', sans-serif;
}
.title h1 { font-family: 'Oswald', sans-serif;
}
.newsContainerStyle { width: 230px; height: 300px; background: rgb(240, 240, 240); font-family: 'Roboto', sans-serif; //border:2px solid black; border-radius: 10px; display: inline-block; margin: 0 20px 20px 0; text-align: left; box-shadow: 10px 10px 10px 2px rgba(0, 0, 0, 0.5); /*The first two values set the offset of the shadow, the third value is the amount of blur and the last value is the spread of the shadow*/
}
.newsContainerStyle img { width: 230.5px; height: 206px; border-radius: 10px 10px 0 0; padding-right:0;
}
.storyTitle { position: relative; top: 6px; left: 8px; font-size: 110%; font-weight: 500;
}
.storyDetails { position: relative; top: 6px; left: 8px;
}
.fa-heart { color: #8A0707;
}
Camper News - Script Codes JS Codes
var defaultImg = " onerror=\"this.src='https://static-cdn.jtvnw.net/jtv_user_pictures/freecodecamp-profile_image-d9514f2df0962329-300x300.png'\" >"; //replace any broken image link with default image
$(document).ready(function() { $.getJSON('https://www.freecodecamp.com/news/hot', function(news) { //$(".camperNews").html(news.length); var post = "", articleTitle; news.forEach(function(article) { var datePosted = new Date(article.timePosted); var image = ""; //if image field is empty replace with author picture if (article.image !== "") { image = article.image; } else { image = article.author.picture; } if (article.headline.length<25){ //title is limited to 25 characters articleHeadline=article.Title; } else {articleHeadline=article.headline.substring(0, 25)+"...";} post += "<div class='newsContainerStyle'><a href='" + article.link + "'><img src='" + image + "'" + defaultImg + "<span class='storyTitle'>" + articleHeadline + "</span></a><br><span class='storyDetails'>by  - <a href='https://www.freecodecamp.com/" + article.author.username + "'>" + article.author.username + "</a><br><i class='fa fa-heart'></i> " + article.rank + "<br> Posted on: " + datePosted.toDateString().substring(0, 3) + ", " + datePosted.toDateString().substring(4, datePosted.toDateString().length) + "</span></div>"; }); $(".camperNews").html(post); });
});
Developer | Sam Koshy |
Username | codinger |
Uploaded | November 06, 2022 |
Rating | 3 |
Size | 3,194 Kb |
Views | 20,240 |
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 |
Tic Tac Toe _ Alternate | 5,275 Kb |
Twitchtv Status | 4,663 Kb |
Data Visualization - US GDP | 3,131 Kb |
Heat Map | 3,614 Kb |
Simon | 4,744 Kb |
Random Quote Machine | 4,626 Kb |
Wikipedia Viewer | 4,681 Kb |
Pomodoro Clock | 5,358 Kb |
Javascript Calculator | 4,576 Kb |
Tic Tac Toe | 5,797 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 |
Price | Catcode | 2,623 Kb |
Pomodoro Timer | Sdas13 | 2,900 Kb |
Intake Form Page 2 | Ijantje | 4,983 Kb |
WRENCH - STAFF | Lolita-adams | 1,608 Kb |
CSS3 Butterfly | Timohausmann | 3,430 Kb |
Navcube | Wbarlow | 4,775 Kb |
A Pen by Mohomed Anees | Mohomedanees | 12,597 Kb |
Cool audio | Bigliam | 1,868 Kb |
Fireworks Show | Arianalynn | 3,048 Kb |
Playing with FlexBox | _Billy_Brown | 3,162 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!