Camper News Clone
How do I make an camper news clone?
Built with Angular.js and SCSS.FreeCodeCamp's Camper News clone with styling changesChallenge: "Zipline: Stylize Stories on Camper News". What is a camper news clone? How do you make a camper news clone? This script and codes were developed by Katie Inkblotty on 08 August 2022, Monday.
Camper News Clone - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Camper News Clone</title> <link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body ng-app="campNewsApp"> <div class="container heading" ng-controller="infoCtrl"> <h3>FreeCodeCamp</h3> <h1>Camper News</h1> <div class="info-bar"> <div class="line"></div> <div class="date">{{ date | date:'EEE., MMM. d, yyyy' }}</div> <div class="issue">Vol. 1 No. 3</div> <div class="line"></div> </div> </div> <div class="flex-container feed" ng-controller="newsCtrl"> <div class="post" ng-repeat="newPost in news | orderBy: '-timePosted' | limitTo: 9"> <a target="_blank" ng-href="{{newPost.link}}"></a> <div class="description"> <p> <i class="fa fa-heart"></i> {{newPost.upVotes.length}} <a target="_blank" ng-href="{{newPost.link}}"><span class="title">{{newPost.headline}}</span></a> </p> <div class="author"> <a target="_blank" ng-href="http://www.freecodecamp.com/{{newPost.author.username}}"><p>by <img class="userPic" src="{{newPost.author.picture}}"></img> {{newPost.author.username}}</p></a> </div> <p><a class="btn" ng-href="http://www.freecodecamp.com/news/{{newPost.storyLink | spinal}}"target="_blank">Discuss</a></p> <p>Posted: {{newPost.timePosted | date:'MMM. d, h:mm a'}}</p> </div> </div> </div>
</body>
</html> <script src='http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Camper News Clone - Script Codes CSS Codes
body { background-image: url(http://lpontius.com/wp-content/uploads/2011/10/blank_page.jpg); background-size: cover; color: #663300;
}
body a { color: #663300; text-decoration: none;
}
body a:hover { text-decoration: underline;
}
.heading { font-family: 'Roboto Slab', serif; font-size: 1.1em; text-align: center;
}
.heading h1 { color: #663300; font-size: 3.5em; font-weight: 700; margin: 0 auto 2% auto;
}
.heading h3 { font-size: 1.5em; margin: 3% auto 0.5% auto;
}
.heading .line { background-color: #663300; height: 2px; margin: 0.5% auto; width: 100%;
}
.heading .date { display: inline-block; margin: 0; text-align: left; width: 47%;
}
.heading .issue { display: inline-block; text-align: right; width: 47%;
}
.feed { padding-top: 1em;
}
.post { border-bottom: 1px solid #663300; display: inline-block; font-family: 'Roboto Slab', serif; margin: 1em 2em; width: 95%; vertical-align: middle;
}
.post .author { text-align: right;
}
.post .author .userPic { border-radius: 50%; margin: 0 0.25% 0 0.5%; vertical-align: middle; width: 2em;
}
.post .description { padding: 0.5em 1em;
}
.post .description .title { font-size: 1.25em; margin: 0; margin-left: 2%; text-align: left;
}
.post .description .btn { background-color: transparent; border: 2px solid #663300; border-radius: 0.5em; float: right; font-size: 1.1em; margin-bottom: 2%; padding: 0.5% 1.5%;
}
.post .description .btn:hover { background-color: #663300; color: #f8e3bd;
}
.post .description i { font-size: 0.8em;
}
Camper News Clone - Script Codes JS Codes
var app = angular.module('campNewsApp', []);
app.controller('infoCtrl', function($scope) { var info = $scope; info.date = new Date();
});
app.controller('newsCtrl', function($scope, $http) { $http.get('http://www.freecodecamp.com/news/hot') .success(function(data) { $scope.news = data; }) .error(function(){ console.log('error'); });
});
app.filter('spinal', function () { return function (item) { return item.replace(/\s/g, '-'); };
});
Developer | Katie Inkblotty |
Username | inkblotty |
Uploaded | August 08, 2022 |
Rating | 3 |
Size | 3,690 Kb |
Views | 40,480 |
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 |
JQuery Calculator | 3,730 Kb |
Wiki Search Clone | 4,800 Kb |
Star Wars search | 3,521 Kb |
React To Do Task App | 5,564 Kb |
Cycling D3 Scatterplot | 4,439 Kb |
Force Directed Graph | 3,739 Kb |
Tic Tac Toe | 4,161 Kb |
GeoLocation | 1,752 Kb |
React Recipe Box | 13,583 Kb |
Weather App | 3,881 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 |
Count checked checkboxes with jQuery | Mestika | 2,343 Kb |
TinFoil Boats | Chandralil | 4,577 Kb |
A Pen by Malith Hettiarachchi | MalZiiirA | 5,531 Kb |
Amazing CSS Menu with Notification Badges | Faizanasad | 2,549 Kb |
Bootstrap Carousel Fade Transition | Rowno | 2,484 Kb |
SVG Basics | HipsterBrown | 1,852 Kb |
Css Rotating 3d cubes different speed | Dghez | 2,364 Kb |
Wikipedia Viewer | Thomasvaeth | 2,549 Kb |
Free css icon set v2 - one div | Ben_jammin | 0 Kb |
Yuliya v krylova | Rafszul | 37,351 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!