initial commit

mortegac · Feb 15, 2018 · f88ed7b · f88ed7b
commit f88ed7b
Show file tree

Hide file tree

Showing 23 changed files with 414 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,36 @@
+# Git Collabotarive
+
+Use this project to practice your students skills in GIT while developing a porfolio website.
+
+Each working works on a different file, for a different part of the website and the teacher can run the entire website. The PHP code will take care of putting all the pieces together.
+
+## Instructions
+
+1. Create a new repository that you will be using for this exercise.
+2. Clone this repository and change the remote to your own repository
+```sh
+$ git clone [email protected]:codingacademy/git-collaboration-vanilla-js.git
+$ git remote set-url <your new repository>
+```
+3. Run composer install
+```sh
+$ composer install
+```
+3. Push to your new repository to upload the files.
+
+4. Each student will have to clone your new repository and develop one piece of the website, all the parts are divided in the the **templates/** directory.
+
+5. Students push their changes and you pull into your computer.
+
+6. At the end of the index.html you will finde an array describing each piece to be loadad and from what path to loaded it, for example:
+
+```js
+    let pieces = [
+        { elementId: '#navbar', filePath: 'navbar.html'},
+        { elementId: '#tagline', filePath: 'tagline.html'},
+        { elementId: '#first_heading', filePath: 'first_heading.html'},
+        { elementId: '#services', filePath: 'services.html'},
+        { elementId: '#portfolio', filePath: 'portfolio.html'},
+        { elementId: '#contact', filePath: 'contact.html'},
+    ];
+```
diff --git a/index.html b/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Choose a website</title>
+        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+    </head>
+    <body>
+        <div class="container">
+            <h1 class="mb-5">What website are you going to be building?</h1>
+            <div class="row">
+                <div class="col-sm-2 bg-dark text-center">
+                    <a href="./website1/designs/thumb.jpg"><img style="max-height: 100px;" class="img-responsive" src="website1/designs/thumb.jpg"></img></a>
+                </div>
+                <div class="col-sm-10">
+                    <h2>One Page Wonder - Start Bootstrap Template</h2>
+                    <a class="btn btn-primary" href="./website1/">See it live</a>
+                    <a class="btn btn-warning" href="./website1/designs/thumb.jpg">See how it should look</a>
+                    <a class="btn btn-danger" href="./website1/designs/guide.jpg">See the guide</a>
+                </div>
+            </div>
+        </div>
+    </body>
+</html>
diff --git a/templateManager.js b/templateManager.js
@@ -0,0 +1,35 @@
+let TemplateManager = (function(){
+
+    var theObject = {};
+
+    theObject.loadPieces = function(pieces){
+        pieces.forEach((piece)=>{
+            getTemplate(piece.filePath, function(fileContent){
+                document.querySelector(piece.elementId).innerHTML = fileContent; 
+            });
+        });
+    }
+
+    function getTemplate(path, successCallback)
+    {
+        var ajax = new XMLHttpRequest(path);
+        ajax.open("GET", "templates/"+path, true);
+        ajax.addEventListener('load',(response) => {
+            if (ajax.readyState == 4 && ajax.status == 200) {
+                console.log('The following path was successfully loaded: '+path);
+                successCallback(ajax.responseText);
+            }
+            else if(ajax.status != 200)
+            {
+                alert('There was an error loading: '+path);
+            }
+        });
+        ajax.addEventListener('error',() => {
+            alert('There was an error loading: '+path);
+        });
+        ajax.send();
+    }
+
+    return theObject;
+})();
+
diff --git a/website1/assets/css/style.css b/website1/assets/css/style.css
@@ -0,0 +1,3 @@
+body{
+    background: #BDBDBD;
+}
diff --git a/website1/assets/img/1.jpg b/website1/assets/img/1.jpg
diff --git a/website1/assets/img/2.jpg b/website1/assets/img/2.jpg
diff --git a/website1/assets/img/3.jpg b/website1/assets/img/3.jpg
diff --git a/website1/assets/img/bg.jpg b/website1/assets/img/bg.jpg
diff --git a/website1/assets/img/big-project-image.png b/website1/assets/img/big-project-image.png
diff --git a/website1/assets/img/breathe-code-logo-white.png b/website1/assets/img/breathe-code-logo-white.png
diff --git a/website1/assets/img/breathe-code-logo.png b/website1/assets/img/breathe-code-logo.png
diff --git a/website1/assets/img/small-project-image.html b/website1/assets/img/small-project-image.html
@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<html lang="en">
+        <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>One Page Wonder - Start Bootstrap Template</title>
+        <!-- Bootstrap Core CSS -->
+        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+        <!-- Custom CSS -->
+        <link href="assets/css/style.css?v0.1" rel="stylesheet">
+    </head>
+<body>
+    <p>&nbsp;</p>
+    <!-- Navigation -->
+            <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
+            <div class="container-fluid">
+                <!-- Brand and toggle get grouped for better mobile display -->
+                <div class="navbar-header">
+                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
+                        <span class="sr-only">Toggle navigation</span>
+                        <span class="icon-bar"></span>
+                        <span class="icon-bar"></span>
+                        <span class="icon-bar"></span>
+                    </button>
+                    <a class="navbar-brand" href="#">Start Bootstrap</a>
+                </div>
+                <!-- Collect the nav links, forms, and other content for toggling -->
+                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+                    <ul class="nav navbar-nav">
+                        <li>
+                            <a href="#about">About</a>
+                        </li>
+                        <li>
+                            <a href="#services">Services</a>
+                        </li>
+                        <li>
+                            <a href="#portfolio">Portfolio</a>
+                        </li>
+                        <li>
+                            <a href="#contact">Contact</a>
+                        </li>
+                    </ul>
+                </div>
+                <!-- /.navbar-collapse -->
+            </div>
+            <!-- /.container -->
+        </nav>
+    <!-- Page Content -->
+    <div class="container">
+
+        <!-- Portfolio Item Heading -->
+        <div class="row">
+            <div class="col-lg-12">
+                <h1 class="page-header">Portfolio Item
+                    <small>Item Subheading</small>
+                </h1>
+            </div>
+        </div>
+        <!-- /.row -->
+
+        <!-- Portfolio Item Row -->
+        <div class="row">
+
+            <div class="col-md-8">
+                <img class="img-responsive" src="http://placehold.it/750x500" alt="">
+            </div>
+
+            <div class="col-md-4">
+                <h3>Project Description</h3>
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae. Sed dui lorem, adipiscing in adipiscing et, interdum nec metus. Mauris ultricies, justo eu convallis placerat, felis enim.</p>
+                <h3>Project Details</h3>
+                <ul>
+                    <li>Lorem Ipsum</li>
+                    <li>Dolor Sit Amet</li>
+                    <li>Consectetur</li>
+                    <li>Adipiscing Elit</li>
+                </ul>
+            </div>
+
+        </div>
+        <!-- /.row -->
+
+        <!-- Related Projects Row -->
+        <div class="row">
+
+            <div class="col-lg-12">
+                <h3 class="page-header">Related Projects</h3>
+            </div>
+
+            <div class="col-sm-3 col-xs-6">
+                <a href="#">
+                    <img class="img-responsive portfolio-item" src="http://placehold.it/500x300" alt="">
+                </a>
+            </div>
+
+            <div class="col-sm-3 col-xs-6">
+                <a href="#">
+                    <img class="img-responsive portfolio-item" src="http://placehold.it/500x300" alt="">
+                </a>
+            </div>
+
+            <div class="col-sm-3 col-xs-6">
+                <a href="#">
+                    <img class="img-responsive portfolio-item" src="http://placehold.it/500x300" alt="">
+                </a>
+            </div>
+
+            <div class="col-sm-3 col-xs-6">
+                <a href="#">
+                    <img class="img-responsive portfolio-item" src="http://placehold.it/500x300" alt="">
+                </a>
+            </div>
+
+        </div>
+        <!-- /.row -->
+
+        <hr>
+
+        <!-- Footer -->
+        <footer>
+            <div class="row">
+                <div class="col-lg-12">
+                    <p>Copyright &copy; Your Website 2014</p>
+                </div>
+            </div>
+            <!-- /.row -->
+        </footer>
+
+    </div>
+    <script type="text/javascript" src="assets/js/fix.js"></script></body>
+
+</html>
diff --git a/website1/assets/js/404.js b/website1/assets/js/404.js
@@ -0,0 +1,40 @@
+// js source http://codepen.io/moklick/pen/zKleC  
+
+var Application = ( function () {
+        var canvas;
+        var ctx;
+        var imgData;
+        var pix;
+        var WIDTH;
+        var HEIGHT;
+        var flickerInterval;
+
+        var init = function () {
+            canvas = document.getElementById('canvas');
+            ctx = canvas.getContext('2d');
+            canvas.width = WIDTH = 700;
+            canvas.height = HEIGHT = 500;
+            ctx.fillStyle = 'white';
+            ctx.fillRect(0, 0, WIDTH, HEIGHT);
+            ctx.fill();
+            imgData = ctx.getImageData(0, 0, WIDTH, HEIGHT);
+            pix = imgData.data;
+            flickerInterval = setInterval(flickering, 30);
+        };
+
+        var flickering = function () {
+            for (var i = 0; i < pix.length; i += 4) {
+                var color = (Math.random() * 255) + 50;
+                pix[i] = color;
+                pix[i + 1] = color;
+                pix[i + 2] = color;
+            }
+            ctx.putImageData(imgData, 0, 0);
+        };
+
+        return {
+            init: init
+        };
+    }());
+
+    Application.init();
diff --git a/website1/assets/js/fix.js b/website1/assets/js/fix.js
@@ -0,0 +1,72 @@
+// The function actually applying the offset
+function offsetAnchor() {
+  if (location.hash.length !== 0) {
+    window.scrollTo(window.scrollX, window.scrollY - 100);
+  }
+}
+
+// Captures click events of all <a> elements with href starting with #
+var links = document.querySelectorAll('a[href^="#"]');
+for (var i = 0, len = links.length; i < len; i++) {
+	links[i].addEventListener("click",function(event) {
+	  // Click events are captured before hashchanges. Timeout
+	  // causes offsetAnchor to be called after the page jump.
+	  window.setTimeout(function() {
+	    offsetAnchor();
+	  }, 0);
+	});
+}
+
+// Set the offset when entering page with hash present in the url
+window.setTimeout(offsetAnchor, 0);
+
+/*
+NOW WE NEED TO FIX THE NAVBAR TO MAKE IT WORK ON MOBILE WITHOUT JQUERY
+ */
+
+
+// Navbar and dropdowns
+var toggle = document.getElementsByClassName('navbar-toggle')[0],
+    collapse = document.getElementsByClassName('navbar-collapse')[0],
+    dropdowns = document.getElementsByClassName('dropdown');;
+
+// Toggle if navbar menu is open or closed
+function toggleMenu() {
+    collapse.classList.toggle('collapse');
+    collapse.classList.toggle('in');
+}
+
+// Close all dropdown menus
+function closeMenus() {
+    for (var j = 0; j < dropdowns.length; j++) {
+        dropdowns[j].getElementsByClassName('dropdown-toggle')[0].classList.remove('dropdown-open');
+        dropdowns[j].classList.remove('open');
+    }
+}
+
+// Add click handling to dropdowns
+for (var i = 0; i < dropdowns.length; i++) {
+    dropdowns[i].addEventListener('click', function() {
+        if (document.body.clientWidth < 768) {
+            var open = this.classList.contains('open');
+            closeMenus();
+            if (!open) {
+                this.getElementsByClassName('dropdown-toggle')[0].classList.toggle('dropdown-open');
+                this.classList.toggle('open');
+            }
+        }
+    });
+}
+
+// Close dropdowns when screen becomes big enough to switch to open by hover
+function closeMenusOnResize() {
+    if (document.body.clientWidth >= 768) {
+        closeMenus();
+        collapse.classList.add('collapse');
+        collapse.classList.remove('in');
+    }
+}
+
+// Event listeners
+window.addEventListener('resize', closeMenusOnResize, false);
+toggle.addEventListener('click', toggleMenu, false);
diff --git a/website1/designs/guide.jpg b/website1/designs/guide.jpg
diff --git a/website1/designs/thumb.jpg b/website1/designs/thumb.jpg