Soraya

What I'm most proud of

Im most proud of my dynamic filter that can be used to filter data based on forms. The filter can handle multiple filters with multiple conditions so no possible match will be left out. And because it is a generic setup it is easy to implement for front end and backend.

function filter(reviewData) {
    return reviewData.filter\(function\(serie\) {

        if \(Object.keys\(filters\).length === 0\) {

            return Object.keys\(filters\).every\(function\(key\) {

                return filterSet\(key\); // For each key in filter return filter key value

            }\);

        } else {

            return Object.keys\(filters\).some\(function\(key\) {

                return filterSet\(key\); // For each key in filter return filter key value

            }\);

        }

        function filterSet\(keyNaam\) {

            return filters\[keyNaam\].some\(function\(filterOptions\) { // Compare filter options with serie tags

                return serie.review\[keyNaam\].some\(function\(seriesTags\) {

                    return filterOptions === seriesTags;

                }\);

            }\);
        }

    }\);

}

CSS to the Rescue

I made use of the latest features by making use of css grid.

.header-nav {
     display: grid;
     grid-template-columns: 1.2fr 2fr;
     align-items: center;
     margin-bottom: 2em;
     color: #333333;
     border-bottom: 1px solid #ECECEC;
     @media screen and (max-width: 40em) {
         grid-template-columns: 1fr;
         text-align: center;
     }
     h2 {
         color: inherit;
         @media screen and (min-width: 40em) {
             order: 1;
         }
     }
 }

CSS to the Rescue

I made use of the latest features by making use of css grid.

.header-nav {
     display: grid;
     grid-template-columns: 1.2fr 2fr;
     align-items: center;
     margin-bottom: 2em;
     color: #333333;
     border-bottom: 1px solid #ECECEC;
     @media screen and (max-width: 40em) {
         grid-template-columns: 1fr;
         text-align: center;
     }
     h2 {
         color: inherit;
         @media screen and (min-width: 40em) {
             order: 1;
         }
     }
 }

Webapp from Scratch

I made sure that the functions are doing 1 thing and put the code . In the example function i store comments in the database in the review object.

See more at: https://github.com/soraya2/vn-seriewijzer/blob/master/routes/detail.js

function commentsToDatabase() {

     reviewsSchema.findOneAndUpdate({ "review.seriesName": seriesName }, {

         "$addToSet": {
             "comments": comm
         }
     }, { upsert: true }, function(err, document) {

         if (err) {
             return console.log(err);
         }
     });
}

I also kept my code dry by using loops and used an IIFE to make sure that the variables can’t be overwritten by scripts outside this scope.

See more at: https://github.com/soraya2/vn-seriewijzer/blob/feature-persona-check/public/javascripts/persona-steps.js

(function() {
     "use strict";

         function nextStep(e) {
             e.preventDefault();

             switch (count) {

                 case 1:
                     personaSteps[0].classList.add('hide');
                     personaSteps[count].classList.remove('hide');

                     break;

                 case 2:
                     personaSubmit.className = ' submit-persona';
                     personaButton.classList.add('hide');

                     for (index = 0; index < personaSteps.length; index++) {
                         personaSteps[index].classList.add('hide');
                     }

                     personaSteps[count].classList.remove('hide');
                     break;
             }

             return personaSteps[count++];
         }

         personaButton.addEventListener('click', nextStep);
     }
 }());