![\"\"](\"https:\/\/i0.wp.com\/wealthbankers.com\/academy\/wp-content\/uploads\/2021\/04\/pexels-brett-jordan-7528729.jpg?resize=657%2C493&ssl=1\")
<\/p>\n<\/p>\n
<\/p>\n
<\/p>\n
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:<\/p>\n
<\/p>\n
Fantastic!! let’s get started<\/p>\n
Breaking It Down into Sections.<\/p>\n
IDE Setup<\/strong><\/p>\n 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.<\/p>\n NB: In this tutorial, we will be using only HTML, CSS, and JavaScript.<\/p>\n 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’<\/em> directory. So first create a folder for your project and give it a suitable name followed by another folder called ‘src’.<\/em> Inside the src<\/strong> folder, you can create three more files:<\/p>\n If you finally install the VScode and the required extension from Live Server from the video, you can now click on the \u2018’Go Live’ button\u2019\u2019 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.<\/p>\n <\/p>\n HTML & CSS Crash Course DOM & DOM Manipulation 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.<\/p>\n 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.<\/p>\n 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()’<\/p>\n <\/p>\n <\/p>\n <\/p>\n Building A Team Generation App MARK UP HTML. <head> Element<\/p>\n 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 might as well link our script file here,\u00a0 it\u2019s 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.<\/p>\n <body> Element 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.<\/p>\n Other characteristics to take note of in this section are:<\/strong><\/p>\n \u2022 The type attribute which implements the type of value placed on an input. Click on the Go live button or refresh your page.<\/p>\n Good job!! Markup is done. Now let’s move on to implementing the logic.<\/p>\n B. LOGIC I like to choose all the elements I would be manipulating first. Through the DOM, we can select specific elements.<\/p>\n 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.<\/p>\n 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 Handling Submit Button<\/p>\n it is without any argument that it’s a lot of code but let’s take a look at what this is doing.<\/p>\n 1. Team Generator Action <\/p>\n The inner loop designs the paragraphing element and text node that will be inserted in the paragraph and added to the container If you sum all the input values in your markup you should see a generated list of names like this.<\/p>\n Name Picker Action Handling Again Button This setup should reset the page for new inputs. 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. C. TESTING \u2022 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.<\/p>\n 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. Lastly, we have to add our check to the submit button click event function. So this changes to:<\/p>\n 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.<\/p>\n D. REFACTORING That’s perfectly what we will be doing here. 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. Now the Submit Button click event should look neater if we replace the current code we have with this.<\/p>\n 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.<\/p>\n <\/p>\n Random name Picker 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.<\/p>\n this is all the refactoring we need to do for now. \u2022 For Layout<\/p>\n \u2022 For Specific Element Style<\/p>\n 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?<\/p>\n\n
![\"\"](\"https:\/\/i0.wp.com\/wealthbankers.com\/academy\/wp-content\/uploads\/2021\/04\/pexels-thisisengineering-3861964.jpg?resize=683%2C1024&ssl=1\")
<\/p>\n
\nHTML 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.
\nNonetheless, if you just want to go straight into coding, you only need to understand a few things such as
\n\u2022 Html files hold the basic elements which are written with opening <> and closing <\/> arrow brackets
\n\u2022 These basics have characteristics like IDs which should be ideal. There are other attributes like type, value, and many others.
\n\u2022 Html pages are usually broken down into head (contains details of the page) and body (contains the page layout\/structure, and necessary script files)
\n\u2022 CSS files select HTML element IDs, Class or attribute to apply the styles to. To select
\no ID – You use a # [followed by name or id] for instance #my-id.
\no CLASS – You use. [followed by name of class] for example, my-class.
\no ELEMENT – You just write the name of the element. For instance. div.
\n\u2022 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<\/p>\n
\nJavaScript is used to control the DOM, however, the DOM methods we will be using are not part of the JavaScript language.<\/p>\n![\"\"](\"https:\/\/i0.wp.com\/wealthbankers.com\/academy\/wp-content\/uploads\/2021\/04\/pexels-markus-spiske-2004161.jpg?resize=830%2C554&ssl=1\")
<\/p>\n
\nNow that you have an understanding of how the different parts of our application will come together, then let\u2019s progress to build the application.<\/p>\n
\nBefore 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.
\n\u2022 <!DOCTYPE html> – This term explains to the browser what type of document to expect. In this case it’s<\/p>\n
\n\u2022 <html> – This stands for the root of an HTML document, it contains all other HTML elements
\n\u2022 <head> – This have metadata (data about data) and it’s usually placed between the <html> and <body> tag
\n\u2022 <body> – This tag describes the content of the HTML body, it usually contains other elements like header, mains, sections, paragraphs, buttons etc.<\/p>\n
\nWe can also add some links to different sources in our head element, in this case, we have linked our custom CSS file.<\/p>\n
\nIn 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.<\/p>\n
\n\u2022 The value attribute which holds the price we would like to pass when an option is selected.
\nright before the closing tag, we add the script.js file we might be writing all our logic in.<\/p>\n
\nI 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.<\/p>\n
\nWe 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.<\/p>\n
\n\u2022 First we take the value from our data field for the number of teams we want to generate.
\n\u2022 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.
\n\u2022 We then take the data of our selected dropdown menu.
\n\u2022 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.
\n\u2022 This array is used to design an HTML element to shows each group to the user.
\n\u2022 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.<\/p>\n
\n\u2022 subsequently, this div (another HTML element that serves as a container) is inserted in our section with the class character bottom.<\/p>\n
\n\u2022 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.
\n\u2022 We design HTML elements to display the random names picked and also pin this to the bottom section.
\nYour outcome should be this<\/p>\n
\nWe 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.<\/p>\n
\nHandling counting the number of names entered
\nThis 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.<\/p>\n
\nNow it’s time to do some testing!<\/p>\n
\nWhat 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.<\/p>\n
\nYou 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.<\/p>\n
\nIf 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.<\/p>\n
\nIf we look back at the code written so far we can make a couple of things easier and better.
\n\u2022 Split the functionality of grouping the names into arrays and creating the HTML markup for displaying them
\n\u2022 Do the same t for the name picker action.
\nHave 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.
\n\u2022 Group Teams by Sizes.<\/p>\n
\n\u2022 Generate team in Markup<\/p>\n
\nThis accepts an array of names and returns the value of a random name from the list of names.<\/p>\n
\nE. STYLING
\nAt the top of the CSS file, we move a custom font, you can use any of your choices.
\n\u2022 Select any font of your choice.
\n\u2022 Click on the ‘select this style’ button for any style of font you like.
\n\u2022 You should see an @import button, click on that
\n\u2022 Copy that text in between the <style> tag
\n\u2022 Paste it on the top of your CSS file
\nFor 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.
\n\u2022 For Global Elements<\/p>\n![\"\"](\"https:\/\/i0.wp.com\/wealthbankers.com\/academy\/wp-content\/uploads\/2021\/04\/pexels-fauxels-3184419.jpg?resize=601%2C401&ssl=1\")
<\/p>\n