Re-theme page

README.md

@@ -8,5 +8,5 @@ When you click on a button, it will highlight certain parts of certain tables. A
 
 - You can select all the odd number rows in both tables.
 - You can select specific rows or cells, that have pre-determined attributes.
- - The "Sonic" and "Yoshi" rows have this data attribute.
- - The cells "Kirby" and "Samus" have this data attribute.
+ - The "Glaceon" and "Talonflame" rows have this data attribute.
+ - The cells "Weavile" and "Arcanine" have this data attribute.

app.js

@@ -1,7 +1,7 @@
 // Grab all the buttons
 const selectOddBtn = document.getElementById("selectOdd");
 const selectDataAttrBtn = document.getElementById("selectDataAttr");
-const selectOnlySuccessBtn = document.getElementById("selectOnlySuccess");
+const selectOnlyIceTypesBtn = document.getElementById("selectOnlyIceTypes");
 
 // Grab Table elements
 const tablesList = document.querySelectorAll('.table-group table');
@@ -42,17 +42,17 @@ function selectDataAttr() {
  stripUnusedClasses();
  selectDataAttrBtn.classList.add("active");
 
- selectionDesc.innerHTML = 'Using <code>document.querySelectorAll("tr[data-selected=\'true\'], td[data-selected=\'true\'])</code> along with a for loop, I am able to select any rows or cells that have <code>data-selected=\'true\'</code> attribute.<br><br>The rows with "Sonic" and "Yoshi" have this data-selected attribute. The cells for the names "Samus" and "Kirby" also have this attribute.'
+ selectionDesc.innerHTML = 'Using <code>document.querySelectorAll("tr[data-selected=\'true\'], td[data-selected=\'true\'])</code> along with a for loop, I am able to select any rows or cells that have <code>data-selected=\'true\'</code> attribute.<br><br>The rows with "Glaceon" and "Talonflame" have this data-selected attribute. <br><br>The cells for the names "Weavile" and "Arcanine" also have this attribute.'
 
  const selectPreSelectedItems = document.querySelectorAll("tr[data-selected='true'], td[data-selected='true']");
  for (let item = 0; item < selectPreSelectedItems.length; item++){
  selectPreSelectedItems[item].classList.add("highlight");
  }
 }
 
-function selectOnlySuccess() {
+function selectOnlyIce() {
  stripUnusedClasses();
- selectOnlySuccessBtn.classList.add("active");
+ selectOnlyIceBtn.classList.add("active");
 }
 
 // Helper Functions

index.html

@@ -16,64 +16,64 @@ <h1>Query Selector Playground</h1>
  <div class="table-group">
 
  <div class="table1">
- <h2>Success Table</h2>
- <table border="1" class="success-table table">
+ <h2>Ice Types</h2>
+ <table border="1" class="ice-table table">
  <tr>
- <th>ID</th>
  <th>Name</th>
- <th>Points</th>
+ <th>Dex Number</th>
+ <th>Base Stat Total</th>
  </tr>
  <tr>
- <td>873671</td>
- <td>Mario</td>
- <td>1,800</td>
+ <td>Lapras</td>
+ <td>131</td>
+ <td>535</td>
  </tr>
  <tr data-selected="true">
- <td>511892</td>
- <td>Sonic</td>
- <td>1,651</td>
+ <td>Glaceon</td>
+ <td>471</td>
+ <td>525</td>
  </tr>
  <tr>
- <td>600401</td>
- <td data-selected="true">Samus</td>
- <td>1,623</td>
+ <td>Mamoswine</td>
+ <td>473</td>
+ <td>530</td>
  </tr>
  <tr>
- <td>741125</td>
- <td>Lucario</td>
- <td>1,409</td>
+ <td data-selected="true">Weavile</td>
+ <td>461</td>
+ <td>510</td>
  </tr>
  </table>
  </div>
 
  <div class="table2">
 
- <h2>Fail Table</h2>
- <table border="1" class="fail-table table">
+ <h2>Fire Types</h2>
+ <table border="1" class="fire-table table">
  <tr>
- <th>ID</th>
  <th>Name</th>
- <th>Points</th>
+ <th>Dex Number</th>
+ <th>Base Stat Total</th>
  </tr>
  <tr>
- <td>833102</td>
- <td data-selected="true">Kirby</td>
- <td>941</td>
+ <td data-selected="true">Arcanine</td>
+ <td>59</td>
+ <td>555</td>
  </tr>
  <tr>
- <td>699128</td>
- <td>Pikachu</td>
- <td>899</td>
+ <td>Charizard</td>
+ <td>6</td>
+ <td>534</td>
  </tr>
  <tr>
- <td>846546</td>
- <td>Donkey Kong</td>
- <td>547</td>
+ <td>Infernape</td>
+ <td>392</td>
+ <td>534</td>
  </tr>
  <tr data-selected="true">
- <td>742125</td>
- <td>Yoshi</td>
- <td>241</td>
+ <td>Talonflame</td>
+ <td>663</td>
+ <td>499</td>
  </tr>
  </table>
  </div>
@@ -84,7 +84,7 @@ <h2>Fail Table</h2>
  <div class="button-group">
  <button id="selectOdd" onclick="selectOdd()">Select Odd Rows</button>
  <button id="selectDataAttr" onclick="selectDataAttr()">Select using Data Attribute</button>
- <button id="selectOnlySuccess" onclick="selectOnlySuccess()">Select Success Table</button>
+ <button id="selectOnlyIceTypes" onclick="selectOnlyIce()">Select Ice Types</button>
  </div>
 
  </div>

styles.css

@@ -40,11 +40,14 @@ code {
 .table-group {
  display: flex;
  text-align: center;
- justify-content: space-between;
+ justify-content: center;
  width: 100%;
  margin-bottom: 20px;
 }
 
+.table-group :first-child {
+ margin-right: 30px;
+}
 th, td {
  padding: 2px 10px;
  text-align: center;