Golden Challenge: Adding Achievements


#1

I’d like to get some feedback of the mistakes I might be doing or what would be a better solution.
I updated my addSubmitHandler to:

FormHandler.prototype.addSubmitHandler = function(fn) {
    // console.log('Setting submit handler for form');
    this.$formElement.on('submit', function(event) {
        event.preventDefault();
        var data = {};
        $(this).serializeArray().forEach(function(item) {
            data[item.name] = item.value;
        });

        if (data['size'] == "coffeezilla") {
            if (data['strengthLevel'] == 100) {
                if (data['flavor'] == "caramel") {
                     $('#myModal .modal-title').text('Dulce de Leche Unlocked')
                     $('#myModal .modal-body').text('WOW! Wanna put some dulce the leche in that coffee?')
                     $('#myModal').modal();
                }
                if (data['flavor'] == "almond") {
                  $('#myModal .modal-title').text('Almond Milk Unlocked')
                  $('#myModal .modal-body').text('WOW! Shall we change the order to Almond milk too?')
                  $('#myModal').modal();
                }
                if (data['flavor'] == "mocha") {
                  $('#myModal .modal-title').text('Extra Beans Unlocked')
                  $('#myModal .modal-body').text('WOW! Why not rather go with some Kenyan beans?')
                  $('#myModal').modal();
                }

                // $('#myModal').modal('show'); was not working here :frowning: 
            }
        }
        fn(data);

        this.reset();
        this.elements[0].focus();
    });
};

And in the index.html file I added:

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
          </div>
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>

#2

Hi @pakpakpak! IIRC, we never add the bootstrap’s JavaScript code to CoffeeRun, which is where the .modal() method would come from.

Try adding a script tag for https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js to index.html, just after jquery.

RE better solution, here’s one way you could DRY up your solution with JavaScript objects:

var zilla = {
  caramel: {
    title: 'Dulce de Leche Unlocked',
    body: 'WOW! Wanna put some dulce the leche in that coffee?'
  },
  almond: {
    title: 'Almond Milk Unlocked',
    body: 'WOW! Shall we change the order to Almond milk too?'
  },
  mocha: {
    title: 'Extra Beans Unlocked',
    body: 'WOW! Why not rather go with some Kenyan beans?'
  }
};

var $modalTitle = $('#myModal .modal-title');
var $modalBody = $('#myModal .modal-body');

if (data.size == "coffeezilla" && data.strengthLevel == 100) {
  var copy = zilla[data.flavor];
  $modalTitle.text(copy.title);
  $modalBody.text(copy.body);
}

#3

Thanks Jonathan!
I really like your solution, where does the data object come from.

Correct me if I’m wrong:

  1. I create the zilla object outside the .addSubmitHandler function, same as the modal variables.

  2. The SubmitFormHandler would look like this?

    FormHandler.prototype.addSubmitHandler = function(fn) {
    this.$formElement.on(‘submit’, function(event) {
    event.preventDefault();
    if (data.size == “coffeezilla” && data.strengthLevel == 100) {
    var copy = zilla[data.flavor];
    $modalTitle.text(copy.title);
    $modalBody.text(copy.body);
    }

         fn(data);
         $('#myModal').modal('show');
    
         this.reset();
         this.elements[0].focus();
    

    });

At the moment it is showing the modal but not populating the title and body with the right values.


#4

Hi @pakpakpak! data is the same object you had in your solution code, so don’t forget to add back the code that creates it. But the rest of your solution looks correct!


#5

I’ve been working on this challenge for some time now and just can’t get it right. I have the modal appearing just fine but it appears regardless of what options I pick. I’m guessing there is something wrong with the ‘if’ conditions but can’t find any errors. Any advice would be appreciated.

My JS:

FormHandler.prototype.addSubmitHandler = function (fn) {
console.log(‘Setting submit handler for form’);
this.$formElement.on(‘submit’, function (event) {
event.preventDefault();

var modalTitle = (’#myModal .modal-title’);
var modalBody = (’#myModal .modal-body’);

if (data.size == "coffeezilla" && data.strengthLevel == 100) {
  $modalTitle.text(title);
  $modalBody.text(body);
}

$(’#myModal’).modal(‘show’);

Are there any other approaches I could take?