DEV Community

Harry Tom
Harry Tom

Posted on • Updated on

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

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!

Output

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
Enter fullscreen mode Exit fullscreen mode

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;

Files Screenshot

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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


    }
);

Enter fullscreen mode Exit fullscreen mode

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";
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)