Senior Frontend Engineer - Student Beans

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;}
+}
+
+
+
+

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+="<div class='child-comment'>"
+      }
+
+      str+= `<div class="comment-box">
+              <img src="${data.img}"/>
+              <div class="message">
+                <span class="comment-header">${data.name}
+                  <span> donated £${data.donation}</span>
+                </span>
+                <span>${data.comment}</span>
+              </div>
+            </div>`;
+
+      if(isChild){
+        str+="</div>"
+      } 
+      return str;
+    };
+
+    var str = "";
+    for(let i = 0;i<this.data.comments.length;i++){
+      str+= createNewCommentBox(this.data.comments[i],false);
+      if(this.data.comments[i].children && this.data.comments[i].children.length > 0){
+        for(let j= 0;j<this.data.comments[i].children.length;j++){
+          str+= createNewCommentBox(this.data.comments[i].children[j],true);
+        }
+      }
+
+    }
+    console.log(str);
+    return `<div class="comments">
+             ${str}
+             </div>`;
   }
 }

src/components/event/elements.js

@@ -9,7 +9,7 @@ export class Title {
 
   render() {
     return `
-      <h1 class="event__title">${this.title}</h1>
+        <h3 class="event__title">${this.title}</h3>
     `
   }
 }
@@ -43,9 +43,9 @@ export class Funding {
     const percentage = this.funding.raised / this.funding.target * 100;
 
     return `
+      <p class="event__progress__total">${percentage}% of total raised</p>
       <div class="event__progress">
-        <p class="event__progress__total">${percentage}% of total raised</p>
-        <b class="event__progress_meter" style="width: ${percentage}%"></b>
+        <div class="event__progress_meter" style="width: ${percentage}%"></div>
       </div>
     `;
   }
@@ -54,7 +54,7 @@ export class Funding {
     return `
       <div class="event__funding">
         <p class="event__funding__totals">
-          <span class="event__funding__raised">£${this.funding.raised/100}</span>
+          <span class="event__funding__raised">£${this.funding.raised/100} raised</span>
           of £${this.funding.target/100} target.
         </p>
         ${this.renderProgress()}
@@ -75,12 +75,14 @@ export class Details {
 
   render() {
     return `
-      <div class="event__details">
-        <div class="event__details__date">
-          <strong>Date:</strong> ${this.date}
-        </div>
-        <div class="event__details__location">
-          <strong>Location:</strong> ${this.location}
+      <div class="event__details__block">
+        <div class="event__details">
+          <div class="event__details__date">
+            <strong>Date:</strong> ${this.date}
+          </div>
+          <div class="event__details__location">
+            <strong>Location:</strong> ${this.location}
+          </div>
         </div>
       </div>
     `

src/components/event/index.js

@@ -23,10 +23,17 @@ export default class {
   render() {
     return `
       <div class="event">
-        ${this.title.render()}
-        ${this.description.render()}
-        ${this.funding.render()}
-        ${this.details.render()}
+        <div class="card">
+          ${this.title.render()}
+          ${this.description.render()}
+          <hr>
+          <div class="funding">
+            ${this.funding.render()}
+          </div>
+          <div class="card-footer">
+           ${this.details.render()}
+          </div>
+        </div>
       </div>
     `;
   }

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: []
     }

webpack.config.js

@@ -23,6 +23,7 @@ module.exports = {
     },
     devServer: {
         contentBase: "./public",
+        port: 3000
     },
     plugins: [
       new webpack.NoErrorsPlugin()