Thanks to visit codestin.com
Credit goes to www.scribd.com

Scribd
Upload
6 views3 pages

Fullstack Developer Assignment

The assignment is to create a photo album web application for Picera Pvt Ltd using HTML, CSS, PHP, and JavaScript. The application must support real-time image uploads, display images in a specific layout, implement pagination, and ensure responsive design. Deliverables include project files in a ZIP or GitHub repository and a README file with instructions on running the project and uploading images.

Uploaded by

mca2221041
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views3 pages

Fullstack Developer Assignment

The assignment is to create a photo album web application for Picera Pvt Ltd using HTML, CSS, PHP, and JavaScript. The application must support real-time image uploads, display images in a specific layout, implement pagination, and ensure responsive design. Deliverables include project files in a ZIP or GitHub repository and a README file with instructions on running the project and uploading images.

Uploaded by

mca2221041
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Full Stack Developer Assignment:

Company Name: Picera Pvt Ltd

Objective:

Create a photo album web application using HTML, CSS, PHP, and JavaScript. The
application should allow users to upload images in real-time and display them in a layout with
6 images per page—3 on the left side and 3 on the right side. The images can be horizontal
or vertical, and the application should adjust accordingly.

Requirements:

1.​ Project Structure:​

○​ Create the following files:​

■​ index.php​

■​ style.css​

■​ script.js​

■​ Create an images/ directory to store uploaded images.​

2.​ Image Layout:​

○​ Each page should display 6 images:​

■​ 3 images on the left side of the page.​

■​ 3 images on the right side of the page.​

○​ Ensure that the images maintain their original orientation (horizontal or


vertical). For images that are vertically oriented, the layout should automatically
adjust to display them properly.​

3.​ Real-Time Image Upload:​


○​ Allow users to upload images to the album. The uploaded images should
immediately appear in the photo album layout.​

○​ Use PHP to handle file uploads, and ensure that the images are stored in the
images/ directory.​

○​ Display an upload form on the page for users to choose and upload images.​

4.​ Pagination:​

○​ Implement basic pagination to allow navigation through multiple pages of


images.​

○​ Each page should display 6 images (3 left, 3 right).​

○​ Provide Next and Previous buttons to navigate through pages of images.​

5.​ Styling:​

○​ Use CSS for a simple, clean, and responsive layout.​

○​ The layout should adjust based on image orientation (horizontal or vertical).​

○​ Ensure the album displays well on mobile and desktop devices.​

6.​ Image Handling:​

○​ Use PHP to dynamically load images from the images/ directory.​

○​ Ensure only supported image formats (.jpg, .jpeg, .png) are uploaded.​

○​ Validate the image file size and type to prevent uploading unsupported files.​

Deliverables:

●​ A ZIP file or a GitHub repository containing your project files.​

●​ A README file explaining:​

○​ How to run the project locally.​


○​ How to upload images in real-time.​

○​ Any installation steps or dependencies.​

Reference Website:

AlbumDraft Example

You might also like