diff --git a/README.md b/README.md new file mode 100644 index 0000000000..24e066993c --- /dev/null +++ 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 git@bitbucket.org:codingacademy/git-collaboration-vanilla-js.git +$ git remote set-url +``` +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 new file mode 100644 index 0000000000..3c574b0e0b --- /dev/null +++ b/index.html @@ -0,0 +1,23 @@ + + + + Choose a website + + + +
+

What website are you going to be building?

+
+
+ +
+
+

One Page Wonder - Start Bootstrap Template

+ See it live + See how it should look + See the guide +
+
+
+ + \ No newline at end of file diff --git a/templateManager.js b/templateManager.js new file mode 100644 index 0000000000..5ae1ca7ee1 --- /dev/null +++ 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 new file mode 100644 index 0000000000..0c6b9d5539 --- /dev/null +++ b/website1/assets/css/style.css @@ -0,0 +1,3 @@ +body{ + background: #BDBDBD; +} \ No newline at end of file diff --git a/website1/assets/img/1.jpg b/website1/assets/img/1.jpg new file mode 100644 index 0000000000..8941f33233 Binary files /dev/null and b/website1/assets/img/1.jpg differ diff --git a/website1/assets/img/2.jpg b/website1/assets/img/2.jpg new file mode 100644 index 0000000000..e3bae20e50 Binary files /dev/null and b/website1/assets/img/2.jpg differ diff --git a/website1/assets/img/3.jpg b/website1/assets/img/3.jpg new file mode 100644 index 0000000000..d6f2c34a3c Binary files /dev/null and b/website1/assets/img/3.jpg differ diff --git a/website1/assets/img/bg.jpg b/website1/assets/img/bg.jpg new file mode 100644 index 0000000000..ab7c7f81d4 Binary files /dev/null and b/website1/assets/img/bg.jpg differ diff --git a/website1/assets/img/big-project-image.png b/website1/assets/img/big-project-image.png new file mode 100644 index 0000000000..60a98a00f8 Binary files /dev/null and b/website1/assets/img/big-project-image.png differ diff --git a/website1/assets/img/breathe-code-logo-white.png b/website1/assets/img/breathe-code-logo-white.png new file mode 100644 index 0000000000..10f25d759a Binary files /dev/null and b/website1/assets/img/breathe-code-logo-white.png differ diff --git a/website1/assets/img/breathe-code-logo.png b/website1/assets/img/breathe-code-logo.png new file mode 100644 index 0000000000..fd40bdaa49 Binary files /dev/null and b/website1/assets/img/breathe-code-logo.png differ diff --git a/website1/assets/img/small-project-image.html b/website1/assets/img/small-project-image.html new file mode 100644 index 0000000000..191574d386 --- /dev/null +++ b/website1/assets/img/small-project-image.html @@ -0,0 +1,132 @@ + + + + + + One Page Wonder - Start Bootstrap Template + + + + + + +

 

+ + + +
+ + +
+
+

Portfolio Item + Item Subheading +

+
+
+ + + +
+ +
+ +
+ +
+

Project Description

+

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.

+

Project Details

+
    +
  • Lorem Ipsum
    • +
  • Dolor Sit Amet
    • +
  • Consectetur
    • +
  • Adipiscing Elit
    • +
+
+ +
+ + + +
+ +
+

Related Projects

+
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + +
+ + +
+
+
+

Copyright © Your Website 2014

+
+
+ +
+ +
+ + + diff --git a/website1/assets/js/404.js b/website1/assets/js/404.js new file mode 100644 index 0000000000..3f55cbd22f --- /dev/null +++ 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(); \ No newline at end of file diff --git a/website1/assets/js/fix.js b/website1/assets/js/fix.js new file mode 100644 index 0000000000..289aef3004 --- /dev/null +++ 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 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); \ No newline at end of file diff --git a/website1/designs/guide.jpg b/website1/designs/guide.jpg new file mode 100644 index 0000000000..b6c3a1fe82 Binary files /dev/null and b/website1/designs/guide.jpg differ diff --git a/website1/designs/thumb.jpg b/website1/designs/thumb.jpg new file mode 100644 index 0000000000..f90d20d1d4 Binary files /dev/null and b/website1/designs/thumb.jpg differ diff --git a/website1/index.html b/website1/index.html new file mode 100644 index 0000000000..bcbdc2451e --- /dev/null +++ b/website1/index.html @@ -0,0 +1,60 @@ + + + + + + One Page Wonder - Start Bootstrap Template + + + + + + + + + + + +
+ + +
+ + +
+
+
+
+ +
+
+
+

Copyright © Your Website 2014

+
+
+
+ +
+ + + + + + + + + \ No newline at end of file diff --git a/website1/templates/contact.html b/website1/templates/contact.html new file mode 100644 index 0000000000..528591ab98 --- /dev/null +++ b/website1/templates/contact.html @@ -0,0 +1,2 @@ + +

Hello, I'm contact.html

\ No newline at end of file diff --git a/website1/templates/first_heading.html b/website1/templates/first_heading.html new file mode 100644 index 0000000000..b67bf72e78 --- /dev/null +++ b/website1/templates/first_heading.html @@ -0,0 +1,2 @@ + +

Hello, I'm the first_heading.html

\ No newline at end of file diff --git a/website1/templates/navbar.html b/website1/templates/navbar.html new file mode 100644 index 0000000000..360f7b448d --- /dev/null +++ b/website1/templates/navbar.html @@ -0,0 +1,2 @@ + +

Hello, I'm the navbar.html

\ No newline at end of file diff --git a/website1/templates/portfolio.html b/website1/templates/portfolio.html new file mode 100644 index 0000000000..218c186ffa --- /dev/null +++ b/website1/templates/portfolio.html @@ -0,0 +1,2 @@ + +

Hello, I'm the portfolio.html

\ No newline at end of file diff --git a/website1/templates/services.html b/website1/templates/services.html new file mode 100644 index 0000000000..ed418eb8b6 --- /dev/null +++ b/website1/templates/services.html @@ -0,0 +1,3 @@ + +

Hello, I'm the services.html

+

Hello, I'm the services section and I was loaded using ajax from templates/services.html

\ No newline at end of file diff --git a/website1/templates/tagline.html b/website1/templates/tagline.html new file mode 100644 index 0000000000..91041ec972 --- /dev/null +++ b/website1/templates/tagline.html @@ -0,0 +1,2 @@ + +

Hello, I'm the tagline and I was loaded using ajax from templates/tagline.html

\ No newline at end of file