aozora

HTML:

    <div class="box-container">
        <div class="box">Box 1</div>
        <div class="box">Box 2</div>
        <div class="box">Box 3</div>
        <div class="box">Box 4</div>
    </div>

CSS:

aozora

// CSS3 Transitions test: write the code to rotate by 180 degree the button when hovered

button {
  background-color: #ccc;
  padding: 1rem 2rem;
}

aozora

<!-- 
  This form ha several markup errors: please fix them.
-->
<form action="/" method="SEND">
  <span>User Name:</span>
  <input type="number" placetext="Write your user name" id="username">

  <span>Password</span>
  <input type="text" placetext="Write your secret password" id="password">

aozora

<!-- 
  This should be the markup for an article with the abstract for the first episode of the TV Show "Game of Thrones" 
  This markup is valid, ma semantically incorrect; please refactor it.
-->
<div>
  <div>
    <div>
      <div>
        <div>
          <div>

aozora

// what's the difference between these 2 rules ?

html {
  box-sizing: border-box;
}

html {
  box-sizing: content-box;
}

aozora

// what is this?
(function(){
...
}());


// and this one?
(function($){
...
}(jQuery));

aozora

// using the "use strict;" directive, 
// what happens executing the test function?
"use strict";

function test(){
   var testvar = 4;
    return testvar;
}
intvar = test();

aozora

// In this function we’re incrementing the count 
// property on the object that was passed in
// but there's a bug..

function incrementCount(counter) {
  if (counter.count) {
    counter.count++;
  } else {
    var counter = 1;
    counter.count = counter;

aozora

// the following function, it runs but there a sever issue in it

function test() {
  myVar = 'Hello, World';
  console.log(myVar);
}

aozora

// the following function, when invoked, 
// returns the error "ReferenceError: myvar is not defined". Why?

function test() {
  var myVar = 'Hello, World';
  console.log(myvar);
}