eldevyas / QLF-

E-Commerce Website - PNL Custom Beats by Dre

QLF-

E-Commerce Website - PNL Custom Beats by Dre

This website is not under any license and it can be used as any kind of templates. Enjoy it!

While developing this website I passed through 3 phases:

1. Creating the design elements such as:

   • Photoshop Headphones Mockups(PNL Customs).
   • Logo and Design illustrations(Adobe Illustrator 2021)
   • UI/UX Design (Adobe Xd)

2. UI Design to HTML/CSS:

   • That was maybe the easiest part for me of the project, CSS translation is very short compared with the JavaScript one.

3. JavaScript Development:

   • I already had a goal to make this website just to learn JavaScript basics, but I ended up with having notions about JQuery, AJAX, and JSON files also.
   • It was hard to make connections with server side using only JS, so I cancelled some input forms for later PHP projects.
   • The MusicPlayer was the longest part of the JS code, for almost 85%. As it contains playlist extraction from a JSON file.
   • I had made an additional Python file (Not Back-end) for importing songs directly from Youtube into the Data Base, I thought about adding a Spotify API file but I cancelled it.

4. Website Testing:

   • This one was the last part, I was looking for bugs and trying different manners of interactions to check if there's any bugs, I found few ones mostly on the MusicPlayer, then I made some responsiveness modifications on CSS.

The main features of this template:

1. Integrated MusicPlayer:

   • Play/Pause.
   • Previous/Next.
   • Shuffle/Repeat Switch.
   • Song details display.
   • Timing bar (Drag or Click to set song current time).
   • Volume Bar(Drag, Click & Scroll over to change volume) with volume button to mute or unmute.
   • Music Playlist(toggle), Contains information about songs such as "Index, Title, Artist, Album Picture and Duration", It can be clicked to play a song, with animated equalizer icon on the playing one.
   • The floating headphones image starts making music notes when the music begins, and disappears when it stops.
   • Stop/Play with Space bar, and previous or next with arrows.

2. Drop Down Search section, with the possibility to save the search history.

3. Drop Down Menu, The hovered item takes the biggest space, while the other items of the menu fit with the left space.

4. Slider of 2 Products, it can be moved by Double click or by clicking on the controllers.

5. Images sliding on scroll.

6. Pop up "Go to top" Button when the user goes 200 view height down (Can be customized).

7. Live display of PNL quotes (Text and sound "on click of play button").

8. Zoom on images is displayed as a full screen overlay. You can click on the close button or outside the container to exit.

9. Display a "Thank you" overlay when submitting the feedback form.

10. Animated Website Title, when a song plays it displays the title, and when the window is on blur, the title starts to switch between the song title and the main website title.

So that's maybe pretty much all the features included on this website. I hope it can help you with any kind of code. Thank you for checking my project.

Have a great day!

                                                                            -- Yassine Chettouch