Post on 20-Nov-2014
description
CHRISTMAS TREES WITH HTML, CSS & JS
NIAMH FOLEY
WHAT WE ARE GOING TO CREATE
HTML5 Tree with decoration HTML + CSS Tree
HYPER TEXT MARK UP LANGUAGE
Pros• Provides a basic structure for data to be
displayed
• Very easy to pick up and learn
• Mistakes are easily found and fixed
• There are many development environments
Cons• HTML is not dynamic – meaning it has no logic
to it
• No one structure to it
CASCADING STYLE SHEETS
Pros• Easy to learn
• Used by 99.999% of websites
• Tidy's up HTML makes it “Cleaner”
• Provides the skin to HMTL
Cons• None Its that Good
JAVASCRIPT
Pros• As close as you can get to coding with out all the
“Messy Stuff” of code
• Safe !! You cannot damage your system as its self contained
• Extremely powerful tool for creating web apps
• Very easy to pick up and learn
Cons• Only works in a browser
• No Development environment
• Debugging is a pain
• Each browser reacts to code differently
• Imagination is your only limit with JS
HOUSE KEEPING1. Create a Directory called “Christmas Tree”
2. Create a subdirectory called “css”
3. Create a file called “styles.css” and save into css
4. Create a file called “index.htm” and save into the root directory (Christmas Tree)
Keyboard Short cuts
Copy : Ctrl + C
Paste : Ctrl + V
Cut : Ctrl + X
HTML BOILER PLATE
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>The HTML, CSS & JS Christmass Trees</title> <link rel="stylesheet" href="css/tree.css"> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--></head><body> <canvas id="canvas" width="300" height="300" style="border-style:solid;" ></canvas></body></html>
Use this boiler plate code to begin
HTTP://BIT.LY/CHRISTMASTREEHTTP://BIT.LY/TREECSSHTTP://BIT.LY/JSTREE
FEAR NOT !!!
HTML5 + JAVASCRIPT TREE
FUNCTIONALITY
<body onload="draw();">
<script type="text/javascript">
// JS goes in here
</script>Setup
FUNCTIONALITY
function draw() {
var canvas = document.getElementById('canvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
// more code goes here !!
}
}
Step 1 - Beginning Code
FUNCTIONALITY
ctx.beginPath();
ctx.moveTo(150, 10); // starting point
ctx.lineTo(x, y);
ctx.lineTo(x, y);
ctx.fillStyle = “USE HEX CODE” ;
ctx.fill();
Step 2 – The Triangle
FUNCTIONALITY ctx.fillStyle = “USE HEX CODE”;
ctx.fillRect (x,y,w,h); // (x,y,width,height)Step 3 – The base
FUNCTIONALITY
ctx.beginPath();
ctx.arc(140, 75, 10, 0, Math.PI*2, true);
// Uses trig to create circle
ctx.closePath();
ctx.fillStyle = " USE HEX CODE ";
ctx.fill();
Step 4 - Decorations
TEST IT !! Fingers Crossed it Worked
HTML + CSS TREE
SETUP
1. Use HTML Boiler Plate
2. Create a styles.css file in the css directory
HTML BOILER PLATE<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>The HTML, CSS & JS Christmass Trees</title> <link rel="stylesheet" href="css/tree.css"> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--></head><body> <canvas id="canvas" width="300" height="300" style="border-style:dotted solid;" ></canvas></body></html>
FUNCTIONALITY
<div class="logo">
<div id="tree"></div>
<div id="trunk">
<div id="left-branch"></div>
<div id="right-bottom-branch"></div>
<div id="right-top-branch"></div>
</div>
</div>
Adding the HTML scaffolding
FUNCTIONALITY
.logo{
height: 200px; width: 160px;
margin: 150px auto;
position: relative;
}
Logo Class
FUNCTIONALITY
#tree {
border-bottom: 200px solid #//Putt Colour in here;
border-left: 80px solid transparent;
border-right: 80px solid transparent;
position: absolute; top: 0; left: 0;
height: 0; width: 0;
}
Tree Identifier
FUNCTIONALITY
#trunk{
height: 85px; width: 16px;
background: #3b543f;
position: absolute; left: 72px; bottom: -20px;
}
Trunk Identifier
FUNCTIONALITY
#left-branch{
background: #//Put Colour in here;
height: 30px; width: 6px;
position: absolute; left: -10px; top: 15px;
transform: rotate(-50deg);
-webkit-transform: rotate(-50deg);
-moz-transform: rotate(-50deg);
-ms-transform: rotate(-50deg);
-o-transform: rotate(-50deg);
}
Branch Identifiers
Left
FUNCTIONALITY
#right-bottom-branch{
background: #//Put Colour in here;
height: 50px; width: 6px;
position: absolute; top: 15px; left: 23px;
transform: rotate(50deg);
-webkit-transform: rotate(50deg);
-moz-transform: rotate(50deg);
-ms-transform: rotate(50deg);
-o-transform: rotate(50deg);
}
Branch Identifier
Right bottom
FUNCTIONALITY
#right-top-branch{
background: #//Put Colour in here;
height: 27px; width: 6px;
position: absolute; top: 2px; left: 20px;
transform: rotate(50deg);
-webkit-transform: rotate(50deg);
-moz-transform: rotate(50deg);
-ms-transform: rotate(50deg);
-o-transform: rotate(50deg);
}
Branch Identifier
Right Top
TEST IT !! Fingers Crossed it Worked