Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <title>Aplikacja Dodawanie</title>
- <style>
- body{
- background-color: black;
- color:white;
- }
- .text-center{
- margin:0 auto;
- text-align: center;
- width:100%;
- }
- .btn{
- border:none;
- background-color:gray;
- padding:10px;
- border-radius:25px;
- transition:0.4s;
- outline:none;
- }
- .btn:hover{
- transform:scale(1.1);
- }
- #answer{
- width:10%;
- outline:none;
- }
- </style>
- </head>
- <body>
- <div class="text-center">
- <p id="mathBlock">
- <span id="firstElem"></span>
- <span>+</span>
- <span id="secElem"></span>
- <span>=</span>
- <span><input type="number" autofocus id="answer"/></span>
- </p>
- <button class="btn" onclick="check()">Sprawdz!</button>
- </div>
- <script>
- var x=0;
- var y=0;
- function init()
- {
- document.getElementById("answer").style.backgroundColor="white";
- document.getElementById("answer").value="";
- x=parseInt(document.getElementById("firstElem").innerHTML=Math.floor(Math.random() * 10));
- y=parseInt(document.getElementById("secElem").innerHTML=Math.floor(Math.random() * 10));
- }
- function sleep(ms) {
- return new Promise(resolve => setTimeout(resolve, ms));
- }
- function check()
- {
- var ans=parseInt(document.getElementById("answer").value);
- if(x+y==ans){
- document.getElementById("answer").style.backgroundColor="green";
- sleep(1000).then(()=>{
- init();
- });
- }
- else{
- document.getElementById("answer").style.backgroundColor="red";
- sleep(1000).then(()=>{
- init();
- });
- }
- }
- init();
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement