My OpenClassrooms Front-End Dev Journey — Project 3: Film festival website

This project was more familiar to me because I had worked on multiple Bootstrap websites previously

This project was about creating a simple Bootstrap only prototype website for a film festival. I enjoyed working on it and created quite a few components that I will be showing today.

Colour-changing navigation bar

On the initial page load, the top navigation bar is transparent, as the full-page image header is has a dark background.

On page load

It then transforms into a solid green after scrolling down past the full-page image.

After scrolling past the image

The following JavaScript and CSS code has been used to implement the feature

custom.js

The above code checks the scroll value from the top of the page and accordingly adds or removes the colour and shadow of the navigation bar

.navbar {
background-color: transparent;
border: none;
color: white;
z-index: 100;
transition: background-color 1s ease 0s
}
/* Solid class attached on scroll past first section */.navbar.solid {
background-color: #447356;
}
Navigation bar colour change

Full-page image header

All pages start with a full-page image header with a simple description of the page.

Full-page image header

The following HTML and CSS code has been used to implement the feature

.masthead {
height: 100vh;
min-height: 500px;
background-image: url('../images/home/home-cover.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.masthead-descrip {
background-color: white;
border-radius: 20px;
padding: 10px;
padding-top: 20px;
}

The above styles ensure that the image is not repeated, aligned to the centre and is not deformed or stretched.

Countdown timer

A countdown was used to display the number of days, hours, minutes and seconds till the event has begun. The following JavaScript code was written to calculate the time difference and display the difference in a readable manner

countdown.js
Countdown timer

Trailer modal

As this was a film festival website, I needed to display information about the lineup of shows.

The user will first see the poster of a movie.

Movie posters

When that image is clicked, it will open a modal with the trailer of the movie picked.

Modal with embedded trailer

To implement this I have used the following HTML and JavaScript code.

The above code,

  1. Gets the click target that shows the modal.
  2. Extracts the movie name and trailer link from the data attributes.
  3. Adds the extracted values to the relevant areas in the modal.
  4. Clears the embed link on modal close.
Trailer modal

To recap I created,

  1. A colour-changing navigation bar that becomes a solid colour as you scroll down.
  2. A full-page image header with a description of the page overlayed above it.
  3. A simple countdown timer, that displays the time left for the event to begin.
  4. A modal that changes the trailer it displays according to the poster that was clicked.

Thanks for the read, and I hope you get to use it sometime!

Find the complete code repo, here.

Find a list of all similar posts, here.

Front End Developer at Switchd Ltd. | MSc in Computer Science @ QMUL (2022)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store