Session #1 – FREE HOUR OF CODE
| 13 December : Meetup HanukkahSession #1 – FREE HOUR OF CODE |
FLAPPY BIRD GAME
by Megane Dreyfuss (Co Founder DI)
Wanna do it again with your kids / Sisters / Brothers ?
Hi, I’m Megane! One of the most exciting things about computer science is that a computer program can be interactive.
Any time somebody clicks or taps or types on a computer or phone, that generates an EVENT, and there’s some code that decides what to do when an EVENT occurs.
For example, you could have an EVENT-HANDLER that says “when the mouse is clicked, play a sound”
Have you ever heard of the game FlappyBird? By using Event handlers, we’re going to learn to program our own custom version of FlappyBird!
The code you’ll write involves dragging and dropping blocks that represent commands for the computer. Under the hood, each of these blocks is represented by real code.
If you take a look at the workspace, there are some green blocks that are filled in for you – these are “event handlers”
If you want the bird to FLAP when you CLICK the mouse, you can do that by attaching the “FLAP” block to the appropriate event handler, and now in your game whenever you click the mouse, the bird will flap.
In each puzzle of this activity we’ll introduce new types of events as green blocks on the workspace, and you can decide the appropriate blocks to add in response to those events.
When you see a drop down arrow like this, that means you can change the settings – like what sound to play when flappy hits the ground.
In the final puzzle you’ll be able to create your own game and share it with your friends. Have fun!
CRACK THE PASSWORD
by Gabriel Zerbib
Did you find the talk interesting?
Please rate us! It only takes a few seconds.
The purpose of the exercise is to guess a secret PIN code (number), with some JavaScript code.
Let’s crack a password : https://developers.institute/pin-challenge
JavaScript is a famous language, used to make Web pages and more.
We will use a “brute-force” approach: try all the combinations of numbers from 0 to 9999.
Press on “Start Crack”.
The system indicates that, in order to provide our attempts, we need to implement nextAttempt().
It means that we need to write some code for the nextAttempt event. The system is conveniently going to try all our attempts, very quickly, by firing this event many times each second.
Open the Developer Tools in your browser: Right-click and select “inspect element” (or press the F12 key), and then go to the “Console” tab.
For mac users : Right click → Inspect
For Windows users : Press F12
Then, click on the Help button in the page. You will get this text :
STAGE 1
x = 0
nextAttempt = () => x ++
Type this code in the console (or copy/paste it), press “Enter” and see the computer trying to guess the password.
The above code tells:
“Let the variable x be (initially) the number 0.
Then, every time the system comes to us for our next attempt, try our number x, and then make it become the next number (one unit higher).”
The computer will try before your eyes all the numbers from 0 to… the secret PIN code.
ACCESS GRANTED!
Welcome to Stage 2
But it’s actually not good enough.
A PIN code is generally a 4-digit number, but it could contain leading zeros.
For example, 0132 would be a valid credit card PIN, whereas 132 is not.
Yet, we wrote a program that tried the plain numbers starting with 0 (which is not exactly ‘0000’).
This new challenge expects us to guess a real PIN number, and maybe one with leading zeros.
Let’s modify our previous program, to make it prepend as many zeros as needed, whenever we try an attempt which is not long enough (less that 4 digits).
STAGE 2
If you press on “Help” you will get this :
x = 0
nextAttempt = () => String(x ++).padStart(4, “0”)
Type this on the console, press “Enter” , “strat the crack’” and see the computer trying to guess the password.
The above code forces the system to consider our number x as though it was a word:
String(x ++)
(A string, in programming, means a chain of letters and other symbols, which can compose a word, a sentence, or a password. It can, of course, represent a plain number, too.)
Then, with this number-as-a-string, we instruct the program that we want it to be padded with zeros, up to a minimum of 4 positions: padStart(4, “0”)
See what happens now! The system is trying all our incremental attempts, but now we provide 0000, 0001, 0002 and so on.
ACCESS GRANTED!
Welcome to Stage 3
We’re now going to guess an actual password, which is no longer a simple PIN code with numbers.
The password we’re trying to guess, is made of letters from A to Z.
In order to test all the possible arrangements of A-Z letters, and to be sure that we don’t miss one, we’re going to do just the same algorithm as with numbers.
The problem is: a computer knows very well what 2357 + 1 means, in order to check 2358.
But when it comes to words… what would be “HEY” + 1?
We need to implement an arithmetic increment on the set of letters, just as we know to increment on a set of numbers.
When we add 1 to 2357, we start by adding 1 to the rightmost digit (7) which becomes 8.
Since we didn’t overpass the last number of our decimal counting system (9), we got the result right away.
But, should we add 1 to 2359, then the rightmost digit (9) becomes a 0 again, and we convey a carry to the digit that is just at its left (here 5) which becomes a 6.
And we repeat this operation in cascade, if the carry made the digit pass the 9 again, and so on until the very first position (the leftmost digit). If this one, too, is increased from 9 to 0 because of the carry (for example consider the number 999) , then we need to prepend the whole sequence with a 1, and all the other positions turn to 0 (1000).
So, this very algorithm can be conducted on a set of symbols from 0 to 9, just the same way as on a set of symbols from A to Z.
Let’s press the “Help” button on the page. It shows:
letters = “ABCDEFGHIJKLMNOPQRSTUVWXYZ”
x = “”
nextAttempt = () => {
for(i = x.length – 1; i >= 0; i–) {
if (x.charAt(i) == letters.charAt(letters.length – 1))
x = x.replacedAt(i, letters.charAt(0))
else {
x = x.replacedAt(i, letters.charAt(letters.indexOf(x.charAt(i)) + 1))
return x
}
}
x = letters.charAt(0) + x
return x
}
In the above snippet, letters represents our set of symbols (we try every combinations of A thru Z). We need to make each of them appear only once, just like when saying that we know to do arithmetics on any “word” made of the symbols “0123456789”.
In JavaScript, the length of a string x is obtained by x.length
But, in this language, the very first (leftmost) letter in a word is said to be the character number 0.
The second from left, is said to occupy the index 1, and so on.
Therefore, the last character in the string, sits at position “length of the string, minus 1”.
Type the program in the console, press “Enter” , “Start crack’” and look at the computer trying to guess the password.
What is the password ?
This FREE CODING CLASS was offered by Developers.institute
Developers.Institute is a selective & intensive coding bootcamp, dedicated to educating the next generation of tech talent in Israel. We offer cutting edge mentored courses in Web and mobile Development, working with the industry’s best professionals to take our fellows from beginner to job-ready developer in 3 months.
Uniquely positioned at the center of tech ecosystems in Tel Aviv, Jerusalem and soon in Bne Brak , Developers.Institute is designed to open new doors for everyone who wants to learn code.
Our learning methodology doesn’t just teach you tactical skills, but shows you how to learn and think as a
developer by doing hands-on project from our partners. In addition to our expert training in the most in-demand skills, we also offer personalized career mentorship and connections to companies .
