Status Report

  • looked at and evaluated all Assignment 2’s
  • assignment 3 is the crux of the course!
  • can give limited help for next 24 hours or so

HTML Structures

  • for the rest of the course, coding is mostly creating HTML structures
  • becaue HTML is tedious, lots of opportunity to introduce errors!
  • How to avoid?
    • D.R.Y. (Don’t Repeat Yourself)
    • if done right, guarantees that low-level problems only need to be solved once
    • remember: laziness is a virtue

Writing “Atomic” Functions

  • Complex code is difficult to debug!
  • instead, try to make your individual functions as simple as possible
  • divide your problem into smallest possible parts (hence ’atomic’)
  • “chain” your functions together to recreate complexity
  • much easier to localize failure

Making a card deck

Task: given a JSON data structure, generate a set of cards (like the ones we made in assignment 0, but simpler)


  

Person Name

lengthy text here

{
  name: 'Person Name',
  blurb: 'lenghty text here',
}

First, Map the assignment

  • card deck → set of cards
  • card →

    
      
  • this is set of tagged elements
  • so we might do something like this:
    • fn 1: tag some content
    • fn 2: use fn 1 to make header structure
    • fn 3: use fn 1 to make main structure
    • fn 4: use fn 1 to make footer structure
    • fn 5: use fn 2, fn 3, fn 4 to make sub-structures and then call fn 1 to wrap whole thing
    • fn 6: loop through data structure, calling fn 5 once for each element
  • Now Name our functions
  • fn 1: letsTag()
  • fn 2: headMe())
  • fn 3: mainMe())
  • fn 4: footMe()
  • fn 5: cardMe()
  • fn 6: makeAllCards()

Start with Fn 1: letsTag

function letsTag ( content, tagName, attrs) {
  output = `<${tagName} `;
  for (a of attrs) {
    output+=`${a}=${attrs[a]} `;
  }
  output += `>${content}</${tagName}>`;
  return output;
}


letsTag('I am the main content', 'main', {style: 'border: 2px solid black;'});

Fn 2: headMe()

function headMe (titleText) {
  let output=letsTag(titleText, 'h1');
  output=letsTag(output, 'header');
  return output
}

headMe('I am the title');

All the Rest

function footMe () {
  let link = letsTag('A Project of HIS393', 'a', {href: 'https://digitalhistory.github.io/dh-website/'});
  return letsTag(link, 'footer');
}

function mainMe (blurb) {
  let p = letsTag(blurb, 'p');
  return letsTag(p, 'main');
}

function cardMe (person) {
  let header = headMe(person.name);
  let main = mainMe(person.blurb);
  let footer = footMe();
  return letsTag(header + main + footer, 'card', {class: 'card'});
}

function makeAllTheCards (people) {
  output = '';
  for (p of people) {
    output += cardMe (p);
  }
  return $('main#page-main').append(output); 
}

makeAllTheCards (allEntries);