Skip to content

Instantly share code, notes, and snippets.

@TravisL12

TravisL12/application.css

Created March 12, 2018 22:42
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save TravisL12/ad50daaedfd0af18c502df9cc7ccbb3f to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save TravisL12/ad50daaedfd0af18c502df9cc7ccbb3f to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. TravisL12 created this gist Mar 12, 2018.
    33 changes: 33 additions & 0 deletions application.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,33 @@
    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;
    }
    49 changes: 49 additions & 0 deletions application.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,49 @@
    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');
    95 changes: 95 additions & 0 deletions gistfile1.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,95 @@
    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>
    11 changes: 11 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,11 @@
    <!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>