Skip to content

George Hamza - TBG Frontender Task #12

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
ghamza1995-2 wants to merge 3 commits into
base: master
Choose a base branch
from
Open

George Hamza - TBG Frontender Task #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ec014af
TBG Frontender Task pull request
ghamza1995-2 Jul 15, 2021
38770ee
update to comment index generation
ghamza1995-2 Jul 15, 2021
23361c8
update to syntax
ghamza1995-2 Jul 15, 2021
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
3,884 changes: 3,884 additions & 0 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

3 changes: 1 addition & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,7 @@
"url": "https://github.com/thebeansgroup/frontender-task_vanilla"
},
"author": "sam",
"dependencies": {
},
"dependencies": {},
"devDependencies": {
"babel-core": "^5.5.8",
"babel-loader": "^5.1.4",
Expand Down
126 changes: 126 additions & 0 deletions public/css/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,129 @@
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: #f8f8f8;
font-size: 1em;
}

.container {
width: 75%;
margin: 0 auto;
}

.row {
display: flex;
justify-content: space-around;
}

.column {
width: 45%;
}

.event {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
}

.event h3 {
margin: 0;
background-color: #f5f5f5;
padding: 12px;
border-bottom: 1px solid #ccc;
}

.event__body {
padding: 12px;
}

.event__description {
padding-bottom: 20px;
border-bottom: 1px solid #ccc;
}

.event__funding__totals {
color: green;
margin: 20px 0;
}

.event__funding__raised {
font-size: 3em;
}

.event__progress__meter {
border: 1px solid #ccc;
background-color: #f5f5f5;
}

.event__progress__meter > div {
height: 20px;
background-color: #3cbf42;
}

.event__details {
display: flex;
justify-content: space-around;
margin: 10px 0;
padding: 15px 0;
background-color: #f5f5f5;
border: 1px solid #ccc;
font-size: 0.9em;
}

.comment {
display: flex;
padding: 15px;
background-color: #fff;
border-radius: 5px 5px 5px 0;
position: relative;
margin-bottom: 30px;
}

.comment:before {
content: "";
width: 0px;
height: 0px;
position: absolute;
border-left: 20px solid #fff;
border-right: 20px solid transparent;
border-top: 20px solid #fff;
border-bottom: 20px solid transparent;
left: 0px;
bottom: -30px;
}

.comment__details {
font-size: 0.8em;
margin-bottom: 5px;
}

.comment__body {
display: inline-block;
}

.comment__icon {
height: 75px;
margin-right: 15px;
border-radius: 5px;
}

.comment__children {
margin-left: 80px;
}

@media only screen and (max-width: 900px) {
.row {
flex-direction: column;
}

.container {
width: 90%;
}

.column {
width: 100%;
}

.comments {
margin-top: 40px;
}
}
53 changes: 53 additions & 0 deletions src/components/comment/elements.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
/**
* Icon Component
*/

export class Icon {
constructor(iconUrl) {
this.iconUrl = iconUrl;
}

render() {
return `
<img src=${this.iconUrl} class="comment__icon" />
`
}
}

/**
* Details Component
*/

export class Details {
constructor(name, donation) {
this.name = name;
this.donation = donation
}

render() {
let donationString = (this.donation == 0) ? "" : `donated £${this.donation}`;
return `
<div class="comment__details">
<strong>${this.name}</strong> ${donationString}
</div>
`
}
}

/**
* Text Component
*/

export class Text {
constructor(text) {
this.text = text;
}

render() {
return `
<div class="comment__text">
${this.text}
</div>
`
}
}
42 changes: 42 additions & 0 deletions src/components/comment/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
// -- comment
// -- -- icon
// -- -- details
// -- -- text
// -- -- -- children

import { Icon, Details, Text } from "./elements.js";

export class Comment {
constructor(comment, index) {
this.comment = comment;
this.index = index;
this.children = this.comment.children;
this.createFactories();
this.render();
}

createFactories() {
this.icon = new Icon(`/images/faces/128-${this.index}.jpg`);
this.details = new Details(this.comment.name, this.comment.donation);
this.text = new Text(this.comment.comment);
}

render() {
return `
<div key=${this.index} class="comment">
${this.icon.render()}
<div class="comment__body">
${this.details.render()}
${this.text.render()}
</div>
</div>
<div class="comment__children">
${this.children.map((comment) => {
let index = Math.floor(Math.random() * 20) + 1;
let commentComponent = new Comment(comment, index);
return commentComponent.render();
})}
</div>
`
}
}
8 changes: 8 additions & 0 deletions src/components/comments/elements.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
/**
* Comments Component
*/

export class Comments {
constructor() {
}
}
18 changes: 12 additions & 6 deletions src/components/comments/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,20 @@
import { Comment } from "../comment";

export default class {
constructor(data) {
this.data = data;
this.createFactories();
this.comments = data.comments;
this.render();
}

createFactories() {
}

render() {
return "comments";
return `
<div class="comments">
${this.comments.map((comment) => {
let index = Math.floor(Math.random() * 20) + 1;
let commentComponent = new Comment(comment, index);
return commentComponent.render();
})}
</div>
`
}
}
17 changes: 9 additions & 8 deletions src/components/event/elements.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export class Title {

render() {
return `
<h1 class="event__title">${this.title}</h1>
<h3 class="event__title">${this.title}</h1>
`
}
}
Expand Down Expand Up @@ -44,19 +44,20 @@ 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>
<div class="event__progress__meter">
<div style="width: ${percentage}%"></div>
</div>
</div>
`;
}

render() {
return `
<div class="event__funding">
<p class="event__funding__totals">
<span class="event__funding__raised">£${this.funding.raised/100}</span>
<div class="event__funding__totals">
<div class="event__funding__raised"><strong>£${this.funding.raised/100} raised</strong></div>
of £${this.funding.target/100} target.
</p>
</div>
${this.renderProgress()}
</div>
`
Expand All @@ -77,10 +78,10 @@ export class Details {
return `
<div class="event__details">
<div class="event__details__date">
<strong>Date:</strong> ${this.date}
<strong>DATE:</strong> ${this.date}
</div>
<div class="event__details__location">
<strong>Location:</strong> ${this.location}
<strong>LOCATION:</strong> ${this.location}
</div>
</div>
`
Expand Down
8 changes: 5 additions & 3 deletions src/components/event/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,11 @@ export default class {
return `
<div class="event">
${this.title.render()}
${this.description.render()}
${this.funding.render()}
${this.details.render()}
<div class="event__body">
${this.description.render()}
${this.funding.render()}
${this.details.render()}
</div>
</div>
`;
}
Expand Down