Kei Nart codenart

## null.js
var box = null;
console.log(box);
// result: null

## undefined.js
var box;
console.log(box);
// result: undefined

## dropdown.js
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * Actions
 */

function showList(event) {
   var theList = document.getElementById('the-list');
   theList.className = 'dropdown-list showing';
}

function hideList(event) {

## dropdown.js
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * Actions
 */

function showList(event) {
   var theList = document.getElementById('the-list');
   theList.className = 'dropdown-list shown';
}

function hideList(event) {

## dropdown.js
var theList = document.getElementById('the-list');

console.log( theList.className );
// 'dropdown-list shown'

theList.className = 'dropdown-list hidden';
// hiding the list

## dropdown.js
var theList = document.getElementById('the-list');
var firstItem = theList.firstElementChild;

console.log( firstItem.textContent );
// 'The rose is red'

firstItem.textContent = 'The flower is dancing';
// changing content

## dropdown.js
var theList = document.getElementById('the-list');
console.log(theList);
// the dropdown list element

## dropdown.js
var body = document.body;
// start traveling from <body>

var html = body.parentElement;
// its parent is <html>

var head = body.previousSiblingElement;
// its previous sibling is <head>

var dropdown = body.firstElementChild;

## dropdown.js
var head = document.head;
console.log(head);
// an object models the element <head>

var body = document.body;
console.log(body);
// an object models the element <body>

## dropdown.css
.dropdown {
   font-family: Arial, sans-serif;
   font-size: 16px;

   display: inline-block;
   position: relative;
}

.dropdown-btn {
   font-size: 14px;
	/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
	* Actions
	*/

	function showList(event) {
	var theList = document.getElementById('the-list');
	theList.className = 'dropdown-list showing';
	}

	function hideList(event) {
	var theList = document.getElementById('the-list');

	console.log( theList.className );
	// 'dropdown-list shown'

	theList.className = 'dropdown-list hidden';
	// hiding the list
	var theList = document.getElementById('the-list');
	var firstItem = theList.firstElementChild;

	console.log( firstItem.textContent );
	// 'The rose is red'

	firstItem.textContent = 'The flower is dancing';
	// changing content
	var theList = document.getElementById('the-list');
	console.log(theList);
	// the dropdown list element
	var body = document.body;
	// start traveling from <body>

	var html = body.parentElement;
	// its parent is <html>

	var head = body.previousSiblingElement;
	// its previous sibling is <head>

	var dropdown = body.firstElementChild;
	var head = document.head;
	console.log(head);
	// an object models the element <head>

	var body = document.body;
	console.log(body);
	// an object models the element <body>
	.dropdown {
	font-family: Arial, sans-serif;
	font-size: 16px;

	display: inline-block;
	position: relative;
	}

	.dropdown-btn {
	font-size: 14px;