Skip to content

Commit

Permalink
contact us form added and responsive design updated
Browse files Browse the repository at this point in the history
  • Loading branch information
@cainemerrick98
cainemerrick98 committed May 28, 2024
1 parent 43e8012 commit 5f0d830
Show file tree
Hide file tree
Showing 3 changed files with 161 additions and 32 deletions.
69 changes: 67 additions & 2 deletions assets/css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ nav{
justify-content: center;
align-items: top;
text-align: center;
top:33%;
top:50%;
left:0%;
width:50%;
height:20%;
Expand All @@ -81,6 +81,29 @@ nav{
opacity:0;
}

.overlay button{
font-size: 1.2em;
padding:10px;
background-color: blue;
color: white;
border-radius: 10px;
border: none;
opacity: 1;
cursor: pointer;
}

@media only screen and (max-width: 1400px){
.overlay{
font-size: 0.6em;
}
}

@media only screen and (max-width: 1000px){
.overlay{
font-size: 0.4em;
}
}


section{
display: block;
Expand Down Expand Up @@ -113,9 +136,14 @@ section{
background-color: #ddd;
}

.project-description{
font-size: 2em;
}

.gallery{
position: relative;
padding:10%
padding:10%;
padding-top:5%;
}

.slide{
Expand Down Expand Up @@ -156,6 +184,10 @@ section{
background-color: rgba(0, 0, 0, 0.8);
}

.row{
margin-bottom: 20px;
}

.row:after{
content: "";
display: table;
Expand All @@ -177,6 +209,39 @@ section{



.form-container{
display: flex;
padding: 5%;
justify-content: center;
align-items: center;
margin-right: 25%;
}

form{
border: 1px solid black;
border-radius: 20px;
padding:2%;
}

form textarea{
width: 100%;
height:300px;
resize: none;
}

form textarea:focus{
outline:none;
}

form button{
float: right;
}

form label::after{
content: "*";
color: red;
}

footer{
width: 100%;
background-color: lightgrey;
Expand Down
95 changes: 69 additions & 26 deletions assets/js/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,17 @@ const Projects = {
'dalston':{
image_count:19,
tab_name:'Project 1',
description: 'A wrap around extension and loft conversion in East Didsbury'
description: 'Project description for project 1'
},
'heritage_gardens':{
'heritage':{
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',
description: 'Project description for project 2',
}
}
let SlideIndex = 1;

document.addEventListener('DOMContentLoaded', configurePage())

/**
* Called on content loaded event
* Sets up the page navigation event handling
Expand Down Expand Up @@ -71,7 +71,7 @@ function getElementCoordinates(element){
function setHeadlineOpacityChange(){
document.addEventListener('scroll', () => {
var overlay = document.getElementById('overlay')
overlay.style.opacity = Math.max(0, Math.min(scrollY / 350, 0.9))
overlay.style.opacity = Math.max(0, Math.min(scrollY / 150, 0.9))
})
}

Expand Down Expand Up @@ -110,22 +110,41 @@ function showSlide(n){
* @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)
buildSlideShowImages(folder_name);
updateProjectDescription(folder_name)
}

/**
*
* @param {String} folder_name
*/
function buildSlideShowImages(folder_name) {
const gallery = document.getElementById('gallery');
const prev_button = document.getElementById('prev');
const thumbnail_row = document.getElementById('thumbnail_row');
const root = 'assets\\images';

//TODO - refactor the below into a function
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);
}
}

/**
*
* @param {String} folder_name
*/
function updateProjectDescription(folder_name){
const project_description = Projects[folder_name].description
document.getElementById('project_description').textContent = project_description
}

/**
* Builds the html representation of a slide in the gallery
* @param {String} image_src
Expand Down Expand Up @@ -168,22 +187,46 @@ function buildThumbnail(image_src, image_index, image_count){
*/
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)
Object.keys(Projects).forEach(folder_name => {
var tab_name = Projects[folder_name].tab_name
var tab = buildTab(tab_name, folder_name)
tab_container.appendChild(tab)

var description = Projects[key].description
// var tab_content = buildTabContent(description)
})
}

function buildTab(tab_name, project_name){
/**
*
* @param {String} tab_name
* @param {String} folder_name
* @returns {HTMLButtonElement}
* Creates the project tab button adds the change project event listener to it
* and returns the button
*/
function buildTab(tab_name, folder_name){
var tab = document.createElement("button")
tab.textContent = tab_name
tab.className = "tablinks"
tab.addEventListener("click", ()=>{
changeProject(project_name)
changeProject(folder_name)
})
return tab
}

/**
*
* @param {String} folder_name - the name of folder to change to on the carousel
*/
function changeProject(folder_name){
clearSlides()
clearThumbnails()
buildSlideShow(folder_name)
showSlide(1)
}

function clearSlides(){
Array.from(document.querySelectorAll('.slide')).map(ele => ele.remove())
}

function clearThumbnails(){
Array.from(document.querySelectorAll('.column')).map(ele => ele.remove()) //TODO - why is the class name column
}
29 changes: 25 additions & 4 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,11 @@
<h1>DGS Development</h1>
<h2>Master Residential Builders</h2>
<p>With over 20 years experience building residential extenstions and new builds in South Manchester, DGS Development are the most trusted builders on the market</p>
<p><p>
<div class="row">
<button>Contact Us</button>
<button>Our Work</button>
</div>

</div>
</div>
</div>
Expand All @@ -54,6 +58,10 @@ <h1>Our Work</h1>

</div>

<p id="project_description" class="project-description">

</p>

<div id="gallery" class="gallery">
<a id="prev" class="prev" onclick="moveSlide(-1)">&#10094;</a>
<a class="next" onclick="moveSlide(1)">&#10095;</a>
Expand All @@ -73,10 +81,23 @@ <h1>Testimonials</h1>

<section id="contact_us">
<h1>Contact Us</h1>
<p>This is the main landing page of your website.</p>
<p>If you like what you see and you can't wait to design the home of your dreams then use the form below to contact us now.</p>

<div class="placeholder">

<div class="form-container">
<form id="contact_us_form">
<div class="row">
<label for="first_name">First name</label>
<input id="first_name" type="text" required>
<label for="last_name">Last name</label>
<input id="last_name" type="text" required>
<label for="email">email</label>
<input id="email" type="email" required>
</div>
<div class="row">
<textarea id="message" placeholder="Your message"></textarea>
</div>
<button>Send</button>
</form>
</div>
</section>
</main>
Expand Down

0 comments on commit 5f0d830

Please sign in to comment.