Margaret Tettehfo, Author at DevWorld Tech Academy

What’s the Difference: Software “Engineer” or “Developer’’?

Margaret Tettehfo — Wed, 28 Apr 2021 14:11:25 +0000

‘An engineer is responsible for inspecting the system and makes good use of all engineering philosophies, while a developer pays attention to making functional software.’

5 mins read.

The answer to this really depends on whom you put the question to.

There are no differences between the roles they perform, with companies using their own experiences and expertise in giving an explanation that meets their needs. To further confuse matters, there can be geographical contrast in terms of clear differences in education. However, the differences in data sources can be determined and surveyed in order to come to a solution.

Please Note:

Our new students’ scholarship information can be found on this page.

As announced, all new students are to complete their application processes, tuition fees, and registrations for the next academic session (starting 4th July 2022) at least 2 weeks (that is, latest 21st June 2022) before classes begin for the new session. You can see the admission requirements here needed to complete your registration on time before space runs out.

Info Pages & Links for Prospective Students

According to DevWorld Tech Academy (DWTA), Software Engineers and Developers have different roles to perform.

‘’Software engineering is a thorough study of engineering and its principles to create and design software. They take part in the development of the life cycle, by linking the needs of clients with an applicable technological solution.

Consequently, they consistently develop a process to provide a specific function. Meanwhile, software engineering means using engineering hypotheses to develop software.

On the contrary, software developers are the innovative spearheads behind programs. Software developers are included in the entire development process. They are the ones who team up with the client to originate an imaginative design.

They however involve the computer programmers in creating the code required in running the software appropriately.

Computer programmers will examine and repair problems together with the software developers. The software developer provides strategic leadership and practical assistance at every stage of the life cycle of software development.

DWTA agrees that there is a strong separation. We say that the words software developer and software engineer different. Although this belief is at odds with popular belief, that assumes they are exchangeable.

A developer has knowledge of how to code and may have a specialized skill needed in building meaningful products.

A software engineer follows a systematized process of understanding the terms, working with partners, and coming up with a solution that takes care of their needs. A developer has a tendency of working alone whiles a software engineer is a member of a team.

A Software Engineer skills and job description

A software engineer is a highly skillful software developer that is competent in managing a complex system. An individual who is not only proficient in building an entirely functioning app but is adequately professional to know how to build it in a way that is easy to restructure, self-documenting, and hence easier to debug.

They play a pivotal role in as a leader, specialist and respective contributors on diverse projects. They have to provide analytic advice in identifying and discharging new IT uses with the aim of helping clients and the company reach an estimated objective.

They have to be able to resources, organize development tasks, and supervise practical project plans. They often team up with IT, operations, and development staff throughout the software development life cycle.

They perceive that examination and precautions at the end can save them days of work and inconvenience down the line. They dedicate themselves not to making the smartest code but to creating their code that is distinct. They know the best sample of code is the one you at no time have to write.

What Software engineers are expected to do:

Have practical know-how, with proficiency in working on a wide range of projects.
Make good use of assessment automation tools such as Cucumber, Ansible, or Gherkin.
Have the ability to create and sustain IT designs and large-scale data to be saved on a cloud-based network.
Be able to build a flexible structure to channel, to support a constant consolidation and a prolonged delivery.
They are required to work efficiently by themselves and with a distant team.
The senior software engineer must supervise difficult systems evaluation, project, and advancement programs.

A Software Engineer Role Will Generally Involve:

Experimentation, design, improve and check their software as well as assembling and sharing software over the network.
Revise an existing software is to solve defects, sustain new hardware or upgrade its performance.
Examine the needs of the users and analyze software requirements including practicability and cost or time restraint.
Assisting clients concerning description and design.
Collaborating of system software for distribution and installment.
Keeping an eye on the work is the duty of the technologist and an engineer.

Software Developer skills and Job Description

A software developer is not only qualified for writing codes. They also assess the recent system, bringing out innovations for improvements, it also involves more effort for work to be done. A software developer works hand in hand with the analyst, marketing department, and designers.

Software developers have to ensure that their code works by constantly testing it, by using a real and controlled situation before going for other options.

They are required to have passion for perfection so as to sufficiently solve bugs and revise programs in order to increase effective operation.

A superior software is very innovative with ideas and has the practical experience to come up with a creative concept to solve a client’s problem and are experts in seeing many problems beforehand.

A software developer naturally follows a development lifecycle approach such as Scrum, XP, or Kanban

Skills That A Software Developer Must Have:

Exceptional problem-solving skills, because will be needed to balance need with software strength.
They have to be very familiar with the computer terms for the purpose of working effectively with programs like Java, C++, C#, and Python.
Must have experience with the usage of an open-source tool such as GitHub.
Effective communication skills spiced with excellent feedback and strong attention to facts as a slight error can lead to a major problem.
Being particularly focused will help manage coincident projects at the various development processes.
Get the idea of code even in a language that they are unfamiliar with.
A software developer must frequently oversee the changes made, which includes solving faults in order to ensure a high standard and efficiency.

On this account, they must persistently shift between assigned works, meeting deadlines, and managing schedules.

IN SUMMARY…

To sum up, the main differences between the software engineer and software developer:

A developer implements, they focus their talents on a single area without needing a broad view. A software developer’s prime focus is on developing a code that is a part of a software development cycle.

An engineer is responsible for the application of the philosophies of engineering to software. One is always focused on the “master plan” with creativity in different areas. A software engineer can play the role of a developer, but their main focus is on the architecture.

In the end, the main differences between software engineering and software development are, one supervises the engineering whiles the other stays focused on creating practical programs.

Anyone can become a software developer or engineer, provided the person has little idea of programming. Then you are laying the foundation of becoming one, and the right place to study such a program online or offline without any doubt is DevWorld Tech Academy located in Accra, Ghana.

These programs and other programs such as cloud computing, data structure and Algorithms, and many other excellent programs are thought to with people who are passionate about making a difference in the world.

Due to the quest for bringing out the best from the student, the school amazingly enroll applicants from age fifteen to forty years old (15 –40). DWTA does not only teach the student to graduate and join the ‘’Unemployed graduates”, but helps you in building a career path as:

A freelancer
Company employee
An entrepreneur

For more information, please visit our website at wealthbankers.com/academy.

The post What’s the Difference: Software “Engineer” or “Developer’’? appeared first on DevWorld Tech Academy.

The Success Story of a lady Software Engineer and Tech Coach

Margaret Tettehfo — Wed, 28 Apr 2021 13:29:41 +0000

Most of the time, the youth have thousands of reasons not to follow their passions of being an IT expert, they have excuses like I’m too, young or too old, It won’t yield much income as other courses do. the fact is, the world is now revolving around technology. if you don’t join this fast-moving train, you will miss a lot. Most of the institutions in the world are now changing from employing labor-related employees to tech-related ones as it is faster, easier, and safer.

Info Pages & Links for Prospective Students

Let me tell you a story about a lady who made this same decision to switch from a normal job to study tech and the result is mesmerizing. This journey started back in February 2019. when she received a scholarship to attend an intensive 16-week Software Engineering Bootcamp training at Makers. While working at an FTSE 250 rail and coach ticketing platform, an unknown advert popped up in her LinkedIn account and that became a turning point.

According to her, When she read the job advert, the only thing that came to mind was a self-doubting question. Despite those discouraging questions, her determination keeps growing each day. with such determination, she started Bootcamp training in Intensive Software Engineering course for months She is now an employee as a Software Engineer & Tech Coach role at Tech Returners. As a career woman, this is what she does about her job, which is helping people to code and creating workshops for the community with her friends, speaking, and mentoring work.

Despite being an active Software Engineer, she blends both roles perfectly. Her Techniques She does a lot of visualizations She illustrated all tech concepts using IT terminologies and relate them to real-life things She does a video recording to explain complex technical concepts, provide thorough code review feedback and she aids with debugging strategies.

She conducts a one on one and group video calls to host sessions, webinars and provide technical supports She starts by teaching the main principles and then breaks down technical terms as much as she can for it sounds less daunting.

She balances her learning and coaching job, by helping others upgrade their skills to a secondary level and this helps her expand her skills to gain more experience in HTML, CSS, JavaScript, React, and many others.

Her aim is to be the best in code development as she has the skills for spotting patterns in a code quickly no matter the tech language used. She developed herself by learning from other expert developers and this improved her understanding of all tech concepts and terminologies. Her interest in precision and deeper understanding, made her make some time for herself to build her own project and practice coding skills, she researches on advanced technical terms and has time for herself to be more efficient.

She loves to see others grow in their understanding of technical-related issues. Her only challenging moments were the times when the self-doubt questions pop up, but with confidence, she overcame it all. Her future plans to be globally known as one of the best specialists in HTML, CSS, and React.

Inspiring right? You can also make it by taking a step to visit DWTA. She came out of her shells before getting to where she is now. Don’t hesitate as DevWorld Tech academy admits students from age 15 – 40 years of age. This means it’s not too early or too late for you to start so apply now!.

The post The Success Story of a lady Software Engineer and Tech Coach appeared first on DevWorld Tech Academy.

Reasons Why You Are Finding It Difficult to Learn Programming

Margaret Tettehfo — Wed, 28 Apr 2021 12:49:32 +0000

You have made an effort and given up countless times. Maybe you are just not competent enough for it.

It seems you have spent a lot of internet bundle on watching YouTube tutorials, paying huge amounts of monies to do an online course and even to the extent of reading basic articles on programming yet it feels like there is no hope and you feel like there people out there who are good at writing complex code which you do not understand and solving them as well.
And you sadly declare “I can never be like them” and you start to wonder, how did they know and learn it as well.

Info Pages & Links for Prospective Students

Honestly speaking, they were not born with the skills to code, or are they more intelligent than you are. In this article, there are steps that if you take it seriously, you will overcome the fears of programming.
If you are truly passionate to pursue this course, it is very necessary to overcome the fears first. Most of the time, coding unease is a challenge that can stop you from progressing for many years. Unfortunately, it is something most people don’t talk about.

 Let me Share My Personal Experience with You.
Being a student, I perform very well in school that I am always proud of my ability to solving problems. I was a very clever and a fast learner as well. But this diversified after I completed High School, that is where I have realized that programming is not the same as the subjects taught in High School.

According to Elbert Hubbard, “the greatest mistake a man can ever make is to be afraid of making one”. This is the fact as someone who is not used to this kind of course, it took me by surprise how long it took to get to understand and know how to code. I felt so bad that I was making too many mistakes, then the feeling of not been the best at it led me to struggle with a clear simple task to an extent of not being able to set up a programming environment.

Then all of a sudden, I start doubting my ability to code and seems to me that everyone is better than I am as they are very good at it. To an extent that I could not complete a code on the internet without any error, not to talk about understanding it. This resulted in a lot of frustration and I threw in the towel. The problem I have realized is not that I have lacked self-confidence but I was overconfident that, I became disappointed that things did not go the way I wanted I was upset and frustrated and that led me to finally giving up.

Was that my biggest mistake?

I was thinking that programming was a course that can be studied in a short time and not admitting that, there was a new way of learning it. And if I have known and agreed that learning the process of coding from zero, was something that involves efforts and diligence, I would have released myself from a lot of frustration and time. In this article, I will explain the types of approaches you need to take for you to succeed in this field.

When I was surrendering to learning code, I thought there were two kinds of people in the world now – people who were qualified for programming and people who were not. It turns out that I was right. The people who are competent for programming are not usually more intelligent than you are, they only have a mindset and an attitude that has helped achieve positive results in the field. With the same attitude, you can also get there too.

Steps in becoming a good programmer

Provided you want to become half good, then you need to put in much effort. It is not a competition, if they manage to a complex problem that you couldn’t mean that they are smarter than you are, the truth is they put in much more effort and time than you do. For you to get there, you need to do the same.

• Exercise patience

Patience is undeniably the most necessary character that a programmer needs. You have to be someone who has to stare at the computer screen hour after hour and, clearly simple problem can take hours or days to solve. you can learn by patiently spending time debugging code.

This was why I find it difficult to develop the patience to stay at one place, if you get bored easily like me, or you have short concentration points, then you have a lot of time to train yourself.

Once you get the idea of staring at the computer screen in an effort to solve the problem, you get closer to reaching your dream of becoming a good programmer.

• Being stubborn
Have you remembered when you followed your parents to the mall and you spotted a toy that you like so much and you requested for it be bought for you but they refused, you cried and decided not to leave the mall and created a scene until your parent gave up, and bought you the toy?

This is definitely the kind of stubbornness you need when studying programing. Don’t accept no for an answer, whenever you want to give up because of the frustration. Pause take your time to try again and again until you get the desired result, keep a stubborn determination till you get it right.

• An accurate amount of confidence.
being overconfident is bad, it will stop you from progressing because your expectation will be higher than what you will achieve. There are people who may be a lot better than you but it is natural to feel that way. The first step is to accept that they are and it is the fact because they have spent a lot of time and dedicated years of learning how to code. If you want to be the best, then you must dedicate your time and effort to learning how to.

Finally, in order to overcome the fears of programming, you first have to understand that there are various ways of learning. And if you are not able to code, accept it and know that it is normal. Because as time passes by, you get better until you have mastered it.
Thanks for reading!! For more articles click here

The post Reasons Why You Are Finding It Difficult to Learn Programming appeared first on DevWorld Tech Academy.

Coding Soft Skills a Result of Constant Reading

Margaret Tettehfo — Wed, 28 Apr 2021 11:08:49 +0000

As a career person, I have two separate jobs which a very strong needs for soft skills. They include communication, problem-solving, empathy, stress management skills, and many others. Most of the time, we place a lot of attention on the hard skills of coding.

Info Pages & Links for Prospective Students

In a matter of months in my career as a software engineer, it became clear to me that all my attention was focused on writing code which was only one aspect of productive software engineering. It will take many skills to be a member of an engineering team and you will need this skill as well.

 Communication

This is one of the skills one needs to acquire not only as a developer but for all professions, especially in coding. Communication is very crucial, know that communication has two ways that are listening and speaking. You need to be a good listener, listening to your fellow colleagues, clients or users will make a big difference. When you listen, you end up getting an advantage over those who only do the talking and helps you to excellently execute your task.

When speaking, do it with confidence and accuracy. With persuasion, try your best to achieve a result when communicating, remember that your ability to speak fluently is your weapon and a very useful tool so make good use of it. Be polite and never interrupt the other person this shows that you are patient, keep your composure while listening, keep in mind that communication is not only verbal.

 Reviewing of Codes

Being aware of what your code does is very easy, after all, it is you wrote it. Reading another person’s code is a different thing altogether as it takes a deeper and a higher level of understanding, and expertise to be able to follow what is taking place and be able to catch potential bugs.

 Decision making
This all depends on your role, you may be involved in managing people and projects and maybe a project team. It helps to complete a task faster. Software engineering decision includes time management, organization skills and apprehension of the ecology at a higher level, deliberation on business growth.

The Importance of Reading
There is a never-ending variety of resources available for use, they are Blogs, YouTube, documentations, and number one is the good old book.

Be a Sponge
Being a sponge means, the ability to absorb a lot of information, and this type of learning comes in two folds.

a. Completing every circle.
it is hard to tell you the countless times I read a piece of work and a week later it becomes the topic for discussing at work, it feels good to be ahead and know more to be on top of the conversation. Whenever I have realized that I had not read anything, on that day I would contribute much less to the conversation. Most of the time, I seem lost about what they are discussing. So, I do my best to read more and broader.

b. Pushing beyond your limit
Honestly, I always don’t feel like I have understood what I read on the first attempt but it depends on the kind of book. I am going for something new and technical, and it feels too difficult for me to understand it constantly though, as long as I keep on repeating the reading, and find the meaning to difficult terms.

Then it means the mind of “I can’t do it” will be pushed away, sometime ago I felt like none of the things I’m studying made sense and I have realized that not knowing is having something new in-store. As for engineering, you will never know everything.

But if you are learning something confusing, if you are not learning something that is confusing in the first place, you are not challenging yourself and the aim is to move a bit higher from your comfort zone. The only solution is to read to more. It does not matter if you feel like it makes sense or not just keep on reading.

c. Be comfortable when talking about code

Talking about code most of the time comes less naturally compared to writing it You might have known it in your head all you need to know is, it is only kept in your head. You have to open up and share it with your colleagues. Reading more books opens your mind when it comes to discussing your work, it helps you to see how others introduce theirs and you familiarize yourself with the kind of conversation and exposes which help in making the conversation flow and be flexible and to flow with time.

d. Know the “why” Concept
It is very important you understand always the “Why” beyond the code (and the one you are reading). This is the idea that will allow you to enhance your program, expect possible issues, debug all errors, and adjust to all changing conditions. To understand why something was done, you can use your own understanding to build a precise solution rather than a multipurpose patch.

Reading all code samples and analyses
As mentioned earlier, the skills to read other people’s code and get meaningful feedback is very important to being part of the engineering at first, and you may know where to begin. Most book on engineering books that are language-based which includes code examples with additional analyses which:

i. provides an opportunity to gain the skills of reading others code in a good space (there is no risk of missing a bug that gets into production)
ii. it helps to learn code that is already analyzed. This shows that you are able to get an idea of what kind of things to look for, where to begin and to ask yourself and the team a useful question.
Learning the code language

Each and every technology has its own custom language that they use to talk about you from your conversation with your colleagues. Reading can also provide the opportunity to familiarize yourself with the language in a much safe space(that means without committing an error in the presence of your colleague). Constant tautology is important to strong communication and knowing this is an important foundation.

I cannot emphasize how important it feels to be reading to your own growth as an engineer. Read a few pages every day. even if you have to reread it, stick to it and you will see that both your conversation and approach will change.

The post Coding Soft Skills a Result of Constant Reading appeared first on DevWorld Tech Academy.

THE BEST GUIDE FOR BEGINNERS IN BUILDING JAVASCRIPT PROJECT FOR THE FIRST TIME

Margaret Tettehfo — Wed, 28 Apr 2021 09:22:15 +0000

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.
• – This term explains to the browser what type of document to expect. In this case it’s

HTML.
• – This stands for the root of an HTML document, it contains all other HTML elements
• – This have metadata (data about data) and it’s usually placed between the and tag
• – This tag describes the content of the HTML body, it usually contains other elements like header, mains, sections, paragraphs, buttons etc.

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.

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