Задать вопрос
@XLUNU
javascript

Содержимое JS не отображается на странице, и не подхватываются данные с json, в чем проблема?

Все что прописал в js файле никак не изменяет страницу. Должны появиться еще колонки, но отображаются только те что нарисовал в html. С помощью json должны подхватить значения. Приложил файлы что должно получиться. За ответы спасибо!

62850d591aa0a634925737.png
62850d6878d3a200794318.png
1. Картинка что у меня
2. Что должно быть 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->

  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  
  <title>Time tracking dashboard</title>

  <link rel="stylesheet" href="style.css">
  <!-- Feel free to remove these styles or customise in your own stylesheet  -->
  <style>
    .attribution { font-size: 11px; text-align: center; }
    .attribution a { color: hsl(228, 45%, 44%); }
  </style>
</head>
<body>

<section class="dashboard">
  <div class="dashboard__content">
   <div class="dashboard__person">
     <div class="info-card">
       <img src="images/image-jeremy.png" alt="" class="info-card__photo">
       <div class="info-card__text">
         <p class="info-card__subtitle">Report for</p>
         <h3 class="info-card__title">Jeremy Robson</h3>
       </div>
     </div>
     <div class="view-selector">
       <div class= "view-selector__item">Daily</div>
       <div class= "view-selector__item view-selector__item--active">Weekly</div>
       <div class= "view-selector__item">Monthly</div>
     </div>
    
  </div>
  <div class="dashboard__item dashboard__item--study">
    <article class="tracking-card">
      <header class = "tracking-card__header">
        <h4 class="tracking-card__title">Work</h4>
        <img class="tracking-card__menu" src="images/icon-ellipsis.svg" alt="menu" >
      </header>
      <div class="tracking-card__body">
        <div class="tracking-card__time">
          5hrs

        </div>
        <div class="tracking-card__prev-period">
          Previous - 7hrs
        </div>
        
      </div>
    </article>
  </div> 
  <div class="dashboard__item dashboard__item--study">
    <article class="tracking-card">
      <header class = "tracking-card__header">
        <h4 class="tracking-card__title">Work</h4>
        <img class="tracking-card__menu" src="images/icon-ellipsis.svg" alt="menu" >
      </header>
      <div class="tracking-card__body">
        <div class="tracking-card__time">
          5hrs

        </div>
        <div class="tracking-card__prev-period">
          Previous - 7hrs
        </div>
        
      </div>
    </article>
  </div> 
  <div class="dashboard__item dashboard__item--study">
    <article class="tracking-card">
      <header class = "tracking-card__header">
        <h4 class="tracking-card__title">Work</h4>
        <img class="tracking-card__menu" src="images/icon-ellipsis.svg" alt="menu" >
      </header>
      <div class="tracking-card__body">
        <div class="tracking-card__time">
          5hrs

        </div>
        <div class="tracking-card__prev-period">
          Previous - 7hrs
        </div>
        
      </div>
    </article>
  </div> 
  <div class="dashboard__item dashboard__item--study">
    <article class="tracking-card">
      <header class = "tracking-card__header">
        <h4 class="tracking-card__title">Work</h4>
        <img class="tracking-card__menu" src="images/icon-ellipsis.svg" alt="menu" >
      </header>
      <div class="tracking-card__body">
        <div class="tracking-card__time">
          5hrs

        </div>
        <div class="tracking-card__prev-period">
          Previous - 7hrs
        </div>
        
      </div>
    </article>
  </div> 
  <div class="dashboard__item dashboard__item--study">
    <article class="tracking-card">
      <header class = "tracking-card__header">
        <h4 class="tracking-card__title">Work</h4>
        <img class="tracking-card__menu" src="images/icon-ellipsis.svg" alt="menu" >
      </header>
      <div class="tracking-card__body">
        <div class="tracking-card__time">
          5hrs

        </div>
        <div class="tracking-card__prev-period">
          Previous - 7hrs
        </div>
        
      </div>
    </article>
  </div> 
  <div class="dashboard__item dashboard__item--study">
    <article class="tracking-card">
      <header class = "tracking-card__header">
        <h4 class="tracking-card__title">Work</h4>
        <img class="tracking-card__menu" src="images/icon-ellipsis.svg" alt="menu" >
      </header>
      <div class="tracking-card__body">
        <div class="tracking-card__time">
          5hrs

        </div>
        <div class="tracking-card__prev-period">
          Previous - 7hrs
        </div>
        
      </div>
    </article>
  </div> 
  </div>
</section>
<div class="container">
<script src ="app.js"></script>
</div>
</body>
</html>


async function getDashboardData(url = 'data.json') {
    const response = await fetch(url);
    const data = await response.json();

    return data;
}

class DashboardItem {
    static PERIODS = {
        daily: 'day',
        weekly: 'week',
        monthly: 'month',

    }

    constructor(data, container = '.dashboard__content', view = 'weekly') {
        this.data = data;
        this.container = document.querySelector(container);
        this.view = view;

        this.createMarcup();
    }

    createMarcup () {
        const {title, timeframes} = this.data;

        const id = title.toLowerCase().replace(/ /g, '-');
        const {current, previous} = timeframes[this.view.toLowerCase()];

        this.container.insertAdjacentHTML ('beforeend',`
        <div class="dashboard__item dashboard__item--${id}">
    <article class="tracking-card">
      <header class = "tracking-card__header">
        <h4 class="tracking-card__title">${title}</h4>
        <img class="tracking-card__menu" src="images/icon-ellipsis.svg" alt="menu" >
      </header>
      <div class="tracking-card__body">
        <div class="tracking-card__time">
          ${current}hrs
        </div>
        <div class="tracking-card__prev-period">
          Last ${DashboardItem.PERIODS[this.view]} - ${previous}hrs
        </div>
        
      </div>
    </article>
  </div> 
        `);

        this.time = this.container.querySelector(`.dashboard-item--${id} .tracking-card__time`);
        this.prev = this.container.querySelector(`.dashboard-item--${id} .tracking-card__prev-period`);
    }
}

document.addEventListener('DOMContentLoaded', () => {
    getDashboardData()
    .then(data => {
        const activities = data.map(activity => new DashboardItem(activity));
    })
})

json
[
  {
    "title": "Work",
    "timeframes": {
      "daily": {
        "current": 5,
        "previous": 7
      },
      "weekly": {
        "current": 32,
        "previous": 36
      },
      "monthly": {
        "current": 103,
        "previous": 128
      }
    }
  },
  {
    "title": "Play",
    "timeframes": {
      "daily": {
        "current": 1,
        "previous": 2
      },
      "weekly": {
        "current": 10,
        "previous": 8
      },
      "monthly": {
        "current": 23,
        "previous": 29
      }
    }
  },
  {
    "title": "Study",
    "timeframes": {
      "daily": {
        "current": 0,
        "previous": 1
      },
      "weekly": {
        "current": 4,
        "previous": 7
      },
      "monthly": {
        "current": 13,
        "previous": 19
      }
    }
  },
  {
    "title": "Exercise",
    "timeframes": {
      "daily": {
        "current": 1,
        "previous": 1
      },
      "weekly": {
        "current": 4,
        "previous": 5
      },
      "monthly": {
        "current": 11,
        "previous": 18
      }
    }
  },
  {
    "title": "Social",
    "timeframes": {
      "daily": {
        "current": 1,
        "previous": 3
      },
      "weekly": {
        "current": 5,
        "previous": 10
      },
      "monthly": {
        "current": 21,
        "previous": 23
      }
    }
  },
  {
    "title": "Self Care",
    "timeframes": {
      "daily": {
        "current": 0,
        "previous": 1
      },
      "weekly": {
        "current": 2,
        "previous": 2
      },
      "monthly": {
        "current": 7,
        "previous": 11
      }
    }
  }
]
  • Вопрос задан
  • 133 просмотра
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 1
@XLUNU Автор вопроса
Решил проблему тем, что установил Live Server в VS code, подтянулся json и все заработало
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 1
Recreator
@Recreator
на вскидку
this.container = document.querySelector('.container');
Ответ написан
1 комментарий
1 комментарий
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Frontend-разработчик JavaScript
div. • Ставрополь
от 40 000 до 90 000 ₽
Fullstack разработчик JavaScript, php
Дорстрой-36 • Воронеж
от 100 000 до 200 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Full-Stack для сайта на Bitrix (Аспро). Знания в Java, CSS и PHP
12 нояб. 2024, в 16:00
150000 руб./за проект
Разместить шаблон сайта с личным кабинетом под хостинг серверов
28 нояб. 2024, в 00:33
5000 руб./за проект
Нужно записать видео уроки по машинному обучению
28 нояб. 2024, в 00:20
2400 руб./за проект
Ещё заказы