Skip to content

GitLab

Commit 0da8ad07 authored by s8_jurcs_k's avatar s8_jurcs_k
Browse files

Commit2

parent 0f469913
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 884 additions and 134 deletions
package-lock.json
View file @ 0da8ad07
This diff is collapsed.
public/index.html
View file @ 0da8ad07
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<title>React Number Guessing Game</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
</html>
\ No newline at end of file
public/manifest.json
View file @ 0da8ad07
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"theme_color": "red",
"background_color": "#ffffff"
}
public/robots.txt deleted 100644 → 0
View file @ 0f469913
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:
src/App.css deleted 100644 → 0
View file @ 0f469913
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
src/App.js
View file @ 0da8ad07
import logo from './logo.svg';
import './App.css';
import React, { Component } from 'react';
import Header from "./Header";
import Game from "./Game";
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
class App extends Component {
constructor(props){
super(props);
this.state = {
gameKey: true
};
this.newGame = this.newGame.bind(this);
}
newGame(){
this.setState((prevState) => ({
gameKey: !prevState.gameKey
}));
}
render() {
return (
<div className="container">
<Header/>
<Game key={this.state.gameKey} newGame={this.newGame}/>
</div>
);
}
}
export default App;
export default App;
\ No newline at end of file
src/App.test.js deleted 100644 → 0
View file @ 0f469913
import { render, screen } from '@testing-library/react';
import App from './App';
test('renders learn react link', () => {
render(<App />);
const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});
src/Game.js 0 → 100644
View file @ 0da8ad07
import React, { Component } from 'react';
class Game extends Component {
constructor(props){
super(props);
this.state = {
randomNumber: Math.floor(Math.random() *100) + 1 + "",
guesses: "",
lastResult: "",
lowOrHi: "",
guessCount: 1,
classLastResult: "",
classButtonNewGame: 'd-none'
};
this.checkGuess = this.checkGuess.bind(this);
}
componentDidMount(){
this.guessNumber.focus();
}
componentDidUpdate(){
if(this.state.classButtonNewGame === "btn btn-primary m-2"){
this.startNewGame.focus();
}
}
checkGuess(event){
event.preventDefault();
let guessValue = event.target.guessNumber.value;
let randomValue = this.state.randomNumber;
event.target.guessNumber.value = "";
if(guessValue !== "") {
this.setState((prevState) => ({
guesses: prevState.guesses === "" ? `Previous guesses: ${guessValue}` : `${prevState.guesses}, ${guessValue}`,
guessCount: prevState.guessCount + 1
}));
if (guessValue === randomValue) {
this.setState({
lastResult: "BINGO! You got it right!",
lowOrHi: "",
classLastResult: "m-2 p-1 bg-success",
classButtonNewGame: "btn btn-primary m-2",
});
this.submitGuess.setAttribute("disabled", "disabled");
this.guessNumber.setAttribute("disabled", "disabled");
} else if (this.state.guessCount === 10) {
this.setState({
lastResult: "GAME OVER!",
lowOrHi: "",
classLastResult: "m-2 p-1 bg-danger",
classButtonNewGame: "btn btn-primary m-2",
});
this.submitGuess.setAttribute("disabled", "disabled");
this.guessNumber.setAttribute("disabled", "disabled");
} else if (guessValue > randomValue) {
this.setState({
lastResult: "Wrong!",
lowOrHi: "Your guess was too high!",
classLastResult: "m-2 p-1 bg-danger"
});
} else if (guessValue < randomValue) {
this.setState({
lastResult: "Wrong!",
lowOrHi: "Your guess was too low!",
classLastResult: "m-2 p-1 bg-danger"
})
}
}
}
render(){
return(
<div>
<form className="form-inline" onSubmit={this.checkGuess}>
<label className="m-2">Enter a guess:</label>
<input name="guessNumber" type="number" min="1" max="100" ref={(input) => {this.guessNumber = input;}} className="form-control m-2"/>
<button type="submit" ref={(button) => {this.submitGuess = button;}} className="btn btn-primary m-2">Submit guess</button>
</form>
<div>
<p className="m-2">{this.state.guesses}</p>
<p className={this.state.classLastResult}>{this.state.lastResult}</p>
<p className="m-2">{this.state.lowOrHi}</p>
<p className ="m-2">Your current guess attempts: {this.state.guessCount -1}</p>
<button ref={(button) => {this.startNewGame = button;}} className={this.state.classButtonNewGame} onClick={this.props.newGame}>Start new game</button>
</div>
</div>
);
}
}
export default Game;
\ No newline at end of file
src/Header.js 0 → 100644
View file @ 0da8ad07
import React, { Component } from 'react';
import './index.css';
class Header extends Component {
render(){
return(
<div className="Header">
<h1 className="text-center pb-1">Number Guessing Game</h1>
<p className="p-2">Guess a number between 1-100.</p>
<p className="p-2">You have 10 attempts.</p>
<p className="p-2">You will be informed if your guess was too high or too low.</p>
</div>
);
}
}
export default Header;
\ No newline at end of file
src/index.css
View file @ 0da8ad07
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
.Header {
background-color:powderblue;
}
\ No newline at end of file
src/index.js
View file @ 0da8ad07
......@@ -2,16 +2,6 @@ import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
document.body.style.backgroundColor = "yellow";
ReactDOM.render(<App/>, document.getElementById("root"));
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment