https://github.com/mtrajk/memory-game

A simple responsive and mobile-friendly browser game made using plain JS and CSS
https://github.com/mtrajk/memory-game

css game html javascript jquery memory-game

Last synced: 1 day ago
JSON representation

A simple responsive and mobile-friendly browser game made using plain JS and CSS

• Host: GitHub
• URL: https://github.com/mtrajk/memory-game
• Owner: MTrajK
• License: mit
• Created: 2014-12-30T02:31:32.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2020-02-27T18:36:09.000Z (over 4 years ago)
• Last Synced: 2023-10-30T00:20:18.108Z (about 1 year ago)
• Topics: css, game, html, javascript, jquery, memory-game
• Language: JavaScript
• Homepage: https://mtrajk.github.io/memory-game/
• Size: 148 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Memory Game

A simple responsive and mobile-friendly browser game made using plain JS and CSS.

**[Try it here](https://mtrajk.github.io/memory-game/)**

![alt text](https://raw.githubusercontent.com/MTrajK/memory-game/master/images/game_screenshot.png "Memory game screenshot")

## Goals

### Old

1. Experimenting with GitHub pages.

2. Experimenting with [jQuery](https://jquery.com/). ([You can see the first solution here](https://github.com/MTrajK/memory-game/tree/master/old_src))

### New

But after several years I opened this project again and I noticed that I'm using less than 10 jQuery methods. And for those methods, I'm using 2 libraries ([jQuery](https://jquery.com/) and [jQuery UI](https://jqueryui.com/)) in total **328 KB** (which is nonsense for this kind of app)...\

Because of that, I changed those jQuery methods with vanilla JS and CSS.

* I replaced the famous jQuery dollar sign `$('selector')` with `document.querySelector('selector')`.

* Instead of jQuery `element.animate()` I'm using CSS animations `transition: all 1.3s ease-in-out;`, and after that whenever the background-color is changed there is an animation.

* For manipulating with CSS classes `element.addClass('class')` `element.removeClass('class')` `element.hasClass('class')` I'm using `element.classList.add('class')` `element.classList.remove('class')` `element.classList.contains('class')`.

* For creating elements `$('
')` I'm using `document.createElement('div')`.

* I replaced `element.show()` and `element.hide()` with `element.style.display = 'block'` and `element.style.display = 'none'`.

* And also I replaced event listeners `element.on('event', function)` with `element.addEventListener('event', function)`.


## License

This project is licensed under the MIT - see the [LICENSE](LICENSE) file for details