Memory Game: JQUERY


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
        Remove this if you use the .htaccess -->
        
        <meta http-equiv="pragma" content="no-cache" />
        <title>Memory Test</title>
        <meta name="description" content="" />
        <meta name="author" content="Mayank Johri" />

        <meta name="viewport" content="width=device-width; initial-scale=1.0" />

        <!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
        <link rel="shortcut icon" href="/favicon.ico" />
        <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
        <style>
            #quest{
                width: 24em;
                height:24em;
                margin-left:auto;
                margin-right:auto;
                border: 1px solid #1E90FF;
            }
            .mango{
                height: 4em;
                width: 4em;
                margin: 1em;
                float: left;
                background: url(imgs/mango.svg) ;
                background-size: 4em 4em;                
            }
            .orange{
                height: 4em;
                width: 4em;
                margin: 1em;
                float: left;
                background: url(imgs/Orange_Icon.svg) ;
                background-size: 4em 4em;                
            }
            .grapes{
                height: 4em;
                width: 4em;
                margin: 1em;
                float: left;
                background: url(imgs/grape_red.svg) ;
                background-size: 4em 4em;                
            }
            .freshorange2{
                height: 4em;
                width: 4em;
                margin: 1em;
                float: left;
                background: url(imgs/freshorange2.svg) ;
                background-size: 4em 4em;                
            }
            .Peach{
                height: 4em;
                width: 4em;
                margin: 1em;
                float: left;
                background: url(imgs/Peach.svg) ;
                background-size: 4em 4em;                
            }
            .passion{
                height: 4em;
                width: 4em;
                margin: 1em;
                float: left;
                background: url(imgs/passion.svg) ;
                background-size: 4em 4em;                
            }
            .watermelon{
                height: 4em;
                width: 4em;
                margin: 1em;
                float: left;
                background: url(imgs/watermelon.svg) ;
                background-size: 4em 4em;                
            }
            .apple{
                height: 4em;
                width: 4em;
                margin: 1em;
                float: left;
                background: url(imgs/Red_Apple.svg) ;
                background-size: 4em 4em;                
            }
            .pineapple{
                height: 4em;
                width: 4em;
                margin: 1em;
                float: left;
                background: url(imgs/Pineapple.svg) ;
                background-size: 4em 4em;                
            }
            .box{
                /*background-color: #0000FF;*/                
                height: 4em;
                width: 4em;
            }
            .blank{
                background-color: #FF9933;
                
                height: 4em;
                width: 4em;
            }
        </style>
    </head>

    <body>
        <div style="text-align: center;">
            <header>
                <h1>Memory Game</h1>
            </header>
            <div id="quest">

            </div>
            <div style="clear: both;" style="text-color: blue" >Click Count: <span id="count">0</span> | Items Left: <snap id="left">16</span> </div>
            <footer>
                <p>
                    &copy; Copyright  by Mayank Johri
                </p>
            </footer>
        </div>
        

        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script>
            count = 0;
            Array.prototype.shuffle = function () {
                for (var i = this.length - 1; i > 0; i--) {
                    var j = Math.floor(Math.random() * (i + 1));
                    var tmp = this[i];
                    this[i] = this[j];
                    this[j] = tmp;
                }
            
                return this;
            }
            
            $().ready(function(){
                count = 0;
                objs = new Array("orange", "apple", "grapes", "freshorange2", "Peach","mango", "passion", "watermelon",
                             "orange", "apple", "grapes", "freshorange2", "Peach","mango", "passion", "watermelon")
                objs.shuffle();
                for (var index = 0; index < objs.length; ++index) {
                    $("#quest").append(
                        "<div class='" + objs[index] + "'> \
                        <div class='blank'>    </div>"
                    )
                }
                $("#quest>div").on("click", function(){
                    count++;
                    $("#count").text(count);
                    $(this).find(">div").toggleClass("blank box");
                    if($("#quest>div>.box").length == 2){
                        var other = $("#quest>div>.box").parent().not($(this)).attr("class");
                        if($(this).hasClass(other)){
                            $("#quest>div>.box").parent().css({"visibility":"hidden"});
                            $("#quest>div>.box").toggleClass("blank box");
                        }else{                        
                            $("#quest>div>.box").toggleClass("blank box");                
                        }
                    }else{
                    }
                })                
            })
        
        </script>
    </body>
</html>

Advertisements

Enjoy: Makemytrip sending people to past


Try the following.

  1. Launch makemytrip.com, select origin as “Bangalore” and destination as “Cochin” and search
  2. Check the flight by goair which starts at 23:55 hrs and reaches destination at 00:55 hours. and makemytrip.com predicts that total time taken is -23:00 hrs 🙂