THE BEST GUIDE FOR BEGINNERS IN BUILDING JAVASCRIPT PROJECT FOR THE FIRST TIME
In this article, we will be setting – up a JavaScript Project together with students of DWTA. The project is a team of mixed-up engineers and these are the features this project is going to have:
- A data box to take the number of teams the user would like to make.
- An information box that lists the names of colleagues.
- A recorder that lists how many player names have been entered.
- A selector that gives the user the chance to choose what actions they would like to perform with their team player names, in this instant ‘ Team Creator’ and ’Team Selector’
- We now have a nice display of our fairly divided teams.
Info Pages & Links for Prospective Students
Fantastic!! let’s get started
Breaking It Down into Sections.
- IDE set – up
- HTML & CSS Crash Course
- DOM & DOM Manipulation
- Building A Team Generation App
Mark up
b. Logic
c. Testing
d. Refactoring
e. Styling
IDE Setup
The VScode software application is a well-known IDE (Integrated Developer Environment) used universally by developers, it’s where we write code. If you do not have it installed, I recommend it to you because it allows you to add some useful extensions that will help your development process.
NB: In this tutorial, we will be using only HTML, CSS, and JavaScript.
Now let’s have a look at the file structure, because it is not a big project, all files needed for this project are stored in an ‘src’ directory. So first create a folder for your project and give it a suitable name followed by another folder called ‘src’. Inside the src folder, you can create three more files:
- HTML – This holds the code according to your preference.
- CSS – This helps the code in styling the HTML page.
- script.js – This holds the for the inscriptions on the JavaScript in making the webpage more attractive.
If you finally install the VScode and the required extension from Live Server from the video, you can now click on the ‘’Go Live’ button’’ to activate it. Once you click on the button, any changes you make to your files will automatically reflect in the browser. But for now, nothing will show because we haven’t started with the writing of the code.
HTML & CSS Crash Course
HTML is illustrated as a markup language, which means, it describes the content of a website page. Whiles CSS is used to style the page to make it more beautiful. If you are a newbie to HTML & CSS I advise that you take some time in watching the Crash Course linked to getting a better idea of these two terms.
Nonetheless, if you just want to go straight into coding, you only need to understand a few things such as
• Html files hold the basic elements which are written with opening <> and closing </> arrow brackets
• These basics have characteristics like IDs which should be ideal. There are other attributes like type, value, and many others.
• Html pages are usually broken down into head (contains details of the page) and body (contains the page layout/structure, and necessary script files)
• CSS files select HTML element IDs, Class or attribute to apply the styles to. To select
o ID – You use a # [followed by name or id] for instance #my-id.
o CLASS – You use. [followed by name of class] for example, my-class.
o ELEMENT – You just write the name of the element. For instance. div.
• CSS has many ways of selecting elements, according to its Cascading Style and name Sheet the last selector would override a previous selector if the same element is selected. So, in CSS, been specific on the element you want to style is very important
DOM & DOM Manipulation
JavaScript is used to control the DOM, however, the DOM methods we will be using are not part of the JavaScript language.
The DOM (Document Object Model) is a structured demonstration of HTML documents, it allows JavaScript to access HTML elements and CSS styles in order to control them. So, we can basically say the DOM is a connection point between HTML or CSS code and JavaScript.
The Tree features are created by the browser on page load. Each feature in the tree illustrates a node in the DOM Tree Structure. We have Parent Elements and Children Elements. on the top of this tree structure, is the document node which is known as the entry point into the tree structure.
We use this document node to find other elements in the tree. e.g. document.querySelector(). There are different other methods the document object can use to access the nodes in the DOM tree for manipulation. Without the project, we will only be using the ‘querySelector()’
Building A Team Generation App
Now that you have an understanding of how the different parts of our application will come together, then let’s progress to build the application.
MARK UP
Before anything else, let’s first write down the layout of our one-page application using HTML. In the Html file, we use a pair of elements. I will break down certain core elements and their uses.
• <!DOCTYPE html> – This term explains to the browser what type of document to expect. In this case it’s
HTML.
• <html> – This stands for the root of an HTML document, it contains all other HTML elements
• <head> – This have metadata (data about data) and it’s usually placed between the <html> and <body> tag
• <body> – This tag describes the content of the HTML body, it usually contains other elements like header, mains, sections, paragraphs, buttons etc.
<head> Element
Beginning with the vital structure, in each element, you will notice it has other qualities like lang in the HTML element and charset in the meta element. These are known characteristics.
We can also add some links to different sources in our head element, in this case, we have linked our custom CSS file.
We might as well link our script file here, it’s the best option to allow the page load before adding our JavaScript file. Moreover, we would add this at the bottom instead. Finally, all pages should have a title that names each page, this can be any name of your choosing. Now that we have deliberated on the head element, let’s move onto the body element.
<body> Element
In this section, we have used an appropriate element to systematically describe the body of our page. That is, we have explained a header and the main section. In our header, we have a CTA (call to action) where users are notified to enter the number of team players to generate.
In the first segment, we have two parts that appear to have an element named section. If you notice we have a feature called class which is used to group elements together for styling. In this section, we have sections with class attributes top and bottom, and inside top, we have class attributes left and right.
Other characteristics to take note of in this section are:
• The type attribute which implements the type of value placed on an input.
• The value attribute which holds the price we would like to pass when an option is selected.
right before the closing tag, we add the script.js file we might be writing all our logic in.
Click on the Go live button or refresh your page.
Good job!! Markup is done. Now let’s move on to implementing the logic.
B. LOGIC
I love to implement the logic before applying the styles as it gets it out of the way, giving me some opportunity to spend as much or as little time playing with styling. Inside the script file, we begin the file with the expression ‘use strict’; which shows that your JavaScript code should be run in strict mode, therefore catching errors like using undeclared variables.
I like to choose all the elements I would be manipulating first. Through the DOM, we can select specific elements.
Take some time to examine the values that are passed to the querySelector(). If you examine your HTML file, you will notice that this corresponds to the class characters. So the first chooser, in this instance, is referring to this element.
there is no need to use the btn class name as it is shared with other button elements we will like to behave differently when it is clicked. But a shared class attribute name would help with styling
We can add an event listener to input & button elements, so here we would like to handle the event by clicking the buttons submit and again.
Handling Submit Button
it is without any argument that it’s a lot of code but let’s take a look at what this is doing.
1. Team Generator Action
• First we take the value from our data field for the number of teams we want to generate.
• Then we take all the values from the text area box, the different function splits the names into an array of names. How does it separate each name? It does so by looking for the ‘\n’ flag we passed it. So after every new line, it pushes the name into an array.
• We then take the data of our selected dropdown menu.
• Then we check if the value from the dropdown menu is “team generator” if it is so, then we would use the number of teams we want to generate to separate the array into a fair group of team names.
• This array is used to design an HTML element to shows each group to the user.
• The outer hoop is for the outer array and the inner loop is for the inner array values. These make elements that will contain the Team Name and Containers.
The inner loop designs the paragraphing element and text node that will be inserted in the paragraph and added to the container
• subsequently, this div (another HTML element that serves as a container) is inserted in our section with the class character bottom.
If you sum all the input values in your markup you should see a generated list of names like this.
Name Picker Action
• However, if the action is a name picker, then a second if statement is issued. Using the Math. random function it returns a random index from between 0 and the length of the team names array. This index is a number we can use to access values from an array.
• We design HTML elements to display the random names picked and also pin this to the bottom section.
Your outcome should be this
Handling Again Button
We want to reset the input boxes when the again button is clicked, and also remove any displayed HTML controls we might have done. So basically resetting the whole page.
This setup should reset the page for new inputs.
Handling counting the number of names entered
This feature exhibits the number of names a user has entered in the text area box, it is useful just in case the user loses count.
The keyCode 13 stands for “enter” on your keyboard, the number of Names has already been selected at the top of the file and the textContent is the only thing we would like to change. In this case, we have a shorthand for increasing numbers. We add 1 after the multiples, so it can match up correctly with our keypresses.
Now it’s time to do some testing!
C. TESTING
What would happens if we do not have some inputs given by a user? For instance, if you enter names without the number of teams you want to generate,… We go into a non – stop loop which crashes the page. Let’s prevent this from happening.
• We will create a single function to handle this check. This feature will take numbers of Teams and an array of teams as parameters. It will return true if a value is entered in the data box or false if not.
From this function we can say, if the no of teams is empty, less than or equal to zero, greater than the number of names inputted, it means it is invalid, therefore return false.
You could notice that there is a different custom function named display ValueOnPage which takes in the value we would want to display. This is how it is implemented.
Lastly, we have to add our check to the submit button click event function. So this changes to:
The” &&” symbol ensures that both the right and left sides of the operations are true before the contents of the “if “statement is executed. try it again now and instead of a crashed page, you get a nice warning text.
D. REFACTORING
If you have heard of this term before, it is the process by which we try to make our code more sustainable and easier to read. Remember the rule of thumb is just about writing as much code as you can, and after it works, go back and see what you can do better.
That’s perfectly what we will be doing here.
If we look back at the code written so far we can make a couple of things easier and better.
• Split the functionality of grouping the names into arrays and creating the HTML markup for displaying them
• Do the same t for the name picker action.
Have you heard of functional programming? It is the process of breaking a piece of code into functions so they serve one purpose. In this instance, we have three functions to write on.
• Group Teams by Sizes.
The handy function splice allows us to do this easily. This is the same as we had before, but we have just made it reusable bypassing the relevant parameters.
• Generate team in Markup
Now the Submit Button click event should look neater if we replace the current code we have with this.
many lines of code have just been replaced with one line of code, tell me if you haven’t fallen in love with how your code looks now! I will repeat the same thing for the other half.
Random name Picker
This accepts an array of names and returns the value of a random name from the list of names.
Now we can use this to replace what is in the second half of the handle submit button click button. And using the function (displayValueOnPage) we created earlier, throws more light on the usefulness of creating functions.
this is all the refactoring we need to do for now.
E. STYLING
At the top of the CSS file, we move a custom font, you can use any of your choices.
• Select any font of your choice.
• Click on the ‘select this style’ button for any style of font you like.
• You should see an @import button, click on that
• Copy that text in between the <style> tag
• Paste it on the top of your CSS file
For styling, you can select features using the elements themselves for instance HTML, body, main, and many more. Or you can select what you want to style using classes indicated like this ‘.top’. If you join the student of DWTA to study the CSS Crash course this should be a lot easier for you. This is the styling used for the page.
• For Global Elements
• For Layout
• For Specific Element Style
This is all that is needed for the styling of the page. Your JavaScript application should be looking exactly like the one on the page we started with. Test it out first, Does it create the team names?
hurray!!!!!
If you made it up to this stage, then congratulations! .For more details on where to find such a piece of work, check it out here
