Skip to content

Chapter3/forum #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
CryptoZent wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Chapter3/forum #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d47264f
Built the structure
CryptoZent Apr 26, 2025
b445de4
Finishd
CryptoZent Apr 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 7 additions & 17 deletions src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,13 @@
import logo from './logo.svg';
import './App.css';
import React from "react";
import { comments } from "./js/commentData";
import Card from "./components/Card"

function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
<div>
{comments.map((comment, index) => (
<Card key={index} commentObject={comment} />
))}
</div>
);
}
Expand Down
7 changes: 7 additions & 0 deletions src/components/Body.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import React from 'react';

function Body(props) {
return <p>{props.comment}</p>;
}

export default Body;
14 changes: 14 additions & 0 deletions src/components/Card.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import React from "react";
import Body from "./Body";
import Header from "./Header";

function Card(props) {
return (
<div>
<Header profileImg={props.commentObject.profileImg} username={props.commentObject.username} />
<Body comment={props.commentObject.comment} />
</div>
);
}

export default Card;
12 changes: 12 additions & 0 deletions src/components/Header.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import React from 'react';

function Header(props) {
return (
<div>
<img src={props.profileImg} />
<h1>{props.username}</h1>
</div>
);
}

export default Header;
18 changes: 18 additions & 0 deletions src/css/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
img {
border-radius: 50px;
width: 50px;
height: 50px;
float: left;
margin-right: 10px;
}

h1 {
display: inline-block;
vertical-align: middle;
line-height: 50px;
margin: 0;
}

p {
margin-left: 70px;
}
1 change: 1 addition & 0 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import './css/styles.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

Expand Down
17 changes: 17 additions & 0 deletions src/js/commentData.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
export const comments = [
{
profileImg: 'https://images.unsplash.com/photo-1609992556706-14a7056ea745?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1287&q=80',
username: 'ScrungeCat',
comment: 'My favorite types of cats are slightly weird looking ones!'
},
{
profileImg: 'https://images.unsplash.com/photo-1615751072497-5f5169febe17?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1335&q=80',
username: 'ChewToy',
comment: 'I don\'t like cats at all.'
},
{
profileImg: 'https://images.unsplash.com/photo-1563482776068-4dac10f9373d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
username: 'BuryHeadInSand',
comment: 'Wild ostriches make the best pets.'
}
]