Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit bae5a17

Browse files
making events that can help to add new items and save the values
1 parent b91ed37 commit bae5a17

File tree

5 files changed

+87
-128
lines changed

5 files changed

+87
-128
lines changed

‎REACT_RECAP/practice-one/src/App.css

Lines changed: 33 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,33 @@
1-
#root {
2-
max-width: 1280px;
3-
margin: 0 auto;
4-
padding: 2rem;
5-
text-align: center;
6-
}
7-
8-
.logo {
9-
height: 6em;
10-
padding: 1.5em;
11-
will-change: filter;
12-
}
13-
.logo:hover {
14-
filter: drop-shadow(0 0 2em #646cffaa);
15-
}
16-
.logo.react:hover {
17-
filter: drop-shadow(0 0 2em #61dafbaa);
18-
}
19-
20-
@keyframes logo-spin {
21-
from {
22-
transform: rotate(0deg);
23-
}
24-
to {
25-
transform: rotate(360deg);
26-
}
27-
}
28-
29-
@media (prefers-reduced-motion: no-preference) {
30-
a:nth-of-type(2) .logo {
31-
animation: logo-spin infinite 20s linear;
32-
}
33-
}
34-
35-
.card {
36-
padding: 2em;
37-
}
38-
39-
.read-the-docs {
40-
color: #888;
41-
}
1+
.App{
2+
width: 400px;
3+
height: 400px;
4+
display: flex;
5+
align-items: center;
6+
justify-content: center;
7+
background-color: rgb(96, 54, 0);
8+
border-radius: 12px;
9+
user-select: none;
10+
}
11+
.y-container{
12+
display: flex;
13+
flex-direction: column;
14+
align-items: center;
15+
justify-content: center;
16+
}
17+
.title{
18+
font-size: 36px;
19+
}
20+
.ans{
21+
width: 100px;
22+
height: 100px;
23+
display: flex;
24+
align-items: center;
25+
justify-content: center;
26+
background-color: white;
27+
color: black;
28+
font-size: 27px;
29+
border-radius: 50%;
30+
}
31+
.ans:hover{
32+
background-color: rgb(231, 231, 231);
33+
}

‎REACT_RECAP/practice-one/src/App.jsx

Lines changed: 3 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,12 @@
1-
import {useState} from 'react'
2-
import reactLogo from './assets/react.svg'
1+
import React from 'react'
2+
import YesNo from './YesNo'
33
import './App.css'
44

55
function App() {
6-
const [count, setCount] = useState(0)
76

87
return (
98
<div className="App">
10-
<div>
11-
<a href="https://vitejs.dev" target="_blank">
12-
<img src="/vite.svg" className="logo" alt="Vite logo" />
13-
</a>
14-
<a href="https://reactjs.org" target="_blank">
15-
<img src={reactLogo} className="logo react" alt="React logo" />
16-
</a>
17-
</div>
18-
<h1>Vite + React</h1>
19-
<div className="card">
20-
<button onClick={() => setCount((count) => count + 1)}>
21-
count is {count}
22-
</button>
23-
<p>
24-
Edit <code>src/App.jsx</code> and save to test HMR
25-
</p>
26-
</div>
27-
<p className="read-the-docs">
28-
Click on the Vite and React logos to learn more
29-
</p>
9+
<YesNo/>
3010
</div>
3111
)
3212
}

‎REACT_RECAP/practice-one/src/YesNo.jsx

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import React from "react";
2+
3+
export default function YesNo() {
4+
const [answer, setAnswer] = React.useState(true);
5+
function handleClick() {
6+
// setAnswer(false)
7+
setAnswer((prevState) => {
8+
return prevState === true ? false : true;
9+
});
10+
}
11+
/*
12+
Initial State: answer = true -- "Yes"
13+
Runtime 1: answer = true prev = true ==> false -- "No"
14+
Runtime 2: answer = false prev = false ==> true -- "Yes"
15+
*/
16+
return (
17+
<div className="y-container">
18+
<h1 className="title">React with Scrimba</h1>
19+
<div onClick={handleClick} className="ans">
20+
{answer ? "Yes" : "No"}
21+
</div>
22+
</div>
23+
);
24+
}

‎REACT_RECAP/practice-two/src/App.css

Lines changed: 12 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,13 @@
1-
#root {
2-
max-width: 1280px;
3-
margin: 0 auto;
4-
padding: 2rem;
5-
text-align: center;
6-
}
7-
8-
.logo {
9-
height: 6em;
10-
padding: 1.5em;
11-
will-change: filter;
12-
}
13-
.logo:hover {
14-
filter: drop-shadow(0 0 2em #646cffaa);
15-
}
16-
.logo.react:hover {
17-
filter: drop-shadow(0 0 2em #61dafbaa);
18-
}
19-
20-
@keyframes logo-spin {
21-
from {
22-
transform: rotate(0deg);
23-
}
24-
to {
25-
transform: rotate(360deg);
26-
}
27-
}
28-
29-
@media (prefers-reduced-motion: no-preference) {
30-
a:nth-of-type(2) .logo {
31-
animation: logo-spin infinite 20s linear;
32-
}
33-
}
34-
35-
.card {
36-
padding: 2em;
37-
}
38-
39-
.read-the-docs {
40-
color: #888;
1+
.btn{
2+
background-color: white;
3+
margin: 40px;
4+
color: black;
5+
}
6+
.App{
7+
display: flex;
8+
flex-direction: column;
9+
align-items: center;
10+
width: 450px;
11+
height: 500px;
12+
padding: 40px;
4113
}

‎REACT_RECAP/practice-two/src/App.jsx

Lines changed: 15 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,23 @@
1-
import { useState } from 'react'
2-
import reactLogo from './assets/react.svg'
1+
import React from 'react'
32
import './App.css'
43

54
function App() {
6-
const [count, setCount] = useState(0)
7-
5+
6+
const [item, setItem] = React.useState(["Item 1,", " Item 2,"])
7+
function addItem() {
8+
setItem(
9+
prevItem => [...prevItem, ` Item ${prevItem.length + 1}, `] // here i am using spread operater
10+
)
11+
}
12+
function saveitem() {
13+
document.getElementById("sv").textContent = item
14+
}
815
return (
916
<div className="App">
10-
<div>
11-
<a href="https://vitejs.dev" target="_blank">
12-
<img src="/vite.svg" className="logo" alt="Vite logo" />
13-
</a>
14-
<a href="https://reactjs.org" target="_blank">
15-
<img src={reactLogo} className="logo react" alt="React logo" />
16-
</a>
17-
</div>
18-
<h1>Vite + React</h1>
19-
<div className="card">
20-
<button onClick={() => setCount((count) => count + 1)}>
21-
count is {count}
22-
</button>
23-
<p>
24-
Edit <code>src/App.jsx</code> and save to test HMR
25-
</p>
26-
</div>
27-
<p className="read-the-docs">
28-
Click on the Vite and React logos to learn more
29-
</p>
17+
<button onClick={addItem} className="btn" >Add Item</button>
18+
<b id="in">{item}</b>
19+
<button onClick={saveitem} className="btn">Save</button>
20+
<p id='sv'></p>
3021
</div>
3122
)
3223
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /