https://github.com/mattjdean/js-array

ImageVault - JavaScript Array Assessment Project
https://github.com/mattjdean/js-array

alpinejs api array array-methods arrays email-validation fetch-api form-validation javascript regex tailwind tailwindcss

Last synced: 7 days ago
JSON representation

ImageVault - JavaScript Array Assessment Project

• Host: GitHub
• URL: https://github.com/mattjdean/js-array
• Owner: MattJDean
• Created: 2024-10-16T17:39:10.000Z (23 days ago)
• Default Branch: main
• Last Pushed: 2024-10-29T09:00:22.000Z (10 days ago)
• Last Synced: 2024-10-29T09:52:24.725Z (10 days ago)
• Topics: alpinejs, api, array, array-methods, arrays, email-validation, fetch-api, form-validation, javascript, regex, tailwind, tailwindcss
• Language: CSS
• Homepage: https://imgvlt.netlify.app
• Size: 69.3 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
ImageVault


This is my Javascript Array assessment project for the Netmatters Scion Coalition Scheme.




ImageVault is a web application that allows users to assign images from Upsplash to their own 'vault' using their email. The app demonstrates the use of JavaScript arrays, API integration, and modern front-end development techniques.


Features



  


Image Fetching: Users can fetch random images from the Unsplash API

  


Image Assignment: Users can assign fetched images to their email address, creating a personal vault of images.

  


Image Interactions:

    


      
Tag image as favourite.

      
View image in full-screen.

      
View image information gathered from Upsplash.

      
Delete image.

    

  

  


API Integration: Images are fetched dynamically from the Unsplash API

  


Responsive Design: The app uses responsive layouts to ensure a smooth user experience on different screen sizes.



Technologies



  


JavaScript/jQuery: Used to handle UI reactivity and manage application state.

  


Tailwind CSS: For designing a modern and responsive user interface.

  


Unsplash API: For fetching high-quality random images.

  


HTML/CSS: For the basic structure and styling of the app.



How It Works


Image Fetching

The user clicks the Fetch Image. Upon clicking the "Fetch Image" button, the app calls the Upsplash API, retrieves a random image, and displays it on the screen.


Image Assignment

The user enters an email address and assigns the fetched image to that email. All assigned images are stored in arrays, and the app allows the user to manage them (mark as favourite, view in full screen, view image information and delete).


Image Vault

The images are displayed in a grid layout, each with the following interactive options:



  


Favourite: Mark an image as a favourite, which displays a star icon on the image.

  


View Full-Screen: Clicking this button opens the image in a full-screen modal.

  


View Image Information: Clicking this button opens the a modal which displays information about the image gathered from Unplash.

  


Delete: Removes the image from the user's vault.



Image Modals



  


Full-Screen Modal: Users can view images in full-screen mode with a dimmed background. This modal also displays details about the image, such as the photographer's name and a link to their profile.

  


Information Modal: Opens a modal displaying detailed information about the image (description, photographer, profile link).



Methods Used



  


API Integration: Uses fetch to make API calls to Unsplash and Pexels to retrieve random images.

  


Reactivity with Alpine.js: The app is highly dynamic and reactive, thanks to Alpine.js. It manages states such as:

    


      
The currently fetched image.

      
The list of images assigned to each email.

      
Modals for full-screen image viewing and detailed image information.

      
Local storage data for displaying user saved images in their array

    

  

  


Dynamic Image Handling: Images are stored and handled as objects containing URLs, descriptions, photographers, and profile links. The app uses this information to render the images dynamically in the UI.



Code Overview



  


index.html: Contains the structure of the app, using Tailwind CSS utility classes in the markup to style the page and its componenets.

  


app.js: Manages the core logic of the app, including image fetching, state management, and image assignment. The fetchImage() makes an API call to Upsplash, and state management handles image assignment, deletion, and modal toggling.