Skip to content

Commit 705bef3

Browse files
ayeeerubenayeeeruben
committed
finished game
1 parent a5b7393 commit 705bef3

11 files changed

Lines changed: 434 additions & 25 deletions

File tree

‎.DS_Store‎

0 Bytes
Binary file not shown.

‎lab2/game.js‎

Lines changed: 102 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,118 @@
11
let correct = Math.floor(Math.random() * 99 + 1);
22
let guessInput = document.querySelector("#guessInput");
33
let guessBtn = document.querySelector("#guessBtn");
4-
let prompt = document.querySelector("#prompt")
5-
let reset = document.querySelector("#reset")
4+
let prompt = document.querySelector("#prompt");
5+
let prompt2 = document.querySelector("#prompt2");
6+
let reset = document.querySelector("#reset");
7+
let guesses = document.querySelector("#guesses");
8+
let totalWins = document.querySelector("#wins");
9+
let totalLoses = document.querySelector("#loses");
10+
let wins = 0;
11+
let loses = 0;
12+
let correctNum = document.querySelector("#correctNum");
613

714

8-
function turnGreen(){
9-
guessInput.style.backgroundColor = "lightgreen";
15+
// guesses.style.whiteSpace = "pre-line";
16+
17+
let attempts = 0;
18+
19+
initializeGame();
20+
21+
function initializeGame() {
22+
console.log("randomNumber: " + correct);
23+
totalWins.textContent = "WINS: " + wins;
24+
totalLoses.textContent = "LOSES: " + loses;
25+
26+
//hiding the Reset button
27+
reset.style.display = "none";
28+
29+
//adding focus to textbox
30+
guessInput.focus();
1031
}
1132

1233
function correctGuess(){
13-
if(+guessInput.value > correct){
14-
document.querySelector("#prompt").textContent = "You guessed higher";
34+
const guess = Number(guessInput.value);
35+
if (!Number.isFinite(guess)) {
36+
prompt.textContent = "Please enter a number!";
37+
prompt.style.color = "red";
38+
return;
39+
}
40+
41+
if(guess < 1 || guess> 99){
42+
prompt.textContent="Guess is out of range!";
43+
prompt.style.color = "red";
44+
return;
45+
}
46+
47+
attempts++;
48+
guesses.textContent += guess + " ";
49+
prompt2.textContent = "Attempts: " + attempts;
50+
51+
52+
if(guess === correct){
53+
prompt.textContent = "You got it whithin 7 guesses!";
54+
prompt.style.color = "darkgreen";
55+
guessInput.style.backgroundColor = "lightgreen";
56+
wins++;
57+
gameOver();
58+
return;
59+
}
60+
61+
if(attempts >= 7){
62+
prompt.textContent = "You lost! You ran out of guesses!";
63+
prompt.style.color = "red";
64+
prompt2.textContent = "Attempts: " + attempts;
65+
reset.style.display = "block";
66+
correctNum.textContent = "Correct Number: " + correct;
67+
loses++;
68+
gameOver();
69+
return;
70+
1571
}
16-
else if(+guessInput.value < correct){
17-
document.querySelector("#prompt").textContent = "You guessed lower";
1872

73+
if(guess > correct){
74+
prompt.textContent = "You guessed higher";
75+
prompt.style.color = "black";
1976
}
20-
else{
21-
document.querySelector("#prompt").textContent = "You got it!";
77+
else if(guess < correct){
78+
prompt.textContent = "You guessed lower";
79+
prompt.style.color = "black";
2280
}
2381
}
2482

2583

26-
guessBtn.addEventListener("click",correctGuess);
27-
reset.addEventListener("click", function(){
84+
function gameOver(){
85+
totalWins.textContent = "WINS: " + wins;
86+
totalLoses.textContent = "LOSES: " + loses;
87+
guessBtn.disabled = true;
88+
guessInput.disabled = true;
89+
reset.style.display = "inline-block";
90+
}
91+
92+
function resetGame(){
2893
correct = Math.floor(Math.random() * 99) + 1;
29-
guessInput.value = '';
30-
prompt.textContent = '';
31-
guessInput.focus()});
94+
guessInput.disabled = false;
95+
guessBtn.disabled = false;
96+
guessInput.style.backgroundColor = "";
97+
guessInput.value = "";
98+
prompt.textContent = "Guess a number from 1 to 99 in 7 attempts!";
99+
prompt.style.color = "black";
100+
prompt2.textContent = "";
101+
guesses.textContent = "";
102+
correctNum.textContent = "";
103+
104+
reset.style.display = "none";
105+
attempts = 0;
106+
107+
108+
initializeGame();
109+
110+
}
111+
112+
guessBtn.addEventListener("click",correctGuess);
113+
reset.addEventListener("click",resetGame);
114+
// reset.addEventListener("click", function(){
115+
// correct = Math.floor(Math.random() * 99) + 1;
116+
// guessInput.value = '';
117+
// prompt.textContent = '';
118+
// guessInput.focus()});

‎lab2/main.html‎

Lines changed: 22 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,31 @@
44
<meta charset="UTF-8">
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link href="styles.css?v=3" rel="stylesheet">
78
<title>Game</title>
8-
9-
<style>
10-
11-
</style>
129
</head>
1310
<body>
14-
<input id="guessInput">
15-
<button id="guessBtn"> Guess </button>
16-
<button id="reset"> Reset </button>
17-
<script src="game.js"></script>
18-
<div>
19-
<p id="prompt"> Guess a number from 1 to 99! </p>
11+
<div class="game">
12+
<div class="box">
13+
<div>
14+
<h3 id="prompt"> Guess a number from 1 to 99 in 7 attempts! </h3>
15+
</div>
16+
<label for="guessInput">Enter number:</label>
17+
<input id="guessInput">
18+
<button id="guessBtn"> Guess </button>
19+
<button id="reset"> Reset </button>
20+
<div>
21+
<p id="prompt2"></p>
22+
Previous Guesses:
23+
<span id="guesses"></span>
24+
<p id="correctNum"></p>
25+
</div>
26+
<div class="stats">
27+
<h5 id="wins"></h5>
28+
<h5 id="loses"></h5>
29+
</div>
30+
<script src="game.js"></script>
31+
</div>
2032
</div>
2133
</body>
2234
</html>

‎lab2/styles.css‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
body{
2+
display: flex;
3+
justify-content: center;
4+
align-items: center;
5+
flex-direction: column;
6+
min-height: 100vh;
7+
background-color: black;
8+
}
9+
.game{
10+
text-align: center;
11+
}
12+
.box{
13+
background-color:beige;
14+
padding: 150px;
15+
border-radius: 10px;
16+
min-width: 300px;
17+
max-width: 500px;
18+
position: relative
19+
20+
}
21+
button{
22+
background-color: black;
23+
color:white;
24+
border-radius: 5px;
25+
transition: background-color 0.2s ease, transform 0.2s ease;
26+
border: none;
27+
padding: 6px 10px;
28+
cursor: pointer;
29+
}
30+
button:hover {
31+
transform: scale(1.05);
32+
}
33+
.stats{
34+
position: absolute;
35+
top: 10px;
36+
right: 10px;
37+
display: flex;
38+
gap: 15px;
39+
font-weight: bold;
40+
}
41+
.stats h5 {
42+
margin: 0;
43+
}

‎lab3/index.html‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Document</title>
8+
</head>
9+
<body>
10+
11+
<h1> GAME QUIZ</h1>
12+
<label for="a1"> What is the most sold game of all time? </label>
13+
<input id="a1">
14+
<p id="a1-result"></p>
15+
16+
17+
18+
<input type="radio" id="battlenet" name="launchers" value="battlenet">
19+
<label for="battlenet">Battlenet</label>
20+
21+
<input type="radio" id="steam" name="launchers" value="steam">
22+
<label for="steam">Steam</label>
23+
24+
<input type="radio" id="epic" name="launchers" value="epic">
25+
<label for="epic">Epic Games</label>
26+
27+
<input type="radio" id="riot" name="launchers" value="riot">
28+
<label for="riot">Riot Games</label>
29+
30+
<p id="a2-result"></p>
31+
32+
33+
<p>Is COD considered a fps?</p>
34+
<select name="POV" id="POV">
35+
<option value="o1">Yes</option>
36+
<option value="o2">No</option>
37+
<option value="o3">Both</option>
38+
</select>
39+
40+
<p id="a3-result"></p>
41+
42+
43+
<label for="numberInput">How many core games are there for Halo?</label>
44+
<input type="number" id="numberInput" min="1" max="11" step="1">
45+
<p id="a4-result"></p>
46+
<!-- <input type="radio" id="1" name="q3-answers" value="1">
47+
<label for="1">1</label>
48+
49+
<input type="radio" id="2" name="q3-answers" value="2">
50+
<label for="2">2</label>
51+
52+
<input type="radio" id="3" name="q3-answers" value="3">
53+
<label for="3">3</label> -->
54+
55+
<div id="question3-space"></div>
56+
57+
58+
<button id="submit">Submit</button>
59+
60+
61+
62+
<script src="https://cdn.jsdelivr.net/npm/underscore@1.13.7/underscore-umd-min.js"></script>
63+
<script src="script.js"></script>
64+
</body>
65+
</html>

‎lab3/script.js‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
let sumbmitBtn = document.querySelector("#submit");
2+
let a1Message = document.querySelector("#a1-result");
3+
let a2Message = document.querySelector("#a2-result");
4+
let a3Message = document.querySelector("#a3-result");
5+
let a4Message = document.querySelector("#a4-result")
6+
let num = document.querySelector("#numberInput")
7+
8+
9+
//gernate random order answers
10+
// let question3Options = [1,2,3];
11+
12+
// let question3Space = document.querySelector("#question3-space");
13+
14+
// //suffle
15+
// let shuffleOptions = _.shuffle(question3Options);
16+
17+
// //create option 1
18+
// //repeat using for loop
19+
// let radioInput = document.createElement("input");
20+
// radioInput.id = question3Options[0]; //replace with i
21+
// radioInput.value = question3Options[0];
22+
// radioInput.name = "q3-answers";
23+
// radioInput.type = "radio";
24+
// question3Space.appendChild(radioInput);
25+
26+
// let radioLabel = document.createElement("label");
27+
// radioLabel.textContent = question3Options[0];
28+
// radioLabel.for = question3Options[0];
29+
// question3Space.appendChild(radioLabel);
30+
31+
sumbmitBtn.addEventListener('click', function(){
32+
let answer1 = document.querySelector('#a1').value;
33+
console.log(answer1);
34+
let result = answer1.toUpperCase();
35+
if(result === "MINECRAFT"){
36+
a1Message.textContent = "That's right!"
37+
a1Message.style.color = "green";
38+
}
39+
else{
40+
a1Message.textContent = "That's incorrect";
41+
a2Message.style.color = "red";
42+
}
43+
44+
// let answer2 = document.querySelector("input[name=colors]:checked").value;
45+
// console.log(answer2);
46+
47+
let answer2 = document.querySelector("input[name=launchers]:checked").value;
48+
if(answer2 === "steam"){
49+
a2Message.textContent = "Lucky Guess!";
50+
a2Message.style.color = "green";
51+
}
52+
else{
53+
a2Message.textContent = "Nope";
54+
a2Message.style.color = "red";
55+
}
56+
57+
58+
let answer3 = document.querySelector("#POV");
59+
let current = answer3.value;
60+
console.log(current);
61+
if(current === "o1"){
62+
a3Message.textContent = "Nuh uh";
63+
a3Message.style.color = "red";
64+
}
65+
else if(current === "o2"){
66+
a3Message.textContent = "Wrong";
67+
a3Message.style.color = "red";
68+
}
69+
else if(current === "o3"){
70+
a3Message.textContent = "Duh";
71+
a3Message.style.color = "green";
72+
}
73+
74+
75+
let answer4 = document.querySelector("#numberInput").value;
76+
if (answer4 === "11"){
77+
a4Message.textContent = "Nice";
78+
a4Message.style.color = "green";
79+
}
80+
else{
81+
a4Message.textContent = "Nah";
82+
a4Message.style.color = "red";
83+
}
84+
85+
});

‎practice/.DS_Store‎

2 KB
Binary file not shown.

0 commit comments

Comments
 (0)