From 3af1ebff8f7e59c42389de05824a4383f9258087 Mon Sep 17 00:00:00 2001 From: "ramazan.alp" Date: Sun, 24 Oct 2021 16:25:54 +0100 Subject: [PATCH] Senior Frontend Engineer - Student Beans --- public/css/styles.css | 176 +++++++++++++++++++++++++++++++ src/components/comments/index.js | 40 ++++++- src/components/event/elements.js | 22 ++-- src/components/event/index.js | 15 ++- src/data.js | 4 + webpack.config.js | 1 + 6 files changed, 243 insertions(+), 15 deletions(-) diff --git a/public/css/styles.css b/public/css/styles.css index c410bf2..c6e45bb 100644 --- a/public/css/styles.css +++ b/public/css/styles.css @@ -1,3 +1,179 @@ body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + background-color:#EAEFF1 } + + +.event{ + margin-right: 4em; +} + +.event__title { + display: block; + background-color: #D3D3D3; + /* box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); */ + border-radius: 0.1em; + padding:0.5rem; +} + +hr{ + height:0.2px; + background-color:#BEB9B7; + opacity: 0.10; + margin-left:8px; + margin-right:8px; +} + +.card { + border-radius: 0.2em; + box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); + transition: 0.3s; + width: 28rem; +} + +.container { + max-width: 900px; + margin:0 auto; + margin-top: 10vh; +} + +.event__description{ + padding-left:0.5rem; + padding-right:0.5rem; + margin-bottom: 3rem; +} +.event__funding{ + padding-left:0.5rem; + padding-right:0.5rem; +} + +.event__details{ + padding-left:0.5rem; + padding-right:0.5rem; +} + +.event__funding__raised{ + font-size:2.4rem; + font-weight: 700; +} + +.event__funding__totals{ + display: flex; + flex-direction: column; + color: darkgreen; +} + +.event__progress__total{ + color: darkgreen; + display: flex; + justify-content:center; + align-items: center; + margin-bottom: auto; + font-weight: 500; +} + +.event__progress{ + width: 100%; + height:1em; + background-color:lightgray; + margin-bottom: 1em; +} + +.event__progress_meter{ + background-color:green; + width: 100%; + height:1em; +} + +.card-footer{ + padding-bottom: 2rem; + font-size: small; +} + +.event__details{ + display: flex; + justify-content: space-around; +} + +.event__details strong{ + text-transform: uppercase; +} + +.event__details__block{ + display: block; + background-color: #D3D3D3; + padding:0.5rem; + margin-left: 8px; + margin-right: 8px; +} + +.comments{ + width:24em; + margin: 1em; +} + +.message{ + display: flex; + flex-direction: column; + padding-left: 4px; +} + + +.comment-box { + background-color: lightgray; + position: relative; + color: black; + margin-bottom:3em; + display: flex; + align-items: center; +} + +.comment-box::after { + content: ""; + position: absolute; + height: 25px; + width: 25px; + bottom: -25px; + left: 0%; + background-color: lightgray; + clip-path: polygon(0 0, 100% 0, 0 100%); +} + +.comment-header{ + margin-top: 2px; + font-size: 12px; + font-weight: 600; +} + +.comment-header span{ + font-weight: 200; + font-size: 10px; +} + +.child-comment{ + margin-left:2em; + margin-top: -2em; +} + +.row{ + display: flex; +} + +img { + width: 15%; + height: 15%; + margin:0.5em; +} + + + +@media only screen and (max-width: 600px) { + .row {display: flex;flex-direction: column} + .card{width:24rem} + .comments{padding-right: 8px;} + .event{margin-right: 0;} +} + + + + diff --git a/src/components/comments/index.js b/src/components/comments/index.js index 63b7db8..649bfe4 100644 --- a/src/components/comments/index.js +++ b/src/components/comments/index.js @@ -8,7 +8,45 @@ export default class { createFactories() { } + + render() { - return "comments"; + + const createNewCommentBox = (data,isChild)=>{ + let str=""; + if(isChild){ + str+="
" + } + + str+= `
+ +
+ ${data.name} + donated £${data.donation} + + ${data.comment} +
+
`; + + if(isChild){ + str+="
" + } + return str; + }; + + var str = ""; + for(let i = 0;i 0){ + for(let j= 0;j + ${str} + `; } } diff --git a/src/components/event/elements.js b/src/components/event/elements.js index fdf6c6d..b3ff26d 100644 --- a/src/components/event/elements.js +++ b/src/components/event/elements.js @@ -9,7 +9,7 @@ export class Title { render() { return ` -

${this.title}

+

${this.title}

` } } @@ -43,9 +43,9 @@ export class Funding { const percentage = this.funding.raised / this.funding.target * 100; return ` +

${percentage}% of total raised

-

${percentage}% of total raised

- +
`; } @@ -54,7 +54,7 @@ export class Funding { return `

- £${this.funding.raised/100} + £${this.funding.raised/100} raised of £${this.funding.target/100} target.

${this.renderProgress()} @@ -75,12 +75,14 @@ export class Details { render() { return ` -
-
- Date: ${this.date} -
-
- Location: ${this.location} +
+
+
+ Date: ${this.date} +
+
+ Location: ${this.location} +
` diff --git a/src/components/event/index.js b/src/components/event/index.js index 97d35fa..9d0df5a 100644 --- a/src/components/event/index.js +++ b/src/components/event/index.js @@ -23,10 +23,17 @@ export default class { render() { return `
- ${this.title.render()} - ${this.description.render()} - ${this.funding.render()} - ${this.details.render()} +
+ ${this.title.render()} + ${this.description.render()} +
+
+ ${this.funding.render()} +
+
+ ${this.details.render()} +
+
`; } diff --git a/src/data.js b/src/data.js index 1b837fc..d079ae0 100644 --- a/src/data.js +++ b/src/data.js @@ -14,11 +14,13 @@ const data = { name: "Person A", donation: 5000, comment: "Good luck with your thing!", + img:'../images/faces/128-11.jpg', children: [ { name: "Person D", donation: 0, comment: "Thank you", + img:'../images/faces/128-9.jpg', children: [] } ] @@ -27,11 +29,13 @@ const data = { name: "Person B", donation: 1000, comment: "Good luck. Well done! A great achievement for a great cause.", + img:'../images/faces/128-12.jpg', children: [] }, { name: "Person C", donation: 4000, + img:'../images/faces/128-10.jpg', comment: "Hope all goes well and you successfully achieve your goal. A cause close to our hearts.", children: [] } diff --git a/webpack.config.js b/webpack.config.js index bc2e447..29e35fa 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -23,6 +23,7 @@ module.exports = { }, devServer: { contentBase: "./public", + port: 3000 }, plugins: [ new webpack.NoErrorsPlugin()