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

 2.Changing 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>{data.name}<h1>
<h1>{data.id}<h1>
<button onClick={updatedata}>change<button>
<div>
)
}

export default App

 3.Changing Data using Faker

import React, { useState } from 'react'

import { faker } from '@faker-jsfaker'
const App = () => {
let [data,setdata]=useState(faker.name.fullName)
let changedata=()=>{
setdata(faker.name.fullName)
}
return (
<div>
<h1>{data}<h1>
<button onClick={changedata}>change<button>
<div>
)
}
export default App

4.Creating card using json document

import React, { useState } from 'react'
import product from ".product.json"
import ".Global.css"
const App = () => {
let[data,setdata]=useState(product)
return (
<div className='div1'>
{
data.map((m)=>{
return(
<div className='card'>
<img src={m.img} alt={m.img}><img>
<h1>{m.Id.slice(0,20)}<h1>
<h2>{m.Maker.slice(0 ,20)}<h2>
<h3>{m.Title.slice(0, 10)}<h3>
<div>
)
})
}
<div>
)
}

export default App

 5.Fetching and pushing the data to table
import React, { useEffect, useState } from 'react'
import ".Global.css"
const App = () => {
let[array,setarray]=useState([])
async function fetchApi(){
let rnumber=Math.floor(Math.random()*(0-100)+100)
console.log(rnumber)
let data=await fetch(`https: dummyjson.comproducts${rnumber}`)
console.log(data)
let fd= await data.json()
console.log(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>
{array.map((e)=>{
console.log(e)
return(
<tr>
<td>{e.id}<td>
<td>{e.title}<td>
<td>{e.description}<td>
<tr>
)
})}
<tbody>
<table>
<div>
)
}

export default App

6.calculator

import React, { useState,createRef } from 'react'

import ".Global.css"
const App = () => {
let inputRef=createRef("")
on
let activ=()=>{
inputRef.current.focus()
}
let[result,setResult]=useState("")
click
let click=(m)=>{
setResult(result.concat(m.target.value))
}
clear
let clear=()=>{
setResult("")
}
equal to
let answer=()=>{
setResult(eval(result))
}
delete
let remove=()=>{
setResult(result.slice(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

7.quiz
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<quizData.length-1){
setCurrentqes(nextqus)
}else{
setShowscore(true)
}
}

let handelNext=()=>{
if(currentqes===quizData.length-1){
setCurrentqes(0)
}else{
 setCurrentqes(currentqes+1)
}
}
let handelPrev=()=>{
if(currentqes===0){
setCurrentqes(quizData.length-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].option.map((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

 8.Temparature converter

import React, { useState } from 'react'

import ".Global.css"

const App = () => {

let[celcius,setCelcius]=useState("")
let[faranheit,setFaranheit]=useState("")

let handelCelcius=(e)=>{
let value=e.target.value
setCelcius(value)
setFaranheit((parseFloat(value)*95+32).toFixed(2))
}
let handelFaranheit=(e)=>{
let value=e.target.value
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

9.weather API
import React, { useEffect, useState } from 'react'
import '.Weather.css'

const App = () => {

let [weather,setWeather] = useState()
let [city, setCity] = useState('')
let[error,setError]=useState("")
 let fetchApi = async() => {
try{
let apiKey = "8b1d7f754fba7376d679181dc666ed45"
let url = `https:api.openweathermap.orgdata2.5weather?q=$
{city}&appid=${apiKey}&units=metric`
let data = await fetch(url)
let finalData =await data.json()
if(finalData.cod===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(e.target.value)}} >
<button onClick={fetchApi} className='btn'> Get Weather<button>
<div>
{
weather &&
<div className='weather'>
<h2>Country of {city}: {weather.sys.country}<h2>
<h2>Temprature: {weather.main.temp}<h2>
<h2>Description: {weather.weather[0].description}<h2>
<h2>Wind Speed: {weather.wind.speed}<h2>
<h2>Longitude: {weather.coord.lon}<h2>
<h2>Latitude: {weather.coord.lat}<h2>
<div>
}
<div>
)
}

export default App

10. movie
import React, { useEffect, useState } from 'react'
import '.movie.css'
const App = () => {
let [details,setDetails] = useState("")
let [movie, setMovie] = useState('')
let fetchApi = async() => {
try{
let apiKey = "35da2967"
let url=`http:www.omdbapi.com?apikey=${apiKey}&t=${movie}`;
let data = await fetch(url)
let finalData =await data.json()
console.log(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(e.target.value)}} >
<button onClick={fetchApi} className='btn'> Get Movie<button>
 <div>
{
details &&
<div className='movie'>
<div className='poster'><img src={details.Poster}><img><div>
<div className='details'>
<div>
<h1>{details.Title}<h1>
<h4>{details.Year}<h4>
<h5>{details.Plot}<h5>
<div>
<div className='actores'>
<h4>Actors:{details.Actors}<h4>
<h4>Director:{details.Director}<h4>
<h4>Ratings:{details.Ratings[0].Value}<h4>
<div>
<div>
<div>
}
<div>
)
}
export default App
11.Todo List
import React, { useState } from 'react'
import "./Global.css"

const App = () => {

let[todos,setTodos]=useState([])
let[newTodo,setNewTodo]=useState("")

let addTodo=()=>{
if(newTodo.trim()!==""){
setTodos([...todos,{text:newTodo,completed:false}])
}
}

let deleteTodo=(index)=>{
let updatedTodos=[...todos]
updatedTodos.splice(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(e.target.value)}/>
<button onClick={addTodo}>Add Task</button>
<ul>
{todos.map((todo,index)=>{
return(<>
<li key={index}>
<span style={{textDecoration:todo.completed?"line-
through":"none"}}>{todo.text}</span>
<button onClick={()=>{toggleTodo(index)}}>{todo.completed?
"uncheck":"check"}</button>
<button onClick={()=>deleteTodo(index)}>DeleteTodo</button>
</li>
</>)
})}
</ul>
</div>
)
}

export default App