JavaScript Practice Exercises For Beginners: Beginner Exercises Part 1


in this video we’re going to go through
some JavaScript practice exercises for beginners where I give you a problem and
then we go through the solution together hi as is James from genie develops
central and welcome to these JavaScript practice exercises in the video what’s
going to happen is I’m going to present you with a problem which can be solved
with JavaScript and then what I’d like you to do after each problem is actually
pause the video and go away and have a bit of a go at coding yourself and see
what kind of solution you can come up with if you have a second don’t forget
to subscribe to support the channel below and so that you don’t miss out on
any future tutorial updates so now let’s get started with our first exercise okay
so this first one is nice and simple it’s the classic right function to take
some numbers and do something with them and return true or false depending on
the outcome so if this one we want to write a JavaScript program to check two
numbers and return true if one of the numbers is 100 or if the sum of those
two numbers is actually a hundred as well so right now if you pause the video
and go to your console or text editor and then try and solve this challenge
and if you get stuck or you want to see the solution and come back in just a
second where I’ll show you how I would solve it okay so the way I’d approach this is
basically to first of all write function and I’m just going to do a function
declaration so we’re using es6 here and one of the features which is arrow
functions so by doing this sort of syntax I can basically create a function
without having to actually use the function keyword so with my function I’m
going to accept those two numbers that kind of come in so a and which call
those a and B and the first thing I’m going to do is say is a equal to 100 and
now I’m using their triple equals to make sure that it’s definitely a number
that’s been passed in as an argument so this will check the first number so the
other thing I need to do is check the second number so I’m going to just use
an or operator here to say is a equal to 100 or is B equal to 100 as well so if
we just call it a couple of times to see if it’s doing what it’s supposed to be
doing okay yeah so we can see that if a or b
is passed in as a hundred then we get a true value but what about if we pass in
some values which aren’t a hundred so let’s pass in two tens instead you
can see I’ll get false values back so that’s all good that’s working as it’s
expected but what happens if I pass in two numbers that actually do add up to a
hundred and that’s the final part of the exercise
so here of pastan 20 and 80 and 50 and 50
so because neither of those numbers are 100 the last two console.log statements
actually give us false so we need to amend our function slightly so that it
accepts that final condition of the actual exercise definition so we can
just put in another or statement and then just if we just basically add a and
B together and then say is a and B together does that actually equal
hundred as well well if it does then we want to return true and when we were in
the code again you can see those last two console logs actually give us true
values as well so that’s how what approach exercise one and as you can see
you can use a one line arrow function to just do those all statements if you had
a larger function that has like if statements inside as well that’s fine
that’s a logical way to solve it just to keep things nice and short this is
probably the easiest way that to get the same result so that’s exercise one let’s
move on to exercise two so exercise two is another nice and simple one and it’s
basically to write a JavaScript program to get the extension of a file name so
if you think about the extension of a file name so we’re talking about the dot
HTML or the dot J S so everything after the dot at the end of the actual file
name so pause the video again go ahead and give it a try and I’ll see you in a
second when you come back for the solution
here’s how I would solve exercise 2 so I’m just gonna create another function
again and I’ll just call it get file extension for example and again I’ll use
an arrow function here and we’re just gonna pass in a string into that so the
string could be any file name that we want to get the extension of and the
string could be any file name that we want to get the extension of I mean only
want to get the last portion of the string so I’m going to say string slice
which the slice function just gives us a portion of an actual string so as you
can see for the documentation for slice we need to pass it in a start number and
optionally an N number as well so the star number once pass in is actually the
last occurrence of the dot in the actual string that we’re trying to work out the
file extension for so I’m just gonna say string dot last index of and this
function basically looks through the string and just gives us the position of
the last occurrence of whatever string I put within the parentheses here so
obviously I’m gonna put in a dot in here to actually find the last occurrence of
that in that string and that should pretty much do it for this exercise so
if I do a console dot log just to test that out and I’ll say get file extension
and the string or passing I’ll just say index dot HTML and if we run that in the
console name and as you can see in the console we’ve got the dot HTML extension
extracted from the actual string so let’s run that one more time with just a
trickier example so this time I’m going to use a common
file that’s found in a lot of web development repositories which is the
web pack config and as you can see it’s got two dots in the actual file name but
we only want to get the dot J s extension and when we run that code you
can see that because we’ve used last index all for the string we’ve only got
the last occurrence of the dot so just returning the the last couple of
characters so that’s it for this exercise let’s move on to exercise 3 now
this is a bit of a classic one it’s asking you to write a program to
basically take a string and every character in that string just to shift
it forward one letter in the alphabet and there’s a couple of ways of doing
this but I’ll let you pause the video now and have a go at coding this err and
I’ll see in a few minutes where we go through the solution that I’ve come up
with ok I hope you got on ok with that exercise so to solve this and you can
create a string that has all of the alphabet in and then kind of compare the
string that you of working with and shift it forward in that array but
probably a more elegant approach is to use a couple of functions that are built
into JavaScript first of all the string dot from char code and also the char
code at function as well so I show you how to use these in just a second let’s
create a function first of all though so I’ll call this move chars forward for
example you can call it whatever you like and we’re gonna pass in a string to
that and what we’re actually gonna do is because we want to actually modify the
contents of the string I’m up first of all I’m gonna split it into an array so
I’m gonna call the split function on the string which basically returns every
character in the string as an array and because we now have an array I can call
another function on here as well I’m just gonna move this onto another line
just so that we can easier to read I’m actually then gonna call the map
function so if you haven’t used the map function before it basically mutates an
array which basically means it changes every item in the array depending on
what you pass in as the function so for each character that’s in the array I’m
gonna pass it back to a function and for each function I’m going to say use that
string dot from char code so what this actually does is takes a numerical code
which represents the string and converts it back into an actual
character into a string so we need to pass that an actual value so what I’m
gonna do is for the char that we’ve got which is still a string as well I’m
gonna actually access the char code at function which basically returns the
numerical value that we need so this would literally just give us the
character back we’ve converted it into a number and then back into a string but
because we’ve got the number here we can actually just add one on twist which
will have the effect of actually just pushing it through the alphabet by one
so the last thing we need to do because we’ve got our string split into an array
we want to actually join it back together to make a string and now that
will return our string which has had letters in the alphabet themselves
shifted forward one time so let’s test that
okay so you can see when we pass in ABCD they’re shifted forward one carriage
reach by BCDE so whilst this solution does work really well there’s only one
problem with it if we actually pass in at the end of the alphabet so as said in
this example you can see doesn’t give us an A as the expected result and because
the exercise isn’t clearly written what should happen when we’ve moved it
forward it probably should really return an A so we probably need to put some
conditions or some if statements in there – if the number is above a certain
value then to actually go back to the start and give us an A but I’m gonna
leave this exercise as it is for the moment just to demonstrate how I would
approach this particular exercise so that’s it for this exercise let’s move
on to exercise 4 so exercise 4 is a really common scenario especially
because javascript dates don’t work in the fashion that they do another of
programming languages and they can be a little bit difficult to work with so
this exercise is basically asking you to take the current date and print it out
in one of the expected formats so pause the video again and have a go at this
one and I’ll see in a few moments when you’ve got your solution
ok I hope you got on alright with that one and I’m just gonna dive straight in
on the solution that I came up with so I’m just gonna create the function to do
this so we’ll say format date and I will allow it to pass in another date
variable as well so we could use any other date objects that we might have in
JavaScript but the first thing I’m gonna do is just create a new date object
which basically gets a date object for right now when I’m running this code and
for this function it’s gonna be a bit more in-depth so I’m gonna open it up so
it’s not a one-liner in this case so the first thing I’m going to do is get the
day of the month that we’re currently on at the moment and to do that I’m gonna
say Const days is equal to the date so this is a date object so there’s methods
available on it and I say get date which basically gives us the day of the month
we want to display and again do the same thing for months and years and you’ll notice that the years one
slightly different it’s get full year to get the four characters of the year and
all I’m gonna do now is just return a template literal which is basically just
a string with some values inside it as well so I’m gonna say days and I’ll use
forward slash and then finally you’ll eight years as well so here in the UK we
put our days first so it’s days months and years so let’s just run that code
now and see what we get back and if I don’t pass in any values the default
value of a new date object will be created so we don’t actually need to
pass anything into that to work for it to work okay so it did give us a result
in the output but what we’re actually looking at here is you not to know this
but it’s actually February when this has been recorded so it’s actually the
segment and the reason for that is we need to just add one on to those values
because there’s zero index so zero will be the actual first month ie January and
I’ve actually made a mistake there it’s not get day it’s get date and that gives
us the day of the month so thirteen for the second that looks good so as I say
working with JavaScript dates is a little bit tricky and you need to use
these functions to kind of get the values for each particular day of the
month and the month itself but this is probably a simple way of doing it and
it’s quite flexible because we can pass in other date objects as well that’s it
for this exercise let’s have a look at our final one which is exercise 5 okay
so for exercise 5 we need to write a simple program that creates a new string
but an actually prepends app needs the word new at the front of the actual
string so if we had say offers as passed in as a string it would then say new
offers but if the string has already got like the new at the start of it then we
shouldn’t actually add that on and it should just leave it as it is and return
the original string so one last time if you pause the video and go ahead and
give this a crack and I’ll see you in a few seconds when you’ve got your
solution okay so probably the best way to approach this again is to use a
template literal to put the string new before our existing string but we do
need to have that check in place to see if the actual word new is at the start
of our string so let’s create a new function to do that so we’ve got a basic
function add new and it’s got passing in an argument which is a
so the simplest thing to do would just be to return a template literal like
this and then just pass the string back afterwards so that pretty much solves
the first part of the problem let’s just demonstrate that
okay you can see in the console on the right we get in new offers and of course
if we already had new in there we’d get new new offers so we need to have that
check in place to see if the string is already in the bass string so just updated the function and I’ve
put it on the line below just so it’s a bit easier to read so we’ve just got
that check in place now to say is the index of new so does the word new appear
at the first part of the string so we’re checking if that index of is equal to
zero and if it is the ternary operator kicks in and we just return back the
original string but if it’s not so it could be somewhere else in the string
but it’s just not right at the start we return about the template literal with
new prepended at the start and as you can see the codes run and the string has
been updated to not actually put in new in twice so that’s probably the easiest
way to approach this exercise a nice one-liner and it’s a good example of
when you might use a ternary operator rather than an if statement so that is
it for these exercises they’re fairly beginner exercises but hopefully you
find some some of them useful and got some value out of the solute going
through the solutions just before you go don’t forget to subscribe to support the
channel and for any future updates and I’ll see you in the next video some more
JavaScript coding exercises

16 Comments

  1. Thanks dude. I really like this beginner JS

  2. Also check out part 2 of this series for more JavaScript practice exercises for beginners: https://youtu.be/U0Ce27lA7R4

  3. really really nice… !!

  4. Need examples with html without console.log

  5. that's great!!
    i would realy love to see examples and practice of mobile applications with java..

  6. For the first example, I did what I have learned so far and I'm pretty sure the way I'm attempting this SHOULD work, but I'm screwing up somewhere.

    "var x = 0;

    var y = 0;

    function check(x,y)

    {

    if (x = 100 || y = 100) {

    return true;

    }

    else if (x + y === 100) {

    return true;

    }

    else {

    return false;

    }

    }

    console.log(check(2,98)); "

    Your way is definitely cleaner and more coherent, but I need to master some long-hand ugly basics first based on the material I have learned from. What did I do wrong here?

  7. Good exercises but I think will be better to use more often the 'console. log'…

  8. Thanks bro this is very much helpful to us new developers. hehe Waiting for more tutorials from you. <3

  9. This is the code I wrote for third exercise in order to fix that z character input. I'm sure there is much cleaner way to write this program. Hope you guys found this helpful and thanks JDC for your awesome content!
    const nextChar = (str) => {

    let newStr = '';

    for (let i = 0; i < str.length; i++) {

    if (str.charCodeAt(i) === 90) {

    newStr += String.fromCharCode(str.charCodeAt(i) – 25);

    } else if (str.charCodeAt(i) === 122) {

    newStr += String.fromCharCode(str.charCodeAt(i) – 25);

    } else if (65 <= str.charCodeAt(i) && str.charCodeAt(i) < 123) {

    newStr += String.fromCharCode(str.charCodeAt(i) + 1);

    }

    }

    return newStr;

    };

    console.log(nextChar('abcd'));

  10. An invaluable resource for learning Javascript! Thank you!

  11. In second exercise what input type I should suppose?

  12. Love those exercise!!!

  13. I did't see the exercises yet. But only for the comments I going to giveyou like..

  14. Nice video!
    My solution for the date one:
    let newDate = new Date()
    console.log(`${newDate.getUTCMonth()+1}-${newDate.getUTCDate()}-${newDate.getFullYear()}`) // 8-14-2019

  15. Nice video… Check this out https://youtu.be/fj6002w-IBw

  16. Quick question what do you use to show the console.log ? when i console.log something nothing shows up

Leave a Reply

Your email address will not be published. Required fields are marked *