https://github.com/luzefiru/recognition

A memory card game built with React & Unsplash API.
https://github.com/luzefiru/recognition

Last synced: 5 days ago
JSON representation

A memory card game built with React & Unsplash API.

• Host: GitHub
• URL: https://github.com/luzefiru/recognition
• Owner: Luzefiru
• Created: 2023-03-27T09:26:17.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-03-28T03:32:38.000Z (over 1 year ago)
• Last Synced: 2024-04-12T06:19:19.185Z (7 months ago)
• Language: JavaScript
• Homepage: https://luzefiru.github.io/ReCognition/
• Size: 1.81 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# ReCognition

A memory card game built with React utilizing Functional Component Hooks & Unsplash API.

# Reflection

Working with Unsplash's API proved to be quite difficult for development as it only permits 50 requests per hour. However, their images are top-notch and add a lot of spice to my project.

In the future, I hope to learn back-end development so that I can hide my `.env` variables for my API keys.

I also learned about how different browser vendors offer different CSS properties. `-webkit-` is used by Chromium & Safari, but I still need to research whether my styles apply in Mozilla Firefox's [Gecko](https://developer.mozilla.org/en-US/docs/Glossary/Gecko) engine.

# Favorite Code Snippet

This was the cleanest text gradient I have created thus far:

```CSS

.header__title__accent {

  background-image: linear-gradient(

    245deg,

    hsl(240deg 100% 64%) 0%,

    hsl(340deg 100% 57%) 64%,

    hsl(55deg 100% 50%) 100%

  );

  background-clip: text;

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

}

```

# Output

### [Visit the Website Here](https://luzefiru.github.io/ReCognition/)



# Reference

These were the requirements in The Odin Project's [Project: Memory Card](https://www.theodinproject.com/lessons/node-path-javascript-memory-card) site in order to serve guidelines for application functionality. Aesthetic & design choices relied solely on the developer.