Colorify

How to Build a Beginner-Friendly JavaScript Application

TAPAS ADHIKARY

JavaScript is a popular programming language for building web, mobile, and desktop applications.

There are many frameworks and libraries that have been built around JavaScript, with more likely being developed even as you are reading this article. If you plan to start learning JavaScript, some of them are worth learning as well.

Like with any programming language, getting a grip on JavaScript has two vital parts: understanding the key concepts and practicing what you’ve learned. You need to build up familiarity with the main concepts of the language, and at the same time, you need to start hands-on practice coding projects using the concepts you’ve learned.

I recently published an article on How to Learn JavaScript Effectively with Tips and Learning Strategies. You should check it out if you haven’t already.

In this article, we will focus on the hands-on practice part. We will build a beginner-friendly JavaScript application that will teach you the basics of creating HTML structure, working with CSS, and finally adding dynamic behaviour using JavaScript.

If you like to learn from video content as well, this article is also available as a video tutorial here: 🙂

We will use the following concepts of web development while creating this application:

• Basic DIV styling with border-radius and centering
• Laying out Buttons
• Usage of Template Literals
• Adding Click Handlers
• DOM manipulation to set values

How to Create a JavaScript Project Structure

First things first, let’s create the project structure. Create a folder called colorify and create these empty files inside it.

• index.html: The HTML file that will contain the skeleton and markup of the application.
• index.css: All the styles and beautification code of the application goes into this CSS file. We will include the CSS file in the HTML file created above.
• index.js: The JavaScript code goes into this file. We will create functions to provide dynamic behaviour to the application. Like the CSS file, we will also include this file in the index.html file.

How to Build the HTML Structure

Let’s create the HTML page structure. We need a circle and three buttons as part of the project requirements. Copy the following code and paste it inside the index.html file:

          
Colorify
 
With colorify we want to start learning JavaScript.
 
Red Green Yellow 
 
  

The HTML file has two primary sections:

the section

The section includes meta information like the supported character set, what version of Internet Explorer the page should be rendered using the X-UA-Compatible value, and the viewport information. We also provided a title to the web page.

We have included the CSS file using the link tag. We used the href attribute to point to the index.css file. Last, we added the index.js script file using the script tag.

Note that we used the defer attribute to add the script to the HTML. You can tackle the script loading performance with attributes like defer and async.

The section

The section defines what will be visible to the users through the browser’s rendering process. In the code below, we have first created a container div (a simple div tag with a class called container ) that wraps all the HTML elements we plan to show on the web page.

First is a heading that renders our application name. Next, a paragraph shows some text about the application. Then we have a div with an id called circleID . We will use this div to draw a circle. Last, we have three buttons wrapped inside another div.

Also notice that each of the buttons has a click handler associated with it using the onClick .

 
Colorify
 
With colorify we want to start learning JavaScript.
 
Red Green Yellow 
 

Let’s run the application at this stage and see the output.

Note that there are multiple ways to run the application. The simplest method is to navigate to the project folder and open the index.html file on a web browser. But this approach may only work for some scripts.

The recommended approach is to run the project as part of a web server . You can use the Live Server extension in the Visual Studio Code editor for this.

Hang on! Where is the circle? We do not see the circle because we have just created a container for it but not provided the style elements to make it look like a circle.

Also, we can do a far better job aligning the HTML elements on the web page. Let’s fix these issues using CSS.

How to Use CSS to Style the Code

Open the index.css file and add the following content to it:

.container < display: flex; flex-direction: column; justify-content: center; align-items: center; >.circle < border: 1px solid #000000; width: 200px; height: 200px; border-radius: 50%; >.action < margin: 10px; >button

We have provided a flex layout to the outer container div specifying to centre the elements inside it in a column. We have provided an equal height and width to the circle div to make is appear like a square. Now we curve all side of the border with the the border-radius property to make it look like a circle.

Now the app looks much better!

Let’s click on the buttons. Oh! We see that an error gets logged into the console panel. The reason is, we have added the click handlers to the buttons but haven’t defined the paint() function to execute when user clicks on these buttons.

It’s time to define the paint() function and get things working.

How to Add Dynamic Behaviour using JavaScript

Now open the index.js file and copy paste the following code snippet to it:

We have now defined a paint() function that we have passed to the onClick handlers of the buttons. You may have noticed (in the index.html file), we have passed the respective colours to the paint() function when user clicks on a button.

Let’s dive into the paint() method and understand things.

• First we access the div element that represents the circle. We can identify the element using the id attribute value provided to it, that is circleID . We use the DOM method called document.getElementById to get it.
• Once we have the element, we can add a style to it. We are adding a background colour style based on the colour name passed to the function. Note that we are using the template literal expressions here over a regular string concatenation. This article will help you to get a grip on template literals if you are new to them.

That’s it. Now every time a user clicks on a button, the respective colour gets added as a background colour to the circle. It works like the following example:

Task for You: Complete the QUIZ

Alright, so you have learned how to create a color changer project using HTML, CSS, and plain JavaScript. Let’s take it to one level further. Here is a task for you to complete.

• Add another button called Random beside the existing buttons.
• When user click on the Random button, you must add a random background colour to the circle.
• You should reuse the existing random() function we have seen in the index.js file.

If you complete this task and want me to review your code, feel free to create a Tweet/LinkedIn post using the link to your code by tagging me. I’ll make sure to review and comment.

Before We End.

That’s all for now. I hope you found this article informative and insightful. All the source code used in this article can be found on this GitHub repository.

• SUBSCRIBE to my YouTube channel if you want to learn JavaScript, ReactJS, Node.js, Git, and all about Web Development in a practical way.
• Follow on Twitter or LinkedIn if you don’t want to miss the daily dose of Web Development and Programming Tips.
• Check out my Open Source work on GitHub.
• Follow on Showwcase for community-based learning.

See you soon with my next article. Until then, please take care of yourself, and stay happy.

Источник