KC on Webdev

 Recently, I came across this question on /r/learnprogramming Question: 2520 is the smallest number that can be divided by each of the numbers from 1 to 10 without any remainder.What is the smallest positive number that is evenly divisible by all of the numbers from 1 to 20? Well, how would you write a program to figure this out?  The answer is not that difficult, but it involves a lot of prime numbers.  The short version: we can "construct" the number by starting from 1 and work our way up to 20.  1 is obviously 1 2 is obviously 2 3 however, will be 6, as it needs to be divisible by 2 and 3 4 however, is NOT 24, but 12,  5 is 60 6 is 60 because 60 is already divisible by 6 7 is 420  8 is 840 (remember, factors) 9 is 2520 10 is still 2520.  Do you see a pattern?  Let's say you need to calculate smallestMultiple of X.  To get it, you need the PREVIOUS smallestMultiple. i.e. smallestMultiple(X-1). For simplicity, let's call it "prevSM" If that ...

We have previously created the skeletons of the game in part 1, and completed the game in part 2. We now add some "chrome" to the game, to make it look better, prettier, and so on.  And there are a LOT of things we can do, but we may need to rewrite a part of the program to accommodate the changes. This is normal and a part of the learning process.  Let's try making some simple changes. I am not going to show you ALL the changes as you can easily figure out the exact syntax with the steps I described. You can see the source code at the end. This is what it will look like: Change the Button Colors When you think about it, War button should be red, and maybe the reset button should be blue... and maybe rename it "Peace" as a joke?  Well, that's easy enough, with Bootstrap. btn-danger is red, and btn-primary is blue, so we just swap that around.  Keep a "log" of previous battles To clarify, we are adding ANOTHER field called "battle log" whe...

Previously, we have created a basic HTML page, with a simple dice rolling logic, and simple UI, with Bootstrap and jQuery, so we have the beginnings of a web-based version of Dice Wars.  In this part, we will complete the "game", where you roll the dice for two players, determine who won, adjust scores accordingly, and declare winner or loser after X points. There will also need to be a "reset" button so we can start again.  You will learn in this segment: Very simple Bootstrap grid layout, centering, and so on Simple DOM manipulation with jQuery on multiple DOM elements How to write JavaScript function with parameters so it can be reused How to write make one function call another function Create a properly working, if simple, game We will set the starting points to 5, and first player to hit 0 is the loser, and the other is the winner. Keep in mind later, we may want this to be variable so we can setup variants of the game.  Setup Two Players Right now, let's ...

Creating a project is not easy, but it is essential to demonstrate your worth as a developer. Mainly for grins, I'll start a simple project, and keep adding to it.  We'll create "dice wars", a pretty simple game. We'll start simple, but we'll embellish it until it looks really darn good. The rules for "dice wars" are available here .  I am best with JavaScript, so we'll start there. Please note that you need to have SOME fundamental knowledge of JavaScript to follow along at a normal speed. This is NOT a JavaScript tutorial, though it can be treated as a project sample.  You will learn in this segment: Very simple Bootstrap Very simple DOM manipulation with jQuery How to use the random number generator How to write a message to JavaScript console with console.log How to write JavaScript function, and how to call it from elsewhere How to click a button and make it run a function Initial Planning For the first step, w...

Previously, we had talked about how some people cannot problem-solve . While others take to it like duck to water. They can't see the process of the programing, esp. when it comes to applying if branches or even loops. So let's discuss that a bit.  A very simple program takes some input, process the input, and generates an output.  Get input Process input Display output Simple, right?   Let's Write a Simple Input/Process/Output program Now let's write a very simple calculator in JavaScript. Enter two numbers (with prompt), display the output with an alert box. NOTE: You can do this with command-line arguments and spit the output to the console. Or even use a different language. The idea is the same.   var a = prompt("Enter a",0) // input var b = prompt ("Enter b",0) // input var x=parseInt(a)+parseInt(b) // process alert("Result is "+x) // output You may have noticed I used parseInt. That's because prompt returns a STRING. And when you ...

One question often asked by programming noobs is "why do I have to learn data structures and algorithms? I already have a ton of better stuff in the language itself. Array can be used to implement any sort of DS. Sort() build into the language is better than any sort I can implement. So why do we need to learn those at all?"  If you are ONLY interested in doing web development forever, then no, you don't need data structure and algorithms. Webdev, however, is a bit of special case, as you are mainly assembling bits and pieces of other libraries and modules and such into a coherent whole, serve it up in HTML, and style it with CSS. Get some data from user, send it to server, get some data back, present it to the user. You rarely have to crunch large datasets by yourself as a webdev.  However, if you deal with more complex software engineering, then you need some fundamentals, such as data structures and algorithms, to understand and solve even MORE complex problems. It...

NOTE: This blog post was inspired by this Reddit post In my experience, many people do not understand the difference between computer science and software engineering. They want a coding career, not understanding they want the latter, not the former.  Computer sciences usually defined as "the study of computers and computational systems". It is more about the theory and practice of computing, which involves testing and improving data structures and the algorithms to manipulate them to achieve some goal. It's not really programming per se, but meta-programming. But it's definitely about software and its efficiency, and possibly better ways of doing things, and the various trade-offs.  Knowing computer science is NOT the same as knowing DSA (data structures and algorithms). Though they are usually taught together as basics to be discussed, as big O and computational efficiency is a big part of computer science. But different students have very different goals for learni...

 Let us take a look at one of the competitors to HackerRank... CodeWars, and one of the puzzles on it. This one is called Horse-Racing Duals, and a harder version called HyperDuals. But one thing at a time.  You can access the problem here:  Link Read the problem very carefully. Noticed that it lists " external resources: Sorting, Lists "? Clearly, you will need to sort the solution.  I am going to do this in JavaScript, which is pretty universal.  First, they did NOT create any data structure(s) for you, so you have to create your own. I simply called mine horses . And I added a line in the readline loop to load the number into the array.  const   N  =  parseInt ( readline ()); var   horses = [] horses . length = N ; for  ( let   i  =  0 ;  i  <  N ;  i ++) {      const   pi  =  parseInt ( readline ());      horses [ i ]= pi } But...

Recursion is often one of the hardest things to "get" in programming, so when you have your "aha" moment, it's that much more amazing. Conceptually, it's not that hard to see, but how do you actually program one such?  First, realize that " recursion is a method of solving a problem where the solution depends on solutions to smaller instances of the same problem." Let us try something simple. Let's say... I want you to sum up the elements of an arbitrary array, let's call it arr. It can have any number of elements, and each element is an integer. For the purpose of this exercise, let's just say it's [1,2,3,4], but it can be any integer, and the array can be any valid size. And I want to you use recursion, not loop (no for or while or such statements).  Now, remember the definition: "solving a problem where the solution depends on the solutions to smaller instances of the same problem".  Let's call this function rsum (...

One thing new programmers often see mentioned is "git", and a lot of jobs require you to know git or a similar version control tool. So what is it, and how do you learn it?  This is NOT a git tutorial. This is the "bare essential" guide to git, just enough to get you started. I'll guide you on how to  start a personal project repo on GitHub,  link it with your local git repo, then have you  make some changes,  commit that change,  push it to the remote repo (on GitHub),  revert that change locally.  This will NOT cover branches (and checkouts and pull requests and so on) and forks, or multiple contributors. You can read a more complete guide on that. This will, however, get you working with your own code repo.   Please keep in mind that this is JUST enough to get you started using git and GitHub. It BARELY scratches the surface of the power git offers when you have multiple contributors and their code starts to conflict, and the power of...

One of the fundamental tasks of a programmer is how to solve a programming problem, based on the specifications. Here is my attempt to solve such a problem, finally arriving at a validated answer.  If you've been on hackerrank.com, you may have seen this problem before. It's Fraudulent Activity Notifications .  TL;DR: given an array of arbitrary length (let's say it can go to 1x10^6). Each number in the array is expenditures for each day... It can range from 0 to 200 (and is always an integer). You are also given a number "d", that's the number of days you need to LOOK BACK to calculate the window. You need the median value of that window. If the next value is larger than or equal to twice the median, client is notified. Now, given arbitrary d, how many notifications had been generated, for a given array?  Example: you're given 6 4     10 20 30 40 50 60 6 is the size of the array: 6 entries. Window size is 4. First run, "10 20 30 40" Med...