1578020963
Introduction Excellent new feature in JavaScript ES2020
#javascript #es #js #developer
What is GEEK
Buddha Community
1622622360
Data Validation in Excel
Data Validation in Excel
In this tutorial, let’s discuss what data validation is and how it can be implemented in MS-Excel. Let’s start!!!
What Is Data Validation in Excel?
Data Validation is one of the features in MS-Excel which helps in maintaining the consistency of the data in the spreadsheet. It controls the type of data that can enter in the data validated cells.
Data Validation in MS Excel
Now, let’s have a look at how data validation works and how to implement it in the worksheet:
To apply data validation for the cells, then follow the steps.
1: Choose to which all cells the validation of data should work.
2: Click on the DATA tab.
3: Go to the Data Validation option.
4: Choose the drop down option in it and click on the Data Validation.
Once you click on the data validation menu from the ribbon, a box appears with the list of data validation criteria, Input message and error message.
Let’s first understand, what is an input message and error message?
Once, the user clicks the cell, the input message appears in a small box near the cell.
If the user violates the condition of that particular cell, then the error message pops up in a box in the spreadsheet.
The advantage of both the messages is that the input and as well as the error message guide the user about how to fill the cells. Both the messages are customizable also.
Let us have a look at how to set it up and how it works with a sample
#ms excel tutorials #circle invalid data in excel #clear validation circles in excel #custom data validation in excel #data validation in excel #limitation in data validation in excel #setting up error message in excel #setting up input message in excel #troubleshooting formulas in excel #validate data in excel
1663559281
To-do List App with HTML, CSS and JavaScript
Learn how to create a to-do list app with local storage using HTML, CSS and JavaScript. Build a Todo list application with HTML, CSS and JavaScript. Learn the basics to JavaScript along with some more advanced features such as LocalStorage for saving data to the browser.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>To Do List With Local Storage</title>
<!-- Font Awesome Icons -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
/>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div id="new-task">
<input type="text" placeholder="Enter The Task Here..." />
<button id="push">Add</button>
</div>
<div id="tasks"></div>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>CSS:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #0b87ff;
}
.container {
width: 90%;
max-width: 34em;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
#new-task {
position: relative;
background-color: #ffffff;
padding: 1.8em 1.25em;
border-radius: 0.3em;
box-shadow: 0 1.25em 1.8em rgba(1, 24, 48, 0.15);
display: grid;
grid-template-columns: 9fr 3fr;
gap: 1em;
}
#new-task input {
font-family: "Poppins", sans-serif;
font-size: 1em;
border: none;
border-bottom: 2px solid #d1d3d4;
padding: 0.8em 0.5em;
color: #111111;
font-weight: 500;
}
#new-task input:focus {
outline: none;
border-color: #0b87ff;
}
#new-task button {
font-family: "Poppins", sans-serif;
font-weight: 500;
font-size: 1em;
background-color: #0b87ff;
color: #ffffff;
outline: none;
border: none;
border-radius: 0.3em;
cursor: pointer;
}
#tasks {
background-color: #ffffff;
position: relative;
padding: 1.8em 1.25em;
margin-top: 3.8em;
width: 100%;
box-shadow: 0 1.25em 1.8em rgba(1, 24, 48, 0.15);
border-radius: 0.6em;
}
.task {
background-color: #ffffff;
padding: 0.3em 0.6em;
margin-top: 0.6em;
display: flex;
align-items: center;
border-bottom: 2px solid #d1d3d4;
cursor: pointer;
}
.task span {
font-family: "Poppins", sans-serif;
font-size: 0.9em;
font-weight: 400;
}
.task button {
color: #ffffff;
padding: 0.8em 0;
width: 2.8em;
border-radius: 0.3em;
border: none;
outline: none;
cursor: pointer;
}
.delete {
background-color: #fb3b3b;
}
.edit {
background-color: #0b87ff;
margin-left: auto;
margin-right: 3em;
}
.completed {
text-decoration: line-through;
}Javascript:
//Initial References
const newTaskInput = document.querySelector("#new-task input");
const tasksDiv = document.querySelector("#tasks");
let deleteTasks, editTasks, tasks;
let updateNote = "";
let count;
//Function on window load
window.onload = () => {
updateNote = "";
count = Object.keys(localStorage).length;
displayTasks();
};
//Function to Display The Tasks
const displayTasks = () => {
if (Object.keys(localStorage).length > 0) {
tasksDiv.style.display = "inline-block";
} else {
tasksDiv.style.display = "none";
}
//Clear the tasks
tasksDiv.innerHTML = "";
//Fetch All The Keys in local storage
let tasks = Object.keys(localStorage);
tasks = tasks.sort();
for (let key of tasks) {
let classValue = "";
//Get all values
let value = localStorage.getItem(key);
let taskInnerDiv = document.createElement("div");
taskInnerDiv.classList.add("task");
taskInnerDiv.setAttribute("id", key);
taskInnerDiv.innerHTML = `<span id="taskname">${key.split("_")[1]}</span>`;
//localstorage would store boolean as string so we parse it to boolean back
let editButton = document.createElement("button");
editButton.classList.add("edit");
editButton.innerHTML = `<i class="fa-solid fa-pen-to-square"></i>`;
if (!JSON.parse(value)) {
editButton.style.visibility = "visible";
} else {
editButton.style.visibility = "hidden";
taskInnerDiv.classList.add("completed");
}
taskInnerDiv.appendChild(editButton);
taskInnerDiv.innerHTML += `<button class="delete"><i class="fa-solid fa-trash"></i></button>`;
tasksDiv.appendChild(taskInnerDiv);
}
//tasks completed
tasks = document.querySelectorAll(".task");
tasks.forEach((element, index) => {
element.onclick = () => {
//local storage update
if (element.classList.contains("completed")) {
updateStorage(element.id.split("_")[0], element.innerText, false);
} else {
updateStorage(element.id.split("_")[0], element.innerText, true);
}
};
});
//Edit Tasks
editTasks = document.getElementsByClassName("edit");
Array.from(editTasks).forEach((element, index) => {
element.addEventListener("click", (e) => {
//Stop propogation to outer elements (if removed when we click delete eventually rhw click will move to parent)
e.stopPropagation();
//disable other edit buttons when one task is being edited
disableButtons(true);
//update input value and remove div
let parent = element.parentElement;
newTaskInput.value = parent.querySelector("#taskname").innerText;
//set updateNote to the task that is being edited
updateNote = parent.id;
//remove task
parent.remove();
});
});
//Delete Tasks
deleteTasks = document.getElementsByClassName("delete");
Array.from(deleteTasks).forEach((element, index) => {
element.addEventListener("click", (e) => {
e.stopPropagation();
//Delete from local storage and remove div
let parent = element.parentElement;
removeTask(parent.id);
parent.remove();
count -= 1;
});
});
};
//Disable Edit Button
const disableButtons = (bool) => {
let editButtons = document.getElementsByClassName("edit");
Array.from(editButtons).forEach((element) => {
element.disabled = bool;
});
};
//Remove Task from local storage
const removeTask = (taskValue) => {
localStorage.removeItem(taskValue);
displayTasks();
};
//Add tasks to local storage
const updateStorage = (index, taskValue, completed) => {
localStorage.setItem(`${index}_${taskValue}`, completed);
displayTasks();
};
//Function To Add New Task
document.querySelector("#push").addEventListener("click", () => {
//Enable the edit button
disableButtons(false);
if (newTaskInput.value.length == 0) {
alert("Please Enter A Task");
} else {
//Store locally and display from local storage
if (updateNote == "") {
//new task
updateStorage(count, newTaskInput.value, false);
} else {
//update task
let existingCount = updateNote.split("_")[0];
removeTask(updateNote);
updateStorage(existingCount, newTaskInput.value, false);
updateNote = "";
}
count += 1;
newTaskInput.value = "";
}
});Related Videos
Build a Todo list app in HTML, CSS & JavaScript | JavaScript for Beginners tutorial
Build a Todo List App in HTML, CSS & JavaScript with LocalStorage | JavaScript for Beginners
To Do List using HTML CSS JavaScript | To Do List JavaScript
Create A Todo List App in HTML CSS & JavaScript | Todo App in JavaScript
#html #css #javascript
1578293637
Introduction Excellent new feature in JavaScript ES2020
New JavaScript Features Coming in ES2020 That You Can Use Now
In this series, we’re going to show the EcmaScript features from 2015 to today.
- ES2015 aka ES6
- ES2016 aka ES7
- ES2017 aka ES8
- ES2018 aka ES9
- ES2019 aka ES10
- ES2020 aka ES11
Introduction
ES2020 is the version of ECMAScript corresponding to the year 2020. This version doesn’t include as many new features as those that appeared in ES6 (2015). However, some useful features have been incorporated.
This article introduces the features provided by ES2020 in easy code examples. In this way, you can quickly understand the new features without the need for a complex explanation.
Of course, it’s necessary to have a basic knowledge of JavaScript to fully understand the best ones introduced.
The new JavaScriptfeatures in ES2020 are:
➡️ String.prototype.matchAll
➡️ import()
➡️ BigInt
➡️ Promise.allSettled
➡️ globalThis
➡️ for-in mechanics
➡️ Optional Chaining
➡️ Nullish coalescing Operator
String.protype.matchAll
The matchAll() method returns an iterator of all results matching a string against a regular expression, including capturing groups.
Dynamic Import
Dynamic import() returns a promise for the module namespace object of the requested module. Therefore, imports can now be assigned to a variable using async/await.
BigInt — Arbitrary Precision Integers
BigInt is the seventh primitive type, and it’s an arbitrary-precision integer. The variables can now represent 253 numbers and not just max out at 9007199254740992.
Promise.allSettled
Promise.allSettled returns a promise that’s fulfilled with an array of promise state snapshots, but only after all the original promises have settled; i.e. become either fulfilled or rejected.
We say that a promise is settled if it is not pending; i.e. if it’s either fulfilled or rejected.
Standardized globalThis object
The global this was not standardized before ES10.
In production code you would “standardize” it across multiple platforms on your own by writing this monstrosity:
For-in Mechanics
ECMA-262 leaves the order of for (a in b) almost totally unspecified, but real engines tend to be consistent in at least some cases.
Historical efforts to get consensus on a complete specification of the order of for-in have repeatedly failed. This in part because all engines have their own idiosyncratic implementations that are the result of a great deal of work and that they don’t really want to revisit.
In conclusion, the different engines have agreed on how properties are iterated when using the for (a in b) control structure so that the behavior is standardized.
Nullish Coalescing Operator
When performing property accesses, it’s often desired to provide a default value if the result of that property access is null or undefined. At present, a typical way to express this intent in JavaScript is by using the || operator.
This works well for the common case of null and undefined values, but there are a number of falsy values that might produce surprising results.
The nullary coalescing operator is intended to handle these cases better and serve as an equality check against nullary values (null or undefined). If the expression at the left-hand side of the ?? operator evaluates to undefined or null, its right-hand side is returned.
Optional Chaining
When looking for a property value that’s deep in a tree-like structure, one often has to check whether intermediate nodes exist.
The Optional Chaining Operator allows developers to handle many of those cases without repeating themselves and/or assigning intermediate results in temporary variables.
Also, many API return either an object or null/undefined, and one may want to extract a property from the result only when it’s not null:
When some value other than undefined is desired for the missing case, this can usually be handled with the Nullish coalescing operator:
Conclusion
JavaScript is a live language, and that’s something very healthy for web development. Since the appearance of ES6 in 2015, we’re living a vibrant evolution in the language. In this post, we’ve reviewed the features that arise in ES2020.
Although many of these features may not be essential for the development of your web application, they’re giving possibilities that could be achieved before with tricks or a lot of verbosity.
Thank you for reading !
#javascript #es6 #es2020
1604769720
Introduction With Basic JavaScript
The world’s most misunderstood programming language is JavaScript but JavaScript is now used by an incredible number of high-profile applications. So, it’s an important skill for any web or mobile developer to enrich the deeper knowledge in it.
Unlike most programming languages, the JavaScript language has no concept of input or output. It is designed to run as a scripting language in a host environment, and it is up to the host environment to provide mechanisms for communicating with the outside world.
Its syntax is based on the Java and C languages — many structures from those languages apply to JavaScript as well. JavaScript supports object-oriented programming with object prototypes, instead of classes. JavaScript also supports functional programming — because they are objects, functions may be stored in variables and passed around like any other object.
Let’s start off by looking at the building blocks of any language: the types. JavaScript programs manipulate values, and those values all belong to a type. JavaScript’s types are:
· Number
· String
· Boolean
· Function
· Object
· Symbol
and undefined and null, which are … slightly odd. And Array, which is a special kind of object. Date and RegExp, which are objects that you get for free. And to be technically accurate, functions are just a special type of object. So the type of diagram looks like this:
#beginner-javascript #javascript #javascript-introduction #javascript-fundamental #basic-javascritp
1599804911
Favorite New Features in ES2020 - JavaScript tutorial
JavaScript’s development had been running at a slower pace ahead of the introduction of ES6 (also known as ECMAScript 2015).Now, in 2020, the latest JavaScript features have been finalized and released as ECMAScript 2020 (or ES2020). While ES2020 does not include as many features as they introduced in ES6, it has introduced a number of useful additions. In this article, I will discuss my favorite new features from ES2020.
Optional Chaining
Optional Chaining syntax allows you to access deeply nested objects without worrying about whether the property exists or not. While working with objects, you must be familiar with an error of this kind:
TypeError: Cannot read property <xyz> of undefined
The above error means that you are trying to access the property of an undefined variable. To avoid such errors, your code will look like this:
Instead of checking each node, optional chaining handles these cases with ease. Below is the same example using optional chaining:
You can also check arrays and functions using Optional Chaining. An example is given below:
globalThis
JavaScript is used in a variety of environments such as web browsers, Node.js, Web Workers, and so on. Each of these environments has its own object model and a different syntax to access it. ES2020brings us the **globalThis **property which always refers to the global object, no matter where you are executing your code. This property really shines when you aren’t sure what environment the code is going to run in.
The following is the example of using setTimeout function in Node.js using globalThis:
Below, the same method is used in web browser:
Dynamic Imports
Dynamic Imports is one of my favorite feature of ES2020. As the name implies, you can import modules dynamically. Using dynamic imports, the code is delivered via smaller bundles as required (instead of downloading a single large bundle as has been previously required).
When using dynamic imports, the import keywords can be called as a function, which returns a promise. Below is an example of how you can dynamically import a module when the user clicks on a button:
Promise.allSettled()
This method returns a promise that resolves after all of the given promises are either fulfilled or rejected. It is typically used where asynchronous tasks do not depend upon one another to complete successfully, as illustrated in the following example:
Nullish Coalescing Operator
The syntax for this operator is
let student = {}
let name = student.name ?? ‘John’
This operator will return a Right Hand Side operand when the Left Hand Side operand is either undefined or null. In the example above, the operator will set the value of name as ‘John’ as student.name is undefined.
At first glance this looks exactly the same as a logical OR operator ( || ), however, logical OR operator Right Hand Side operand when Left Hand Side Operand is false (undefined, null, “”, 0, false, NaN). Below is the comparison of both operators:
Chaining Nullish Coalescing Operator ( ?? ) with AND ( && ) or OR ( || ) operators
It’s not possible to chain AND ( && ) and OR ( || ) operators directly with ?? operator. If you need to combine them, then you must wrap && or || operator in the parenthesis
Conclusion
The introduction of ES2020’s new features add even more flexibility and power to the constantly evolving JavaScript. This article explored some of my favorite features but there are a number of others that I’d suggest you look into to see what might suit you best. I hope you found this article useful and that you are as excited as I am about using these features!
#javascript #javascript-development #ecmascript-2020 #es2020