Camper News

Developer
Fred Hawk
Size
3,606 Kb
Views
12,144
  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?

What is a camper news? How do you make a camper news? This script and codes were developed by Fred Hawk on 14 November 2022, Monday.

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.0">
<link href='https://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1 class="page-title">Camper News</h1> <div class="wrapper"></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

h1 { color: #0287cf; font-family: 'Indie Flower', cursive; font-size: 3em;
}
.page-title { text-align: center;
}
.wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -ms-flex-pack: distribute; justify-content: space-around;
}
.item { width: 276px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: column wrap; flex-flow: column wrap; border-radius: 15px 15px 9px 9px; box-shadow: 4px 4px 5px grey; margin: 10px 10px; background-color: #02a6f2; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; -webkit-transform: scale(1); transform: scale(1);
}
.item:hover { z-index: 2; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; -webkit-transform: scale(1.15); transform: scale(1.15);
}
.item-img { border-radius: 15px 15px 0 0; width: 276px; height: 240px; overflow: hidden;
}
.item-title { color: white; padding-left: 10px; margin: 5px 0; font-size: 1.25em;
}
.item-title:hover { color: #012438;
}
.item-link { text-decoration: none;
}
.post-date { color: white; padding-left: 10px; margin: 5px 0;
}
.author { color: white; padding-left: 10px; margin: 5px 0;
}
.author-link { text-decoration: none;
}
.author:hover { color: #012438;
}
.upvote { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; padding-bottom: 10px;
}
.upvote-icon { width: 20px; height: 20px; padding: 0 10px;
}
.upvotes { color: white; margin: 0;
}

Camper News - Script Codes JS Codes

$(document).ready(function() { var newsItemsAPI = "https://www.freecodecamp.com/news/hot"; var html = ""; // Call the newsArticle function with the API as an argument newsArticles(newsItemsAPI); function newsArticles(newsItemsAPI) { $.ajax({ url: newsItemsAPI, data: { format: 'json' }, dataType: 'json', success: function(newsItem){ newsItem.forEach(function(newsStory) { // Put all the needed values into variables for use var newsImage = newsStory.image; var newsLink = newsStory.link; var newsTitle = newsStory.headline.substring(0, 50)+"..."; var newsPoster = newsStory.author.username; var newsPostedDate = newsStory.timePosted; var newsUpvotes = newsStory.rank; var newsAuthorPic = newsStory.author.picture; // If the article doesn't have an image, use the authors image instead if (newsImage === "" || newsImage === "/web/imgs/logo.png") { newsImage = newsAuthorPic; } // Format the date to "Mon Feb 08 2016" newsPostedDate = new Date(newsPostedDate); newsPostedDate = newsPostedDate.toDateString(); // Create the newsarticle html += '<article class="item">'; html += '<a href="' + newsLink + '" target="_blank" class="item-link">'; html += '<img src ="' + newsImage + '" class="item-img" alt="'; html += + newsTitle + '">'; html += '<h2 class="item-title">' + newsTitle + '</h2></a>'; html += '<p class="post-date">Posted on: ' + newsPostedDate + '</p>'; html += '<a href="https://www.freecodecamp.com/'; html += + newsPoster + '" class="author-link" target="_blank" alt="'; html += + newsPoster + '">'; html += '<p class="author">By ' + newsPoster + '</p></a>'; html += '<div class="upvote">'; html += '<img src="https://dl.dropboxusercontent.com/'; html += 's/z8rn5ckfr5suuas/heart.svg?raw=1"'; html += ' class="upvote-icon" alt="Upvotes">'; html += '<p class="upvotes">' + newsUpvotes + '</p></div></article>' }); // Add html to .wrapper class for each newsarticle $(".wrapper").html(html); } }); }
});
Camper News - Script Codes
Camper News - Script Codes
Home Page Home
Developer Fred Hawk
Username osycon
Uploaded November 14, 2022
Rating 3
Size 3,606 Kb
Views 12,144
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!

Fred Hawk (osycon) Script Codes
Name
Weekly UI - Airbnb Footer Component
Portfolio example FCC
Weekly UI - Become a member
Weekly UI - Invisionapp Sign up
Pomodoro Clock
CSS Flexbox 3 col example
Lilli
Weather App
Weekly UI - Dropbox Hero Component
Weekly UI - Stripe - Pricing section
Create amazing sales emails 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!