Score-Keeper App
1.Calling the Function
2. Virtual DOM
3. Click Event in JSX
Solution :
<!DOCTYPE html>
<html lang="en">
<head>
<script
crossorigin
src="https://unpkg.com/react@18/umd/react.development.js"
></script>
<script
crossorigin
src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<title>React App</title>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
var show = true;
function setShow() {
show = !show;
rootElement.render(<App />);
}
const App = () => (
<>
<h1>Coding Ninjas</h1>
<button onClick={setShow}>
{show ? "Hide Element Below" : "Show Element Below"}
</button>
{show && <p>Hello ninjas, I am here. </p>}
</>
);
const rootElement = ReactDOM.createRoot(document.getElementById("root"));
rootElement.render(<App />);
</script>
</body>
</html>
4. Event Handlers in React
5. What will be the output of the following code snippet?
6. Favorite Food
Solution :
HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<script
crossorigin
src="https://unpkg.com/react@18/umd/react.development.js"
></script>
<script
crossorigin
src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<link rel="stylesheet" href="style.css" />
<title>React App</title>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const food = {
pizza: {
name: "Pizza",
image:
"https://res.cloudinary.com/dl26pbek4/image/upload/v1672294935/assets/shourav-sheikh-a66sGfOnnqQ-unsplash_dufyvk.jpg",
},
burger: {
name: "Burger",
image:
"https://res.cloudinary.com/dl26pbek4/image/upload/v1672294934/assets/food-photographer-E94j3rMcxlw-unsplash_kuljtd.jpg",
},
pasta: {
name: "Pasta",
image:
"https://res.cloudinary.com/dl26pbek4/image/upload/v1672294934/assets/pixzolo-photography-aeESmmFKH0M-unsplash_wag5lc.jpg",
},
sushi: {
name: "Sushi",
image:
"https://res.cloudinary.com/dl26pbek4/image/upload/v1672294934/assets/pixzolo-photography-aeESmmFKH0M-unsplash_wag5lc.jpg",
},
chickenBiryani: {
name: "Chicken Biryani",
image:
"https://res.cloudinary.com/dl26pbek4/image/upload/v1672294935/assets/mario-raj-ysmeQt1dzcw-unsplash_ivdvre.jpg",
},
};
let favouriteFood;
// create handleFoodClick function here
const handlePizzaClick = () => {
favouriteFood = food.pizza;
rootElement.render(<App />);
};
const handleBurgerClick = () => {
favouriteFood = food.burger;
rootElement.render(<App />);
};
const handlePastaClick = () => {
favouriteFood = food.pasta;
rootElement.render(<App />);
};
const handleSushiClick = () => {
favouriteFood = food.sushi;
rootElement.render(<App />);
};
const handleChickenBiryaniClick = () => {
favouriteFood = food.chickenBiryani;
rootElement.render(<App />);
};
const FavouriteFood = () => (
<div className="favourite-food">
<span>Your favourite food is:</span>
<h3>{favouriteFood.name}</h3>
<img src={favouriteFood.image} />
</div>
);
const App = () => (
<div className="App">
{typeof handleFoodClick === "function" && (
<h2>Select your favourite food</h2>
)}
<div className="food-list">
<div onClick={handlePizzaClick}>
<h3>{food.pizza.name}</h3>
<img src={food.pizza.image} />
</div>
<div onClick={handleBurgerClick}>
<h3>{food.burger.name}</h3>
<img src={food.burger.image} />
</div>
<div onClick={handlePastaClick}>
<h3>{food.pasta.name}</h3>
<img src={food.pasta.image} />
</div>
<div onClick={handleSushiClick}>
<h3>{food.sushi.name}</h3>
<img src={food.sushi.image} />
</div>
<div onClick={handleChickenBiryaniClick}>
<h3>{food.chickenBiryani.name}</h3>
<img src={food.chickenBiryani.image} />
</div>
</div>
</div>
);
const rootElement = ReactDOM.createRoot(document.getElementById("root"));
rootElement.render(<App />);
</script>
</body>
</html>
CSS :
.food-list {
display: grid;
padding: 20px;
grid-template: repeat(3, 200px) / repeat(auto-fit, minmax(180px, 1fr));
grid-auto-flow: row;
grid-auto-rows: 200px;
gap: 20px;
}
.food-list div {
padding: 10px;
border-radius: 10px;
background-color: rgb(198, 245, 245);
border: 3px solid transparent;
transition: 0.3s;
cursor: pointer;
}
.food-list div:hover {
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.food-list div img {
width: 100%;
height: 120px;
object-fit: cover;
}
.favourite-food {
width: 200px;
height: 200px;
display: flex;
flex-direction: column;
margin: 0 auto;
padding: 10px;
border-radius: 10px;
background-color: rgb(238, 255, 144);
}
.favourite-food img {
width: 100%;
height: 120px;
object-fit: cover;
}
7.map method
8. Keys in React
9. Synthetic events
10. Dynamic User Card
Solution :
<!DOCTYPE html>
<html lang="en">
<head>
<script
crossorigin
src="https://unpkg.com/react@18/umd/react.development.js"
></script>
<script
crossorigin
src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<title>React App</title>
<style>
.card {
width: 250px;
padding: 10px 20px;
border-radius: 20px;
margin: 50px auto;
background-color: rgb(236, 236, 236);
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.inputs {
display: flex;
flex-direction: column;
gap: 10px;
width: 60%;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
// Do not change the classNames of the elements from the default markup
const Card = () => (
<div className="card">
<h3>Name: </h3>
<p>Email: </p>
<p>About: </p>
</div>
);
const App = () => (
<div className="App">
<div className="inputs">
<input placeholder="Name" />
<input type="email" placeholder="Email" />
<textarea placeholder="About"></textarea>
</div>
</div>
);
const rootElement = ReactDOM.createRoot(document.getElementById("root"));
rootElement.render(<App />);
</script>
</body>
</html>
11. ref attribute
Assignment
1. Type Property
2. Array Destructuring
3. React elements vs DOM elements
4. Forms in JSX
<!DOCTYPE html>
<html lang="en">
<head>
<script
crossorigin
src="https://unpkg.com/react@18/umd/react.development.js"
></script>
<script
crossorigin
src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<title>React App</title>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const Form = () => <></>;
const Result = () => <p></p>;
const App = () => (
<>
<Form />
<Result />
</>
);
const rootElement = ReactDOM.createRoot(document.getElementById("root"));
rootElement.render(<App />);
</script>
</body>
</html>
5. Parking Vehicle Count
<!DOCTYPE html>
<html lang="en">
<head>
<script
crossorigin
src="https://unpkg.com/react@18/umd/react.development.js"
></script>
<script
crossorigin
src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<title>React App</title>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
// Create handlers to increase and decrease vehicle count here
const App = () => (
<>
<p>List of all the vehicles count in the parking.</p>
<ol>
<li>
<p>
<b>Car: </b>  
{/* Add increase and decrease count buttons here */}
</p>
</li>
<li>
<p>
<b>Bike: </b>  
{/* Add increase and decrease count buttons here */}
</p>
</li>
<li>
<p>
<b>Scooty: </b>  
{/* Add increase and decrease count buttons here */}
</p>
</li>
<li>
<p>
<b>Bicycle:</b>  
{/* Add increase and decrease count buttons here */}
</p>
</li>
</ol>
</>
);
const rootElement = ReactDOM.createRoot(document.getElementById("root"));
rootElement.render(<App />);
</script>
</body>
</html>
6. Quotify App
HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<script
crossorigin
src="https://unpkg.com/react@18/umd/react.development.js"
></script>
<script
crossorigin
src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<link rel="stylesheet" href="style.css" />
<title>React App</title>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const quotes = [];
const clearInputs = () => {
nameRef.current.value = "";
quoteRef.current.value = "";
};
// create handleQuote function here
const App = () => (
<div className="App">
<h2>Quotify</h2>
<div className="quotes">
{quotes.map((q, i) => (
<div key={i}>
<i>"{q.quote}"</i>
<b>~ {q.name}</b>
</div>
))}
</div>
</div>
);
const rootElement = ReactDOM.createRoot(document.getElementById("root"));
rootElement.render(<App />);
</script>
</body>
</html>
CSS :
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 2.5rem;
letter-spacing: 1.5px;
color: rgb(120, 0, 255);
}
.App > div:nth-of-type(1),
.quotes {
width: 60%;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 10px;
}
input {
outline: none;
border: 1px solid #000;
padding: 5px;
padding-left: 10px;
font-size: 1.1rem;
}
.quotes {
margin-top: 30px;
gap: 15px;
}
.quotes div {
display: flex;
flex-direction: column;
padding: 10px;
border-radius: 10px;
background-color: rgb(238, 238, 238);
cursor: pointer;
transition: 0.3s;
}
.quotes div:hover {
transform: scale(1.1);
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
i,
b {
font-size: 1.1rem;
}
b {
align-self: flex-end;
}
7. CMT (Mini Project)
HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<script
crossorigin
src="https://unpkg.com/react@18/umd/react.development.js"
></script>
<script
crossorigin
src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<title>React App</title>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
let customers = [];
const capacity = 25;
let seatsLeft = 25;
// Create form submit handler here
const App = () => (
<div className="App" style={{ textAlign: "center" }}>
<div>
<h2>Total Capacity: </h2>
<h2>Seats Left: </h2>
</div>
{/* Create a form here */}
{/* Complete table to show records of customers */}
<table border="1px" style={{ margin: "auto" }}></table>
</div>
);
const rootElement = ReactDOM.createRoot(document.getElementById("root"));
rootElement.render(<App />);
</script>
</body>
</html>
CSS:
.App {
display: flex;
flex-direction: column;
gap: 30px;
align-items: center;
}
form {
width: 60%;
display: flex;
flex-direction: column;
gap: 10px;
}
form div {
display: flex;
justify-content: center;
gap: 10px;
}
button {
width: 120px;
padding-block: 5px;
cursor: pointer;
}
th,
td {
padding: 10px;
}
input {
padding: 5px;
font-size: 1.1rem;
}
.served {
background-color: red;
}
.dining {
background-color: lime;
cursor: pointer;
}
