Skip to content

Commit 6560cee

Browse files
sanchit0496sanchit0496
committed
updating CSS and fixing bugs of app
1 parent dcb9dc7 commit 6560cee

File tree

49 files changed

+688
-631
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

49 files changed

+688
-631
lines changed

‎accordion/src/Component/Accordion/Accordion.css

+24-9
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,27 @@
1-
.componentContainer{
1+
.componentContainer {
22
width: 50%;
3-
margin: 50px auto 50px auto;
3+
margin: 20px auto;
4+
font-family: Arial, sans-serif;
45
}
5-
.accordionHeader{
6-
background-color: lightgrey;
6+
7+
.accordionContainer {
8+
border: 1px solid #ccc;
9+
margin-bottom: 10px;
10+
border-radius: 4px;
11+
}
12+
13+
.accordionHeader {
14+
background-color: #f1f1f1;
15+
cursor: pointer;
16+
padding: 10px;
17+
font-size: 14px;
18+
font-weight: bold;
19+
}
20+
21+
.accordionBody {
22+
padding: 10px;
23+
font-size: 12px;
24+
color: #333;
25+
border-top: 1px solid #ccc;
26+
background-color: #fff;
727
}
8-
.accordionContainer{
9-
border-radius: 5px;
10-
border: 2px solid grey;
11-
margin-bottom: 5px;
12-
}

‎accordion/src/Component/Accordion/Accordion.js

+41-38
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,50 @@
1-
import React from "react";
2-
import { useState } from "react";
3-
import './Accordion.css'
1+
import React, { useState } from "react";
2+
import './Accordion.css';
43

54
const Accordion = () => {
5+
const [clickedAccordion, setClickedAccordion] = useState(null);
66

7-
const [clickedAccordion, setClickedAccordion] = useState(null)
8-
97
const data = [
10-
{
11-
header: "Header 01",
12-
content: "Content 01",
13-
},
14-
{
15-
header: "Header 02",
16-
content: "Content 02",
17-
},
18-
{
19-
header: "Header 03",
20-
content: "Content 03",
21-
},
22-
{
23-
header: "Header 04",
24-
content: "Content 04",
25-
},
26-
];
8+
{
9+
header: "Header 01",
10+
content: "Content 01",
11+
},
12+
{
13+
header: "Header 02",
14+
content: "Content 02",
15+
},
16+
{
17+
header: "Header 03",
18+
content: "Content 03",
19+
},
20+
{
21+
header: "Header 04",
22+
content: "Content 04",
23+
},
24+
];
2725

28-
const handleClick = (i) => {
29-
console.log('index here', i)
30-
setClickedAccordion(i)
31-
}
26+
const handleHeaderClick = (index) => {
27+
// Toggle the accordion when the header is clicked
28+
setClickedAccordion(clickedAccordion === index ? null : index);
29+
};
3230

33-
return (
34-
<div className="componentContainer">
35-
{data.map((item, index) => {
36-
return (
37-
<div className="accordionContainer" onClick={() => handleClick(index)}>
38-
<div className="accordionHeader">{item.header}</div>
39-
{clickedAccordion === index && <div className="accordionBody">{item.content}</div>}
40-
</div>
41-
);
42-
})}
43-
</div>
44-
);
31+
return (
32+
<div className="componentContainer">
33+
{data.map((item, index) => (
34+
<div key={index} className="accordionContainer">
35+
<div
36+
className="accordionHeader"
37+
onClick={() => handleHeaderClick(index)}
38+
>
39+
{item.header}
40+
</div>
41+
{clickedAccordion === index && (
42+
<div className="accordionBody">{item.content}</div>
43+
)}
44+
</div>
45+
))}
46+
</div>
47+
);
4548
};
4649

4750
export default Accordion;

‎calculator/src/App.css

+47-10
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,55 @@
1-
.App {
1+
.calculator-container {
2+
display: inline-block;
3+
border: 2px solid #ccc;
4+
border-radius: 10px;
5+
padding: 20px;
6+
background-color: #f9f9f9;
7+
width: 250px;
28
text-align: center;
3-
padding: 50px
9+
font-family: Arial, sans-serif;
410
}
511

6-
.number-holder{
7-
display: grid;
8-
grid-template-columns: repeat(3,1fr);
12+
.calculator-input {
13+
width: 90%;
14+
padding: 10px;
15+
font-size: 18px;
16+
margin-bottom: 15px;
17+
border: 1px solid #ccc;
18+
border-radius: 5px;
19+
text-align: right;
20+
}
21+
22+
.result {
23+
font-size: 16px;
24+
margin-bottom: 15px;
925
}
1026

11-
.expression-holder{
27+
.buttons-container {
1228
display: grid;
13-
grid-template-columns: repeat(2,1fr);
29+
grid-template-columns: repeat(4, 1fr);
30+
gap: 10px;
31+
}
32+
33+
.calculator-button {
34+
padding: 10px 0;
35+
font-size: 16px;
36+
border: 1px solid #ccc;
37+
border-radius: 5px;
38+
background-color: #e6e6e6;
39+
cursor: pointer;
40+
transition: background-color 0.2s ease;
1441
}
1542

16-
.user-input-and-calc{
17-
18-
}
43+
.calculator-button:hover {
44+
background-color: #d4d4d4;
45+
}
46+
47+
.calculator-button.clear {
48+
grid-column: span 2;
49+
background-color: #ffcccc;
50+
}
51+
52+
.calculator-button.equal {
53+
grid-column: span 2;
54+
background-color: #ccffcc;
55+
}

‎calculator/src/App.js

+65-52
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,78 @@
1-
import logo from './logo.svg';
2-
import './App.css';
3-
import { useState } from 'react';
1+
import React, { useState } from "react";
2+
import "./App.css";
43

5-
function App() {
6-
const numbers= [1,2,3,4,5,6,7,8,9,0]
7-
const expressions = ['+', '-', '*', '%']
4+
const App = () => {
5+
const [input, setInput] = useState("");
6+
const [result, setResult] = useState("");
87

9-
const [userInput, setUserInput] = useState('')
10-
const [result, setResult] = useState(null)
11-
const [submitClicked, setSubmitClicked] = useState(false)
8+
const handleButtonClick = (value) => {
9+
setInput((prev) => prev + value);
10+
};
1211

13-
const handleClick = (input) => {
14-
setUserInput(prevInput => prevInput + input.toString());
15-
}
16-
console.log('userInput', userInput)
12+
const clearInput = () => {
13+
setInput("");
14+
setResult("");
15+
};
1716

17+
const calculateResult = () => {
18+
let num1 = "";
19+
let num2 = "";
20+
let operator = "";
1821

19-
const handleSubmit = () => {
20-
let value = eval(userInput)
21-
console.log('value', value)
22-
setResult(value)
23-
setSubmitClicked(true)
24-
}
22+
for (let i = 0; i < input.length; i++) {
23+
const char = input[i];
24+
if (["+", "-", "*", "/"].includes(char)) {
25+
operator = char;
26+
} else if (!operator) {
27+
num1 += char;
28+
} else {
29+
num2 += char;
30+
}
31+
}
2532

26-
const handleReset = () => {
27-
setResult(null)
28-
setSubmitClicked(false)
29-
setUserInput('')
30-
}
33+
num1 = parseFloat(num1);
34+
num2 = parseFloat(num2);
3135

32-
return (
33-
<div className="App">
34-
<div className='user-input-and-calc'>
35-
{submitClicked ? result : userInput}
36-
</div>
37-
38-
<div className='number-holder'>
39-
{
40-
numbers.map((item) => {
41-
return(
42-
<button onClick={() => handleClick(item)}>{item}</button>
43-
)
44-
})
45-
}
46-
</div>
36+
let calcResult = 0;
37+
if (operator === "+") calcResult = num1 + num2;
38+
if (operator === "-") calcResult = num1 - num2;
39+
if (operator === "*") calcResult = num1 * num2;
40+
if (operator === "/") calcResult = num2 !== 0 ? num1 / num2 : "Error";
41+
setResult("");
4742

48-
<div className='expression-holder'>
49-
{
50-
expressions.map((item) => {
51-
return(
52-
<button onClick={() => handleClick(item)}>{item}</button>
53-
)
54-
})
55-
}
56-
</div>
57-
58-
<button onClick={() => handleSubmit()}>Submit</button>
59-
<button onClick={() => handleReset()}>Reset</button>
43+
setResult(calcResult);
44+
};
6045

46+
return (
47+
<div className="calculator-container">
48+
<input
49+
type="text"
50+
value={input}
51+
readOnly
52+
className="calculator-input"
53+
/>
54+
<div className="result">Result: {result}</div>
55+
<div className="buttons-container">
56+
{[1, 2, 3, "+", 4, 5, 6, "-", 7, 8, 9, "*", 0, "/", "C", "="].map((btn) => (
57+
<button
58+
key={btn}
59+
onClick={
60+
btn === "C"
61+
? clearInput
62+
: btn === "="
63+
? calculateResult
64+
: () => handleButtonClick(btn.toString())
65+
}
66+
className={`calculator-button ${
67+
btn === "C" ? "clear" : btn === "=" ? "equal" : ""
68+
}`}
69+
>
70+
{btn}
71+
</button>
72+
))}
73+
</div>
6174
</div>
6275
);
63-
}
76+
};
6477

6578
export default App;

‎carousel/src/Components/Carousel/Carousel.css

+42-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,43 @@
1-
.componentContainer{
1+
.componentContainer {
22
display: flex;
3-
flex-direction: row;
4-
}
3+
justify-content: center;
4+
align-items: center;
5+
height: 100vh;
6+
background-color: #f9f9f9;
7+
}
8+
9+
.imageContainer {
10+
position: relative;
11+
width: 600px; /* Rectangle width */
12+
height: 400px; /* Rectangle height */
13+
text-align: center;
14+
background: #fff;
15+
border: 1px solid #ccc;
16+
border-radius: 8px;
17+
padding: 10px;
18+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
19+
}
20+
21+
.imageContainer img {
22+
width: 100%;
23+
height: 70%;
24+
object-fit: cover;
25+
border-radius: 8px;
26+
margin-bottom: 10px;
27+
}
28+
29+
.imageContainer button {
30+
padding: 8px 16px;
31+
font-size: 14px;
32+
color: #333;
33+
background: #e0e0e0;
34+
border: none;
35+
border-radius: 4px;
36+
cursor: pointer;
37+
margin: 0 5px;
38+
transition: background 0.3s;
39+
}
40+
41+
.imageContainer button:hover {
42+
background: #ccc;
43+
}

‎carousel/src/Components/Carousel/Carousel.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,10 @@ const Carousel = () => {
66
const [activeIndex, setActiveIndex] = useState(0);
77

88
const images = [
9-
"https://media.geeksforgeeks.org/wp-content/uploads/20230306120634/unnamed.jpg",
10-
"https://media.geeksforgeeks.org/wp-content/uploads/20230306120634/unnamed.jpg",
11-
"https://media.geeksforgeeks.org/wp-content/uploads/20230306120634/unnamed.jpg",
12-
"https://media.geeksforgeeks.org/wp-content/uploads/20230306120634/unnamed.jpg",
9+
"https://images.pexels.com/photos/417173/pexels-photo-417173.jpeg",
10+
"https://images.pexels.com/photos/1054218/pexels-photo-1054218.jpeg",
11+
"https://images.pexels.com/photos/572897/pexels-photo-572897.jpeg",
12+
"https://images.pexels.com/photos/270756/pexels-photo-270756.jpeg",
1313
];
1414

1515
const handlePrevClick = () => {

0 commit comments

Comments
 (0)