Как создать блог, который состоит из 2-х видов страниц (2-х html файлов)?

Question

nasty0808 @nasty0808

JavaScript

Как создать блог, который состоит из 2-х видов страниц (2-х html файлов)?

На основе https://gorest.co.in/ создайте блог, который состоит из 2-х видов страниц (2-х html файлов):

Список статей блога, который можно получить запросом GET https://gorest.co.in/public-api/posts?page=10, где page - номер страницы для постраничной навигации. Номер страницы должен браться из URL страницы из параметра page. На странице должны выводиться:
Список статей, где каждый элемент должен быть ссылкой на статью вида post.html?id=10 (вместо 10 - id соответствующей статьи). Сам список находится в свойстве data в ответе на список статей.
Постраничная навигация, построенная на основе свойства из ответа на список статей meta.pagination с информацией о кол-ве статей и страниц. Каждая ссылка должна вести на index.html?page=10 (вместо 10 - номер соответствующей страницы). При этом ссылка на первую страницу не должна иметь параметров, то есть должна просто вести на страницу index.html без параметров, так как 1 - это значение по умолчанию и его необязательно явно проставлять.
Детальная страница статьи, которую можно получить запросом https://gorest.co.in/public-api/posts/{id статьи}. При этом id статьи должен браться из URL страницы из параметра id. На странице должны выводиться:
Заголовок (в тэге h1, свойство title из ответа на запрос) загруженной статьи.
Содержимое (в тэге p, свойство body из ответа на запрос).
Комментарии к статье в виде списка с именем автора и содержимым к каждому комментарию. Получить список комментариев к конкретной статье можно запросом GET https://gorest.co.in/public-api/comments?post_id=4 (вместо 4 - id статьи).

Вопрос задан более двух лет назад
997 просмотров

10 комментариев

Подписаться 1 Простой 10 комментариев

scottparker @scottparker

в тегах js, в заголовке вопроса html, а вопрос по php. комбо

Написано более двух лет назад
nasty0808 @nasty0808 Автор вопроса

scottparker, без php надо, через js

Написано более двух лет назад
Андрей Евдокимов @Uncle_Stranger

Олимпиада или собеседование?

Написано более двух лет назад
nasty0808 @nasty0808 Автор вопроса

курс, не могу сообразить

Написано более двух лет назад
Андрей Евдокимов @Uncle_Stranger

Написать за вас? Где затык то?

Написано более двух лет назад
nasty0808 @nasty0808 Автор вопроса

Если можете, а если будут комментарии, будет прекрасно !
могу отправить, что у меня есть, но не знаю, верно ли иду

Написано более двух лет назад
Андрей Евдокимов @Uncle_Stranger

nasty0808, пишите сюда, я в общем-то не претендую на знатока js, посмотрим что получится. В следущий раз попробуйте отформатировать текст вопроса, чтобы его можно было читать.

Написано более двух лет назад

nasty0808 @nasty0808 Автор вопроса

первый HTML

<!DOCTYPE html>
<html lang="ry">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Список статей</title>

  <link rel="stylesheet" href="style.css">

  <script src="main.js" defer></script>

</head>
<body>

</body>
</html>

main.js

(()=>{
const title = document.createElement('h1')
title.textContent = "Список статей"
document.body.append(title)

async function getArticles(){
    fetch('https://gorest.co.in/public/v1/posts')
    .then(r => {
      let arr = r.json()
    return arr
    })
    .then(r => {
      document.body.insertAdjacentHTML('beforeend', `
        <ul>${r.data.map(n => `
          <li>
            <a href="article.html">${n.title}</a>
          </li>`).join('')}
        </ul>
      `);
    });

  }
  getArticles()

  let notesOnPage =3;

  const pages = document.createElement('li')
  document.body.append(pages)
  for(let page of pages){
    page.addEventListener('click', function(){
      let pageNum = +this.innerHTML;

      let start =(pageNum - 1) * notesOnPage
      let end = start + notesOnPage

      let notes = arr.slice(start, end)
      console.log(notes)
    })
  }
})()

второй HTML

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Статья</title>
  <script src="index.js" defer></script>
</head>
<body>
  <h1>Article</h1>
</body>
</html>

index.js

(()=>{
  async function getArticle(){
    fetch('https://gorest.co.in/public/v1/posts')
    .then(r => r.json())
    .then(r => {
      document.body.insertAdjacentHTML('beforeend', `
        <h1>${r.data.map(n => `${n.title}</h1>`).join('')}
        <p>${r.data.map(n => `${n.body}</p>)`).join('')}`);
    });

  }
  getArticle()


})

Написано более двух лет назад

Андрей Евдокимов @Uncle_Stranger

А, так вы хантите. Ну тогда пойду в ветку по C# вопросы почитаю или про Angular.

Написано более двух лет назад
scottparker @scottparker

nasty0808, сорян, не правильно понял суть задания.
список статей - вероятно нужно делать запрос для каждой страницы пагинации (получать по 10 статей, или сколько он там отдаёт). то есть для 10ой страницы делается запрос на url https://gorest.co.in/public-api/posts?page=10 (тут важен параметр page, он будет меняться для каждой страницы, его берете из get параметра вашей страницы), в ответ будет возвращено допустим 10 статей (с 91 по 100) и их выводите на страницу, предварительно очистив место вывода от предыдущего вывода. нужно будет ещё построить пагинацию (количество страниц, которое зависит от количества постов - оно придёт в ответе)

детальная страница поста:
1)делаете запрос на url https://gorest.co.in/public-api/posts/{id_статьи} (например https://gorest.co.in/public-api/posts/200 - id статьи берётся из get параметра страницы) данные отображаете на странице
2)делайте ещё один запрос на url https://gorest.co.in/public-api/comments?post_id=i..., получате список комментов и выводите на экран

Написано более двух лет назад

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

JavaScript

+2 ещё

Простой
Как скачать pdf из встроенного просмотрщика на сайте?
- 1 подписчик
- час назад
- 65 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как построение маршрута на 2GIS API v2.0?
- 1 подписчик
- 3 часа назад
- 40 просмотров
0

ответов
JavaScript

Средний
Эффект наложения блоков?
- 1 подписчик
- 17 часов назад
- 106 просмотров
2

ответа
JavaScript

+2 ещё

Средний
Как изменить содержание блока програмно со свойством contentEditable?
- 1 подписчик
- 17 часов назад
- 73 просмотра
0

ответов
JavaScript

+4 ещё

Средний
Как сделать правильное динамическое масштабирование ion-range в зависимости от ширины колонок линии со значениями?
- 1 подписчик
- 18 часов назад
- 42 просмотра
0

ответов
JavaScript

Простой
Как после сабмита очистить поле type="tel" и показать очищенную маску?
- 1 подписчик
- 23 часа назад
- 64 просмотра
0

ответов
JavaScript

+1 ещё

Простой
Почему при добавление переменно в style, она перестаёт обновляться?
- 1 подписчик
- вчера
- 69 просмотров
1

ответ
JavaScript

Простой
Как получить результат отправки на сервер, если fetch-запрос был в одной функции, а результат нужен в другой?
- 1 подписчик
- 22 апр.
- 78 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Существуют ли браузерные реализации WebView для AJAX и Fetch?
- 1 подписчик
- 22 апр.
- 87 просмотров
1

ответ
JavaScript

Простой
Как обрабатывать пользовательский запрос больше не показывать конкретный попап?
- 1 подписчик
- 22 апр.
- 70 просмотров
1

ответ
Показать ещё Загружается…

JavaScript разработчик

SummerWeb • Ярославль

от 100 000 до 140 000 ₽

JavaScript разработчик

вАйТи

от 5 000 до 25 000 ₽

JavaScript Fullstack

OnClass

от 200 000 до 600 000 ₽

Разработка страницы блога на сайте на WordPress

24 апр. 2024, в 17:00

1000 руб./в час

Создание промо картинок мобильного приложения

24 апр. 2024, в 16:42

10000 руб./за проект

Визуальные в фронтенд WebApp телеграмм бота

24 апр. 2024, в 16:35

5000 руб./за проект

в тегах js, в заголовке вопроса html, а вопрос по php. комбо
Если можете, а если будут комментарии, будет прекрасно !
могу отправить, что у меня есть, но не знаю, верно ли иду
nasty0808, пишите сюда, я в общем-то не претендую на знатока js, посмотрим что получится. В следущий раз попробуйте отформатировать текст вопроса, чтобы его можно было читать.
первый HTML

<!DOCTYPE html> <html lang="ry"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Список статей</title> <link rel="stylesheet" href="style.css"> <script src="main.js" defer></script> </head> <body> </body> </html>

main.js

(()=>{ const title = document.createElement('h1') title.textContent = "Список статей" document.body.append(title) async function getArticles(){ fetch('https://gorest.co.in/public/v1/posts') .then(r => { let arr = r.json() return arr }) .then(r => { document.body.insertAdjacentHTML('beforeend', ` <ul>${r.data.map(n => ` <li> <a href="article.html">${n.title}</a> </li>`).join('')} </ul> `); }); } getArticles() let notesOnPage =3; const pages = document.createElement('li') document.body.append(pages) for(let page of pages){ page.addEventListener('click', function(){ let pageNum = +this.innerHTML; let start =(pageNum - 1) * notesOnPage let end = start + notesOnPage let notes = arr.slice(start, end) console.log(notes) }) } })()

второй HTML

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Статья</title> <script src="index.js" defer></script> </head> <body> <h1>Article</h1> </body> </html>

index.js

(()=>{ async function getArticle(){ fetch('https://gorest.co.in/public/v1/posts') .then(r => r.json()) .then(r => { document.body.insertAdjacentHTML('beforeend', ` <h1>${r.data.map(n => `${n.title}</h1>`).join('')} <p>${r.data.map(n => `${n.body}</p>)`).join('')}`); }); } getArticle() })
А, так вы хантите. Ну тогда пойду в ветку по C# вопросы почитаю или про Angular.
nasty0808, сорян, не правильно понял суть задания.
список статей - вероятно нужно делать запрос для каждой страницы пагинации (получать по 10 статей, или сколько он там отдаёт). то есть для 10ой страницы делается запрос на url https://gorest.co.in/public-api/posts?page=10 (тут важен параметр page, он будет меняться для каждой страницы, его берете из get параметра вашей страницы), в ответ будет возвращено допустим 10 статей (с 91 по 100) и их выводите на страницу, предварительно очистив место вывода от предыдущего вывода. нужно будет ещё построить пагинацию (количество страниц, которое зависит от количества постов - оно придёт в ответе)

детальная страница поста:
1)делаете запрос на url https://gorest.co.in/public-api/posts/{id_статьи} (например https://gorest.co.in/public-api/posts/200 - id статьи берётся из get параметра страницы) данные отображаете на странице
2)делайте ещё один запрос на url https://gorest.co.in/public-api/comments?post_id=i..., получате список комментов и выводите на экран

Как создать блог, который состоит из 2-х видов страниц (2-х html файлов)?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт