-
How to return highest and lowest numbers from a list in JavaScript?
Question : We are given a string of space-separated numbers and we need to return the highest and lowest numbers like so: Solution 1 We’ve written a function and first used split since the input numbers are in ‘strings’ format and then map() method to create new array to map through each of them. Next,…
-
React State : Basics with Real World Examples
React State is actually an object with encapsulated data which changes in response to instructions given to it using event listeners and handlers. For example, clicking the ‘add item’ button should take you to a screen where the item is added to a shopping cart, or clicking the ‘next page’ link should take you to…
-
Event Listeners and Event Handlers in React
Just like in vanilla JavaScript, React let’s you add event listeners or event handlers wherein if you hover on something or click something, then something else will be triggered. For example, you can write a JSX code in React where if you click a button, a pop-up message displays. Here’s how to add a simple…
-
Listening to user input using JavaScript
You can listen to user inputs using various methods in JavaScript. Some of the most popular ones are given here with examples : Example 1 The value keyword can be used to capture the user input inside the DOM. Here’s how it works : Inside the JavaScript code block above you’ll see that we’ve used…
-
To Do List in JavaScript – Explanation
I’ve created this fully functional To-Do-List code in JavaScript and explained how each line of code works within the comments in this document. JavaScript Logic Here’s a simple and beginner friendly way to write the logic. First, the HTML file is given below : The HTML file above is pretty simple. Note that there’s a…
-
All about Props in React Components
What are Props? Props are a way for React components to communicate with each other. Props are essentially used to pass data from one component to the other viz-a-viz a parent and a child component. These are information you can pass through a JSX tag/syntax. You can pass any JavaScript values through props like objects,…
-
Everything you need to know about JSX
What exactly is JSX? JSX is simply HTML code inside of a JavaScript function. In a React application, we use components and inside components we write a JavaScript function. Inside the function we write codes using the JSX syntax to make the code work. JSX syntax looks a lot like regular HTML, but are stricter…
-
How to write your first React component
What exactly is a React Component? Components are actually pieces of your User Interface(UI) in React. These reusable UI elements of your React App called components consists of markup(HTML), CSS and JavaScript under the hood. In a React App, every part of your UI is actually a component. These components may be a button, a…
-
Callback functions in JavaScript
To understand callback functions let’s write some very simple functions and see the expected output first : Example 1 Expected output of the above : Example 2 Expected output of the above : In both the examples above you can see that we have the same functions and we have only called the first and…
-
What is box-sizing : border-box in CSS?
Introduction This property specifies the behaviour of the width and height of a container, more specifically a div. To understand this property you have to use it on more than one div elements which stack on top of each other, or, on div tags which are in a parent-child hierarchy. Explanation with examples Example 1…
