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 c5cc764

Browse files
static built of comment sections
1 parent 7e486e5 commit c5cc764

Some content is hidden

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

43 files changed

+680
-12
lines changed

‎public/favicon.png‎

20.7 KB
Loading[フレーム]

‎public/index.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,13 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8" />
5-
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
5+
<link rel="icon" href="%PUBLIC_URL%/favicon.png" />
66
<meta name="viewport" content="width=device-width, initial-scale=1" />
77
<meta name="theme-color" content="#000000" />
88
<meta
99
name="description"
1010
content="Web site created using create-react-app"
1111
/>
12-
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
1312
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css">
1413
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
1514
<title>MasterFrontend</title>

‎src/App.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ import CoffeePlan from './pages/intermediate/CoffeeRoasters/CoffeePlan';
3737
import ResultsSummary from './components/newbie/resultsSummary/ResultsSummary';
3838
import ProfileCard from './components/newbie/ProfileCard/ProfileCard';
3939
import StatsPreview from './components/newbie/StatsPreview/StatsPreview';
40+
import CommentSection from './components/intermediate/CommentSection/CommentSection';
4041

4142

4243

@@ -76,6 +77,7 @@ AOS.init({
7677
<Route path='/components/results-summary' element={<ResultsSummary></ResultsSummary>}/>
7778
<Route path='/components/profile-card' element={<ProfileCard></ProfileCard>}/>
7879
<Route path='/components/stats-preview' element={<StatsPreview></StatsPreview>}/>
80+
<Route path='/components/comment-section' element={<CommentSection></CommentSection>}/>
7981

8082
{/* Pages */}
8183
<Route path='/pages' element={<Pages></Pages>}/>

‎src/components/data.js‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -170,4 +170,49 @@ export const componentCardData = [
170170
type: "component",
171171
link:"/components/testimonials",
172172
},
173+
{
174+
id:"20",
175+
title: "Profile card component",
176+
desc: "A simple animated profile card with background decoration",
177+
img: "https://res.cloudinary.com/dz209s6jk/image/upload/f_auto,q_auto,w_475/Challenges/dia0o9uigiiz4gebiqps.jpg",
178+
category:"newbie",
179+
type: "component",
180+
link:"/components/profile-card",
181+
},
182+
{
183+
id:"21",
184+
title: "Stats preview card component",
185+
desc: "Smoothly Animated Card component with color filter using pure CSS",
186+
img: "https://res.cloudinary.com/dz209s6jk/image/upload/f_auto,q_auto,w_475/Challenges/sucvvhutd4codsxpzvw7.jpg",
187+
category:"newbie",
188+
type: "component",
189+
link:"/components/stats-preview",
190+
},
191+
{
192+
id:"22",
193+
title: "Notifications page",
194+
desc: "Smoothly Animated Notification list, fetching data dynamically from JSON, which is hosted online. Images are hosted on Cloudinary.",
195+
img: "https://res.cloudinary.com/dz209s6jk/image/upload/f_auto,q_auto,w_700/Challenges/hkmsdxxteijprjdzskhg.jpg",
196+
category:"junior",
197+
type: "page",
198+
link:"https://notifications-page-fm-challenge.netlify.app/",
199+
},
200+
{
201+
id:"23",
202+
title: "Interactive rating component",
203+
desc: "Animated interactive rating component with a loader animation using framer-motion.",
204+
img: "https://res.cloudinary.com/dz209s6jk/image/upload/f_auto,q_auto,w_700/Challenges/dm3s8oqtz0mwcaygqjhy.jpg",
205+
category:"newbie",
206+
type: "page",
207+
link:"https://mini-rating-component.netlify.app/",
208+
},
209+
{
210+
id:"24",
211+
title: "Interactive comments section",
212+
desc: "Comment Section",
213+
img: "https://res.cloudinary.com/dz209s6jk/image/upload/f_auto,q_auto,w_700/Challenges/v9wskl4mnbt5gbxm4o2r.jpg",
214+
category:"intermediate",
215+
type: "component",
216+
link:"/components/comment-section",
217+
},
173218
]
Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;700&display=swap");
2+
3+
.comment-section-container {
4+
min-height: 100vh;
5+
font-size: calc((16 / 16) * 1rem);
6+
padding: 1rem;
7+
font-family: "Rubik", sans-serif;
8+
9+
--comment-section-transition: all 0.4s ease;
10+
11+
/* ### Primary */
12+
13+
--comment-section-Moderate-blue: hsl(238, 40%, 52%);
14+
--comment-section-Soft-Red: hsl(358, 79%, 66%);
15+
--comment-section-Light-grayish-blue: hsl(239, 57%, 85%);
16+
--comment-section-Pale-red: hsl(357, 100%, 86%);
17+
18+
/* ### Neutral */
19+
20+
--comment-section-Dark-blue: hsl(212, 24%, 26%);
21+
--comment-section-Grayish-Blue: hsl(211, 10%, 45%);
22+
--comment-section-Light-gray: hsl(223, 19%, 93%);
23+
--comment-section-Very-light-gray: hsl(228, 33%, 97%);
24+
--comment-section-White: hsl(0, 0%, 100%);
25+
26+
background-color: var(--comment-section-Very-light-gray);
27+
color: var(--comment-section-Grayish-Blue);
28+
}
29+
30+
.comment-section-main {
31+
/* border: 1px solid red; */
32+
width: 100%;
33+
}
34+
35+
.comment-section-section {
36+
max-width: calc((730 / 16) * 1rem);
37+
margin: 0 auto;
38+
}
Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React from 'react'
2+
import './CommentSection.css'
3+
import AddComment from './components/AddComment/AddComment'
4+
import Comments from './components/Comments/Comments'
5+
6+
const CommentSection = () => {
7+
return (
8+
<div className='comment-section-container df'>
9+
<main className="comment-section-main">
10+
<h1 className='sr-only'>Comments Page</h1>
11+
<section className='comment-section-section'>
12+
<Comments></Comments>
13+
<AddComment/>
14+
</section>
15+
</main>
16+
</div>
17+
)
18+
}
19+
20+
export default CommentSection
Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# Avoid accidental upload of the Sketch and Figma design files
2+
#####################################################
3+
## Please do not remove lines 5 and 6 - thanks! 🙂 ##
4+
#####################################################
5+
*.sketch
6+
*.fig
7+
8+
# Avoid accidental XD upload if you convert the design file
9+
###############################################
10+
## Please do not remove line 12 - thanks! 🙂 ##
11+
###############################################
12+
*.xd
13+
14+
# Avoid your project being littered with annoying .DS_Store files!
15+
.DS_Store
16+
.prettierignore
Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
## The challenge
2+
3+
We provide the data in a local `data.json` file, so use that to populate the content on the first load. If you want to take it up a notch, feel free to build this as a full-stack CRUD application!
4+
5+
Your users should be able to:
6+
7+
- View the optimal layout for the app depending on their device's screen size
8+
- See hover states for all interactive elements on the page
9+
- Create, Read, Update, and Delete comments and replies
10+
- Upvote and downvote comments
11+
- **Bonus**: If you're building a purely front-end project, use `localStorage` to save the current state in the browser that persists when the browser is refreshed.
12+
- **Bonus**: Instead of using the `createdAt` strings from the `data.json` file, try using timestamps and dynamically track the time since the comment or reply was posted.
Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
{
2+
"currentUser": {
3+
"image": {
4+
"png": "./images/avatars/image-juliusomo.png",
5+
"webp": "./images/avatars/image-juliusomo.webp"
6+
},
7+
"username": "juliusomo"
8+
},
9+
"comments": [
10+
{
11+
"id": 1,
12+
"content": "Impressive! Though it seems the drag feature could be improved. But overall it looks incredible. You've nailed the design and the responsiveness at various breakpoints works really well.",
13+
"createdAt": "1 month ago",
14+
"score": 12,
15+
"user": {
16+
"image": {
17+
"png": "./images/avatars/image-amyrobson.png",
18+
"webp": "./images/avatars/image-amyrobson.webp"
19+
},
20+
"username": "amyrobson"
21+
},
22+
"replies": []
23+
},
24+
{
25+
"id": 2,
26+
"content": "Woah, your project looks awesome! How long have you been coding for? I'm still new, but think I want to dive into React as well soon. Perhaps you can give me an insight on where I can learn React? Thanks!",
27+
"createdAt": "2 weeks ago",
28+
"score": 5,
29+
"user": {
30+
"image": {
31+
"png": "./images/avatars/image-maxblagun.png",
32+
"webp": "./images/avatars/image-maxblagun.webp"
33+
},
34+
"username": "maxblagun"
35+
},
36+
"replies": [
37+
{
38+
"id": 3,
39+
"content": "If you're still new, I'd recommend focusing on the fundamentals of HTML, CSS, and JS before considering React. It's very tempting to jump ahead but lay a solid foundation first.",
40+
"createdAt": "1 week ago",
41+
"score": 4,
42+
"replyingTo": "maxblagun",
43+
"user": {
44+
"image": {
45+
"png": "./images/avatars/image-ramsesmiron.png",
46+
"webp": "./images/avatars/image-ramsesmiron.webp"
47+
},
48+
"username": "ramsesmiron"
49+
}
50+
},
51+
{
52+
"id": 4,
53+
"content": "I couldn't agree more with this. Everything moves so fast and it always seems like everyone knows the newest library/framework. But the fundamentals are what stay constant.",
54+
"createdAt": "2 days ago",
55+
"score": 2,
56+
"replyingTo": "ramsesmiron",
57+
"user": {
58+
"image": {
59+
"png": "./images/avatars/image-juliusomo.png",
60+
"webp": "./images/avatars/image-juliusomo.webp"
61+
},
62+
"username": "juliusomo"
63+
}
64+
}
65+
]
66+
}
67+
]
68+
}
95 KB
Loading[フレーム]

0 commit comments

Comments
(0)

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