pre mvp

some ideas for teaching and motivating mvp

by Maxim_Wolf

HTML

<div id="root">

</div>
<template id="list"><ul class="cards"></ul></template>
<template id="item"><li class="card"></li></template>

CSS

.cards {
  display: flex;
  margin: 2rem;
  padding: 1rem;
  flex-direction: row;
  list-style-type: none;
  flex-wrap: wrap;

}

.card {
  padding: 0.5rem;
  background-color: rgba(0 0 0 0.7);
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 20%;
}

JavaScript

const MAX_MOCK_ARRAY_LENGTH = 10;
const MAX_NUMBER_OF_WORDS = 8;
const MAX_DAYS_IN_HISTORY = 700;
const MS_IN_DAY = 1000 * 60 * 60 * 24;
const wordPool = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.".split(' ');

const renderElement = (container, part) => container.appendChild(part);
const ensureElement = (item) => typeof item.getElement === "function" ? item.getElement() : item;
const render = (container, part) => renderElement(ensureElement(container), ensureElement(part));
const cloneTemplate = (template) => template.content.firstElementChild.cloneNode(true);

const randomLength = (size) => Math.ceil(size * Math.random());
const randomSubset = (count, pull) => pull
  .map((e) => ({
    e,
    w: Math.random()
  }))
  .sort((a, b) => (b.w - a.w))
  .slice(0, count)
  .map(e => e.e);

const mockText = () => randomSubset(randomLength(MAX_NUMBER_OF_WORDS), wordPool).join(' ');
const mockDate = () => new Date(new Date().valueOf() - randomLength(MAX_DAYS_IN_HISTORY * MS_IN_DAY));
const mockComment = (_, id) => ({
  id,
  content: mockText(),
  date: mockDate()
});

const mockComments = () => Array(randomLength(MAX_MOCK_ARRAY_LENGTH)).fill(null).map(mockComment)
const mockFilm = (_, id) => ({
  id,
  title: `a film #${id}`,
  comments: mockComments()
})

const films = Array(15).fill(null).map(mockFilm);

const root = document.querySelector("#root");
const list = document.querySelector("#list");
const item = document.querySelector("#item");
const lclone = cloneTemplate(list);

films.forEach((film)=>{
  const iclone = cloneTemplate(item);
  const inner =...