koraytugay/wombat.html

## wombat.html
<!doctype html>
<head>
  <style>
    body {
      font-family: sans-serif;
    }

    h1 {
      color: #2f4f4f;
      font-weight: normal;
    }

    #main-nav {
      margin-top: 10px;
      list-style: none;
      padding-left: 0;
    }

    #main-nav li {
      display: inline-block;
    }

    nav a {
      color: white;
      background-color: #13a4a4;
      border-color: black;
      border-width: 2px;
      border-style: solid;
      padding: 5px 20px;
      border-radius: 2px;
      text-decoration: none;
    }

    nav a.featured {
      background-color: orange;
      box-shadow: 4px 4px gray;
    }

    footer a {
      color: initial;
    }

    input, span {
      width: 20px;
      height: 20px;
      vertical-align: -5px;
    }

    span {
      font-size: 16px;
      margin-bottom: 2px;
    }
  </style>
</head>
<body>
<main>
  <header class="page-header">
    <h1 id="page-title" class="title">Wombat Coffee Roaster</h1>
    <nav>
      <ul id="main-nav" class="nav">
        <li><a href="/">Home</a></li>
        <li><a href="/coffees">Coffees</a></li>
        <li><a href="/brewers">Brewers</a></li>
        <li><a href="/specials" class="featured">Specials</a></li>
      </ul>
    </nav>
  </header>
  <div>
    <label id="my-label">
    <input id="my-checkbox" type="checkbox"/>
      Click me
    </label>
  </div>
</main>
<script>
  const myCheckbox = document.querySelector("#my-checkbox");
  myCheckbox.addEventListener('click', () => {
    let myLabel = document.querySelector("#my-label");
    myLabel.style["text-decoration"] === "line-through" ?
        myLabel.style["text-decoration"] = "none" : myLabel.style["text-decoration"] = "line-through";
  });
</script>
</body>
	<!doctype html>
	<head>
	<style>
	body {
	font-family: sans-serif;
	}

	h1 {
	color: #2f4f4f;
	font-weight: normal;
	}

	#main-nav {
	margin-top: 10px;
	list-style: none;
	padding-left: 0;
	}

	#main-nav li {
	display: inline-block;
	}

	nav a {
	color: white;
	background-color: #13a4a4;
	border-color: black;
	border-width: 2px;
	border-style: solid;
	padding: 5px 20px;
	border-radius: 2px;
	text-decoration: none;
	}

	nav a.featured {
	background-color: orange;
	box-shadow: 4px 4px gray;
	}

	footer a {
	color: initial;
	}

	input, span {
	width: 20px;
	height: 20px;
	vertical-align: -5px;
	}

	span {
	font-size: 16px;
	margin-bottom: 2px;
	}
	</style>
	</head>
	<body>
	<main>
	<header class="page-header">
	<h1 id="page-title" class="title">Wombat Coffee Roaster</h1>
	<nav>
	<ul id="main-nav" class="nav">
	<li><a href="/">Home</a></li>
	<li><a href="/coffees">Coffees</a></li>
	<li><a href="/brewers">Brewers</a></li>
	<li><a href="/specials" class="featured">Specials</a></li>
	</ul>
	</nav>
	</header>
	<div>
	<label id="my-label">
	<input id="my-checkbox" type="checkbox"/>
	Click me
	</label>
	</div>
	</main>
	<script>
	const myCheckbox = document.querySelector("#my-checkbox");
	myCheckbox.addEventListener('click', () => {
	let myLabel = document.querySelector("#my-label");
	myLabel.style["text-decoration"] === "line-through" ?
	myLabel.style["text-decoration"] = "none" : myLabel.style["text-decoration"] = "line-through";
	});
	</script>
	</body>