I couldn't think of what to make so I made a website dedicated to a documentary I was watching on Cold Fusion. Pretty neat, you can check it out by going to the watch page!

The code has 2 pages:

• index.html
• watch.html

Contains:

• A title
• A navbar
• An image gallery which allows you to cycle through images by clicking on the next button
• A footer

Contains:

• A title text (smaller than the one in index.html so it has separate CSS)
• A video gallery (shows the documentary videos in order via an iframe)
• The same navbar
• The same footer

Has 3 main functions and 1 shared function (shared with watch.js):

• deschange() - A description change function (will change the description for images in the image gallery when you cycle through them)
• gallery() - A gallery function (changes images onClick)
• EasterEgg() - An easter egg function (shows an image after 10 clicks)
• smoothScroll() - A smooth scroll function for the navbar (shared with watch.js)

Has 3 main functions and 1 shared function:

• changeVid() - A change video function which will cycle through the documentary videos
• easterEgg() - An easter egg function which does the same thing as the previous easter egg function but uses createElement to replace the iframe with an image tag
• restoreVideo() - A restore video function which reverts the previous createElement by creating a new iframe and replacing the image tag with it
• smoothScroll() - Shared smooth scroll function

The CSS is a... mess so I'll leave it up to you! (Sorry in advance cause I've been using Tailwind and component libraries for so long)