Make a timer that has 2 minutes limit, the game starts when you click the timer button. When times up the cards can't be clicked. Make the cards be able to be flipped. Write a function for matching the cards, if htey match keep them with the right side up if don't flip them back. Do this in javascript. html and css codes Back Timer-02:00 Reset Your browser does not support the audio element. body{ background-image: url(startt.png); background-repeat: none; background-size: cover; margin: 0; padding: 0; overflow: hidden; } img{ height: 190px; width: 140px; border-radius: 10px; } .whole{ display: grid; grid-template-columns: repeat(4, 0fr); grid-template-rows: repeat(3, 0fr); padding: 0px; margin-left: 460px; margin-top: 50px; } .images{ padding: 10px; text-align: center; } #back{ color: #191970; font-family: "Franklin M54"; src: url("Franklin M54"); font-size: 20px; margin-left: 10px; } #back a:hover{ background-color: #FFC7D9; display: block; border-radius: 5px; } a{ text-decoration: none; color: #191970; position: absolute; bottom: 10px; font-size: 25px; left: 780px; } #reset { display: inline-block; padding: 10px 20px; font-size: 24px; cursor: pointer; color: #191970; font-family: "Franklin M54"; src: url("Franklin M54"); border: none; border-radius: 10px; box-shadow: 0 9px #999; position: absolute; top: 375px; left: 200px; } #reset:hover {background-color: #ffb6e3} #reset:active { background-color: #e936a7; box-shadow: 0 5px #666; transform: translateY(4px); } #timer { display: inline-block; padding: 10px 20px; font-size: 24px; cursor: pointer; color: #191970; font-family: "Franklin M54"; src: url("Franklin M54"); border: none; border-radius: 10px; box-shadow: 0 9px #999; position: absolute; top: 295px; left: 170px; } #timer:hover {background-color: #ffb6e3} #timer:active { background-color: #e936a7; box-shadow: 0 5px #666; transform: translateY(4px); } div.song { position: absolute; right: 100px; top: 350px; } audio::-webkit-media-controls-play-button, audio::-webkit-media-controls-panel { background-color: #ffe2f3; color: #7bd3f2; opacity: 70%; } #planet{ position: absolute; left: 1%; bottom: 1%; height: 200px; width: auto; opacity: 89%; } #pla{ position: absolute; right: 1%; top: 1%; height: 200px; width: auto; opacity: 89%; }
Make a timer that has 2 minutes limit, the game starts when you click the timer button. When times up the cards can't be clicked. Make the cards be able to be flipped. Write a function for matching the cards, if htey match keep them with the right side up if don't flip them back. Do this in javascript. html and css codes Back Timer-02:00 Reset Your browser does not support the audio element. body{ background-image: url(startt.png); background-repeat: none; background-size: cover; margin: 0; padding: 0; overflow: hidden; } img{ height: 190px; width: 140px; border-radius: 10px; } .whole{ display: grid; grid-template-columns: repeat(4, 0fr); grid-template-rows: repeat(3, 0fr); padding: 0px; margin-left: 460px; margin-top: 50px; } .images{ padding: 10px; text-align: center; } #back{ color: #191970; font-family: "Franklin M54"; src: url("Franklin M54"); font-size: 20px; margin-left: 10px; } #back a:hover{ background-color: #FFC7D9; display: block; border-radius: 5px; } a{ text-decoration: none; color: #191970; position: absolute; bottom: 10px; font-size: 25px; left: 780px; } #reset { display: inline-block; padding: 10px 20px; font-size: 24px; cursor: pointer; color: #191970; font-family: "Franklin M54"; src: url("Franklin M54"); border: none; border-radius: 10px; box-shadow: 0 9px #999; position: absolute; top: 375px; left: 200px; } #reset:hover {background-color: #ffb6e3} #reset:active { background-color: #e936a7; box-shadow: 0 5px #666; transform: translateY(4px); } #timer { display: inline-block; padding: 10px 20px; font-size: 24px; cursor: pointer; color: #191970; font-family: "Franklin M54"; src: url("Franklin M54"); border: none; border-radius: 10px; box-shadow: 0 9px #999; position: absolute; top: 295px; left: 170px; } #timer:hover {background-color: #ffb6e3} #timer:active { background-color: #e936a7; box-shadow: 0 5px #666; transform: translateY(4px); } div.song { position: absolute; right: 100px; top: 350px; } audio::-webkit-media-controls-play-button, audio::-webkit-media-controls-panel { background-color: #ffe2f3; color: #7bd3f2; opacity: 70%; } #planet{ position: absolute; left: 1%; bottom: 1%; height: 200px; width: auto; opacity: 89%; } #pla{ position: absolute; right: 1%; top: 1%; height: 200px; width: auto; opacity: 89%; }
Database System Concepts
7th Edition
ISBN:9780078022159
Author:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Publisher:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Chapter1: Introduction
Section: Chapter Questions
Problem 1PE
Related questions
Question
Make a timer that has 2 minutes limit, the game starts when you click the timer button. When times up the cards can't be clicked. Make the cards be able to be flipped. Write a function for matching the cards, if htey match keep them with the right side up if don't flip them back. Do this in javascript.
html and css codes
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="start.css">
<title></title>
</head>
<body>
<div class="whole">
<div class="images"><img src="1.png"></div>
<div class="images" ><img src="final.jpg"></div>
<div class="images"><img src="2.png"></div>
<div class="images"><img src="final.jpg"></div>
<div class="images"><img src="final.jpg"></div>
<div class="images"><img src="4.png"></div>
<div class="images"><img src="final.jpg"></div>
<div class="images"><img src="3.png"></div>
<div class="images"><img src="5.png"></div>
<div class="images"><img src="final.jpg"></div>
<div class="images"><img src="6.png"></div>
<div class="images"><img src="final.jpg"></div>
<p id="back"><a href="main.html">Back</a></p>
<button id="timer">Timer-02:00</button>
<button id="reset">Reset</button>
<div class = "song">
<audio controls>
<source src="Tyler The Creator - Earfquake.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
<img src="hkk.gif" id="planet">
<img src="planet.gif" id="pla">
</body>
</html>
body{
background-image: url(startt.png);
background-repeat: none;
background-size: cover;
margin: 0;
padding: 0;
overflow: hidden;
}
img{
height: 190px;
width: 140px;
border-radius: 10px;
}
.whole{
display: grid;
grid-template-columns: repeat(4, 0fr);
grid-template-rows: repeat(3, 0fr);
padding: 0px;
margin-left: 460px;
margin-top: 50px;
}
.images{
padding: 10px;
text-align: center;
}
#back{
color: #191970;
font-family: "Franklin M54";
src: url("Franklin M54");
font-size: 20px;
margin-left: 10px;
}
#back a:hover{
background-color: #FFC7D9;
display: block;
border-radius: 5px;
}
a{
text-decoration: none;
color: #191970;
position: absolute;
bottom: 10px;
font-size: 25px;
left: 780px;
}
#reset {
display: inline-block;
padding: 10px 20px;
font-size: 24px;
cursor: pointer;
color: #191970;
font-family: "Franklin M54";
src: url("Franklin M54");
border: none;
border-radius: 10px;
box-shadow: 0 9px #999;
position: absolute;
top: 375px;
left: 200px;
}
#reset:hover {background-color: #ffb6e3}
#reset:active {
background-color: #e936a7;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
#timer {
display: inline-block;
padding: 10px 20px;
font-size: 24px;
cursor: pointer;
color: #191970;
font-family: "Franklin M54";
src: url("Franklin M54");
border: none;
border-radius: 10px;
box-shadow: 0 9px #999;
position: absolute;
top: 295px;
left: 170px;
}
#timer:hover {background-color: #ffb6e3}
#timer:active {
background-color: #e936a7;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
div.song {
position: absolute;
right: 100px;
top: 350px;
}
audio::-webkit-media-controls-play-button,
audio::-webkit-media-controls-panel {
background-color: #ffe2f3;
color: #7bd3f2;
opacity: 70%;
}
#planet{
position: absolute;
left: 1%;
bottom: 1%;
height: 200px;
width: auto;
opacity: 89%;
}
#pla{
position: absolute;
right: 1%;
top: 1%;
height: 200px;
width: auto;
opacity: 89%;
}
Expert Solution
This question has been solved!
Explore an expertly crafted, step-by-step solution for a thorough understanding of key concepts.
Step by step
Solved in 5 steps with 1 images
Knowledge Booster
Learn more about
Need a deep-dive on the concept behind this application? Look no further. Learn more about this topic, computer-science and related others by exploring similar questions and additional content below.Recommended textbooks for you
Database System Concepts
Computer Science
ISBN:
9780078022159
Author:
Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Publisher:
McGraw-Hill Education
Starting Out with Python (4th Edition)
Computer Science
ISBN:
9780134444321
Author:
Tony Gaddis
Publisher:
PEARSON
Digital Fundamentals (11th Edition)
Computer Science
ISBN:
9780132737968
Author:
Thomas L. Floyd
Publisher:
PEARSON
Database System Concepts
Computer Science
ISBN:
9780078022159
Author:
Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan
Publisher:
McGraw-Hill Education
Starting Out with Python (4th Edition)
Computer Science
ISBN:
9780134444321
Author:
Tony Gaddis
Publisher:
PEARSON
Digital Fundamentals (11th Edition)
Computer Science
ISBN:
9780132737968
Author:
Thomas L. Floyd
Publisher:
PEARSON
C How to Program (8th Edition)
Computer Science
ISBN:
9780133976892
Author:
Paul J. Deitel, Harvey Deitel
Publisher:
PEARSON
Database Systems: Design, Implementation, & Manag…
Computer Science
ISBN:
9781337627900
Author:
Carlos Coronel, Steven Morris
Publisher:
Cengage Learning
Programmable Logic Controllers
Computer Science
ISBN:
9780073373843
Author:
Frank D. Petruzella
Publisher:
McGraw-Hill Education