JSFiddle - React, Tailwind, and code Playground

by Tori Hoelscher

HTML

<body>

  <head>
    <title>
      Tori Hoelscher Web systems Assignment 6
    </title>
  </head>


  <h1>To show my different belts in Taekwondo</h1>
<br><br>
  <div id="output"></div>
  </body>

CSS

table {
  width:95%;

}
table, th, td{
  border: 1px solid black;
  border-collapse: collapse;

}

th, td {
  padding: 15px;
  text-align: left;
}

    th {
   	height:20px;
    }

table tr {
	background-color:#eee;
}

    table th {
	background-color:gold;
	color:black;
    }

JavaScript

var data;
var a = "";
var x, y;
var i, j;
//var b = "";


data = {
//  "taekwondobelts" : ["White Belt", "Orange Belt", "Yellow Belt", "Camo Belt", "Green Belt"]

  "taekwondobelts" : [
    {"row1" : ["June 26th 2018", "White Belt", "No knowledge of Martial Arts", "August 20th 2018" ]},
    {"row2" : ["August 26th", "Orange Belt", "The technique is more refined and understanding is better", "October 30th, 2018"]},
    {"row3" : ["November 2nd 2018", "Yellow Belt", "The sun is starting to go into the sky to help understand what is expected", "December 18th 2018"]},
    {"row4" : ["January 4th 2019", "Camo Belt", "More technique is given, understanding that the goal is to be a black belt", "March 20th 2019"]},
    {"row5" : ["March 26th 2018", "Green Belt", "The understanding of knowledge is like a tree", "May 18th, 2019"]}
  ],

  "taekwondobeltsd" : [
    {"Date Achieved": ["June 26th 2018", "August 26th", "November 2nd 2018", "January 4th 2019", "March 26th 2018"]},
    {"Belt Name" : ["White Belt", "Orange Belt", "Yellow Belt", "Camo Belt", "Green Belt"]},
    {"Meaning" : ["No knowledge of Martial Arts", "The technique is more refined and understanding is better", "The sun is starting to go into the sky to help understand what is expected", "More technique is given, understanding that the goal is to be a black belt", "The understanding of knowledge is like a tree"]},
    {"Test Date" : ["August 20th 2018", "October 30th, 2018", "December 18th 2018", "March 20th 2019", "May 18th, 2019"]}
]
}



a += "<table>"

a += "<th>" + "Date Achieved" + "</th>";
a += "<th>" + "Belt Name" + "</th>";
a += "<th>" + "Meaning" + "</th>";
a += "<th>" + "Test Date" + "</th>";

/*
for (i = 0; i < data.taekwondobelts; i++) {
  a += "<td>" + data.taekwondobelts[i] + "</tr>";
}


var i, j;

//for (i = 0; i < data.taekwondobelts.length; i++) {
//  a += "<tr><td>" + data.taekwondobelts[i] + "</td></tr>";
//}

//var x = JSON.parse(data);


/*
for (j in...