Homework Help is Here – Start Your Trial Now!
Engineering
Computer Science
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%; }

EBK JAVA PROGRAMMING
EBK JAVA PROGRAMMING
9th Edition
ISBN:9781337671385
Author:FARRELL
Publisher:FARRELL
Chapter7: Characters, Strings, And The Stringbuilder
Section: Chapter Questions
Problem 3GZ
See similar textbooks
icon
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
steps

Step by step

Solved in 5 steps with 1 images

SEE SOLUTIONCheck out a sample Q&A here
Blurred answer
Knowledge Booster
Image Element
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.
Similar questions
  • SEE MORE QUESTIONS
Recommended textbooks for you
EBK JAVA PROGRAMMING
EBK JAVA PROGRAMMING
Computer Science
ISBN:
9781337671385
Author:
FARRELL
Publisher:
CENGAGE LEARNING - CONSIGNMENT
SEE MORE TEXTBOOKS