Your next Mini Project using dev.to api

#react #portfolio #javascript #html

I used dev.to api to display my blogs on my portfolio.
Recently when I participated in a hackathon I used to to display the user's blogs along with search bar.

let btnDev=document.querySelector('#devbtn')

     fetch('https://dev.to/api/articles?username=powercoder')
    .then((response)=>

            response.json()
        )
    .then(data=>{
        let output='';
        data.forEach((element)=>
        {
            console.log(element)
           output+=
            `       <div id="grid-item">
                    <div>
                    <h4 class="titleblog">${element.title}    <i class="fas fa-heart text-danger"></i>${element.positive_reactions_count}</h4>
                    </div>
                    <div>
                    <a href=${element.canonical_url}><button class="btnc">Read more</button></a>
                    </div>
                    </div> 
            `


        }
    )
    document.querySelector('#grid-container').innerHTML=output;
    })
            .catch(err => console.log(err));

The above code snippet is used to fetch your blogs whenever you click the link of a button.

Explanation

So first use DOM manipulation to fetch the button whenever you click it you get blogs of yours. Then I used fetch api to fetch the blogs and it returns a promise which resolves to a response which is either successful or not.
So after the response convert into json format and then it returns an array of blogs written by the user.
I used grid and some HTML to display my blogs along with likes and heading.
The below picture is reference from my portfolio where I used dev.to to fetch blogs.

You can do this in react also it is a very good project to understand basics of react where you can create a search box and you can search for blogs of different users.
You can check the below project for reference. https://github.com/tejaswini22199/DevFolio