James Ellis

James Ellis

1576935655

How to Build Javascript Components Without a Frameworks

Everyone has their favorite framework, and most developers aren’t shy about sharing those opinions. I guarantee you right now two developers are arguing about their favorite frameworks. Personally, I’ve been using JavaScript frameworks since JQuery was introduced. I’ve written applications for clients using Knockout.js, Angular 1+, React (since before v15), and have made some small learning apps using Stencil and Vue.

One of the great things that all of these frameworks bring to the table is their easy composability. The ability to make components that you can reuse throughout your app helps so much with development time, code reusability, and testability. You don’t have to use a framework to get these benefits. JavaScript has them built-in, you just have to know where to look. Also, learning how to build components in vanilla JavaScript will help you understand how to make those components in your favorite framework.

In this post, I’ll show you how to build a simple star rating component using nothing but vanilla JavaScript, CSS, and HTML. I’ll be using VS Code and http-server to build and serve a static set of files. You’ll need Node.js and npm installed to run http-server.

Define the Desired Behavior for the JavaScript Component

When I build components in any framework (or without one), I like to first figure out all the things I need the component to handle internally. In this case, I’m building a star rating component, so it definitely needs to display stars.

  • The star component will have a default color for all the stars.
  • If the component has a rating value when it renders, it should change the color of all the stars up to and including the star that denotes the rating.
  • When a user hovers over the component every star in the component, up to and including the one they are hovering over, should change colors.
  • If the user clicks on a star, the current rating for the component should be updated to reflect the star rating they clicked on.
  • If they move their mouse away without selecting a rating, the component should set the colors of the stars back to reflect the last selected rating.

With those requirements in mind for your JavaScript component, let’s dig in!

Build the Shell of the JavaScript Component App

Start by creating a folder somewhere you want to serve the application from. When you run http-server in a directory it serves that folder as a web server. Once you have the directory created, open it in VS Code and add a file called index.html. This will be your web application. Inside the index.html. This file will have two star rating HTML elements on it along with some basic style and a script tag. The complete contents:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <style>
    .star-rater .star {
      font-size: 5rem;
      color: gray;
    }
  </style>
  <title>Rater</title>
</head>

<body>
  <h2>Star Rating</h2>
  <div id="rater-1" class="star-rater" data-rating="3" role="rater">
    <span class="star" data-value="1">&#9733;</span>
    <span class="star" data-value="2">&#9733;</span>
    <span class="star" data-value="3">&#9733;</span>
    <span class="star" data-value="4">&#9733;</span>
    <span class="star" data-value="5">&#9733;</span>
  </div>

  <div id="rater-2" class="star-rater" data-rating="2" role="rater">
    <span class="star" data-value="1">&#9733;</span>
    <span class="star" data-value="2">&#9733;</span>
    <span class="star" data-value="3">&#9733;</span>
    <span class="star" data-value="4">&#9733;</span>
    <span class="star" data-value="5">&#9733;</span>
  </div>

  <script type="module" src="js/main.js"></script>
</body>

</html>

You’ll notice I’ve added the role="rater" to each element. That will be the way you tell the main JavaScript file to attach the functionality of your Rater component to this element.

Now create a folder called js to house your vanilla JavaScript component code, and then create two files called rater.js and main.js inside that new folder. That script tag above brings in the main.js file as a module type. For browsers that support module syntax for JavaScript, this will allow you to use the import and export statements introduced in ES2015.

In the rater.js file add the code to export the rater’s functionality:

export function Rater(ratingElement) {
  const stars = ratingElement.querySelectorAll('.star');
}

The first bit of functionality is here as well. The Rater takes in an HTML element and queries it for all of its elements with a class of star and puts them into the stars array.

To finish out the shell, add the code to the main.js file that finds all the HTML elements with a role of rater and pass them to the Rater component.

import { Rater } from './rater.js';

document.addEventListener('DOMContentLoaded', function() {
  const raters = document.querySelectorAll('[role=rater]');
  raters.forEach(rater => {
    new Rater(rater);
  });
});

Now you should be able to fire up the application by serving the folder. From the folder where your index.html file lives in a console run:

http-server .

It will tell you it’s running on http://localhost:8080, and you will see the two rating components with gray stars, but they don’t do anything yet.

Build the Functionality of the JavaScript Component

Start with add the ability to highlight based on a rating number. In the rater.js file, add a function to highlight each star up to and including a certain rating:

const highlightRating = (rating) => {
  stars.forEach(star => {
    star.style.color =
      rating >= star.getAttribute('data-value') ? 'yellow' : 'gray';
  });
}

Now you’ll want to set the initial highlighting for the component when it renders. Each rater HTML element has a data-value attribute. That will be used to hold the current rating for the component. Since you’ll use this when the component loads and after the user moves their mouse away from the component, call the function resetRating(). Add the following function right above the highlightRating() function:

const resetRating = ev => {
  const currentRating = ratingElement.getAttribute('data-rating');
  highlightRating(currentRating);
};

Then below the highlightRating() function call it so that you can set the highlighting for the initial load.

resetRating();

Now when you reload your browser you should see each rater highlighted to its appropriate default rating. In this case, three and two.

The next step is to handle the hovering action so that the rating component highlights as the user hovers over it. You’ll first need to wire up an even to each star. Since you already have all the stars in the component in an array, just loop over them and hang the event listener on them. Add the following code to the bottom of the component function:

stars.forEach(star => {
  star.addEventListener('mouseover', ratingHover);
});

Now, you need the event handler for the listener. This even will just get the star the user’s mouse is hovering on and call the highlightRating() function. Right above the resetRating() function add:

const ratingHover = ev => {
  const currentHover = ev.currentTarget.getAttribute('data-value');
  highlightRating(currentHover);
};

You’ll also want the component to reset back to the last selected rating (in this case the default rating) when the user moves their mouse away from the rating component. Add the following line of code to the bottom of the component function:

ratingElement.addEventListener('mouseout', resetRating);

Now if you refresh your page you should see the hovering happening and when you move the mouse away, it should reset the highlighting.

Now there is only one thing left to do, and that is wire up a click event to the stars and update the data-rating for the component when a user clicks on a star.

To wire up the click event, update the stars.forEach() line so that it looks like:

stars.forEach(star => {
  star.addEventListener('click', setRating);
  star.addEventListener('mouseover', ratingHover);
});

Now that you have a listener for the click and the hover, add the setRating() event handler to set the rating when a user clicks on a star below the first line of the component function:

const setRating = ev => {
  ratingElement.setAttribute(
    'data-rating',
    ev.currentTarget.getAttribute('data-value')
  );
};

Now, when you refresh your browser, you should be able to hover over the rating component and see the highlighting happening. Then, when you click on a star, it should update the data-rating value of the rating component element. You can view this in the developer tools of your browser.

Take the JavaScript Component to the Next Level

I’ve kept this component simple to illustrate just how to make the component and make it reusable by the import statement. Now that you know how to build and use a component in vanilla JavaScript, you could make this component do so much more!

You could have the component “draw” the stars and set a max-stars attribute on the element to tell the component how many stars to draw. You could use something like Font Awesome to display other things besides stars. You could even make the Rater component call another component that sends the rating that the user selects back to an API to be saved to a database. But the skeleton is there.

#javascript #programming

What is GEEK

Buddha Community

How to Build Javascript Components Without a Frameworks

Top 15 Free JavaScript Frameworks for Web Applications

List of some useful JavaScript Frameworks and libraries for website, web apps, and mobile apps development, that developers should know about to make selection easier.
This article will help you understand the various types of JavaScript Framework available in the market. When it comes to choosing the best platform for you, it’s not only the number of features you need to consider but also its functionality. The ease with which it fits within your project is also an essential factor. The next step is to choose the framework that best fits your company requirements or you can select the best from the list of top web development companies to develop your product based on your requirements.

#javascript frameworks for web applications #web applications development companies #progressive javascript framework #javascript frameworks #javascript #frameworks

Abigale  Yundt

Abigale Yundt

1603336938

What Will Be The Best JavaScript Frameworks in 2021? -

Someone who is beginning their work journey as a developer or software engineer might encounter an issue while selecting which language, framework, or tools they should be trained in or must have knowledge about. A lot of individuals had to go through such a scenario. Since there is a large range of languages and frameworks available in the software development community, there is not a single solution or option. Hence, we have created this list to narrow down your option. In this post, we will talk about various _ JavaScript Frameworks_ that we feel will be the most useful in 2021.

When we are talking about the development of websites, the JavaScript framework comes in the mind quickly for companies and programmers in today’s world. You most likely had a chance to work on one or two of the JavaScript Frameworks that we have mentioned on the list. Go on and learn more about these JavaScript Frameworks.

1. ReactJS

React is the most prominent JS framework since it was launched by Facebook in 2003. The potential to utilize it for native development comes amongst the key benefits of React. A broad community, Facebook support, saturated environments, improved efficiency, and reusable components are the key reasons behind React’s success. React is ideally suited for building SPA or cross-platform applications and designing small business applications.

ReactJS

#javascript #frameworks #javascript #javascript frameworks #mobile application

Rahul Jangid

1622207074

What is JavaScript - Stackfindover - Blog

Who invented JavaScript, how it works, as we have given information about Programming language in our previous article ( What is PHP ), but today we will talk about what is JavaScript, why JavaScript is used The Answers to all such questions and much other information about JavaScript, you are going to get here today. Hope this information will work for you.

Who invented JavaScript?

JavaScript language was invented by Brendan Eich in 1995. JavaScript is inspired by Java Programming Language. The first name of JavaScript was Mocha which was named by Marc Andreessen, Marc Andreessen is the founder of Netscape and in the same year Mocha was renamed LiveScript, and later in December 1995, it was renamed JavaScript which is still in trend.

What is JavaScript?

JavaScript is a client-side scripting language used with HTML (Hypertext Markup Language). JavaScript is an Interpreted / Oriented language called JS in programming language JavaScript code can be run on any normal web browser. To run the code of JavaScript, we have to enable JavaScript of Web Browser. But some web browsers already have JavaScript enabled.

Today almost all websites are using it as web technology, mind is that there is maximum scope in JavaScript in the coming time, so if you want to become a programmer, then you can be very beneficial to learn JavaScript.

JavaScript Hello World Program

In JavaScript, ‘document.write‘ is used to represent a string on a browser.

<script type="text/javascript">
	document.write("Hello World!");
</script>

How to comment JavaScript code?

  • For single line comment in JavaScript we have to use // (double slashes)
  • For multiple line comments we have to use / * – – * /
<script type="text/javascript">

//single line comment

/* document.write("Hello"); */

</script>

Advantages and Disadvantages of JavaScript

#javascript #javascript code #javascript hello world #what is javascript #who invented javascript

Hire Dedicated JavaScript Developers -Hire JavaScript Developers

It is said that a digital resource a business has must be interactive in nature, so the website or the business app should be interactive. How do you make the app interactive? With the use of JavaScript.

Does your business need an interactive website or app?

Hire Dedicated JavaScript Developer from WebClues Infotech as the developer we offer is highly skilled and expert in what they do. Our developers are collaborative in nature and work with complete transparency with the customers.

The technology used to develop the overall app by the developers from WebClues Infotech is at par with the latest available technology.

Get your business app with JavaScript

For more inquiry click here https://bit.ly/31eZyDZ

Book Free Interview: https://bit.ly/3dDShFg

#hire dedicated javascript developers #hire javascript developers #top javascript developers for hire #hire javascript developer #hire a freelancer for javascript developer #hire the best javascript developers