var fanxheTeam = {
students: 'Fany', 'Anxhe',
coaches: 'Tapia', 'Nacho',
crowdContact: 'Vic',
coachCompany: 'Crowd Interactive',
supervisor: 'Katrin',
livingStyleGuide: 'Haguenburger', 'Jen',
team: function(){
return 'Fanxhe Team is : ' + this.students + ', ' + this.coaches + ', ' + this.crowdContact + ', ' + this.coachCompany + ', '
+ this.supervisor + ' ' + this.livingStyleGuide + ' ^_^';

How did you add the copy functionality?

Aug 18, 2015

After of a great start and a week preparing ourselves, at last we had the courage to start writing our first lines of code for the Living Style Guide gem, as part of the Rails Girls Summer of Code program.

What was our first task and contribution to Living Style Guide?

It consisted of adding the functionality of copying values from the color swatches included in the style guide generated through the gem.

What programming languages did we use to do this task?





How did we do it ?

We added a condition to know if whether the copy functionality is compatible with the browser being used. With this check we avoid showing incompatibility errors, and disable the copy functionality.

The main part of our contribution is a copy function, triggered by “click” or “alt + click” events making use of other functions to create new html nodes and select the range of elements that we want to copy .

Once we achieved the copy functionality, we worked in the visual part with SCSS, using a hover effect over the color swatches.

If you want to see the code, click here

What was the result?

The functionality included three visual aspects for the user:

In the first place, a hover effect allows the user to visualize how to copy the value of interest.

Secondly, the functionality allows the user to copy the name of the variable for the color swatch in which the mouse pointer is over and clicking into it.

Finally, the functionality also allows the user to. to copy the hexadecimal color code by pressing the “alt” key and “clicking” into a color swatch.

Moreover, we have great news! Hard work has its rewards: our task has been merged and included in the new version of the gem (v2.0.0.alpha.9)

And, we couldn’t be more excited =)

      var students = ["Fany", "Anxhe"]
var coaches = ["Tapia", "Nacho"];
var crowdContact = "Vic";
var coachCompany ="Crowd Interactive";
var supervisor = "Katrin";
var livingStyleGuide = ["Haguenburger", "Jen"];
fanxheTeam = [students, coaches,crowdContact, coachCompany, supervisor, mentor, livingStyleGuide];
console.log('We are the FanxheTeam: ' + fanxheTeam + 'We participating in Rails Girls Summer of COde 2015.');
>We are the FanxheTeam: Fany, Anxhe, Tapia, Nacho, Vic, Crowd Interactive, Katrin, Haguenburguer.
We participating in Rails Girls Summer of Code 2015.