https://github.com/buzzcosm/splash-page-vanilla-js-app

ZTM Cours (javaScript Web Projects) - No. 18: Splash Page (Figma Design)
https://github.com/buzzcosm/splash-page-vanilla-js-app

figma html-css-javascript memory-leak vanilla-js ztm ztm-course-exercises

Last synced: 6 days ago
JSON representation

ZTM Cours (javaScript Web Projects) - No. 18: Splash Page (Figma Design)

• Host: GitHub
• URL: https://github.com/buzzcosm/splash-page-vanilla-js-app
• Owner: buzzcosm
• Created: 2024-10-21T02:55:42.000Z (2 months ago)
• Default Branch: main
• Last Pushed: 2024-10-21T21:08:37.000Z (2 months ago)
• Last Synced: 2024-10-31T04:06:31.994Z (about 2 months ago)
• Topics: figma, html-css-javascript, memory-leak, vanilla-js, ztm, ztm-course-exercises
• Language: CSS
• Homepage: https://buzzcosm.github.io/splash-page-vanilla-js-app/
• Size: 1.65 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Splash Page

Exercise Project of `ZTM` Cours on Udemy ([JavaScript Web Projects: 20 Projects to Build Your Portfolio](https://www.udemy.com/course/javascript-web-projects-to-build-your-portfolio-resume)).

## Description

Programmed in vanilla-js. Working with Figma design.

> Great algorithm for switching the background!

```js

function changeBackground(number) {

  // Check if background is already showing

  let previousBackground;

  if (body.className) {

    previousBackground = body.className;

  }

  // Reset CSS class for body

  body.className = '';

  switch (number) {

    case '1':

      return (previousBackground === 'background-1') ? false : body.classList.add('background-1');

    case '2':

      return (previousBackground === 'background-2') ? false : body.classList.add('background-2');

    case '3':

      return (previousBackground === 'background-3') ? false : body.classList.add('background-3');

    default:

      break;

  }

}

```

## Interesting things

- [Medium (Article) - Memory leaks in JavaScript](https://medium.com/@lelianto.eko/memory-leaks-in-javascript-and-how-to-prevent-them-96a69de65c31)

- [snyk | learn - Memory leaks](https://learn.snyk.io/lesson/memory-leaks/)

## Useful references

- [Figma - Overview for Developer](https://www.figma.com/best-practices/tips-on-developer-handoff/)

- [Heropatterns - Background Generator](https://heropatterns.com/)

- [uiGradients - Background Generator](https://uigradients.com/#Mystic)

- [W3Schools - JavaScript Switch Statement](https://www.w3schools.com/js/js_switch.asp)

- [Mozilla - Conditional (ternary) operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_operator)