ProfWendi/_Week5 SYST10199 Examples Secret

## _Week5 SYST10199 Examples
Example used during class in week 5.

set up /week5 directory
add /week5/css and /week5/scripts directories

/week5/css/examples.css can be used for all examples

## example1.html
<!-- week5/index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Week 5 Examples</title>
    <link type="text/css" rel="stylesheet" href="css/examples.css">
    <script src="scripts/main.js"></script>
</head>

<body>

    <header>
        <h1>Week 5 Demonstration</h1>
        <h2>DOM Programming</h2>
    </header>

    <main>
        <article>
            <h2>Accessing DOM Objects</h2>

            <p>There are several methods we can use to access the
                objects of a web page:
            </p>
            <ul>
                <li>node.childNodes</li>
                <li>node.lastChild, node.firstChild, node.previousSibling,
                    node.nextSibling</li>
                <li>node.children</li>
                <li>node.lastElementChild, node.firstElementChild,
                    node.previousElementSibling, node.nextElementSibling</li>
                <li>document.getElementById()</li>
                <li>node.querySelector()</li>
                <li>node.querySelectorAll()</li>
            </ul>

            <p>Note that any function/property qualified with <code>node</code>can
                be invoked/used on any HTMLElement object, and they will
                return/reference only descendants of the node itself.
            </p>
        </article>

        <article>
            <h2>Adding/Removing DOM Objects</h2>

            <p>There are several functions we can use to
                add and remove DOM objects:
            </p>

            <ul>
                <li>Creating Nodes:
                    <ul>
                        <li>document.createElement()</li>
                        <li>document.createTextNode()</li>
                    </ul>
                </li>
                <li>Adding Nodes to the DOM:
                    <ul>
                        <li>node.append()</li>
                        <li>node.prepend()</li>
                        <li>node.before()</li>
                        <li>node.after()</li>
                        <li>node.replaceWith()</li>
                    </ul>
                </li>
                <li>Removing Nodes from the DOM:
                    <ul>
			<li>node.remove()</li>
                    </ul>
                </li>
            </ul>
        </article>

        <article>
            <h2>Exercises</h2>

            <div id="demo">This is a div.</div>

        </article>

    </main>

    <footer>
        <address>&copy; 2023 Wendi Jollymore</address>
        <nav>
            <a href="https://sheridancollege.ca">Sheridan College</a>
            <a href="https://terminallearning.com">Terminal Learning</a>
        </nav>
    </footer>

</body>

</html>

## examples.css
html, body {
    font: 16px Arial,sans-serif;
}

header, footer {
    background-color: #e3e0cf;
    border: .3em solid #c5d5cb;
    border-radius: 1em;
    box-shadow: .4em .4em .3em #9fa8a3;
    padding: .75em;
}

header, footer, main, table {
    margin: .5em;
}

main {
    padding: .5em;
}

main  h2 {
    border-bottom: .2em groove #c5d5cb;
    color: #9fa8a3;
}

table {
    border: .2em solid #9fa8a3;
    border-collapse: collapse;
}

th, td, caption {
    padding: .3em;
}

th, caption {
    background-color: #c5d5cb;
}

th, td {
    border: .1em dashed #9fa8a3;
}
nav > a {
    display: block;
    margin: .2em;
    padding: .75em;
}

nav > a:hover {
    background-color: #c5d5cb;
}

/* for exercises/demos */
.error {
    color: red;
    font-weight: bold;
}

.highlight {
    background-color: yellow;
}

.boxy {
    border: 2px solid purple;
}

@media only screen and (min-width: 768px) {

    nav > a {
        display: inline-block;
    }
}
	Example used during class in week 5.

	set up /week5 directory
	add /week5/css and /week5/scripts directories

	/week5/css/examples.css can be used for all examples
	<!-- week5/index.html -->
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Week 5 Examples</title>
	<link type="text/css" rel="stylesheet" href="css/examples.css">
	<script src="scripts/main.js"></script>
	</head>

	<body>

	<header>
	<h1>Week 5 Demonstration</h1>
	<h2>DOM Programming</h2>
	</header>

	<main>
	<article>
	<h2>Accessing DOM Objects</h2>

	<p>There are several methods we can use to access the
	objects of a web page:
	</p>
	<ul>
	<li>node.childNodes</li>
	<li>node.lastChild, node.firstChild, node.previousSibling,
	node.nextSibling</li>
	<li>node.children</li>
	<li>node.lastElementChild, node.firstElementChild,
	node.previousElementSibling, node.nextElementSibling</li>
	<li>document.getElementById()</li>
	<li>node.querySelector()</li>
	<li>node.querySelectorAll()</li>
	</ul>

	<p>Note that any function/property qualified with <code>node</code>can
	be invoked/used on any HTMLElement object, and they will
	return/reference only descendants of the node itself.
	</p>
	</article>

	<article>
	<h2>Adding/Removing DOM Objects</h2>

	<p>There are several functions we can use to
	add and remove DOM objects:
	</p>

	<ul>
	<li>Creating Nodes:
	<ul>
	<li>document.createElement()</li>
	<li>document.createTextNode()</li>
	</ul>
	</li>
	<li>Adding Nodes to the DOM:
	<ul>
	<li>node.append()</li>
	<li>node.prepend()</li>
	<li>node.before()</li>
	<li>node.after()</li>
	<li>node.replaceWith()</li>
	</ul>
	</li>
	<li>Removing Nodes from the DOM:
	<ul>
	<li>node.remove()</li>
	</ul>
	</li>
	</ul>
	</article>

	<article>
	<h2>Exercises</h2>

	<div id="demo">This is a div.</div>

	</article>

	</main>

	<footer>
	<address>© 2023 Wendi Jollymore</address>
	<nav>
	<a href="https://sheridancollege.ca">Sheridan College</a>
	<a href="https://terminallearning.com">Terminal Learning</a>
	</nav>
	</footer>

	</body>

	</html>
	html, body {
	font: 16px Arial,sans-serif;
	}

	header, footer {
	background-color: #e3e0cf;
	border: .3em solid #c5d5cb;
	border-radius: 1em;
	box-shadow: .4em .4em .3em #9fa8a3;
	padding: .75em;
	}

	header, footer, main, table {
	margin: .5em;
	}

	main {
	padding: .5em;
	}

	main h2 {
	border-bottom: .2em groove #c5d5cb;
	color: #9fa8a3;
	}

	table {
	border: .2em solid #9fa8a3;
	border-collapse: collapse;
	}

	th, td, caption {
	padding: .3em;
	}

	th, caption {
	background-color: #c5d5cb;
	}

	th, td {
	border: .1em dashed #9fa8a3;
	}
	nav > a {
	display: block;
	margin: .2em;
	padding: .75em;
	}

	nav > a:hover {
	background-color: #c5d5cb;
	}

	/* for exercises/demos */
	.error {
	color: red;
	font-weight: bold;
	}

	.highlight {
	background-color: yellow;
	}

	.boxy {
	border: 2px solid purple;
	}

	@media only screen and (min-width: 768px) {

	nav > a {
	display: inline-block;
	}
	}