Add awesome pure js code

.bumpversion.cfg

@@ -0,0 +1,8 @@
+[bumpversion]
+current_version = 0.0.0
+commit = True
+tag = True
+
+[bumpversion:file:README.md]
+search = version-{current_version}-orange.svg
+replace = version-{new_version}-orange.svg

CODE_OF_CONDUCT.md

@@ -0,0 +1,76 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as
+contributors and maintainers pledge to making participation in our project and
+our community a harassment-free experience for everyone, regardless of age, body
+size, disability, ethnicity, sex characteristics, gender identity and expression,
+level of experience, education, socio-economic status, nationality, personal
+appearance, race, religion, or sexual identity and orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment
+include:
+
+* Using welcoming and inclusive language
+* Being respectful of differing viewpoints and experiences
+* Gracefully accepting constructive criticism
+* Focusing on what is best for the community
+* Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery and unwelcome sexual attention or
+ advances
+* Trolling, insulting/derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or electronic
+ address, without explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+ professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable
+behavior and are expected to take appropriate and fair corrective action in
+response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or
+reject comments, commits, code, wiki edits, issues, and other contributions
+that are not aligned to this Code of Conduct, or to ban temporarily or
+permanently any contributor for other behaviors that they deem inappropriate,
+threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies both within project spaces and in public spaces
+when an individual is representing the project or its community. Examples of
+representing a project or community include using an official project e-mail
+address, posting via an official social media account, or acting as an appointed
+representative at an online or offline event. Representation of a project may be
+further defined and clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported by contacting the project team at [email protected]. All
+complaints will be reviewed and investigated and will result in a response that
+is deemed necessary and appropriate to the circumstances. The project team is
+obligated to maintain confidentiality with regard to the reporter of an incident.
+Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good
+faith may face temporary or permanent repercussions as determined by other
+members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
+available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
+
+[homepage]: https://www.contributor-covenant.org
+
+For answers to common questions about this code of conduct, see
+https://www.contributor-covenant.org/faq

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2017 Uğur "vigo" Özyılmazel
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,46 @@
+![JavaScript](https://img.shields.io/badge/javascript-vanilla-yellow.svg)
+![Version](https://img.shields.io/badge/version-0.0.0-orange.svg)
+![Tailwind](https://img.shields.io/badge/tailwind_CSS-2.0.0-blue.svg)
+
+
+# Learning Stimulus - Example 02
+
+Basic filtering against collection of **Commodore 64** games. This is also what I’ve
+learned/improved from [egghead.io][link-egghead] today. Thanks to Mert’s awesome
+[Tailblocks][link-tailblocks]
+
+---
+
+## What’s New ?
+
+**November 29, 2020, Corona Days**
+
+- Create project
+
+---
+
+## Contributer(s)
+
+* [Uğur "vigo" Özyılmazel](https://github.com/vigo) - Creator, maintainer
+
+---
+
+## Contribute
+
+All PR’s are welcome!
+
+1. `fork` (https://github.com/vigo/learning-stimulus-02/fork)
+1. Create your `branch` (`git checkout -b my-feature`)
+1. `commit` yours (`git commit -am 'Add XXX feature'`)
+1. `push` your `branch` (`git push origin my-feature`)
+1. Than create a new **Pull Request**!
+
+---
+
+## License
+
+This project/example code is licensed under MIT
+
+
+[link-egghead]: https://egghead.io/playlists/filter-a-collection-using-stimulus-a7d1
+[link-tailblocks]: https://mertjf.github.io/tailblocks/

Rakefile

@@ -0,0 +1,14 @@
+task :check_repo do
+  current_branch = `git rev-parse --abbrev-ref HEAD`.strip
+  any_changes = `git status -s | wc -l`.strip.to_i
+  abort "Repo is not clean, commit your changes first..." unless any_changes == 0
+end
+
+AVAILABLE_REVISIONS = ["major", "minor", "patch"]
+
+desc "Bump version, default: patch"
+task :bump, [:revision] => [:check_repo] do |_, args|
+  args.with_defaults(revision: "patch")
+  abort "Please provide valid revision: #{AVAILABLE_REVISIONS.join(',')}" unless AVAILABLE_REVISIONS.include?(args.revision)
+  system "bumpversion #{args.revision}"
+end

index.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Commodore Games</title>
+    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
+
+    <script src="https://unpkg.com/stimulus/dist/stimulus.umd.js"></script>
+    <script src="js/app.js"></script>
+    <script src="js/controllers/games_controller.js"></script>
+</head>
+<body>
+
+<section class="text-gray-700 body-font" data-controller="games" data-games-filtered-count="0">
+    <div class="container px-5 py-24 mx-auto">
+        <div class="flex flex-col text-center w-full mb-12">
+            <h1 class="sm:text-3xl text-2xl font-medium title-font mb-4 text-gray-900">Commodore Games</h1>
+            <form>
+                <input 
+                    placeholder="Search game..." 
+                    type="text" id="name" name="name" class="w-2/4 bg-gray-100 rounded border border-gray-300 focus:border-indigo-500 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
+                    data-target="games.nameFilter"
+                    data-action="input->games#filterCollection"
+                >
+            </form>
+            <span class="mt-2 hidden" data-target="games.foundNothing">Nothing found</span>
+        </div>
+
+        <div class="flex flex-wrap -m-4" data-target="games.collection"></div>
+    </div>
+</section>
+
+</body>
+</html>

js/app.js

@@ -0,0 +1,18 @@
+// app.js
+const application = Stimulus.Application.start();
+
+const gamesList = [
+    {name: "Impossible Mission", category: "COMMODORE 64", year: "1984"},
+    {name: "California Games", category: "COMMODORE 64", year: "1987"},
+    {name: "One Man and His Droid", category: "COMMODORE 16", year: "1985"},
+    {name: "Tom Thumb", category: "COMMODORE 16", year: "1986"},
+    {name: "Pets Rescue", category: "COMMODORE PLUS 4", year: "2018"},
+    {name: "Shadow of the Beast", category: "AMIGA 500", year: "1989"},
+    {name: "Alien Breed 3D", category: "AMIGA 1200", year: "1995"},
+    {name: "Alpharay", category: "COMMODORE PLUS 4", year: "2019"},
+];
+
+
+(() => {
+    console.log("ready...");
+})();

js/controllers/games_controller.js

@@ -0,0 +1,87 @@
+// games_controller.js
+
+const GAME_UI_ELEMENT = `
+<div class="lg:w-1/4 md:w-1/2 p-4 w-full" data-target="games.game">
+    <a class="block relative h-48 rounded overflow-hidden">
+        <img alt="" class="object-cover object-center w-full h-full block" src="" data-target="games.cover">
+    </a>
+    <div class="mt-4">
+        <h3 class="text-gray-500 text-xs tracking-widest title-font mb-1" data-target="games.category"></h3>
+        <h2 class="text-gray-900 title-font text-lg font-medium" data-target="games.name"></h2>
+        <p class="mt-1" data-target="games.year"></p>
+    </div>
+</div>
+`;
+
+(() => {
+    const SANITIZED_INPUT_MAP = {
+      default: (input) => input.toLowerCase()
+    };
+
+    application.register("games", class extends Stimulus.Controller {
+        static get targets() {
+            return [ "collection", "nameFilter", "foundNothing", "game", "category", "name", "year", "cover" ];
+        }
+
+        initialize(){
+            console.log("initialize...");
+
+            gamesList.forEach((game, index) => {
+                this.collectionTarget.innerHTML += GAME_UI_ELEMENT;
+
+                this.nameTargets[index].textContent = game.name;
+                this.categoryTargets[index].textContent = game.category;
+                this.yearTargets[index].textContent = game.year;
+                let coverHeight = 260 + index;
+                this.coverTargets[index].src = `https://dummyimage.com/420x${coverHeight}`;
+                this.coverTargets[index].alt = `Cover of ${game.name} / ${game.category}`;
+            });
+            this.filteredCount = gamesList.length;
+            this.showHideNotFoundMessage();
+        }
+
+        connect(){
+            console.log("connected to dom...");
+            console.log("filteredCount", this.filteredCount);
+        }
+
+        showHideNotFoundMessage(){
+            console.log("alo", this.filteredCount);
+            let hasHiddenClass = this.foundNothingTarget.classList.contains("hidden");
+            console.log("hasHiddenClass", hasHiddenClass);
+
+            if(this.filteredCount == 0 && hasHiddenClass){
+                this.foundNothingTarget.classList.remove("hidden");
+            }
+            if(this.filteredCount > 0 && !hasHiddenClass){
+                this.foundNothingTarget.classList.add("hidden");
+            }
+        }
+
+        filterCollection(event){
+            const USER_INPUT = event.target.value;
+            const SANITIZED_INPUT = (SANITIZED_INPUT_MAP[event.target.name] || SANITIZED_INPUT_MAP['default'])(USER_INPUT);
+
+            this.filteredCount = 0;
+            this.gameTargets.forEach(element => {
+                let forceValue = !element.textContent.toLowerCase().includes(SANITIZED_INPUT);
+                if(!forceValue){
+                    this.filteredCount++;
+                }
+                element.classList.toggle("hidden", forceValue);
+            });
+            this.showHideNotFoundMessage();
+        }
+
+        // getter
+        get filteredCount(){
+            return this.data.get("filteredCount")
+        }
+
+        // setter
+        set filteredCount(value){
+            this.data.set("filteredCount", value)
+        }
+
+    });
+})()