Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <title>Simple Calculator</title>
- <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.js"></script>
- <script src="jquery.paulund_modal_box.js"></script>
- </head>
- <body>
- <div class="equetion">
- <div class="first"></div>
- <div class="sign">+</div>
- <div class="second"></div>
- <div class="result22"></div>
- </div>
- <div class="resultWr">=?</div>
- <div class="resultWr1"></div>
- <div class="result"></div>
- <div class="dialog"></div>
- <script>
- var $num = Math.floor(Math.random() * 20) + 1;
- var $num2 = Math.floor(Math.random() * 20) + 1;
- var $result = $num + $num2;
- var $resultWr = $num + $num2 - 1;
- var $resultWr1 = $num + $num2 + 1;
- $("body").css("background", "#eee")
- // Add containers to the DOM
- $(".first").css({"background": "#eee", "width": "50px", "height": "50px", "font-size": "40px", "text-align": "center", "display": "inline-block"}).text($num);
- $(".second").css({"background": "#eee", "width": "50px", "height": "50px", "font-size": "40px", "text-align": "center", "display": "inline-block"}).text($num2);
- $(".sign").css({"background": "#eee", "width": "50px", "height": "50px", "font-size": "40px", "text-align": "center", "display": "inline-block"}).text("+");
- $(".result22").css({"background": "#eee", "width": "50px", "height": "50px", "font-size": "40px", "text-align": "center", "display": "inline-block"}).text("= ?");
- $(".result").css({"background": "#eee", "width": "50px", "height": "50px", "font-size": "40px", "text-align": "center", "position": "absolute", "left": "200px", "top": "200px", "border": "2px solid green", "border-radius": "50%"}).text($result);
- $(".resultWr").css({"background": "#eee", "width": "50px", "height": "50px", "font-size": "40px", "text-align": "center", "position": "absolute", "left": "100px", "top": "200px", "border": "2px solid green", "border-radius": "50%"}).text($resultWr);
- $(".resultWr1").css({"background": "#eee", "width": "50px", "height": "50px", "font-size": "40px", "text-align": "center", "position": "absolute", "left": "300px", "top": "200px", "border": "2px solid green", "border-radius": "50%"}).text($resultWr1);
- $("div").hover(
- function() {
- $(this).css("background", "#eee");
- },
- function() {
- $(this).css("background", "#eee");
- }
- );
- $("div").css({"background": "#eee", "width": "50px", "height": "50px", "font-size": "40px", "text-align": "center"});
- $(".equetion").css({"width": "400px", "text-align": "center", "position": "absolute", "left": "80px", "top": "60px"});
- $(".result").click(function() {
- $(".result").css("background", "green");
- var $input = $('<span/>').appendTo("body");
- $("span").css({"background": "green", "width": "200px", "text-align": "center", "position": "absolute", "left": "100px", "top": "280px"}).text("CORRECT");
- setTimeout(function() {
- $('body').slideUp('slow', window.location.reload());
- }, 5000);
- });
- $(".resultWr1").click(function() {
- $(".resultWr1").css("background", "red");
- var $input = $('<span/>').appendTo("body");
- $("span").css({"background": "red", "width": "200px", "text-align": "center", "position": "absolute", "left": "100px", "top": "280px"}).text("WRONG");
- });
- $(".resultWr").click(function() {
- $(".resultWr").css("background", "red");
- var $input = $('<span/>').appendTo("body");
- $("span").css({"background": "red", "width": "200px", "text-align": "center", "position": "absolute", "left": "100px", "top": "280px"}).text("WRONG");
- });
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
