Code, meet English · think == programmer

Code, meet English

What & why

Writing out coding problems in basic English before code helps put our brains in the right mindset.

We then have a readable roadmap of what code needs to be written and where to write it.

Writing code and program flow in English is the first step to writing actual code.

Set up

Form into pairs
Print & cut these code snippets
You’ll be shown a JavaScript interaction
Write out the code you’d need—in English
Piece together the code snippets to match

Don’t look ahead—the answers are in here!

**Circle mover**—think about what CSS properties to change

Circle mover in English

When the button is clicked:
- Get the current left CSS coordinate of the circle
- Add 10px to the current left
- Change the circle’s left to the new one

JavaScript

$('.btn').on('click', function () {
  var oldLeft = $('.ball').offset().left;
  var newLeft = oldLeft + 10;
  $('.ball').css('left', newLeft);
});

**Bubble popper**—think about CSS transitions

Bubble popper in English

When a circle is clicked:
- Add a class to the circle
- The class causes a transition to trigger,
  hiding the circle

JavaScript

$('.bubble').on('click', function () {
  $(this).addClass('fade-away');
});

**Circle bouncer**—think about CSS animations

Circle bouncer in English

When the button is clicked:
- Add a class to the circle
- The class causes and animation to trigger,
  bouncing the circle

JavaScript

$('.btn').on('click', function () {
  $(this).addClass('bounce');
});

Carousel—break it down, one at a time

Carousel in English

When the 1st button is clicked:
- Hide all the slides
- Show the first slide

Repeated 5 times…

JavaScript

var hideAllSlides = function () {
  $('.slide-1').css('display', 'none');
  $('.slide-2').css('display', 'none');
  $('.slide-3').css('display', 'none');
  $('.slide-4').css('display', 'none');
  $('.slide-5').css('display', 'none');
};

$('.btn-1').on('click', function () {
  hideAllSlides();
  $('.slide-1').css('display', 'block');
});

/* Repeat the 4 lines above 4 times for each different button/slide combo… */

Don’t Repeat Yourself

DRY: A tenet of programming.

In the carousel are there repeating patterns in the code?
Can we do anything to improve them?
How can we reduce the the duplicated lines of code?