- Я использовал API dev.to для отображения своих технических блогов в своем портфолио.
- Недавно, когда я участвовал в хакатоне, я использовал это для отображения блогов пользователей вместе с панелью поиска.
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));
- Приведенный выше фрагмент кода используется для получения ваших блогов всякий раз, когда вы нажимаете ссылку кнопки.
Пояснение
- Итак, сначала используйте манипуляции с DOM, чтобы каждый раз, когда вы нажимаете на кнопку, получать свои блоги. Затем я использовал fetch api для получения блогов, и он возвращает обещание, которое разрешается в ответ, который либо успешен, либо нет.
- Поэтому после преобразования ответа в формат json он возвращает массив блогов, написанных пользователем.
- Я использовал сетку и немного HTML для отображения своих блогов вместе с лайками и заголовками.
- Изображение ниже — это ссылка из моего портфолио, где я использовал dev.to для получения блогов.
Вы можете сделать это и в реакции, чтобы укрепить свои основы в реакции. Это очень хороший проект для понимания основ реагирования, где вы можете создать окно поиска и искать блоги разных пользователей.
Вы можете проверить приведенный ниже проект для справки. https://github.com/tejaswini22199/DevFolio