Camper News

Developer
Zac Clemans
Size
3,157 Kb
Views
8,096
  1. Camper News Previews
  2. Camper News HTML Codes
  3. Camper News CSS Codes
  4. Camper News JS Codes

How do I make an camper news?

This is a slick (pun-intended) news story slider for freeCodeCamp. It uses the Slick Carousel plugin and FCCs news story API.. What is a camper news? How do you make a camper news? This script and codes were developed by Zac Clemans on 14 January 2023, Saturday.

Camper News Previews
IQ Test

Camper News - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Camper News</title> <meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Merriweather' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.3.15/slick.css'>
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="title-bar"> <h1>Camper News Slider</h1>
</div>
<div class="all-stories">
</div>
<div class="search-area"> <input id="search-term" type="text" value="search term">
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.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>

Camper News - Script Codes CSS Codes

body { background: rgb(231, 228, 211);
}
.title-bar { padding: 10px 0; text-align: center; background: rgba(1, 145, 200,0.7);
}
.title-bar h1 { font-family: Lato; font-size: 60px; color: rgb(255,255,255);
}
.all-stories { width: 90%; margin: 50px auto;
}
.story-container { position: relative; width: 300px; text-align: center; margin-right: 5px; border-radius: 20px; background: rgb(102, 204, 255); color: rgb(255,255,255);
}
.poster-image { background: rgb(231, 228, 211);
}
.poster-image img { width: 300px; margin: 0 auto; border-radius: 20px 20px 0 0;
}
.headline { font-family: Lato; font-size: 25px; width: 300px; margin: 10px auto 20px auto; word-wrap: break-word;
}
.headline a { color: rgb(255,255,255); text-decoration: none;
}
.poster-name { font-family: Merriweather; margin-bottom: 60px; font-size: 17px;
}
.upvotes { position: absolute; bottom: 10px; left: 45%; font-size: 20px;
}
.search-area { text-align: center;
}
#search-term { font-family: Merriweather; font-size: 20px; width: 150px; height: 40px; text-align: center; border-radius: 20px;
}
.slick-prev:before, .slick-next:before { color: rgb(102, 204, 255);
}

Camper News - Script Codes JS Codes

var posterImgDiv = "<div class='poster-image'>";
var headlineDiv = "<div class='headline'>";
var posterNameDiv = "<div class='poster-name'>";
var upvotesDiv = "<div class='upvotes'>";
var divClose = "</div>";
var allStories = $(".all-stories");
var filtered = false;
$(document).ready(function(){ $.getJSON("https://www.freecodecamp.com/news/hot", function(storyData){ storyData.forEach(function(story, index){ var storyContainerDiv = "<div class='story-container' id='story-container-" + index + "'>"; allStories.append(storyContainerDiv + divClose); $("#story-container-" + index).append(posterImgDiv + "<a href='" + story.link + "' target='_blank'>" + "<img src='" + story.author.picture + "'>" + "</a>" + divClose); $("#story-container-" + index).append(headlineDiv + "<a href='" + story.link + "' target='_blank'>" + story.headline.substring(0,50) + "...</a>" + divClose); $("#story-container-" + index).append(posterNameDiv + "posted by: " + story.author.username + divClose); $("#story-container-" + index).append(upvotesDiv + "<span class='glyphicon glyphicon-thumbs-up'></span> " + story.rank + divClose); }); allStories.slick({ infinite: true, variableWidth: true, slidesToScroll: 5, autoplay: true, autoplaySpeed: 3000, arrows: true, responsive: [ { breakpoint: 1690, settings: { infinite: true, variableWidth: true, slidesToScroll: 4, autoplay: true, autoplaySpeed: 3000, arrows: true } }, { breakpoint: 1350, settings: { infinite: true, variableWidth: true, slidesToScroll: 3, autoplay: true, autoplaySpeed: 3000, arrows: true } }, { breakpoint: 1014, settings: { infinite: true, variableWidth: true, slidesToScroll: 2, autoplay: true, autoplaySpeed: 3000, arrows: true } }, { breakpoint: 675, settings: { infinite: true, variableWidth: true, slidesToScroll: 1, autoplay: true, autoplaySpeed: 3000, arrows: true } } ] }); allStories.on('init',function(){ var stHeight = $('.all-stories').height(); $('.story-container').css('height',stHeight + 'px'); }); allStories.on('setPosition',function(){ var stHeight = $('.all-stories').height(); $('.story-container').css('height',stHeight + 'px'); }); });
});
$("#search-term").on('focus', function(){ $(this).animate({ width: '400px' }); $(this).select();
});
$("#search-term").on('focusout', function(){ $(this).animate({ width: '150px' });
});
$("#search-term").keyup(function(){ allStories.slick('slickUnfilter'); allStories.slick ('slickFilter', function(){ return $(this).find(".headline").find("a").text().toLowerCase().indexOf($("#search-term").val().toLowerCase()) != -1; });
});
Camper News - Script Codes
Camper News - Script Codes
Home Page Home
Developer Zac Clemans
Username thalpha
Uploaded January 14, 2023
Rating 3
Size 3,157 Kb
Views 8,096
Do you need developer help for Camper News?

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!

Zac Clemans (thalpha) Script Codes
Name
Game of Life
Markdown Previewer
Recipe Box Redux Refactor
OOLO Calculator - Vanilla JS
JQuery Calculator
D3 Force-directed Graph Project
Hero arrow test
Simon Says
Personal Portfolio
D3 Heatmap Project
Create amazing video scripts 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!