TITLE OF PROJECT REPORT

GamesDeck
A PROJECT REPORT

Submitted by

Divyansh Chandrakar

Class Assessment 3 (CA3)

of

CSE 326
Semester-1

IN

B-tech Computer Science

Lovely Professional University, Punjab

ENROLLMENT NUMBER

Section: K24NZ Roll No.: K24NZ 38 Date: 25 October 2024

 Table of Contents
Chapter Particulars Page No.

Chapter 1. Introduction……………………………………………………………………….3

Chapter 2.

Technologies used………………………………………………………………………………4

Chapter 3.

Work Flow Diagram……………………………………………………………………………5

Chapter 4.

Working of Project………………………………………………………………………………6

Chapter 5.

Snippets of Written Code………………………………………………………………………7-8

Chapter 6.

Webpages Screenshot …………………………………………………………………………...9

 References

W3Schools. "HTML, CSS, JavaScript.

ChatGPT, GeeksforGeeks (GFG), Youtube

Box Icons h ps://boxicons.com/

Codes Sandbox h ps://codesandbox.io/

Touch Slider h ps://swiperjs.com/

Google Fonts

h ps://fonts.google.com/specimen/Poppins?query=poppin

GitHub Repository link…………………………

h ps://github.com/StarA orney223/GamesDeck

Introduction
Introduction to the Game Downloading Website: GamesDeck
GamesDeck is an interactive and user-friendly game downloading website created to provide gamers with
easy access to a curated selection of trending and newly released games. This project incorporates modern
web technologies to deliver a streamlined experience, from an engaging login system to visually
captivating previews of each game. Designed with smooth navigation, responsive elements, and intuitive
interactions, GamesDeck caters to both new visitors and avid gamers looking to explore and download
popular titles.

Key Features and Functionalities

The primary features of GamesDeck revolve around its dynamic and secure JavaScript-driven systems.
Starting with a JavaScript Login System, this feature ensures that only authenticated users have access to
the full content, particularly the download options for each game. The login interface is intuitive, allowing
users to quickly authenticate or sign out as needed, creating a more personalized experience.

Navigation on GamesDeck is powered by a responsive, CSS-animated Navigation Bar. With a clean,

animated transition effect, the navigation bar provides seamless access to various sections, including
Trending Games, New Games, and Action Games, alongside essential links like Contact Us and About.
The navigation is also optimized for mobile devices, allowing users on smaller screens to access menu
items by clicking on a collapsible menu icon.

The website’s Automatic Slideshow further enhances the browsing experience by showcasing featured
games in an engaging, visually appealing format. Using libraries like Swiper.js or custom JavaScript,
GamesDeck presents a smooth, looped slideshow where users can preview a rotating selection of top
games, complete with titles, genres, ratings, and download buttons.

To provide an immersive preview of each game, GamesDeck features a dedicated **Media Section** with
high-quality videos and screenshots. Each game page includes a video preview that users can play, giving
a cinematic introduction to the game’s storyline and gameplay style. Accompanied by detailed screenshots,
users can get a close look at the game’s graphics, character designs, and environments before choosing to
download.

The Download Option is the primary feature for logged-in users, granting them access to full game
downloads. Each game includes a clear, prominent download button, which remains disabled for guests,
ensuring secure, authenticated access to downloadable content. This aspect of the project not only adds a
layer of exclusivity but also enhances security and user management on the site.

Finally, the Footer Section offers quick links to important site pages, social media profiles, and contact
details, enabling users to easily navigate to other parts of the site or follow GamesDeck’s social media
presence.
Conclusion

GamesDeck combines these elements to offer a comprehensive platform for game discovery and
downloading, built with both functionality and user engagement in mind. With the blend of interactive
previews, secure access, and user-friendly design, GamesDeck aims to provide gamers a reliable and
enjoyable way to access their favourite games. This project demonstrates the effective use of JavaScript,
CSS, and HTML to build a cohesive, aesthetically pleasing, and responsive website that can serve as a
strong foundation for further development in web applications.

Technology Used
HTML: Structure and layout of the website.

CSS: Styling and design elements.

JavaScript: To make the buttons and toggles function

Work Flow Diagram
 Working of Project
No problem! Here’s a breakdown of how your project functions, from the login
system to the game download and media elements:

1. JavaScript Login System

- Purpose: Authenticates users to grant them access to download games.
- Functionality:
- The login form collects user credentials (username and password).
- JavaScript checks the credentials, typically using predefined values for a basic
implementation, or it could use `localStorage` for persistent test accounts.
- If login is successful, JavaScript redirects the user to the main content or
unlocks download options, while an unsuccessful attempt triggers an error message.
- The logout function resets user credentials in `localStorage` and redirects back
to the login page.

2. Navigation Bar with Transitions

- Purpose: Provides a smooth, responsive menu to access various sections like
Home, Trending, New Games, and Contact.
- Functionality:
- When a user clicks on the menu icon, a JavaScript function toggles the
visibility of the navigation links.
- CSS transitions create a smooth sliding effect, enhancing the visual experience.
 - The navigation bar is responsive and collapses on mobile screens, opening
only when the menu icon is clicked.

3. Automatic Slideshow for Featured Games

- Purpose: Highlights popular games in a dynamic slideshow format.
- Functionality:
- The slideshow uses JavaScript (or a library like Swiper.js) to automate sliding
between featured game images.
- The slideshow loop continuously through games, and users can pause, go back,
or move forward using controls.
- This section might include game titles, short descriptions, and ratings
displayed with each slide.

4. Game Media (Videos and Screenshots)

- Purpose: Gives users a preview of the games before downloading.
- Functionality:
- Each game section includes a video preview in HTML5 format (e.g., MP4)
embedded using the `<video>` tag with play/pause controls.
- Screenshots are displayed as thumbnail images that can be enlarged with a
JavaScript lightbox effect or modal popup.
- These previews help users explore the game's visual appeal and gameplay
style.

5. Download Option for Games

- Purpose: Allows authenticated users to download games.
- Functionality:
- After successful login, the download buttons for each game become accessible.
 - Each button is linked to either a direct download file or a separate download
page.
- JavaScript checks user authentication status to ensure only logged-in users can
initiate downloads, while non-authenticated users are prompted to log in.

6. Footer with Quick Links and Social Media

- Purpose: Provides additional navigation and contact options.
- Functionality:
- Quick links in the footer direct users to other essential pages like Home, About,
Contact, and Donate.
- Social media icons open external sites in new tabs, allowing users to follow the
project’s online presence.
- Contact details such as email and phone number are clickable, opening default
mail or phone apps.

Each component works together to offer users a seamless, visually engaging way to
browse and download games, all while ensuring that access is secure and content is
interactive. If you need further details on any part, let me know!

Snippets of Written Code

let menu=document.querySelector('.menu-icon');
let navbar=document.querySelector('.menu');
menu.onclick=() => {
navbar.classList.toggle('ac ve');
menu.classList.toggle('move');
bell.classList.remove('ac ve');
}
let bell=document.querySelector('.no fica on');
document.querySelector('#bell-icon').onclick = () =>{
bell.classList.toggle('ac ve');
}
var swiper = new Swiper(".trending-content", {
slidesPerView: 1,
spaceBetween: 10,
pagina on: {
el: ".swiper-pagina on",
clickable: true,
},
autoplay: {
delay:5000,
disableOnInterac on:false,
},
breakpoints: {
640: {
slidesPerView: 2,
spaceBetween: 10,
},
768: {
slidesPerView: 3,
spaceBetween: 15,
},
1068: {
slidesPerView: 4,
spaceBetween: 20,
},
},
});
Webpages Screenshot