This is my Stream One project for Code Institute. The website is a fan website for the film trilogy "Back to the Future".
The website allows users to view film information such as the plot, trailers, reviews etc. There is also an interactive timeline that shows what I have deemed the most important dates in the film trilogy. There is also a contact form that users can interact with however there is no backend for this so the form data doesn't get sent anywhere.
The website is built with HTML for the structure, CSS and Bootstrap for the styling, Javascript to validate the contact form and Vis for the timeline.
- Home Page
- Trilogy Page
- Timeline Page with interactive timeline
- Rent/Purchase page
- Contact Form with JavaScript Validation
Nothing left to implement to complete the project.
- HTML5
- This provides the basic layout of the webpage.
- CSS3
- I have used this to style certain elements on the sites pages.
- Bootstrap
- I have used bootstrap to give my website a clean and responsive layout.
- JavaScript
- This has been used to provide form validation on the contact form to ensure that users get a response when they haven't filled in part of the form. This is also used in Vis.js.
- Vis.js
- This library was used for creating the timeline.
- jQuery
- This is used in conjunction with Bootstrap.
- Open home page.
- Naviate to contact page.
- Fill in form but miss out a required field
- Press submit.
- Repeat steps 3 and 4 another two times, changing the missing required field each time.
If successful the user should recieve a modal error message advising them that the they need to fill in the required fields.
- Open home page.
- Navigate to the timeline page.
- Click on each section to see if the buttons expose and expanded box containing the related information i.e. plot, trailers etc.
The user should see the information in the expanded boxes and the trailers.
- Open home page.
- Navigate to Timeline page.
- Use the timeline and check the following:
- Do you have to click the timeline in order to use it?
- Can you scroll side to side?
- Does Zoom in and out work?
- If you click on an event does the event expand to show more information?
- If you click on another event does the previously selected event collapse?
The timeline should pass the requirements above.
- Open home page.
- Navigate to Timeline Page
- Scroll down and check that the month and year in the bottom left hand corner are displayed on the timeline.
On page load user should see the month and year in the bottom left hand corner or the timeline.
When deploying the web site to GitHub Pages I found that the links to my other pages on the site did not work, this was due to the filepaths not being relative. I updated the filepaths and the page links worked.
The following JavaScript files were placed in the <head> of the timeline.html file:
- vis.js
- timeLineData.js
- timeLineOptions.js
When these were placed at the bottom of the <body> I found that the JavaScript did not load correctly on the timeline page.
This is a known issue within Chrome and is awaiting a fix from the Chrome developers, more information can be found here: https://stackoverflow.com/questions/48714879/error-parsing-header-x-xss-protection-google-chrome. The issue should be resolved in Chrome v66 as stated here: https://bugs.chromium.org/p/chromium/issues/detail?id=807304.
I chose to use GitHub pages to host my website. I have carried out the steps below to deploy my website to GitHub pages.
- Firstly I set up a gh-pages branch within my Back_to_the_Future repository.
- I then ran the
git checkout gh-pagescommand to change to that branch and I ensured that there was a base<href>on each page and that all the filepaths for images were correct. - I then merged my master branch into my gh-pages branch by running the command
git merge master. - I then ran
git pushto push my local branch to the gh-pages remote branch. - I then went to https://liam-cafearo.github.io/Back_to_the_Future/index.html to check that it had deployed as planned.
- Philip Walton - used the advice on the website to dsiplay my footer correctly using flexbox.
- Simen Daehlin/Eventyret Simen provided me a lesson on how to write the JavaScript for my API calls, whilst I didn't copy any code Simen did dictate to me some of the code to get me started and to help me understand how this is done, I then expanded on that code so that I could pull in further infomration for the trilogy page.
- The Open Movie Database Provided the API information for the trilogy page.
- Futurepedia Provided the infomration for the timeline.
- There are also various images on the website that I have used for the project however these were taken from Google Image Search, Pexels and unplash.com I have used these under the fair usage policy however if the you feel these should be removed please contact me.
At present any requests to contribute towards the project will be denied as this project must be work that I am solely responsible for.