1
Project Summary
Artify is a responsive image gallery website that utilizes the
Unsplash API for searching, viewing, downloading, and
saving images. Built with HTML5, CSS3, and JavaScript, it
provides an optimal experience on any device and can be
deployed to platforms like Netlify or GitHub Pages.
Artify - Image Gallery Website Documentation
Table of Contents
1. Introduction
o Project Overview
o Key Features
2. Technical Requirements
o Tools and Technologies
o System Requirements
3. Installation and Setup
o Cloning the Repository
o Setting Up Unsplash API
o Hosting Options
4. Website Structure
o File Organization
o Code Structure
5. User Interface and Experience
2
o Homepage Design
o Responsive Features
o Navigation Flow
6. API Integration
o Unsplash API Configuration
o Fetching Data
o Error Handling
7. Features and Functionality
o Image Search
o Download Options
o Saved Images Feature
8. Deployment
o Hosting on Netlify
o Alternative Hosting Methods
9. Maintenance and Troubleshooting
o Common Issues and Fixes
o Updating API Keys
10. Conclusion
1. Introduction
Project Overview
Artify is a responsive image gallery website created with
modern web technologies, including HTML5, CSS3, and
3
JavaScript. It leverages the Unsplash API to provide a
dynamic and engaging experience for users. With features
such as image search, downloads, and saved galleries, Artify
ensures a seamless and user-friendly experience on any
device.
Key Features
• Responsive Design: Optimized for various screen sizes,
ensuring usability on desktops, tablets, and mobile
devices.
• Image Search: Users can search for images by entering
keywords or selecting categories.
• Image Download: Allows users to download high-
quality images directly from the site.
• Saved Galleries: Users can save their favorite images
for later access.
2. Technical Requirements
Tools and Technologies
• HTML5: Structure of the website.
• CSS3: Styling and responsive design.
• JavaScript: Interactivity and API integration.
• Unsplash API: Provides high-quality images.
4
• Netlify: Deployment and hosting.
System Requirements
• A modern web browser (Chrome, Firefox, Edge, etc.)
• [Link] (for development and running scripts)
• Internet connection for API functionality
3. Installation and Setup
Cloning the Repository
1. Clone the repository from GitHub:
git clone [Link]
2. Navigate to the project directory:
cd artify
Setting Up Unsplash API
1. Visit Unsplash Developers.
2. Create a free account and register a new application.
3. Generate an API key and copy the Access Key.
4. Add the key to your JavaScript file:
const ACCESS_KEY = 'your-access-key';
Hosting Options
5
Hosting on Netlify
1. Create a free Netlify account.
2. Use the Netlify CLI to deploy:
netlify deploy
3. Alternatively, upload the project files manually to
Netlify’s dashboard.
Alternative Hosting
You can use GitHub Pages or any static hosting platform.
Simply upload the project files to your hosting service.
4. Website Structure
File Organization
• [Link]: Main HTML file for the homepage.
• [Link]: Styling for the website.
• [Link]: Handles API calls and user interactions.
• assets/: Contains additional resources like icons or
images.
Code Structure
6
• HTML: Structured with semantic tags for better
readability.
• CSS: Uses media queries for responsive design.
• JavaScript: Organized with modular functions for
maintainability.
5. User Interface and Experience
Homepage Design
The homepage displays a random selection of images
fetched from the Unsplash API. Users can scroll through the
gallery and search for specific topics.
Responsive Features
The layout adjusts seamlessly to various screen sizes,
ensuring a consistent experience on mobile, tablet, and
desktop devices.
Navigation Flow
• Search Bar: Allows users to input keywords.
• Gallery: Displays fetched images.
• Save/Download Buttons: Provide options to save or
download images.
7
6. API Integration
Unsplash API Configuration
• Obtain an API key from Unsplash Developers.
• Use the key in API requests to fetch image data.
Fetching Data
The fetch function is used to retrieve image data:
fetch(`[Link]
S_KEY}`)
.then(response => [Link]())
.then(data => {
// Process data
});
Error Handling
• Ensure error messages are displayed if the API fails.
• Use try...catch blocks to handle exceptions.
7. Features and Functionality
Image Search
Users can search for images by entering keywords or
selecting predefined categories.
8
Download Options
Images can be downloaded by clicking the "Download"
button below each image.
Saved Images Feature
A "Save" button lets users store their favorite images in a
local storage-powered gallery.
8. Deployment
Hosting on Netlify
1. Use the Netlify CLI or manual upload method.
2. Ensure that all files are uploaded correctly, and the
website functions as expected.
Alternative Hosting Methods
• GitHub Pages: Upload files to the gh-pages branch.
• Other Platforms: Use services like Vercel or Firebase
Hosting.
9. Maintenance and Troubleshooting
Common Issues and Fixes
9
• API Key Error: Verify the API key in your code.
• Slow Loading: Optimize API calls and reduce image
sizes.
Updating API Keys
If the API key expires, generate a new one and replace the
old key in your project files.
10. Conclusion
Artify is a feature-rich image gallery website that
demonstrates the integration of web technologies with third-
party APIs. Its responsive design and user-friendly interface
make it an excellent project for learning and showcasing
modern web development techniques.
10
11
12
Here's an explanation of the code:
Variables and Elements
1. Access Key:
o accessKey: The API key required to access
Unsplash's API for images.
2. HTML Elements:
o searchForm: The form where users enter keywords
to search images.
o searchBox: The input box where users type their
search queries.
o searchResult: The container where search results
(images) will be displayed.
o showMoreBtn: A button to load more images for
the current search query.
o defaultContent: Points to the search-result
element, used to append random images initially.
3. State Variables:
o keyword: Stores the current search keyword.
o page: Tracks the current page number for the
search query to handle pagination.
Function: showRandomImages
13
• Purpose: Fetch and display 30 random images from the
Unsplash API.
• API Endpoint:
[Link]
ient_id=${accessKey}
• Steps:
1. Makes an API call to fetch 30 random images.
2. Iterates through the returned images (data array).
3. Creates an <img> element for each image using
the URL from [Link].
4. Appends each <img> to defaultContent, displaying
them on the page.
• Error Handling:
o Logs an error to the console if the API call fails.
Function: searchImages
• Purpose: Fetch and display images based on a user's
search query.
• API Endpoint:
[Link]
&query=${keyword}&client_id=${accessKey}&per_page
=30
• Steps:
1. Sets keyword to the value of searchBox.
14
2. Makes an API call to search for images
--------------------CSS Code----------------------
15
16
17
18
19
---------------------HTML Code-------------------------
20