Final challenge: lay out the club page: cheat sheet

<button>

A button.

<button>Click me</button>

Example

<button>Start</button>

A button (clicking does nothing yet)

jump link

A link to a place on the same page. id names the place; href starts with # and the same name.

<a href="#results">Link text</a>

<h2 id="results">Section title</h2>

Example

<nav>
  <ul>
    <li><a href="#results">Results</a></li>
    <li><a href="#join">Join</a></li>
  </ul>
</nav>
<h2 id="results">Results</h2>
<p>The Owls won.</p>
<h2 id="join">Join</h2>
<p>Come on Wednesday.</p>

What it draws — Clicking a link scrolls the page to its heading

<select> drop-down

A drop-down list: one option to choose.

<select id="house">
  <option>Owls</option>
  <option>Hawks</option>
</select>

Example

<label for="size">Size</label>
<select id="size">
  <option>Small</option>
  <option>Large</option>
</select>

display: grid

Put it on the box that holds the items: its children are placed in rows and columns (with grid-template-columns).

display: grid;

Example

<style>
  .grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  p {
    background-color: lavender;
  }
</style>
<div class="grid">
  <p>A</p>
  <p>B</p>
  <p>C</p>
  <p>D</p>
</div>

on click

When the element with id="go" is clicked, run the lines inside. # means id, as . means class.

document.querySelector('#go').addEventListener('click', function () {
  what to do
});

<table>

A table: <tr> is a row, <th> a heading cell, <td> a normal cell.

<table>
  <tr>
    <th>Name</th>
    <th>Score</th>
  </tr>
  <tr>
    <td>Sam</td>
    <td>10</td>
  </tr>
</table>

Example

<table>
  <tr>
    <th>Team</th>
    <th>Points</th>
  </tr>
  <tr>
    <td>Owls</td>
    <td>12</td>
  </tr>
  <tr>
    <td>Hawks</td>
    <td>9</td>
  </tr>
</table>

text-align

Align text: left, center or right.

text-align: center;

Example

<style>
  h2 {
    text-align: center;
  }
</style>
<h2>Centred</h2>
<p>Left</p>

grid-template-columns

The width of each column, in order. 1fr means one share of the space left; repeat(3, 1fr) makes three equal columns.

grid-template-columns: 200px 1fr;

Example

<style>
  .grid {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 8px;
  }
  .cell {
    background-color: lightblue;
  }
</style>
<div class="grid">
  <div class="cell">80px</div>
  <div class="cell">The rest</div>
</div>

change the text

Replace the words inside the element with id="message".

document.querySelector('#message').textContent = 'Go!';