For your third project, you will be introduced to some more basics of website functionality using JavaScript. You will also learn how to use CSS properties that allow for more responsiveness for different browsers. You will also learn how to create a Content Managament System (CMS) in order to upload articles from an administrator setting. A project like this is useful as you are learning how to create a website with a backend. Once deployed, you can write your own articles that anyone can read. You will build upon this project to create a professional blogging website that allows users to read and write their own blogs and post them.
Click the link below to obtain the final product Final Project 3 Subproject 1 Product
We will start from the basics, first in order to create an html document, you need the <html> tag, followed by the <head> and <body> tags. Your code should look like the following:
<html>
<head>
</head>
<body>
</body>
</html>Once you have that down, you will create a title for your browser, and a title for your page, your code and output should look like the following:
<html>
<head>
<title>Basic Article with Read More Functionality</title>
</head>
<body>
<h1>Basic Article with Read More Functionality</h1>
</body>
</html>You can then create div elements to structure the format of your blog posts. This is one way you can do so:
<html>
<head>
<title>Basic Article with Read More Functionality</title>
</head>
<body>
<h1>Basic Article with Read More Functionality</h1>
<h2 class="title"></h2>
<p id="author"></p>
<div class="article">
<div class="image-section">
<div class="image">
<img src="" alt="">
</div>
<div class="caption">
<caption></caption>
</div>
</div>
<div id="content-section">
<p id="first"></p>
<p id="second"></p>
<p id="third"></p>
<p id="fourth"></p>
<span id="readon"></span>
</div>
</div>
</body>
</html>You can now proceed to styling your HTML page using the <style> tag. Your code should look like the following:
<html>
<head>
<title>Basic Article with Read More Functionality</title>
<style>
body {
padding: 0;
margin: 0;
}
h1 {
text-align: center;
}
.article {
width: 70%;
margin: auto;
}
.article h2 {
text-align: center;
font-size: 30px;
}
.article #author {
width: 90%;
margin: auto;
padding: 5px;
}
.image {
width: 70%;
margin: auto;
padding: 10px;
}
.image img {
width: 100%;
height: auto;
}
.caption {
font-size: 16px;
text-align: left;
padding: 10px;
}
#content-section #second {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
#content-section #third {
display: none;
}
#content-section #fourth {
display: none;
}
#readon::before {
content: "read more";
cursor: pointer;
}
#content-section.active #second {
display: block;
}
#content-section.active #readon::before {
content: "read less";
}
media (max-width: 800px;) {
.image {
width: 90%;
}
}
</style>
</head>
<body>
...
</body>
</html>Lastly, in order for the content to be displayed based on the user clicking the span read more, and to hide the text when the user clicks on read less, we need to add some JavaScript to accomplish this.
<html>
<head>
<title>Basic Article with Read More Functionality</title>
<style>
...
</style>
</head>
<body>
...
</body>
<script>
const readon = document.getElementById('readon')
const content = document.getElementById('content-section')
const thirdParagraph = document.getElementById('third')
const fourthParagraph = document.getElementById('fourth')
readon.addEventListener('click', function(){
content.classList.toggle('active')
if (content.classList.contains('active')) {
thirdParagraph.style.display = 'block'
fourthParagraph.style.display = 'block'
}
else {
thirdParagraph.style.display = 'none'
fourthParagraph.style.display = 'none'
}
})
</script>
</html>If you are confused about why this works in JavaScript, and why this works if styled in this way for example, take a look at the learning page to understand both the formats used for programming the content and styling the document, as well as how the functions work to display and hide the content.