Create a On-This-Day project with html, css and javascirpt!

Harry Tom — Wed, 16 Jun 2021 11:11:53 +0000

Hello coders! This is my first post and with a simple project you can do easily. So what we are gonna make is a today in history project with a WikiPedia based API. This will be the thing you will get afterwards!

You need

We are going to use an simple light weight rest API. This is an API made with WikiPedia and sure its verified content! And nothing else, so we can start coding.

https://github.com/harrify-apis/historyjs

Step 1

First, we have to create the files for the project.
Create a files with the name index.html, app.js, and style.css;

Step 2

Now lets start the real coding! As usual we start with index.html. Now, open the index.html file in notepad or any preferred text editors. Here I am using Visual Studio Code.

This is the code you want to write

<!DOCTYPE html>
<html>
    <head>
        <title>My wiki-project</title>
        <link rel="stylesheet" href="style.css" type="text/css">
    </head>
    <body>
        <div class="title-bar">
             <h1>Today In History</h1>
        </div>
        <div class="root-div"></div>
    </body>
    <script src="app.js"></script> <!--APP.js file linked!-->
</html>

Step 3

Next, we are going to write some css script, which you can do according to your need, the code goes here! I have made a basic minimal User Interface.

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
    transition: 0.4s;
}

body{
    padding-top: 120px;
    background-color: burlywood;
}

.wrap{
    display: flex;
    justify-content: center;
    width: 100%;
}

.title-bar{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 15px;
    display: flex;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.534);
    backdrop-filter: blur(10px); /*Less Browser Suppor*/
}

.root-div{
    width: 700px;
    padding: 30px;
    min-height: 100vh;
    margin-top: 20px;
}
.item{
    background-color: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 4px 12px 40px 6px rgb(0 0 0 / 9%);
    margin-bottom: 20px;
    cursor: pointer;
}

.item:hover{
    transform: scale(1.1) rotate(5deg);
}

.item h1{
    font-size: 20px;
    line-height: 25px;
    color: #333333;
}

.item h4{
    font-size: 15px;
    margin-bottom: 15px;
    color: #2575fc;

}

a{
    text-decoration: none;
}

Step 4

Now we are getting into the important but easiest part! Yes the javascirpt part. So , I have used __ Javascript Fetch Api __ to fetch content from our Today in History API

var api_type = "events"; //events | deaths | births

var today = new Date();//New date class
var year = today.getFullYear(); //Get fill year
var month = today.getMonth() + 1; //Get the month
var date = today.getDate();// Get the date
var root_div = document.querySelector(".root-div"); //Selecting the DOM
//Api url construction
var api = "https://cdn.jsdelivr.net/gh/harrify-apis/historyjs/" + api_type + "/" + month + "_" + date + ".json";

//Javascript fetch from json api
fetch(api).then(
    function(response){

        response.json().then(function(json) {

            json = json[api_type];
            const list = Object.values(json).map(post => `


            <a href="${post.wikipedia[0].wikipedia}" target="_blank">
                <div class="item">
                    <h4>${post.year} - ${year - post.year} years ago</h4>
                    <h1>${post.description}</h1>
                </div>
            </a>
            `);

            var html = list.join("");
            root_div.innerHTML = html;
        });
        //Mapping Json Response


    }
);

Lets break down the code

So, lemme break down the code, so that you can understand way better than just reading this box full text 🤣

Variable

today : We created a new instance of JavaScript Date Class
year : We've set it to the current year
month : We've set it to the current mont
date : We've set it to the current date
root_div : We've set it to the div in which we have to insert the html

api

"https://cdn.jsdelivr.net/gh/harrify-apis/historyjs/{type}/{month}_{date}.json";

Here, we replace

1 {type} with events or birsth or deaths
2 {date} with todays data
3 {month} with current month
4 {year} with current year

api_type

You can set the api type according to your needs. You can choose from three catagories.

events : Which will get you the events happened on this day
deaths : Which will get you the deaths happened on this day
births : Which will get you the births happened on this day

fetch() function

We are using this javascript api here to get json data from the api. After the json data is downloaded, we render the json to html and we insert the html to the .root-div element. And that's all happening inside this three simple files! If you want, see this pen, maybe this will be helpful!

Full Source Code here!

Conclusion

I just made this post because, I was searching for this for many days. One day I made it and I want to share this hoping it will be helpful for someone. This is my first post in dev.to, and sorry for the formatting in this page :)

You can find me and ask anything to me
email, github, my works, twitter, youtube

DEV Community: Harry Tom