started carosel and tabs

assets/css/styles.css

@@ -3,6 +3,10 @@ html{
     scroll-behavior: smooth;
 }
 
+* {
+    box-sizing: border-box;
+  }
+
 body{
  font-family: sans-serif;
  margin: 0;
@@ -88,6 +92,91 @@ section{
     height:400px;
 }
 
+.tab{
+    overflow: hidden;
+    border: 1px solid #ccc;
+    background-color: #f1f1f1;
+}
+
+.tab button{
+    background-color: inherit;
+    float: left;
+    border:none;
+    outline: none;
+    cursor: pointer;
+    padding:14px 16px;
+    transition: 0.3s;
+
+}
+
+.tab button:hover{
+    background-color: #ddd;
+}
+
+.gallery{
+    position: relative;
+    padding:10%
+}
+
+.slide{
+    display: none;
+}
+
+.cursor{
+    cursor: pointer;
+}
+
+.prev,
+.next{
+    cursor: pointer;
+    position: absolute;
+    top: 40%;
+    width: auto;
+    padding: 16px;
+    margin-top: -50px;
+    color: black;
+    font-weight: bold;
+    font-size: 20px;
+    border-radius: 0 3px 3px 0;
+    user-select: none;
+    -webkit-user-select: none;
+}
+
+.next {
+    right: 0;
+    border-radius: 3px 0 0 3px;
+}
+
+.prev{
+    left:0
+}
+
+.prev:hover,
+.next:hover {
+    background-color: rgba(0, 0, 0, 0.8);
+}
+
+.row:after{
+    content: "";
+    display: table;
+    clear: both;
+}
+
+.column{
+    float:left;
+}
+
+.demo {
+    opacity: 0.6;
+}
+
+.active,
+.demo:hover {
+    opacity: 1;
+}
+
+
+
 footer{
     width: 100%;
     background-color: lightgrey;

assets/js/main.js

@@ -1,5 +1,18 @@
-document.addEventListener('DOMContentLoaded', configurePage())
+const Projects = {
+    'dalston':{
+        image_count:19,
+        tab_name:'Project 1',
+        description: 'A wrap around extension and loft conversion in East Didsbury'
+    },
+    'heritage_gardens':{
+        image_count:17,
+        tab_name:'Project 2',
+        description: 'An extension on the back and a full refurbishment of a huge property in the center of Didsbury',
+    }
+}
+let SlideIndex = 1;
 
+document.addEventListener('DOMContentLoaded', configurePage())
 /**
  * Called on content loaded event
  * Sets up the page navigation event handling
@@ -9,6 +22,9 @@ document.addEventListener('DOMContentLoaded', configurePage())
 function configurePage(){
     setUpNavigation()
     setHeadlineOpacityChange()
+    addTabs()
+    buildSlideShow('dalston')
+    showSlide(SlideIndex)
 
 }
 
@@ -17,8 +33,7 @@ function configurePage(){
  * Adds the click event navigateTo(target_value) 
  * This sets up the navbar navigation.
  */
-function setUpNavigation(){
-
+function setUpNavigation(){ 
     var navigation_items = Array.from(document.querySelectorAll('[target]'))
     navigation_items.forEach(item => {
         var target_id = item.attributes.target.nodeValue
@@ -48,16 +63,127 @@ function navigateTo(target_id){
 function getElementCoordinates(element){
     const rect = element.getBoundingClientRect()
     return {
-        y: window.scrollY + rect.top - 100,
+        y: window.scrollY + rect.top,
         x: window.scrollX + rect.left
     }
-
 }
 
 function setHeadlineOpacityChange(){
     document.addEventListener('scroll', () => {
         var overlay = document.getElementById('overlay')
-        console.log(scrollY)
         overlay.style.opacity = Math.max(0, Math.min(scrollY / 350, 0.9))
     })
+}
+
+/**
+ * allows the user to move the slide show left and right
+ * @param {Number} n 
+ */
+function moveSlide(n){
+    showSlide(SlideIndex + n)
+}
+
+/**
+ * Displays the slide at the given index
+ * @param {Number} n - the index of the slide to move to
+ */
+function showSlide(n){
+
+    let slides = document.getElementsByClassName('slide')
+    let thumbnails = document.getElementsByClassName('demo')
+
+    SlideIndex = n
+    if(n > slides.length)SlideIndex = 1
+    if(n < 1)SlideIndex = slides.length
+    for(i=0; i<slides.length; i++){
+        slides[i].style.display = "none"
+        thumbnails[i].className = thumbnails[i].className.replace(" active", "")
+    }
+
+    slides[SlideIndex-1].style.display = "block"
+    thumbnails[SlideIndex-1].className += " active"
+}
+
+/**
+ * given a folder name builds the slides for the images
+ * in that folder and appends them to the gallery
+ * @param {String} folder_name 
+ */
+function buildSlideShow(folder_name){
+    const gallery = document.getElementById('gallery')
+    const prev_button = document.getElementById('prev')
+    const thumbnail_row = document.getElementById('thumbnail_row')
+    const root = 'assets\\images'
+
+    const image_count = Projects[folder_name].image_count
+    for(i=1; i<=image_count; i++){
+        var image_src = `${root}\\${folder_name}\\${folder_name}_${i}.jpg`
+        var slide = buildSlide(image_src)
+        var thumbnail = buildThumbnail(image_src, i, image_count)
+
+        gallery.insertBefore(slide, prev_button)
+        thumbnail_row.appendChild(thumbnail)
+    }
+}
+
+/**
+ * Builds the html representation of a slide in the gallery
+ * @param {String} image_src
+ * @returns {HTMLDivElement} 
+ */
+function buildSlide(image_src){
+    var slide = document.createElement('div')
+    slide.className = 'slide'
+    var img = document.createElement('img')
+    img.src = image_src
+    img.style.width = "100%"
+    slide.appendChild(img)
+    return slide
+}
+
+/**
+ * 
+ * @param {String} image_src 
+ * @param {Number} image_index 
+ * @param {Number} image_count
+ * @returns {HTMLDivElement}
+ */
+function buildThumbnail(image_src, image_index, image_count){
+    var thumbnail = document.createElement('div')
+    thumbnail.className = "column"
+    thumbnail.style.width = `${100/image_count}%`
+    var img = document.createElement('img')
+    img.src = image_src
+    img.className = "demo cursor"
+    img.style.width = "100%"
+    img.addEventListener('click', ()=>{
+        showSlide(image_index)
+    })
+    thumbnail.appendChild(img)
+    return thumbnail
+}
+
+/**
+ * adds the tabs to the our work section 
+ */
+function addTabs(){
+    const tab_container = document.getElementById("tab_container")
+    Object.keys(Projects).forEach(key => {
+        var tab_name = Projects[key].tab_name
+        var tab = buildTab(tab_name, key)
+        tab_container.appendChild(tab)
+
+        var description = Projects[key].description
+        // var tab_content = buildTabContent(description)
+    })
+}
+
+function buildTab(tab_name, project_name){
+    var tab = document.createElement("button")
+    tab.textContent = tab_name
+    tab.className = "tablinks"
+    tab.addEventListener("click", ()=>{
+        changeProject(project_name)
+    })
+    return tab
 }

index.html

@@ -24,7 +24,7 @@
 
         <main>
             <div id="headline" class="headline">
-                <img src="assets\images\heritage_gardens\heritage_16.jpg">
+                <img src="assets\images\heritage\heritage_16.jpg">
                 <div id="overlay" class="overlay">
                     <div>
                         <h1>DGS Development</h1>
@@ -49,20 +49,26 @@ <h1>About Us</h1>
 
             <section id="our_work">
                 <h1>Our Work</h1>
-                <p>This is the main landing page of your website.</p>
+                <p>Find examples of some of our outstanding work below. To view a different project select from the list below.</p>
+                <div id="tab_container" class="tab">
 
-                <div class="placeholder">
-
+                </div>
+
+                <div id="gallery" class="gallery">
+                    <a id="prev" class="prev" onclick="moveSlide(-1)">&#10094;</a>
+                    <a class="next" onclick="moveSlide(1)">&#10095;</a>
+
+                    <div id="thumbnail_row" class="row">
+
+                    </div>
                 </div>
             </section>
 
             <section id="testimonials">
                 <h1>Testimonials</h1>
                 <p>This is the main landing page of your website.</p>
 
-                <div class="placeholder">
-
-                </div>
+
             </section>
 
             <section id="contact_us">