Skip to content

Instantly share code, notes, and snippets.

@TravisL12

TravisL12/application.css

Created March 12, 2018 22:42
Show Gist options
  • Save TravisL12/ad50daaedfd0af18c502df9cc7ccbb3f to your computer and use it in GitHub Desktop.
Save TravisL12/ad50daaedfd0af18c502df9cc7ccbb3f to your computer and use it in GitHub Desktop.
Download ZIP
Javascript Forrest!
Raw
application.css
body {
margin: 0;
}
#forrest {
position: relative;
width: 100vw;
height: 100vh;
background-color: lightblue;
}
#forrest .tree {
position: absolute;
height: 300px;
width: 150px;
}
#forrest .tree .leaves {
position: absolute;
width: 150px;
height: 150px;
border-radius: 50%;
background-color: lightgreen;
}
#forrest .tree .trunk {
position: absolute;
left: 52px;
bottom: 0;
width: 50px;
height: 90%;
background-color: brown;
}
Raw
application.js
function randomizer(max, min) {
min = min || 0;
max = max || 1;
return Math.round(Math.random() * (max - min) + min);
}
class Forrest {
constructor(forrestId) {
this.el = document.getElementById(forrestId);
this.trees = [];
document.addEventListener('click', () => {
this.addTree();
});
}
addTree() {
this.trees.push(new Tree(randomizer(this.el.offsetWidth), randomizer(this.el.offsetHeight)));
this.render();
}
render() {
this.el.innerHTML = ''; // clear everything before drawing
const renderedTrees = [];
for (let i = 0; i < this.trees.length; i++) {
renderedTrees.push(this.trees[i].render());
}
this.el.innerHTML = renderedTrees.join('');
}
}
class Tree {
constructor(x, y) {
this.x = x;
this.y = y;
}
render() {
return `
<div class="tree" style="left: ${this.x}; top: ${this.y}">
<div class="trunk"></div>
<div class="leaves"></div>
</div>`;
}
}
new Forrest('forrest');
Raw
gistfile1.txt
body {
margin: 0;
}
#forrest {
position: relative;
width: 100vw;
height: 100vh;
background-color: lightblue;
}
#forrest .tree {
position: absolute;
height: 300px;
width: 150px;
}
#forrest .tree .leaves {
position: absolute;
width: 150px;
height: 150px;
border-radius: 50%;
background-color: lightgreen;
}
#forrest .tree .trunk {
position: absolute;
left: 52px;
bottom: 0;
width: 50px;
height: 90%;
background-color: brown;
}
function randomizer(max, min) {
min = min || 0;
max = max || 1;
return Math.round(Math.random() * (max - min) + min);
}
class Forrest {
constructor(forrestId) {
this.el = document.getElementById(forrestId);
this.trees = [];
document.addEventListener('click', () => {
this.addTree();
});
}
addTree() {
this.trees.push(new Tree(randomizer(this.el.offsetWidth), randomizer(this.el.offsetHeight)));
this.render();
}
render() {
this.el.innerHTML = ''; // clear everything before drawing
const renderedTrees = [];
for (let i = 0; i < this.trees.length; i++) {
renderedTrees.push(this.trees[i].render());
}
this.el.innerHTML = renderedTrees.join('');
}
}
class Tree {
constructor(x, y) {
this.x = x;
this.y = y;
}
render() {
return `
<div class="tree" style="left: ${this.x}; top: ${this.y}">
<div class="trunk"></div>
<div class="leaves"></div>
</div>`;
}
}
new Forrest('forrest');
<!DOCTYPE>
<html>
<head>
<title>Forrest!</title>
<link rel="stylesheet" type="text/css" href="application.css">
</head>
<body>
<div id='forrest'></div>
</body>
<script src="application.js"></script>
</html>
Raw
index.html
<!DOCTYPE>
<html>
<head>
<title>Forrest!</title>
<link rel="stylesheet" type="text/css" href="application.css">
</head>
<body>
<div id='forrest'></div>
</body>
<script src="application.js"></script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment