Skip to content

Instantly share code, notes, and snippets.

@ggamel

ggamel/index.html

Last active August 29, 2015 14:19
Show Gist options
  • Save ggamel/89c08cacc38ee98d367a to your computer and use it in GitHub Desktop.
Save ggamel/89c08cacc38ee98d367a to your computer and use it in GitHub Desktop.
Download ZIP
DOMinate the DOM
Raw
index.html
<!-- http://git.io/vvibE -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<!-- Your site title -->
<title>DOMinate the DOM</title>
<!-- Your name (or group/company name) -->
<meta name="author" content="Goat">
<!-- Your site description -->
<meta name="description" content="My first DOM project">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Helper CSS files to use a custom typeface & help with low-level layout -->
<link href="http://d2v52k3cl9vedd.cloudfront.net/basscss/6.0.0/basscss.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700' rel='stylesheet' type='text/css'>
<!-- Your CSS file -->
<link rel="stylesheet" href="style.css">
</head>
<!-- Use JS to change the body background and text colors. -->
<body class="">
<!-- Use JS to change the header background and text colors. -->
<header class="">
<div class="px3 py4">
<h1 class="h1 h1-responsive m0">
<span class="caps">DOMinate the DOM</span>
</h1>
<p>This simple project is designed to help you learn about manipulating the DOM. <em>Domination is optional.</em></p>
<div class="right">
<button type="button" class="button-big rounded white bg-darken-4" onclick="changeColors();">Change All The Colors!</button>
</div>
</div>
</header>
<div class="container px2">
<section id="overview" class="sm-flex py4 mxn2">
<div class="sm-col-4 px2">
<h2>Instructions</h2>
<p>Using the concepts introduced in <a href="http://javascriptbook.com/code/c05/" target="_blank">Chapter 5 &mdash; Document Object Model )</a>, modify the template (<code><strong>index.html</strong></code>) using JavaScript (<code><strong>script.js</strong></code>). The ultimate goal will be to change all text and background colors using JavaScript to inject CSS classes into the DOM.</p>
<p>Obviously, there are a number of ways to accomplish this task, but you'll need to refer to Chapter 5 to modify the DOM (with <code><strong>script.js</strong></code>).</p>
<p>You <em>will not edit</em> <code><strong>index.html</strong></code> in your text editor (e.g. Brackets), but instead rely upon your JavaScript skills to alter the colors on this simple HTML page.</p>
</div>
<div class="sm-col-4 px2">
<h2>CSS Classes</h2>
<p>Refer to the lists below for the CSS classes you can use in your JavaScript file (<code><strong>script.js</strong></code>).</p>
<p>These CSS classes are already created, so you just need to determine the best way to manipulate the DOM to inject the classes. They will work like magic when you get your code working.</p>
<p>Begin by opening up the Developer Tools in Safari, Chrome, Firefox, etc., inspecting the DOM, then copy/pasting a few of the CSS classes into random HTML elements on the page. Colors will auto-apply if you're applying the classes correctly.</p>
</div>
<div class="sm-col-4 px2">
<h2>Looking Forward</h2>
<p>Start thinking about how you'll use the concepts in this project in your final, semester project. You'll need to be able to create (from scratch) HTML, CSS, and JS files.</p>
<p>In order to suceed in a career where you're creating for or working on the web, either as a designer, developer, or content manager, you'll need to be able to interact with or manipulate the DOM.</p>
<p>Make sure you save the files associated with this project. They should help you pick up both basic and advanced skills.</p>
</div>
</section>
<section class="mt4 mt4 mb2 rounded b2 border border-darken-1">
<div class="p2">
<h2>List of Available Text Color Classes</h2>
<h3 class="center">
<span class="black">.black</span>
<span class="gray">.gray</span>
<span class="silver">.silver</span>
<span class="white">.white</span>
<span class="aqua">.aqua</span>
<span class="blue">.blue</span>
<span class="navy">.navy</span>
<span class="teal">.teal</span>
<span class="green">.green</span>
<span class="olive">.olive</span>
<span class="lime">.lime</span>
<span class="yellow">.yellow</span>
<span class="orange">.orange</span>
<span class="red">.red</span>
<span class="fuchsia">.fuchsia</span>
<span class="purple">.purple</span>
<span class="maroon">.maroon</span>
</h3>
</div>
</section>
<section class="mt4 mb2 rounded b2 border border-darken-1">
<div class="p2">
<h2>List of Available Background Color Classes</h2>
<div class="center p1 white bg-black">.bg-black</div>
<div class="center p1 bg-gray">.bg-gray</div>
<div class="center p1 bg-silver">.bg-silver</div>
<div class="center p1 bg-white">.bg-white</div>
<div class="center p1 bg-aqua">.bg-aqua</div>
<div class="center p1 bg-blue">.bg-blue</div>
<div class="center p1 white bg-navy">.bg-navy</div>
<div class="center p1 bg-teal">.bg-teal</div>
<div class="center p1 bg-green">.bg-green</div>
<div class="center p1 bg-olive">.bg-olive</div>
<div class="center p1 bg-lime">.bg-lime</div>
<div class="center p1 bg-yellow">.bg-yellow</div>
<div class="center p1 bg-orange">.bg-orange</div>
<div class="center p1 bg-red">.bg-red</div>
<div class="center p1 bg-fuchsia">.bg-fuchsia</div>
<div class="center p1 bg-purple">.bg-purple</div>
<div class="center p1 white bg-maroon">.bg-maroon</div>
<div class="center p1 bg-darken-1">.bg-darken-1</div>
<div class="center p1 bg-darken-2">.bg-darken-2</div>
<div class="center p1 bg-darken-3">.bg-darken-3</div>
<div class="center p1 bg-darken-4">.bg-darken-4</div>
</div>
</section>
</div>
<!-- Use JS to change the footer background and text colors. -->
<footer class="">
<div class="px3 py4">
<h3>Welcome to the Footer</h3>
<p>If you decide to set everything in wackadoodle colors, that's just fine.</p>
<p>Using CSS classes in a modular way — that is, using multiple classes to achieve style, layout, etc. — is exactly how many professionals create for the web.</p>
<script type="text/javascript">
var weekDays = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
var now = new Date();
document.write("<p class='h5 bold inline-block px1 mr1 rounded white bg-darken-4'>" + "Today is " + weekDays[now.getDay()] + "." + "</p>");
</script>
<p>The paragraph tag above was written into the DOM with simple JavaScript.</p>
<p class="h6 mb0">&copy; 2015 Screaming Goats LLP</p>
</div>
</footer>
<!-- Your JS file -->
<script src="script.js"></script>
</body>
</html>
Raw
script.js
//
// DOMinate the DOM
// April 16, 2015
// http://git.io/vvibE
//
// Put your JavaScript code into this file.
//
// Make sure you change the text and background
// color for each of the primary areas of the page: body, header, & footer.
function changeColors() {
}
Raw
style.css
/*
* DOMinate the DOM
* http://git.io/vvibE
*
* For this assignment, you don't *need* to edit this file.
* However, if you want to modify this file to change things, go right ahead.
* Seriously, nobody is going to stop you.
* It's an assignment. You can't "break" anything.
* Have some fun and play around and see what happens.
*/
body, h1, h2, h3, h4, h5, h6 {
font-family: "Open Sans", sans-serif;
}
.h1-responsive {
font-size: 3.84rem;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment