Cluttered syntax

by Rolf Friedrich

HTML

<button class='onerowhorz'>oneRowHorz</button>
<button class='onerowvert'>oneRowVert</button>
<button class='tworows'>twoRows</button>
<button class='topleft'>TopLeft</button>
<button class='bottomleft'>BottomLeft</button>
<button class='bottomleft'>BottomRight</button>
<div id="plan" class=''>
  <div id="horztop">
    <div id="lineTop"></div>
    <div id="lineBottom"></div>
  </div>
  <div id="verttop">
    <div id='lineLeft'></div>
    <div id='lineRight'></div>
  </div>
  <div id="horzmiddle">
    <div id="lineTop"></div>
    <div id="lineBottom"></div>
  </div>
  <div id="vertmiddle">
    <div id='lineLeft'></div>
    <div id='lineRight'></div>
  </div>
  <div id="horzbottom">
    <div id="lineTop"></div>
    <div id="lineBottom"></div>
  </div>
  <div id="vertbottom">
    <div id='lineLeft'></div>
    <div id='lineRight'></div>
  </div>
</div>

SCSS

$svgSize: 70px;
#plan {
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  width:80%; 
  margin:2rem auto;

  &.topleft {
    align-items:flex-start;

    #horz #lineTop, 
    #horz #lineBottom {
      justify-content: flex-start;
    }

    #vert{
      justify-content: flex-start;
      #lineLeft,
      #lineRight{
        margin-left:1px;
      }
    }
  }

  &.bottomleft {

    #vert{
      order:1;
    }
    #horz{
      order:2;
    }
  }
}

.hidden{
  display:none !important;
}
.box{
  display:inline-flex;
  margin:0 1px;
  max-width:$svgSize;
  min-width:$svgSize;
  min-height:$svgSize;
  max-height: $svgSize;
  background:#f60;
}

#horz{
  display:flex;
  flex-direction:column;
  width:100%;

  #lineTop,
  #lineBottom{
    display:flex;
    margin:1px 0;    
    justify-content:flex-end;
    width:100%;       
  }

  #lineTop {
    /* margin-bottom:1rem; */
  }

}

#vert{
  display:flex;
  flex-direction: row;
  justify-content: flex-end;
  width:25%;

  #lineLeft,
  #lineRight{
    display:flex;
    flex-direction:column;
    justify-content: flex-start;
    margin-right: 1px;
    margin-left: 2px;
  }

  .box{
    margin:1px 0;
    &:nth-of-type(1){
      // margin-bottom:1rem;
    }
  }
}

JavaScript

// Vanilla js
var div = document.getElementById('lineTop');

for (var i = 1; i <= 10; i++) {
  $( div ).append( "<div class='box' id='box"+i+"'></div>" );
  $('#box' + i).on('click', function() {
    alert($(this).attr('id'));
  });
}

var div = document.getElementById('lineBottom');

for (var i = 11; i <= 20; i++) {
  $( div ).append( "<div class='box' id='box"+i+"'></div>" );
  $('#box' + i).on('click', function() {
    alert($(this).attr('id'));
  });
}


var div = document.getElementById('lineLeft');
for (var i = 21; i <= 25; i++) {
  $( div ).append( "<div class='box'id='box"+i+"'></div>" );
  $('#box' + i).on('click', function() {
    alert($(this).attr('id'));
  });
}

var div = document.getElementById('lineRight');

for (var i = 26; i <= 30; i++) {
 $( div ).append( "<div class='box' id='box"+i+"'></div>" );
  $('#box' + i).on('click', function() {
    alert($(this).attr('id'));
  });
}

$( '.topleft').on('click', function(){
	$('#plan').toggleClass('topleft');
});

$( '.bottomleft').on('click', function(){
	$('#plan').toggleClass('bottomleft');
});

$( '.bottomright').on('click', function(){
	$('#plan').addClass('bottomleft');
  $( '#plan' ).rmeoveClass('topleft');
});

$( '.onerowhorz').on('click', function(){
	$('#horz').removeClass('hidden');
  $('#vert').addClass('hidden');
});

$( '.onerowvert').on('click', function(){
	$('#horz').addClass('hidden');
  $('#vert').removeClass('hidden');
});

$( '.tworows').on('click', function(){
	$('#vert, #horz').removeClass('hidden');
});