Found 8860 Articles for Front End Technology

Removing the odd occurrence of any number/element from an array in JavaScript

AmitDiwan
Updated on 22-Feb-2021 10:17:09

194 Views

Suppose, we have an array of numbers like this −const arr = [1, 6, 3, 1, 3, 1, 6, 3];We are required to write a JavaScript function that takes in one such array as the first and the only argument. Then the function should look for all such numbers in the array that appear for an odd number of times (excluding only once).For example, In the above array, the numbers 1 and 3 both appear for 3 times (odd), so our function should remove the third occurrence of both these numbers.And the output array should look like −const output = ... Read More

Flattening a JSON object in JavaScript

AmitDiwan
Updated on 22-Feb-2021 10:20:27

11K+ Views

Suppose, we have the following JSON object that may contain nesting upto any level −const obj = {    "one": 1,    "two": {       "three": 3    },    "four": {       "five": 5,       "six": {          "seven": 7       },       "eight": 8    },    "nine": 9 };We are required to write a JavaScript function that takes in one such nested JSON object and returns a new object that contains no nesting and maps the corresponding values to the keys using the dot ... Read More

Finding two numbers that produce equal to the sum of rest in JavaScript

AmitDiwan
Updated on 22-Feb-2021 10:22:40

244 Views

Suppose following is the problem:We have a sequence of numbers starting from 1 and upto any arbitrary number, let's call it num. We have to pick two such numbers from the sequence (let's call them m and n), such that:sum(1 to num) - (m + n) = m * nAnd finally, we should return an array of groups of all such numbers.For example −If the input is −const num = 10;Then the output should be −const output = [    [7, 6] ];because sum(1 to 10) = 55and, 55 - (6 + 7) = 6 * 7 = 42ExampleThe code ... Read More

How to set cookie value with AJAX request in JavaScript?

AmitDiwan
Updated on 22-Feb-2021 09:27:40

3K+ Views

We are required to set cookies with AJAX requests or in such a way that any AJAX request sends those cookies to the server.One thing to note here is that every AJAX request made to any remote server automatically sends all our cookies to that very server without us having to do anything. Therefore, with this thing clear, we just have to set a specific key to our document object using JavaScript and whenever we make a network call, that cookie will automatically be sent to the server which we are making the call to.The code for setting the cookie ... Read More

Why doesn’t Postman get a “No 'Access-ControlAllow-Origin' header is present on the requested resource” error in JavaScript

AmitDiwan
Updated on 22-Feb-2021 09:26:23

680 Views

Problem:When we try to make network request to a remote server whose origin is different to our current url (from which we are making the request), we most likely get a CORS error due to different origin problem in the web, whereas while using a tool like Postman, we can successfully avoid this CORS error.We are required to explain the difference in behaviour of response when requested through web and when requested through an extension like postman.Explanation:When we make a network request to a different domain than our page is on using a web browser, it blocks that request and ... Read More

Preview an image before it is uploaded in JavaScript

Aayush Mohan Sinha
Updated on 04-Aug-2023 10:26:33

7K+ Views

The ability to preview an image before it is uploaded holds significant value in the realm of web development, allowing users to have a glimpse of their selected image and make necessary adjustments prior to submission. Employing JavaScript, a versatile programming language, developers can harness the power of client-side processing to implement this functionality seamlessly. In this article, we will embark on an exploration of how to preview an image before it is uploaded using JavaScript, unveiling a step-by-step approach and leveraging seldom-utilized techniques to accomplish this task. By delving into the intricate details of this process, developers will gain ... Read More

How to take screenshot of a div with JavaScript

AmitDiwan
Updated on 22-Feb-2021 14:01:44

2K+ Views

We are required to capture (convert into image) part(s) of our markup that lays out our website and save that captured image or do something with it. So, we are required to devise a way using which we can achieve this described behaviour.As our problem includes capturing any markup element and not just canvas, it’s a bit complex and especially if we plan to do it from scratch. Therefore, for our ease we will use a third party library, htmltocanvas that does exactly what the name suggests, converting the desired markup to canvas, after which we can simply download the canvas ... Read More

How to read an external JSON file in JavaScript

AmitDiwan
Updated on 22-Feb-2021 09:17:50

5K+ Views

Suppose we have a JSON file config.json that contains the following data −{    "secret": "sfsaad7898fdsfsdf^*($%^*$",    "connectionString":    "mongodb+srv://username:password@cluster0.laaif.mongodb.net/events?retryWrites=tr    ue&w=majority",    "localConnectionString":    "mongodb+srv://username:password@cluster0.laaif.mongodb.net/eventsLocal?retryWrit    es=true&w=majority",    "frontendClient": "https://helloworld.com",    "localFrontendClient": "http://localhost:3000" }And in the same directory (folder), we have a JavaScript file index.js.Our task is to access the content of the json file through the JavaScript file.Method 1: Using require module (NodeJS environment only)We can use the require module to access the json file if we are running our JavaScript file in NodeJS environment.ExampleThe code for this will be −const configData = require('./config.json'); console.log(typeof configData); console.log(configData);Method 2: ... Read More

How to Create a Dark / Light Mode for Websites using CSS

AmitDiwan
Updated on 10-Feb-2021 13:59:59

499 Views

By changing the text-color and background color of a page, we can add dark/light mode for our website.SyntaxThe following syntax can be used to apply dark mode.Selector {    color: white;    background-color: black }Example Live Demo                    div {             font-size: 1.4em;             text-align: center;          }          .dark {             color: white;             background-color: black;          }       ... Read More

CSS Updates - New Properties for Styling Text Decorations & Underlines

AmitDiwan
Updated on 31-Oct-2023 11:45:26

102 Views

With the introduction of the following text-decoration properties, we can now style text in more ways than before. The text-decoration is the shorthand for text-decoration-thickness, text-decoration-color, text-decoration-line and text-decoration-style. text-decoration-skip, text-decoration-skip-ink, text-decoration, text-underline-offset and text-underline-position need to be specified explicitly. Syntax The syntax of CSS text-decoration is as follows − Selector { text-decoration: /*value*/ } The text-decoration Shorthand Property The text-decoration is the shorthand for text-decoration-thickness, text-decoration-color, text-decoration-line and text-decoration-style. text-decoration-skip, text-decoration-skip-ink, text-decoration, etc. Example Let us see an example to use the shorthand property to decorate text − ... Read More

Advertisements