Skip to content

Commit

Permalink
feat : add pause button
Browse files Browse the repository at this point in the history 
add a fixed pause button on bottom left corner of screen.
  • Loading branch information
@EmberTSeal
EmberTSeal committed Feb 15, 2023
1 parent 3a1ee73 commit c978a8d
Show file tree
Hide file tree
Showing 3 changed files with 129 additions and 97 deletions.
1 change: 1 addition & 0 deletions images/pause-button.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
200 changes: 105 additions & 95 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,101 +1,111 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<!-- FontAwesome -->
<link rel="icon" type="image/x-png" href="images/favicon.png">
<script src="https://kit.fontawesome.com/5587893eae.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Let's Play the Game !!!</title>
</head>
<body>
<div class="screen">
<i id="home-icon" onclick="reset()" class="fa fa-home" aria-hidden="true"></i>
<h2>Play with your Favorite Edible🎮</h2>
<button class="btn" id="start-btn">
Play Game!
<span></span><span></span><span></span><span></span>
</button>
</div>

<div class="screen">
<h1>Choose your favorite Fruit</h1>
<ul class="lists">
<li>
<button class="choose-btn">
<p>Apple</p>
<img src="images/apple.png" alt="Apple">
</button>
</li>
<li>
<button class="choose-btn">
<p>Banana</p>
<img src="images/banana.png" alt="Banana"/>
</button>
</li>
<li>
<button class="choose-btn">
<p>Gauva</p>
<img src="images/guava.png" alt="Gauva"/>
</button>
</li>
<li>
<button class="choose-btn">
<p>Mango</p>
<img src="images/mango.png" alt="Mango"/>
</button>
</li>
<li>
<button class="choose-btn">
<p>Watermelon</p>
<img src="images/watermelon.png" alt="Watermelon"/>
</button>
</li>
</ul>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<!-- FontAwesome -->
<link rel="icon" type="image/x-png" href="images/favicon.png">
<script src="https://kit.fontawesome.com/5587893eae.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Let's Play the Game !!!</title>
</head>

<h1>OR</h1>
<h1>Choose your favorite Vegetable to continue..</h1>
<ul class="lists">
<li>
<button class="choose-btn">
<p>Broccoli</p>
<img src="images/broccoli.png" alt="Broccoli">
</button>
</li>
<li>
<button class="choose-btn">
<p>Cabbage</p>
<img src="images/cabbage.png" alt="Cabbage"/>
</button>
</li>
<li>
<button class="choose-btn">
<p>Carrot</p>
<img src="images/carrot.png" alt="Carrot"/>
</button>
</li>
<li>
<button class="choose-btn">
<p>Cauliflower</p>
<img src="images/cauliflower.png" alt="Cauliflower"/>
</button>
</li>
<li>
<button class="choose-btn">
<p>Tomato</p>
<img src="images/tomato.png" alt="Tomato"/>
</button>
</li>
</ul>
</div>
<body>
<div class="screen">
<i id="home-icon" onclick="reset()" class="fa fa-home" aria-hidden="true"></i>
<img src="images/pause-button.svg" alt="Pause Button" id="pause-button" aria-hidden="true">
<h2>Play with your Favorite Edible🎮</h2>
<button class="btn" id="start-btn">
Play Game!
<span></span><span></span><span></span><span></span>
</button>
</div>

<div class="screen game-container" id="game-container">
<h3 id="time" class="time">Time: 00:00</h3>
<h3 id="score" class="score">Score: 0</h3>
</div>
<div class="screen">
<h1>Choose your favorite Fruit</h1>
<ul class="lists">
<li>
<button class="choose-btn">
<p>Apple</p>
<img src="images/apple.png" alt="Apple">
</button>
</li>
<li>
<button class="choose-btn">
<p>Banana</p>
<img src="images/banana.png" alt="Banana" />
</button>
</li>
<li>
<button class="choose-btn">
<p>Gauva</p>
<img src="images/guava.png" alt="Gauva" />
</button>
</li>
<li>
<button class="choose-btn">
<p>Mango</p>
<img src="images/mango.png" alt="Mango" />
</button>
</li>
<li>
<button class="choose-btn">
<p>Watermelon</p>
<img src="images/watermelon.png" alt="Watermelon" />
</button>
</li>
</ul>

<script src="script.js"></script>
</body>
</html>
<h1>OR</h1>
<h1>Choose your favorite Vegetable to continue..</h1>
<ul class="lists">
<li>
<button class="choose-btn">
<p>Broccoli</p>
<img src="images/broccoli.png" alt="Broccoli">
</button>
</li>
<li>
<button class="choose-btn">
<p>Cabbage</p>
<img src="images/cabbage.png" alt="Cabbage" />
</button>
</li>
<li>
<button class="choose-btn">
<p>Carrot</p>
<img src="images/carrot.png" alt="Carrot" />
</button>
</li>
<li>
<button class="choose-btn">
<p>Cauliflower</p>
<img src="images/cauliflower.png" alt="Cauliflower" />
</button>
</li>
<li>
<button class="choose-btn">
<p>Tomato</p>
<img src="images/tomato.png" alt="Tomato" />
</button>
</li>
</ul>
</div>

<!-- <div id="pause-menu">
<p>Your Score:</p>
<button>Restart</button>
<button>Home</button>
</div> -->

<div class="screen game-container" id="game-container">
<h3 id="time" class="time">Time: 00:00</h3>
<h3 id="score" class="score">Score: 0</h3>
</div>

<script src="script.js"></script>
</body>

</html>
25 changes: 23 additions & 2 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -207,8 +207,29 @@ h1{
right: 1%;
cursor: pointer;
}
#home-icon:hover {
#home-icon:hover, #pause-button:hover {
background-color: rgb(249, 139, 157);
color: var(--primary);
transition: all 0.2s ease;
}
}

#pause-button{
width:40px;
height: 40px;
position: fixed;
z-index: 9;
bottom:2%;
left: 1%;
}

/* #pause-menu{
background-color: white;
margin:auto;
margin-top:40vh;
display:flex;
width: 20vw;
height: 20vh;
justify-content: center;
align-items: center;
display:none;
} */

0 comments on commit c978a8d

Please sign in to comment.