Skip to content

Commit

Permalink
[Ember-Migration] Created Cards and Modals (#332)
Browse files Browse the repository at this point in the history 
* Created a navbar

* minor refactoring and fixes

* Created header component

* created description component

* resolved over simplications and minor fixes

* created cards

* made cards and modals responsive

* minor fix

* Created a navbar

* minor refactoring and fixes

* Created a navbar

* [Ember-Migration] Created a navbar (#325)

* Created a navbar

* minor refactoring and fixes

* resolved over simplications and minor fixes

* minor fixes

* Removed repetition of code

* removed console logs

* added escape click functionality

* moved data to a constants file
  • Loading branch information
@rohan09-raj
rohan09-raj authored Dec 13, 2022
1 parent 6b0b10c commit 08b6a9a
Show file tree
Hide file tree
Showing 10 changed files with 473 additions and 8 deletions.
50 changes: 50 additions & 0 deletions app/components/cards.hbs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
<section class='joining'>
<h2 class='joining__title'>Why you should consider joining?</h2>
<div class='joining__content'>
<ul class='cards'>
<div class='backdrop {{if this.showModal "backdrop--visible" ""}}'></div>
{{! Cards }}
{{#each this.CARDS_MAPPING as |card|}}
<div class='card' {{on 'click' (fn this.toggleModal card.id)}}>
<h3 class='card__title'>{{card.title}}</h3>
<img
src={{card.image}}
alt='Description'
height='220px'
width='280px'
/>
<p>
{{{card.content}}}
</p>
<button type='button' class='card__read-more'>
Read More
</button>
</div>
{{/each}}

{{! Modals }}
{{#each this.CARDS_MAPPING as |card|}}
{{#if (and (eq card.id this.clickedModal.id) this.showModal)}}
<div
class='modal {{if this.showModal "modal--visible" ""}}'
{{on-click-outside this.closeModal}}
{{on-key 'Escape' this.closeModal event='keyup'}}
>
<button
class='modal__close'
type='button'
{{on 'click' this.closeModal}}
>&times;</button>
<h2 class='modal__title'>{{card.title}}</h2>
<div>
<img src={{card.image}} alt='Description' />
<p class='modal__description'>
{{{card.fullContent}}}
</p>
</div>
</div>
{{/if}}
{{/each}}
</ul>
</div>
</section>
20 changes: 20 additions & 0 deletions app/components/cards.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';
import { CARDS_DATA } from '../constants/cards-data';

export default class CardsComponent extends Component {
@tracked showModal = false;
@tracked clickedModal;

CARDS_MAPPING = CARDS_DATA;

@action toggleModal(id) {
this.clickedModal = this.CARDS_MAPPING.find((card) => card.id === id);
this.showModal = !this.showModal;
}

@action closeModal() {
this.showModal = false;
}
}
118 changes: 118 additions & 0 deletions app/constants/cards-data.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
export const CARDS_DATA = [
{
id: 1,
title: 'Real Development',
content: `It’s in the name. We do real development to solve real challenges.
This isn’t a tutorial hell workshop, where you constantly watch a
bunch of videos all the time and label yourself a developer on
LinkedIn.`,
fullContent: `It’s in the name. We do real development to solve real challenges.
This isn’t a tutorial hell workshop, where you constantly watch a
bunch of videos all the time and label yourself a developer on
LinkedIn.
<br />
We don’t do unfinished hobby projects here. Our code is peer
reviewed, improved and the open source work that you do here is
displayed on your member’s profile.
<br />
You are encouraged to show this profile to your potential
recruiters, and this work is more credible because it’s deployed on
production and has real users. You will learn debugging skills and
improving performance and reliability of the products you make here.
<br />
You will be given real challenges, which are always slightly outside
your comfort zone and current skills, so that you keep getting
better.`,
image: 'assets/images/cards/real-development.png',
},
{
id: 2,
title: 'Constant coaching and mentoring',
content: `Our main mentor and coach,
<strong>Ankush Dharkar</strong>, has been teaching people to solve
engineering challenges and code for a long time. He is himself a
full-stack developer, with heavy expertise on Frontend UI engineering.
`,
fullContent: `Our main mentor and coach,
<strong>Ankush Dharkar</strong>, has been teaching people to solve engineering
challenges and code for a long time. He is himself a full-stack
developer, with heavy expertise on Frontend UI engineering. He was
involved with his own startup for more than 7 years, then worked at
Disney+ Hotstar, was an instructor at career accelerator at Pesto
Tech, and currently working at CrowdStrike.
<br />
You will always be tracked for updates on our
<strong>status site</strong>, and we periodically remove our inactive
participants. So, rest assured, there’s no dead-weight.
<br />
You will always have direction and goals on how to improve. You
won’t be wasting time deciding what to build -- this is often a
problem people don’t realize. People choose hobby projects they
already know how to do. In real life, quite often you get new
unforseen challenges. We prepare you to tackle them head-on.`,
image: 'assets/images/cards/constant-coaching.png',
},
{
id: 3,
title: 'Smart squad members',
content: `All the members who you would work with, our highly active motivated
and driven peer group that you can ask for. You may or may not have
such a group at your workplace :). If you stay shy and don’t participate, you will be the one at loss.`,
fullContent: `You will work with other smart developers, some of them who started
with almost no knowledge of coding or development. The only thing
that makes them successful is commitment, persistence and
willingness to admit things they do not know and do something about
it. If you stay shy and don’t participate, you will be the one at
loss.
<br />
All the members who you would work with, our highly active motivated
and driven peer group that you can ask for. You may or may not have
such a group at your workplace :)`,
image: 'assets/images/cards/smart-squad-members.png',
},
{
id: 4,
title: 'Learning and Collaboration',
content: `We share our experiences and knowledge, so you will learn far more
and sooner than on your own. We pool and share our resources to
ensure we are some of the best employees companies will come across.`,
fullContent: `We share our experiences and knowledge, so you will learn far more
and sooner than on your own. We pool and share our resources to
ensure we are some of the best employees companies will come across.`,
image: 'assets/images/cards/learning.png',
},
{
id: 5,
title: 'Engineering for evolution',
content: `We are not a one-trick pony. We do projects in a lot of
technologies, including standard web technologies like HTML, CSS,
JavaScript, React, Ember, Vue, Node, Go, Rust, and more. We don’t limit ourselves to one thing.`,
fullContent: `We are not a one-trick pony. We do projects in a lot of
technologies, including standard web technologies like HTML, CSS,
JavaScript, React, Ember, Vue, Node, Go, Rust, and more.
<br />
We don’t limit ourselves to one thing. We focus on building amazing
basic foundations and then adapting and learning whatever tech or
tool we have to in order to engineer the best solutions to problems.
<br />
We are engineers and problem solvers, not the kind of people who
will become outdated with time.`,
image: 'assets/images/cards/engineering-for-evolution.png',
},
{
id: 6,
title: 'Soft Skills',
content: `Being successful in career is much more than just knowing how to
push keys and click around. We ensure that you are the kind of
person who is great at communitcation skills: Both Written and
Spoken.`,
fullContent: `Being successful in career is much more than just knowing how to
push keys and click around. We ensure that you are the kind of
person who is great at communitcation skills: Both Written and
Spoken.
<br />
We are ourselves a fun group, who believe in helping each other. You
will have a good time!`,
image: 'assets/images/cards/soft-skills.png',
},
];
1 change: 1 addition & 0 deletions app/styles/app.css
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
@import 'navbar.module.css';
@import 'header.module.css';
@import 'description.module.css';
@import 'cards.module.css';

* {
margin: 0px;
Expand Down
Loading

0 comments on commit 08b6a9a

Please sign in to comment.