Skip to content

Commit 96e9bd3

Browse files
damlakara5damlakara5
authored
Add files via upload
1 parent 8a6f26a commit 96e9bd3

File tree

5 files changed

+281
-2
lines changed

5 files changed

+281
-2
lines changed

‎README.md

+39-2
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,39 @@
1-
# guess-my-number
2-
It is a little guessing game that you can play.
1+
# Guess My Number Game
2+
3+
This is a little guess my number game. Have fun!
4+
5+
## Table of contents
6+
7+
- [Overview](#overview)
8+
9+
- [The challenge](#the-challenge)
10+
- [Screenshot](#screenshot)
11+
- [Built with](#built-with)
12+
13+
- [Author](#author)
14+
15+
## Overview
16+
17+
### The challenge
18+
19+
Users be able to:
20+
21+
- View the optimal layout depending on their device's screen size
22+
- See whether number they entered is large or small from the message and they can change the number accordingly
23+
- Click the again button and restart the game
24+
25+
### Screenshot
26+
27+
![](./screenshot.png)
28+
29+
### Built with
30+
31+
- Semantic HTML5 markup
32+
- CSS custom properties
33+
- Flexbox
34+
- CSS Grid
35+
- JavaScript
36+
37+
## Author
38+
39+
- LinkedIn - [Damla Kara](https://www.linkedin.com/in/damla-kara-348081232/)

‎index.html

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
7+
<link rel="stylesheet" href="./style.css" />
8+
<title>Guess My Number!</title>
9+
</head>
10+
<body>
11+
<header>
12+
<h1>Guess My Number!</h1>
13+
<p class="between">(Between 1 and 20)</p>
14+
<button class="btn again">Again!</button>
15+
<div class="number">?</div>
16+
</header>
17+
<main>
18+
<section class="left">
19+
<input type="number" class="guess" />
20+
<button class="btn check">Check!</button>
21+
</section>
22+
<section class="right">
23+
<p class="message">Start guessing...</p>
24+
<p class="label-score">💯 Score: <span class="score">20</span></p>
25+
<p class="label-highscore">
26+
🥇 Highscore: <span class="highscore">0</span>
27+
</p>
28+
</section>
29+
</main>
30+
<script src="./script.js"></script>
31+
</body>
32+
</html>

‎screenshot.png

22.5 KB
Loading

‎script.js

+91
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
'use strict';
2+
3+
//console.log(document.querySelector('.message').textContent); // with document.querySelector we select html element using classes like we did in css.
4+
// if we want to select with id we use # and id name. And after that with .textContent we can select the text in the html element
5+
/* document.querySelector('.message').textContent = 23; like this we can change text in the element
6+
document.querySelector('.quess').value= 23;
7+
console.log(document.querySelector('.quess').value); input ise .value kullanmak zorundayız
8+
*/
9+
10+
//ilk parametre event type. click, hover... ikinci parametre ise fonksiyonun vereceği reaction. ve ikinci argüman olarak fonksiyon vermek zorundayız
11+
12+
let secretNumber = Math.trunc(Math.random() * 20) + 1;
13+
//Math.trunc float kısımdan kurtulmak için. *20 0 dan 19 a kadar random sayı üretmesi için. +1 ile 1 den 20 ye kadar random sayı üretir
14+
let score = 20;
15+
let highScore = 0;
16+
17+
document.querySelector('.check').addEventListener('click', function () {
18+
//we must specify what should happen
19+
const guess = Number(document.querySelector('.guess').value);
20+
//inputtan bir şey aldığımız zaman string olarak alırız
21+
22+
if (!guess) {
23+
// input alanı boş bırakıldığı zaman 0 sayılıyor, falsy değer. falsy değer girildiği zaman loopa girebilmesi için !guess
24+
document.querySelector('.message').textContent = '⛔No number!';
25+
} else if (guess === secretNumber) {
26+
document.querySelector('.message').textContent = '🎉Correct Number!';
27+
document.querySelector('.number').textContent = secretNumber;
28+
29+
//css için .style yazarız ve .değiştirmekistenenözellik
30+
document.querySelector('body').style.backgroundColor = '#60b347';
31+
document.querySelector('.number').style.width = '30rem'; // bütün atamalar string şeklinde olmak ZORUNDA
32+
33+
if (score > highScore) {
34+
highScore = score;
35+
document.querySelector('.highscore').textContent = highScore;
36+
}
37+
} else if (guess !== secretNumber) {
38+
if (score > 1) {
39+
document.querySelector('.message').textContent =
40+
guess > secretNumber ? 'Too high!' : 'Too low!';
41+
score--;
42+
document.querySelector('.score').textContent = score;
43+
} else {
44+
console.log(score);
45+
document.querySelector('.message').textContent = 'You lost the game!';
46+
document.querySelector('.score').textContent = 0;
47+
}
48+
/* } else if (guess > secretNumber) {
49+
if (score > 1) {
50+
document.querySelector('.message').textContent = 'Too high!';
51+
score--;
52+
document.querySelector('.score').textContent = score;
53+
} else {
54+
console.log(score);
55+
document.querySelector('.message').textContent = 'You lost the game!';
56+
document.querySelector('.score').textContent = 0;
57+
}
58+
} else if (guess < secretNumber) {
59+
if (score > 1) {
60+
document.querySelector('.message').textContent = 'Too low!';
61+
score--;
62+
document.querySelector('.score').textContent = score;
63+
} else {
64+
console.log(score);
65+
document.querySelector('.message').textContent = 'You lost the game!';
66+
document.querySelector('.score').textContent = 0;
67+
}
68+
}
69+
*/
70+
/* if (guess !== secretNumber) {
71+
let score = document.querySelector('.score').textContent;
72+
document.querySelector('.score').textContent = score - 1;
73+
74+
if (Number(score) === 1) {
75+
document.querySelector('.message').textContent = 'You lost the game!';
76+
}
77+
} */
78+
}
79+
});
80+
81+
document.querySelector('.again').addEventListener('click', function () {
82+
secretNumber = Math.trunc(Math.random() * 20) + 1;
83+
document.querySelector('.number').textContent = secretNumber;
84+
85+
document.querySelector('.score').textContent = 20;
86+
document.querySelector('.message').textContent = 'Start guessing...';
87+
document.querySelector('.number').textContent = '?';
88+
document.querySelector('.guess').value = ''; //input to empty
89+
document.querySelector('body').style.backgroundColor = '#222';
90+
document.querySelector('.number').style.width = '15rem';
91+
});

‎style.css

+119
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
@import url('https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap');
2+
3+
* {
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: inherit;
7+
}
8+
9+
html {
10+
font-size: 62.5%;
11+
box-sizing: border-box;
12+
}
13+
14+
body {
15+
font-family: 'Press Start 2P', sans-serif;
16+
color: #eee;
17+
background-color: #222;
18+
/* background-color: #60b347; */
19+
}
20+
21+
/* LAYOUT */
22+
header {
23+
position: relative;
24+
height: 35vh;
25+
border-bottom: 7px solid #eee;
26+
}
27+
28+
main {
29+
height: 65vh;
30+
color: #eee;
31+
display: flex;
32+
align-items: center;
33+
justify-content: space-around;
34+
}
35+
36+
.left {
37+
width: 52rem;
38+
display: flex;
39+
flex-direction: column;
40+
align-items: center;
41+
}
42+
43+
.right {
44+
width: 52rem;
45+
font-size: 2rem;
46+
}
47+
48+
/* ELEMENTS STYLE */
49+
h1 {
50+
font-size: 4rem;
51+
text-align: center;
52+
position: absolute;
53+
width: 100%;
54+
top: 52%;
55+
left: 50%;
56+
transform: translate(-50%, -50%);
57+
}
58+
59+
.number {
60+
background: #eee;
61+
color: #333;
62+
font-size: 6rem;
63+
width: 15rem;
64+
padding: 3rem 0rem;
65+
text-align: center;
66+
position: absolute;
67+
bottom: 0;
68+
left: 50%;
69+
transform: translate(-50%, 50%);
70+
}
71+
72+
.between {
73+
font-size: 1.4rem;
74+
position: absolute;
75+
top: 2rem;
76+
right: 2rem;
77+
}
78+
79+
.again {
80+
position: absolute;
81+
top: 2rem;
82+
left: 2rem;
83+
}
84+
85+
.guess {
86+
background: none;
87+
border: 4px solid #eee;
88+
font-family: inherit;
89+
color: inherit;
90+
font-size: 5rem;
91+
padding: 2.5rem;
92+
width: 25rem;
93+
text-align: center;
94+
display: block;
95+
margin-bottom: 3rem;
96+
}
97+
98+
.btn {
99+
border: none;
100+
background-color: #eee;
101+
color: #222;
102+
font-size: 2rem;
103+
font-family: inherit;
104+
padding: 2rem 3rem;
105+
cursor: pointer;
106+
}
107+
108+
.btn:hover {
109+
background-color: #ccc;
110+
}
111+
112+
.message {
113+
margin-bottom: 8rem;
114+
height: 3rem;
115+
}
116+
117+
.label-score {
118+
margin-bottom: 2rem;
119+
}

0 commit comments

Comments
 (0)