Christmas Trees Made with HTML CSS and JS

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

Cons

• Provides a basic structure for data to be
displayed

• HTML is not dynamic – meaning it has no logic
to it

• Very easy to pick up and learn

• No one structure to it

• Mistakes are easily found and fixed
• There are many development environments

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 KEEPING
1. 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
Use this boiler plate code to begin

<!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">

</head>
<body>
<canvas id="canvas" width="300" height="300" style="border-style:solid;" ></canvas>
</body>
</html>

HTTP://BIT.LY/CHRISTMASTREE
HTTP://BIT.LY/TREECSS
HTTP://BIT.LY/JSTREE
FEAR NOT !!!

<body onload="draw();">
<script type="text/javascript">

FUNCTIONALITY

// JS goes in here

Setup

</script>

function draw() {
var canvas = document.getElementById('canvas');

FUNCTIONALITY
Step 1 - Beginning Code

if (canvas.getContext){
var ctx = canvas.getContext('2d');
// more code goes here !!

}
}

ctx.beginPath();
ctx.moveTo(150, 10); // starting point

FUNCTIONALITY
Step 2 – The Triangle

ctx.lineTo(x, y);

ctx.lineTo(x, y);
ctx.fillStyle = “USE HEX CODE” ;
ctx.fill();

FUNCTIONALITY
Step 3 – The base

ctx.fillStyle = “USE HEX CODE”;
ctx.fillRect (x,y,w,h); // (x,y,width,height)

ctx.beginPath();
ctx.arc(140, 75, 10, 0, Math.PI*2, true);

FUNCTIONALITY
Step 4 - Decorations

// Uses trig to create circle

ctx.closePath();
ctx.fillStyle = " USE HEX CODE ";
ctx.fill();

TEST IT !!
Fingers Crossed it Worked

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">

</head>
<body>
<canvas id="canvas" width="300" height="300" style="border-style:dotted solid;" ></canvas>
</body>
</html>

<div class="logo">
<div id="tree"></div>
<div id="trunk">

FUNCTIONALITY
Adding the HTML scaffolding

<div id="left-branch"></div>
<div id="right-bottom-branch"></div>
<div id="right-top-branch"></div>
</div>
</div>

.logo{

height: 200px; width: 160px;

FUNCTIONALITY

margin: 150px auto;

Logo Class

position: relative;
}

#tree {

border-bottom: 200px solid #//Putt Colour in here;
border-left: 80px solid transparent;

FUNCTIONALITY

border-right: 80px solid transparent;

Tree Identifier

position: absolute; top: 0; left: 0;
height: 0; width: 0;
}

#trunk{


FUNCTIONALITY

background: #3b543f;

Trunk Identifier

position: absolute; left: 72px; bottom: -20px;
}

#left-branch{
background: #//Put Colour in here;

position: absolute; left: -10px; top: 15px;

FUNCTIONALITY

transform: rotate(-50deg);

Branch Identifiers

-webkit-transform: rotate(-50deg);

Left

-moz-transform: rotate(-50deg);
-ms-transform: rotate(-50deg);
-o-transform: rotate(-50deg);
}

#right-bottom-branch{
position: absolute; top: 15px; left: 23px;

FUNCTIONALITY

transform: rotate(50deg);

Branch Identifier

-webkit-transform: rotate(50deg);

Right bottom

-moz-transform: rotate(50deg);

-ms-transform: rotate(50deg);
-o-transform: rotate(50deg);
}

#right-top-branch{
position: absolute; top: 2px; left: 20px;

FUNCTIONALITY

transform: rotate(50deg);

Branch Identifier

-webkit-transform: rotate(50deg);

Right Top

-moz-transform: rotate(50deg);

-ms-transform: rotate(50deg);
-o-transform: rotate(50deg);
}

Christmas Trees Made with HTML CSS and JS

Christmas Trees Made with HTML CSS and JS

More Related Content

Viewers also liked

More from Niamh Foley

Recently uploaded

Christmas Trees Made with HTML CSS and JS