Как создать блог, который состоит из 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 статьи).

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

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

Простой
Как посчитать количество пересечений с помощью метода filter?
- 1 подписчик
- 6 часов назад
- 126 просмотров
3

ответа
JavaScript

Простой
Как реализовать логику назад вперед?
- 1 подписчик
- 9 часов назад
- 81 просмотр
0

ответов
JavaScript

+2 ещё

Средний
Как подключить вконтакте на сайт чтобы слать юзеру в вк уведомления или сообщения?
- нет подписчиков
- вчера
- 134 просмотра
1

ответ
JavaScript

+1 ещё

Сложный
Fastify долгая загрузка что можно сделать как найти причину?
- 1 подписчик
- вчера
- 52 просмотра
0

ответов
JavaScript

+2 ещё

Простой
Где можно увидеть реализацию такого эффекта при скролле?
- 1 подписчик
- 24 нояб.
- 193 просмотра
2

ответа
JavaScript

Простой
Fetch дает ошибку?
- 1 подписчик
- 23 нояб.
- 109 просмотров
1

ответ
JavaScript

Простой
Обьясните про функцию массив?
- 3 подписчика
- 23 нояб.
- 728 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Почему JS не видит SVG-элементы по ID?
- 1 подписчик
- 22 нояб.
- 78 просмотров
1

ответ
JavaScript

Средний
Почему не срабатывает горячая клавиша в расширение?
- 1 подписчик
- 22 нояб.
- 45 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Почему react-hook-form не отображает ошибки zod в определенных моментах?
- 1 подписчик
- 22 нояб.
- 35 просмотров
0

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

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

Fullstack разработчик JavaScript, php

Дорстрой-36 • Воронеж

от 100 000 до 200 000 ₽

JavaScript FullStack developer

Wanted. • Санкт-Петербург

До 220 000 ₽

Выложить 75 курсов на геткурс и настроить базовые функции

26 нояб. 2024, в 02:18

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

Редизайн и доработка интернет магазина на wordPress

25 нояб. 2024, в 23:42

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

Разработка мобильного приложения с дополненной реальностью (AR)

25 нояб. 2024, в 23:32

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

в тегах 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 файлов)?

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

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

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