Grids and divs, oh my

1

I’m struggling with making rows and columns and rows and columns within them… I already made a times tables chart

captureChart
captureChart1102×228 18.3 KB

but I want it to look more like this:
captureChartImage
… I want to add a heading and side bar (the side bar is there but … I am not understanding when things will make a new row and when they’ll make a new column…) I’ve found some “cheat sheets” but … maybe I am just trying ot be too complicated and should just make a whole lot of divs :wink:

https://repl.it/@xiousgeonz/make-video-transcripted is the code…

2

What I see is not a grid but table. Just make orange cells as th and white as td and you’re pretty much there :wink:

1 Like
3

I have the cells w/ the products generated in javaScript … so I’d wondered if there was an easy way to preserve that and add the headers… .but tables will work nicely too and makes semantic sense. Thanks!

4

I figured it out :slight_smile:

workingChart
workingChart755×535 12.5 KB

What I don’t know is whether, accessibility-wise, it would be better to have an image w/ good description or the divs with all the numbers. A screen reader should have a way to tab past it… I think… (I think I’ve got a version with the “X” in the corner too; its own div with the css putting it at that row and column in the bigger container…)

var maxFact = 10;
var minFact=1;
   // this is the max num for the factors
 function createMultImage()
{
 // make the string of text and variables that you want to be displayed
 let multPicHTML="";
 numId=0;
 for (let num=1; num<=maxFact; num++)
 {
   for(let fac=minFact; fac<=maxFact;fac++)
   { myFact= fac*num;
   numId++;
     multPicHTML +='  <div class = "item"   id="d'+numId + '" >' + myFact + ' </div>';}
  }
 // now make it the HTML
  multPic.innerHTML=multPicHTML;
   } 
createMultImage();




function addBorder()
{
numId=0;
 for (let num=1; num<=maxFact*maxFact; num++)
 {
    numId++;
    document.getElementById("d"+numId).style.border="thin solid #0000FF";
   }
}
addBorder();


function addHeader()
{
  headHTML="";
   for (let num=1;num<=maxFact; num++ )
{
  headHTML +='  <div     id="d'+num + '" >' +num + ' </div>';}
  chartHead.innerHTML=headHTML;
}
addHeader();


function addSide()
 {
  let sideHTML="";
   for (let num=1; num<=maxFact; num++)
  
  {sideHTML+='<div>' +num + ' </div>';}
    
   
   chartSide.innerHTML=sideHTML;
 }
  addSide();
5

From UX point of view, repetition of identical rows/columns only takes (useful) space - so in my opinion you don’t need header row and column.

In terms of accessibility and semantics, again, it should be a table, because it’s what it is. If you want to display some information on mouse hover, then you need to implement mouseless analog (for example make cells tab-able).

Here’s a little demo: https://codepen.io/snigo/full/NWPwzyP

2 Likes
6

That looks awesome! I want to preserve being able to look up a times table on the chart, which I need the headers to do… tho really only for the ones, and I’ve never had somebody look up a 1s table – have had 'em go for the calculator… Hmm…