https://github.com/lostsh/jikan

WEB ING1 First project
https://github.com/lostsh/jikan

api css css3 html html5

Last synced: 2 months ago
JSON representation

WEB ING1 First project

• Host: GitHub
• URL: https://github.com/lostsh/jikan
• Owner: lostsh
• Created: 2022-01-27T09:15:56.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2023-02-10T10:51:17.000Z (over 3 years ago)
• Last Synced: 2026-04-12T13:29:55.995Z (3 months ago)
• Topics: api, css, css3, html, html5
• Language: HTML
• Homepage: https://lostsh.github.io/jikan/
• Size: 19.9 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# jikan

| HTML | CSS | JS |

|:----:|:---:|:--:|

| Native 5.0  | 3   | Vanilla 2015 | 

## API

[Medias](https://lostsh.github.io/jikan-media/)

## Annex

Old and first version of the js glitch handler. Now the script loads glitch effect on row hover, the logic is pretty cool you can take a look at it `assets/js/main.js`.

```js

/**

 * This function replace normal pic with glitched

 * on mouse hover

 */

function main(){

    console.log("[+]\tAdding event listener on pictures");

    /**

     * Get all img tags of the table

     */

    var images = document.querySelectorAll("table img");

    /**

     * For each image add an anonymous fct

     * onhover: replace img path with glitched path

     * onout  : replace img path with normal path

     */

    images.forEach( e => e.addEventListener("mouseover", function(e){

        //console.log("current image url : %s", e.target.getAttribute('src'));

        e.target.src = e.target.getAttribute('src').replace("normal", "glitch");

    }));

    images.forEach( e => e.addEventListener("mouseout", function(e){

        //console.log("current image url : %s", e.target.getAttribute('src'));

        e.target.src = e.target.getAttribute('src').replace("glitch", "normal");

    }));

}

```

*a bit of ugly js ...*




### Thanks for reading ~

## ᓚᘏᗢ