Create a On-This-Day project with html, css and javascirpt!
Tags: javascript, html, css, wikipedia
Published: 2021-06-16 11:11:53

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](https://raw.githubusercontent.com/Harry260/harry260.github.io/main/personal-files/images/output.PNG)
## 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`;

![Files Screenshot](https://raw.githubusercontent.com/Harry260/harry260.github.io/main/personal-files/images/devto_historyjs.png)


## 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](https://code.visualstudio.com/).

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](https://developer.mozilla.org/en-US/docs/Web/API/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! 

{% codepen https://codepen.io/harrify/pen/qBrgOwN %}


# Full Source Code here!

{% gist https://gist.github.com/Harry260/503f7d3c49fa0f5d49f00fae2f504e74 %}

# 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](mailto:harrytom2606@gmail.com), [github](https://github.com/harry260), [my works](https://harrytom.ml), [twitter](https://twitter.com/@me_harrify), [youtube](https://www.youtube.com/channel/UClUfC4LfzheWm-8qAg6Nq3g?sub_confirmation=1)