Nam Hyunmyung (Min) - Front-end technical test

public/css/styles.css

@@ -1,3 +1,185 @@
+* {
+  box-sizing: border-box;
+}
+
 body {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  background-color: #f8f8f8;
+  margin: 0;
+  padding: 0;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.container {
+  padding: 80px 10%;
+  margin: 0 auto;
+}
+
+.row {
+  display: flex;
+  flex-direction: row; 
+  justify-content: space-between;
+}
+
+.column {
+  width: 48%;
+}
+
+.event {
+  background-color: #ffffff;
+  border: 1px solid #e1e1e1;
+  border-radius: 5px;
+}
+
+.event__title {
+  font-size: 1rem;
+  background-color: #f5f5f5;
+  border-bottom: 1px solid #e1e1e1;
+  border-radius: 5px;
+  margin: 0;
+  padding: 10px 20px;
+}
+
+.event__description {
+  padding: 10px 20px;
+}
+
+.event__funding {
+  border-top: 1px solid #e1e1e1;
+  padding: 10px 20px;
+}
+
+.event__funding__totals {
+  color: #245626;
+}
+
+.event__funding__raised {
+  display: block;
+  font-size: 32px;
+  font-weight: 700;
+}
+
+.event__progress {
+  position: relative;
+  background-color: #f5f5f5;
+  border: 1px solid #e1e1e1;
+  height: 20px;
+}
+
+.event__progress__meter {
+  display: block;
+  position: absolute;
+  top: -1px;
+  left: -1px;
+  background-color: #3cbf42;
+  height: 20px;
+}
+
+.event__details {
+  display: flex;
+  align-items: center;
+  background-color: #f5f5f5;
+  border: 1px solid #e1e1e1;
+  margin: 10px 20px 20px;
+  padding: 10px 20px;
+  font-size: 0.8rem;
+}
+
+.event__details > div {
+  width: 48%;
+}
+
+.event__details strong {
+  text-transform: uppercase;
+}
+
+.comments {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+
+.comment {
+  position: relative;
+  display: flex;
+  background-color: #f5f5f5;
+  border: 1px solid #e1e1e1;
+  border-radius: 5px 5px 5px 0;
+  padding: 20px 15px;
+  width: 100%;
+  margin-bottom: 40px;
+}
+
+.comment:before {
+  border-top: 20px solid #e1e1e1; 
+  border-right: 30px solid transparent; 
+  border-bottom: 10px solid transparent; 
+  content: ""; 
+  position: absolute;
+  bottom: -30px;
+  left: -1px; 
+}
+
+.comment:after { 
+  border-top: 18px solid #f5f5f5; 
+  border-right: 27px solid transparent; 
+  border-bottom: 10px solid transparent; 
+  content: ""; 
+  position: absolute;
+  bottom: -28px;
+  left: 0;  
+ }
+
+.child {
+  background-color: #ffffff;
+  width: 85%;
+  margin-top: -25px;
+}
+
+.child:after { 
+  border-top: 18px solid #ffffff;  
+ }
+
+.comment__image {
+  width: 80px;
+  height: 80px;
+}
+
+.comment__body {
+  margin-left: 15px;
+}
+
+.comment__header {
+  font-size: 0.9rem;
+}
+
+.comment__content {
+  margin-top: 5px;
+}
+
+@media only screen and (max-width: 768px) {
+  .row {
+    display: flex;
+    flex-direction: column; 
+  }
+
+  .column {
+    width: 100%;
+  }
+
+  .column:first-child {
+    margin-bottom: 40px;
+  }
 }
+

src/components/comments/elements.js

@@ -0,0 +1,82 @@
+/**
+ * Image Component
+ */
+
+export class Image {
+  render() {
+    let randomNumber = Math.floor(Math.random() * 20) + 1;
+    return `
+      <img class="comment__image" alt="Profile image of comment" src="./images/faces/128-${randomNumber}.jpg" />
+    `;
+  }
+}
+
+/**
+ * Header Component
+ */
+
+export class Header {
+  constructor(name, donation, isChild) {
+    this.name = name;
+    this.donation = donation;
+    this.isChild = isChild;
+  }
+
+  render() {
+    return `
+      <div class="comment__header">
+        <strong>${this.name}</strong>
+        ${!this.isChild ? `<span>donated £${this.donation/100}</span>`:''}
+      </div>
+    `;
+  }
+}
+
+/**
+ * Content Component
+ */
+
+export class Content {
+  constructor(content) {
+    this.content = content;
+  }
+
+  render() {
+    return `
+      <p class="comment__content">
+        ${this.content}
+      </p>
+    `;
+  }
+}
+
+/**
+ * Comment Component
+ */
+
+export class Comment {
+  constructor(comment, isChild = false) {
+    this.comment = comment;
+    this.isChild = isChild;
+    this.createFactories();
+  }
+
+  createFactories() {
+    this.image = new Image();
+    this.header = new Header(this.comment.name, this.comment.donation, this.isChild);
+    this.content = new Content(this.comment.comment);
+  }
+
+  render() {
+    return `
+      <div class="comment ${this.isChild ? 'child' : ''}">
+        ${this.image.render()}
+        <div class="comment__body">
+          ${this.header.render()}
+          ${this.content.render()}
+        </div>
+      </div>
+    `;
+  }
+}
+

src/components/comments/index.js

@@ -1,14 +1,37 @@
+//  -- comments
+//  -- -- comment
+//  -- -- -- image
+//  -- -- -- header
+//  -- -- -- content
+
+import {Comment} from './elements.js';
+
 export default class {
   constructor(data) {
     this.data = data;
-    this.createFactories();
     this.render();
   }
 
-  createFactories() {
+  createComments() {
+    let comments = '';
+
+    this.data.comments.forEach(comment => {
+      comments += new Comment(comment).render();
+      if (comment.children.length) {
+        comment.children.forEach(child => {
+          comments += new Comment(child, true).render();
+        })
+      }
+    });
+
+    return comments;
   }
 
   render() {
-    return "comments";
+    return `
+      <div class="comments">
+       ${this.createComments()}
+      </div>
+    `;
   }
-}
+}

src/components/event/elements.js

@@ -10,7 +10,7 @@ export class Title {
   render() {
     return `
       <h1 class="event__title">${this.title}</h1>
-    `
+    `;
   }
 }
 
@@ -26,7 +26,7 @@ export class Description {
   render() {
     return `
       <div class="event__description">${this.description}</div>
-    `
+    `;
   }
 }
 
@@ -44,8 +44,8 @@ export class Funding {
 
     return `
       <div class="event__progress">
-        <p class="event__progress__total">${percentage}% of total raised</p>
-        <b class="event__progress_meter" style="width: ${percentage}%"></b>
+        <p class="event__progress__total sr-only">${percentage}% of total raised</p>
+        <div class="event__progress__meter" style="width: ${percentage}%"></div>
       </div>
     `;
   }
@@ -54,12 +54,12 @@ 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).toFixed(2)} raised</span>
           of £${this.funding.target/100} target.
         </p>
         ${this.renderProgress()}
       </div>
-    `
+    `;
   }
 }
 
@@ -83,6 +83,6 @@ export class Details {
           <strong>Location:</strong> ${this.location}
         </div>
       </div>
-    `
+    `;
   }
 }

src/index.js

@@ -1,5 +1,5 @@
-import data     from './data.js';
-import Event    from './components/event';
+import data from './data.js';
+import Event from './components/event';
 import Comments from './components/comments';
 
 /**
@@ -15,7 +15,7 @@ class App {
   }
 
   createFactories() {
-    this.event    = new Event(data);
+    this.event = new Event(data);
     this.comments = new Comments(data);
   }