- Keep the
lodash.jsfile in the current directory where your HTML file resides.
- Create the HTML file and paste the below code. Notice the below code, I already included the lodash source file in the head section.
- Now the HTML file in your browser. You should get back Hello World in full uppercase. If it happens, then the Lodash library is working.
- We have included the lodash.js file in the head section for accessing all the lodash functions.
- You also can use Lodash CDN instead of downloading it. To use CDN, replace the
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
- Then we have targeted the id ‘original from the HTML element for showing the variable of the text.
- Right then we have used our first lodash function _.toUpper() for uppercasing the text of text variable.
- We have passed the text variable as the parameter of the _.toUpper() function.
- The function will uppercase of the text string then keep into result variable.
- Finally, we have targeted another id for showing the uppercase string converted by Lodash.
- That’s all.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="lodash.js"></script> <title>Lodash</title> </head> <body> <h2>The original text is: <span id="original"></span></h2> <h2>Upper text using Lodash: <span id="upper"></span></h2> <script> var text = 'hello world'; document.getElementById("original").innerHTML = text; //using lodash to make upper text var result = _.toUpper(text); //putting the upper text value in result var document.getElementById("upper").innerHTML = result; </script> </body> </html>
Now run the file in your favorite browser, You should get something like this: