School group project, JavaScript validation
This is a live project which can be visited here
This was a school project which involved creating a website for a fake local business. I chose the idea for a tech support company similar to Geek Squad. My group of two other students was a situation where I ended up doing most of the work. These situations end up happening because most students wait until the last few days to begin a project. I was not about to risk the project on everything coming together in a few days. So, I began early and kept pushing. I believe I ended up writing about 90% of this website. More learning for me. I did get some good assistance with the comments, which was a requirement for this project. The professor wanted every method to have comments which includes the parameter, process and return value.
JS for changing an image modal
/*
* Name: nextImage()
* Parameters: None.
* Processes: This function is to change the image to the next one (to the right).
* Return Value: None.
*/
function nextImage() {
changed = false; // sets the boolean false and is used to know when to break from the for loop.
for (var i = 0; i < ImgArray.length; i++) {
if (changed) { //if the photo has already been changed to the next image, break out of the loop.
break;
}
if (ImgArray[i].src == elem.src) { // if the position from the loop in the array of images is found to be the same as the current modal image
if (i === (ImgArray.length - 1)) { // if the image is at the end of the image array
elem.src = ImgArray[0].src; // set the image to the first image in the array
changed = true; //set to break the for loop
break;
}
elem.src = ImgArray[i + 1].src; //move to the next image by increasing to the next element in the array
changed = true; //set to break the for loop
break;
}
}
}
There is actually a decent level of complexity involved in some of these pages. After developing my photography website and taking a couple classes I was confident in this project. I had been working in Java for several projects and JavaScript was no longer a scary monster I avoided. I was becoming comfortable with the languages involved in web design. Some of the JS files actually ended up being very involved. The home.js file is over 500 lines and the store.js file is over 400 lines.
This tech support company takes reservations, calls and house appointments. This can mean services involving setting up technology in people's homes. So, this is a perfect opportunity to offer a form where the client enters their information. Where there are forms there is form validation. This is the main function of the JS on this website.
I developed the form for reserving an appointment to come into the mock store. There is a check for each field which will report back an error message under the field if not filled out properly. The form has a radio (select one option), dropdown and different input fields. There is also a input called Date which when clicked on opens an excellent calendar which still looks great. This calendar greys out past dates and shows the current month. There is also the option to click through to show the other months. This is done by creating a modal which can be closed with the click of an X in the corner. In the code the calendar is created by making a table and generating dates based a couple conditions and loops. The form pages are robust and I would recommend visiting them to try the form validation yourself.
Appointment Service
Another service offered is a live chat service to assist with tech support issues. This is all fake presentation which shows a messaging box similar to a phone screen.
Chat Service
There is also a gallery section to view the building and some of the services offered. This shows a modal and a way to swap which photo is showing by clicking on the forward or back button.
Gallery
Another interesting page is the About page. Normally these are the most basic pages along with the contact page. However, I was able to build a page which makes extensive use of CSS to achieve an aesthetic timeline. Boxes of events with a year along a vertical line make the visual trail of the history of the company. The names of my group members and me are written into the story of the mock tech support company. Careful reading through, it's quite the tear jerker. Nothing was ever the same after that incident, trigger warning fire edition.
About page
