1.
Increment Decrement
import React, { useState } from 'react'
const App = () => {
let [count,setcount]=useState(0)
let increment=()=>{
setcount(count+1)
}
let decrement=()=>{
setcount(count-1)
}
return (
<div>
<h1>{count}<h1>
<button onClick={decrement}>-<button>
<button onClick={increment}>+<button>
<div>
)
}
export default App
[Link] Data
import React, { useState } from 'react'
const App = () => {
let [data,setdata]=useState({
"name":"raj",
"id":123
})
let updatedata=()=>{
setdata({
"name":"rani",
"id":234
})
}
return (
<div>
<h1>{[Link]}<h1>
<h1>{[Link]}<h1>
<button onClick={updatedata}>change<button>
<div>
)
}
export default App
[Link] Data using Faker
import React, { useState } from 'react'
import { faker } from '@faker-jsfaker'
const App = () => {
let [data,setdata]=useState([Link])
let changedata=()=>{
setdata([Link])
}
return (
<div>
<h1>{data}<h1>
<button onClick={changedata}>change<button>
<div>
)
}
export default App
[Link] card using json document
import React, { useState } from 'react'
import product from ".[Link]"
import ".[Link]"
const App = () => {
let[data,setdata]=useState(product)
return (
<div className='div1'>
{
[Link]((m)=>{
return(
<div className='card'>
<img src={[Link]} alt={[Link]}><img>
<h1>{[Link](0,20)}<h1>
<h2>{[Link](0 ,20)}<h2>
<h3>{[Link](0, 10)}<h3>
<div>
)
})
}
<div>
)
}
export default App
[Link] and pushing the data to table
import React, { useEffect, useState } from 'react'
import ".[Link]"
const App = () => {
let[array,setarray]=useState([])
async function fetchApi(){
let rnumber=[Link]([Link]()*(0-100)+100)
[Link](rnumber)
let data=await fetch(`https: [Link]${rnumber}`)
[Link](data)
let fd= await [Link]()
[Link](fd)
setarray([...array,fd])
}
useEffect(()=>{ },[])
return (
<div className='div1'>
<button onClick={fetchApi} >PUSH<button>
<table>
<thead>
<th>ID<th>
<th>Titlt<th>
<th>Description<th>
<thead>
<tbody>
{[Link]((e)=>{
[Link](e)
return(
<tr>
<td>{[Link]}<td>
<td>{[Link]}<td>
<td>{[Link]}<td>
<tr>
)
})}
<tbody>
<table>
<div>
)
}
export default App
[Link]
import React, { useState,createRef } from 'react'
import ".[Link]"
const App = () => {
let inputRef=createRef("")
on
let activ=()=>{
[Link]()
}
let[result,setResult]=useState("")
click
let click=(m)=>{
setResult([Link]([Link]))
}
clear
let clear=()=>{
setResult("")
}
equal to
let answer=()=>{
setResult(eval(result))
}
delete
let remove=()=>{
setResult([Link](0,-1))
}
return (
<div >
<h1>CALCULATOR<h1>
<div className='div1'>
<input className='ip' type='text' value={result} ref={inputRef}><input>
<div className='btn'>
<button onClick={activ} className='on'>ON<button>
<button onClick={click} value='.' className='same'>.<button>
<button onClick={remove} className='same' >D<button>
<button onClick={clear} className='same'>C<button>
<button onClick={click} value='9'>9<button>
<button onClick={click} value='8'>8<button>
<button onClick={click} value='7'>7<button>
<button onClick={click} value='' className='same'>÷<button>
<button onClick={click} value='6'>6<button>
<button onClick={click} value='5'>5<button>
<button onClick={click} value='4'>4<button>
<button onClick={click} value='*' className='same'>×<button>
<button onClick={click} value='3'>3<button>
<button onClick={click} value='2'>2<button>
<button onClick={click} value='1'>1<button>
<button onClick={click} value='-' className='same'>-<button>
<button onClick={click} value='0'>0<button>
<button onClick={answer} className='same'>=<button>
<button onClick={click} value='+' className='same'>+<button>
<div><div>
<div>
)
}
export default App
[Link]
import React from 'react'
import { useState } from 'react'
let quizData=[{
question:"react js is ________",
option:["framework","library","database","none of the above"],
currectAns:"library"
},
{
question:"bootstrap is ________",
option:["framework","library","database","none of the above"],
currectAns:"framework"
}]
const App = () => {
let[score,setScore]=useState(0)
let[showscore,setShowscore]=useState(false)
let[currentqes,setCurrentqes]=useState(0)
let[attempts,setAttempts]=useState(0)
let handelAns=(selectedAns)=>{
if(selectedAns===quizData[currentqes].currectAns){
setScore(score+1)
setAttempts(attempts+1)
}
}
let handelSubmit=()=>{
let nextqus=currentqes+1
if(currentqes<[Link]-1){
setCurrentqes(nextqus)
}else{
setShowscore(true)
}
}
let handelNext=()=>{
if(currentqes===[Link]-1){
setCurrentqes(0)
}else{
setCurrentqes(currentqes+1)
}
}
let handelPrev=()=>{
if(currentqes===0){
setCurrentqes([Link]-1)
}else{
setCurrentqes(currentqes-1)
}
}
let reset=()=>{
setScore(0)
setCurrentqes(0)
setShowscore(false)
}
return (
<div>
{showscore ? <>
<div>
<h1>Your score is:{score}<h1>
<h2>Attempted ques:{attempts}<h2>
<button onClick={reset}>Restart<button>
<div>
<>:<>
<div>
<h1>Question No : {currentqes+1}<h1>
<h1>.{quizData[currentqes].question}<h1>
<div>
<ul>
{quizData[currentqes].[Link]((option,index)=>{
return(
<div>
<li key={index}>
<button onClick={()=>{handelAns(option)}}>{option}<button>
<li>
<div>
)
})}
<ul>
<button onClick={handelPrev}>Previous<button>
<button onClick={handelNext}>Next<button>
<button onClick={handelSubmit}>Submit<button>
<>}
<div>
)
}
export default App
[Link] converter
import React, { useState } from 'react'
import ".[Link]"
const App = () => {
let[celcius,setCelcius]=useState("")
let[faranheit,setFaranheit]=useState("")
let handelCelcius=(e)=>{
let value=[Link]
setCelcius(value)
setFaranheit((parseFloat(value)*95+32).toFixed(2))
}
let handelFaranheit=(e)=>{
let value=[Link]
setFaranheit(value)
setCelcius(((parseFloat(value)-32)*59).toFixed(2))
}
return (
<div className='temp'>
<h1>Temprature converter<h1>
<div className='temptocel'>
<div>
<input type='number' onChange={handelCelcius} value={celcius}
placeholder='Enter Your Temperature'><input>
<div>
<div>
<input type='number' onChange={handelFaranheit} value={faranheit}
placeholder='Enter Your Faranheit'><input>
<div>
<div>
<div>
)
}
export default App
[Link] API
import React, { useEffect, useState } from 'react'
import '.[Link]'
const App = () => {
let [weather,setWeather] = useState()
let [city, setCity] = useState('')
let[error,setError]=useState("")
let fetchApi = async() => {
try{
let apiKey = "8b1d7f754fba7376d679181dc666ed45"
let url = `https:[Link].orgdata2.5weather?q=$
{city}&appid=${apiKey}&units=metric`
let data = await fetch(url)
let finalData =await [Link]()
if([Link]===200){
setWeather(finalData)
setError("")
}else{
setError("city not found")
alert(error)
}
}catch(error){
alert(Error)
}
}
useEffect(()=>{},[])
return (
<div className='div1'>
<h1>Weather App<h1>
<div className='search'>
<input type="text" placeholder='Enter City Name' value={city}
onChange={(e)=>{setCity([Link])}} >
<button onClick={fetchApi} className='btn'> Get Weather<button>
<div>
{
weather &&
<div className='weather'>
<h2>Country of {city}: {[Link]}<h2>
<h2>Temprature: {[Link]}<h2>
<h2>Description: {[Link][0].description}<h2>
<h2>Wind Speed: {[Link]}<h2>
<h2>Longitude: {[Link]}<h2>
<h2>Latitude: {[Link]}<h2>
<div>
}
<div>
)
}
export default App
10. movie
import React, { useEffect, useState } from 'react'
import '.[Link]'
const App = () => {
let [details,setDetails] = useState("")
let [movie, setMovie] = useState('')
let fetchApi = async() => {
try{
let apiKey = "35da2967"
let url=`http:[Link]?apikey=${apiKey}&t=${movie}`;
let data = await fetch(url)
let finalData =await [Link]()
[Link](finalData)
setDetails(finalData)
}catch(error){
alert("error")
}
}
useEffect(()=>{ },[])
return (
<div className='div1'>
<h1>Movie App<h1>
<div className='search'>
<input type="text" placeholder='Enter Movie Name' value={movie}
onChange={(e)=>{setMovie([Link])}} >
<button onClick={fetchApi} className='btn'> Get Movie<button>
<div>
{
details &&
<div className='movie'>
<div className='poster'><img src={[Link]}><img><div>
<div className='details'>
<div>
<h1>{[Link]}<h1>
<h4>{[Link]}<h4>
<h5>{[Link]}<h5>
<div>
<div className='actores'>
<h4>Actors:{[Link]}<h4>
<h4>Director:{[Link]}<h4>
<h4>Ratings:{[Link][0].Value}<h4>
<div>
<div>
<div>
}
<div>
)
}
export default App
[Link] List
import React, { useState } from 'react'
import "./[Link]"
const App = () => {
let[todos,setTodos]=useState([])
let[newTodo,setNewTodo]=useState("")
let addTodo=()=>{
if([Link]()!==""){
setTodos([...todos,{text:newTodo,completed:false}])
}
}
let deleteTodo=(index)=>{
let updatedTodos=[...todos]
[Link](index,1)
setTodos(updatedTodos)
}
let toggleTodo=(index)=>{
let updatedTodos=[...todos]
updatedTodos[index].completed=!updatedTodos[index].completed
setTodos(updatedTodos)
}
return (
<div>
<h1>Todo Application</h1>
<input type='text' placeholder='enter your task' value={newTodo}
onChange={(e)=>setNewTodo([Link])}/>
<button onClick={addTodo}>Add Task</button>
<ul>
{[Link]((todo,index)=>{
return(<>
<li key={index}>
<span style={{textDecoration:[Link]?"line-
through":"none"}}>{[Link]}</span>
<button onClick={()=>{toggleTodo(index)}}>{[Link]?
"uncheck":"check"}</button>
<button onClick={()=>deleteTodo(index)}>DeleteTodo</button>
</li>
</>)
})}
</ul>
</div>
)
}
export default App
