Scribd
Upload
13 views5 pages

Node Js Pra 1225

Uploaded by

itavbit20624
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
13 views5 pages

Node Js Pra 1225

Uploaded by

itavbit20624
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

DEPARTMENT OF INFORMATION TECHNOLOGY

NODE JS LAB

PARTICIPATORY REPORTASSESSMENT

GUESS THE NUMBER USING RACT JS

SUBMITTEDTO: SUBMITTEDBY:
MRS. T. SREELALITHA CH.AKHIL REDDY

(22P61A1226) II/IT-A
AIM:Guess the number Using React JS.
Approaches:
In this article, we will create the guess the number game. In which the computer will select a random number between 1 and 20 and
the player will get unlimited chances to guess the number. If the player makes an incorrect guess, the player will be notified
whether the guess is is higher or lower than correct number until the correct guess is made. .

Prerequisites :The pre-requisites for this project are:


 Basic knowledge of React
 Controlled input
 State components

Steps to create the projects:


Step 1: Initialize the project by using the following command
npx create-react-app guess
Step 2: Navigate to the folder using the command
cd guess
Step 3: Create a folder named components in src folder and add a new file in it named Result.js
After following the above steps the project structure will look like:
Project Structure:

The dependencies in package.json will look like:


package.json
"dependencies": {

"@testing-library/jest-dom": "^5.16.5",

"@testing-library/react": "^13.4.0",

"@testing-library/user-event": "^13.5.0",

"react": "^18.2.0",
"react-dom": "^18.2.0",

"react-scripts": "5.0.1",

"web-vitals": "^2.1.4"

}
CODE :
 App.js: This files contains the logic and imports the required component
 App.css: This file contains the styling of the application
 Result.js: This file displays the result based on the input
JavaScript:

App.js

import React, { Component } from 'react'


import Result from './components/Result'
import './App.css'
class App extends Component {

static defaultProps = {
secret: Math.floor(Math.random() * 20) + 1
}

constructor(props) {
super(props)
this.state = { term: '' }

this.handleChange = this.handleChange.bind(this)
}

handleChange(event) {
this.setState({
[event.target.name]: event.target.value
})
}

render() {
return (
<div className='container'>
<div className='head'>
<label htmlFor='term'>
Guess Number between 1 to 20
</label>
</div>
<input
id='term'
type='text'
name='term'
value={this.state.term}
onChange={this.handleChange}
/>
<Result term={this.state.term}
secretNum={this.props.secret} />
</div>
)
}
}
export default App
Javascript:
// Result.js

import React from 'react'

const Result = ({ term, secretNum }) => {


let result;
if (term) {
if (secretNum > term) {
result = 'Lower'
}
else if (secretNum < term) {
result = 'Higher'
}
else if (secretNum == term) {
result = 'Yippee, correct!'
}
else {
result = "Enter Valid Input"
}
}
return <h3>You Guessed: {result}</h3>
}

export default Result


CSS:
/* App.css */

body {
background-color: rgb(100, 99, 99);
display: flex;
align-items: center;
justify-content: center;
padding: 15%;
}

.container {
padding: 10px;
border: 2px solid whitesmoke;
width: 500px;
border-radius: 16px;
display: flex;
flex-direction: column;
color: rgb(255, 255, 255);
}
.head {
font-weight: 600;
font-size: 20px;
margin-bottom: 20px;
}

input {
padding: 10px;
border: 1px solid black;
border-radius: 10px;
}

input:hover {
background-color: rgb(158, 156, 152);
}

input:focus {
border: 0px;
background-color: beige;
}
Steps to run the Application:
Step 1: Type the following command in terminal
npm start
Step 2: Type the following link in you browser
http://localhost:3000/
output:

You might also like