Ivan Petrenko

Ivan Petrenko

1670359819

7 Promising JavaScript Timeline Components to Improve Your Project Management App

A timeline is a convenient visual tool allowing users to allocate resources properly over time.

On this page, you’ll find out 7 JavaScript libraries to implement a timeline in your project. The list includes Gantt chart, event calendar, and ordinary timeline chart components. You can choose the most convenient option or expand the list by adding your favorite oft-used tools in the comments below. Let’s start!

#JavaScript #productivity #webdev #webapplication 

DHTMLX Gantt

dhtmlx-gantt-timeline
DHTMLX Gantt is one of the most complete JavaScript libraries for developing Gantt charts. It offers a wide variety of time configuration features for the timeline where users can schedule tasks, allocate them between team members, and monitor their completion.

The component greatly simplifies project management by specifying dependencies between tasks, calculating the critical path, and automatically updating the project schedule. Users can manage tasks via drag-n-drop, group tasks by resources, and filter tasks by priority or assignee. DHTMLX Gantt supports smart rendering and allows exporting data from MS Project, Excel, PDF, PNG, and iCal.

You can apply CSS classes to style your Gantt chart elements, use templates to change the format of displayed dates and labels, or choose one of the predefined skins.

Useful resources: documentation, samples

Pricing: from $699

Trial version: DHTMLX Gantt

DHTMLX Scheduler

javascript-scheduler-timeline
DHTMLX Scheduler is a pure JavaScript library for developing responsive event calendars with 10 views and a set of handy features. The timeline view allows users to create an unlimited number of events within a horizontally scrollable layout and edit their duration via drag-n-drop. Besides, users can create recurring events and multisection events that can be assigned to several resources.

With DHTMLX Scheduler, you can optimize the performance of the timeline with the help of smart rendering. Instead of loading all the timeline elements at once, the feature allows rendering only the rows, columns, and events displayed on the screen.

You can configure the timeline appearance via the rich Scheduler API. For example, you can set the start date and step size for the time scale, add custom HTML content to the timeline cells, and apply custom sorting rules. Moreover, you can choose one of the predefined skins or apply custom styling via CSS.

DHTMLX Scheduler supports Google Maps integration and can be exported to Excel, PDF, PNG, and iCal. Moreover, you can sync DHTMLX Scheduler with the Gantt chart library thus building a complete project management app.

Useful resources: documentation, samples

Pricing: from $599

Trial version: DHTMLX Scheduler

Mobiscroll Scheduler

mobiscroll-timeline
Mobiscroll allows building an event calendar with a horizontally scrollable timeline view. It supports CRUD operations and allows manipulating events via drag-n-drop. Users can create recurring events and group resources of the same types to simplify events management.

The timeline provides print-optimized styling via the print add-on. It can be installed separately from a dedicated npm package or included in the download package.

Useful resources: documentation, samples

Pricing: from $595 for the full toolset for scheduling

Trial version: Mobiscroll Timeline

DayPilot Scheduler

daypilot-scheduler-timeline

DayPilot scheduler component provides a timeline view to manage multiple resources. It supports drag-n-drop, dynamic event loading, and image export to SVG, PNG, and JPEG. The tool also provides such handy built-in UI elements, as message bar, event status icons, and action hints.

The scheduler includes 6 built-in themes and supports full CSS styling. However, you can use the online UI Builder configurator to create and download a project with selected configurations.

Useful resources: documentation, samples

Pricing: from $549

Trial version: DayPilot Scheduler

DevExtreme Scheduler

devexttreme-timeline-javascript

The DevExtreme Scheduler provides a timeline view with timezone support. Users can create new events, resize them, and arrange them between timeline cells via drag-n-drop. The component allows grouping events, e.g. by resources, creating recurring appointments, and exporting data from the different online services, including Google Calendar.

DevExtreme provides custom templates for the whole timeline as well as for event shapes and tooltips. Besides, you can configure the timeline appearance by disabling specific dates, manipulating the view duration, and setting the number of events displayed in a cell.

Useful resources: documentation

Pricing: from $499 for the full DevExtreme library

Trial version: DevExtreme Scheduler

7 Promising JavaScript Timeline Components to Improve Your Project Management App
Ivan Petrenko

Ivan Petrenko

1668666626

DHTMLX Event Calendar: New JavaScript Library for Productive Event Planning

Many companies and entrepreneurs resort to using event calendars to organize their day-to-day activities more effectively. No wonder that this functionality is frequently included in the technical requirements of productivity applications. Our experience says that in such cases developers are requested to deliver something similar to well-known planning services like Google calendar. That’s what our brand-new JavaScript Event Calendar is all about.

In this article, we will highlight the main features of the DHTMLX Event Calendar library.

 #web-development #JavaScript #planning 

Intuitive UI for Convenient Event Management

It is not necessary to conduct research to know for sure that a user-friendly UI plays a major role in the success of any web application. With DHTMLX Event Calendar, we were inspired by an instantly recognizable and much-loved UI design of Google Calendar. We expect that it will contribute to a refreshingly simple and intuitive user experience.

DHTMLX UI

Structural Elements of DHTMLX Event Calendar and Their Core Features

The structure of our event calendar consists of 5 key parts: toolbar, sidebar, timetable grid, editor, and popup window.

Now we can consider all calendar elements and their capabilities in more detail.

Toolbar

The toolbar is placed at the top of the calendar. It provides a pack of controls for handling the calendar operation.

DHTMLX Event Calendar - Toolbar

First of all, the toolbar allows adding any number of events, including multi-day and overlay (several events in one cell) events, using the corresponding “Create event” button. There are three predefined view modes (Day, Week, Month) aimed to look through all planned activities in the desired way. In the center of the toolbar, you can find a dropdown datepicker that serves for navigating the calendar in all view modes. Apart from that, the toolbar has the “Today” button to see what should happen in the present day and the “hamburger” icon for showing/hiding the sidebar.

Sidebar

DHTMLX Event Calendar offers the possibility to plan events with multiple calendars via the sidebar located on the left side of the interface. It is one of the most demanded features integrated into our component.

DHTMLX Event Calendar - Sidebar

In the sidebar, users have an opportunity to create new calendars and manage existing ones. One more great thing is the ability to display/hide events in the timetable grid belonging to a particular calendar by checking/unchecking corresponding checkboxes. Just like in the toolbar, here you can find the datepicker option for better calendar navigation.

Timetable Grid

The timetable grid is the centerpiece of our Calendar that serves for displaying events and interacting with them. Alternatively to the “Create event” button in the toolbar, the timetable grid provides two extra ways for adding new events:

  • double-click on an empty cell,
  • click on an empty cell with the left mouse button and drag the cursor down (and set the event duration by doing so).DHTMLX Event Calendar - timetable gridIn the timetable grid, it is also possible to change your plans on the fly with drag-and-drop. Just drag an event to the needed date and resize it to set new temporal boundaries. It is worth mentioning that the grid can have vertical or horizontal timescales depending on the selected view mode. ###Editor Event planning rarely goes off without some complications and unexpected twists along the way. That is why DHTMLX Event Calendar has a built-in editor. It includes a range of fields and controls that make up the event content (name, start/end dates (duration), calendar type, description).

DHTMLX Event Calendar - Editor

To open the editor menu, it is necessary to double-click on the event that you want to update.

Popup Window

The popup window is one more auxiliary instrument of our Calendar. It is intended for reviewing the general information on a specific appointment.

DHTMLX Event Calendar - Popup window

In addition, it includes buttons for opening the editor in the selected event or deleting it. The popup window appears in the timetable grid when clicking on the required event.

 

 

 

 

 

 

https://dev.to/plazarev/dhtmlx-event-calendar-new-javascript-library-for-productive-event-planning-4eo8

DHTMLX Event Calendar: New JavaScript Library for Productive Event Planning
Ivan Petrenko

Ivan Petrenko

1665501367

Comparison of JavaScript Pivot Grids for Developers - DZone Web Dev

Comparison of JavaScript Pivot Grids for Developers

We take a look at some interesting tools that allow web developers to quickly make pivot grids so their team can ingest and comb through data easier.

#web-development #JavaScript #dataanalysis #pivot 

1. Flexmonster

Flexmonster example
Flexmonster example

Flexmonster is a pivot table component that works on main desktop and mobile operating systems such as Windows, macOS, Linux, iOS, and Android. The cross-browser support allows running Flexmonster based applications in Chrome, Firefox, Internet Explorer, Safari, or Opera without any additional plugins such as Flash or Java. The list of supported server-side technologies includes .NET, Java, PHP, Ruby, and many others. If you work with one of the popular frameworks such as jQuery, Angular, React, RequireJS, or PhoneGap, you’ll like the integration possibilities. Another distinctive feature is the availability of wrappers for TypeScript, C#, and Java. As you can see, this pivot table can be integrated with almost any project due to wide support of modern web development technologies. One of the main intentions of developers was to provide the possibility to work with huge amounts of data. As a result, using this JavaScript pivot grid, you can work with big data sets from SQL DBs or files up to 100 MB. You can be assured that rendering even millions of rows won’t cause any freezes or lags.

The number of supported data formats won’t disappoint you either. You can work with CSV, JSON, SQL databases (Oracle, MySQL, etc.), XMLA providers (MS Analysis Services, Mondrian, and icCube). This component is fully customizable due to its rich API. There’s the possibility to define what features will be enabled or disabled. As well, you can build your custom scenarios around the component. API covers every aspect of data presentation. All settings can be stored in a report object which can be saved and restored if needed.

Flexmonster provides users with dozens of handy features. For example, there are three ways of filtering:

  • Filtering by members’ names, users can choose which exact members will be shown for a particular field.
  • Filter by value returns top X results.
  • Report filter can be used for convenient data representation in reports. It allows you to focus on important data subsets and avoid overloading with large amounts of unnecessary info.

The sorting feature allows placing rows and columns in alphabetical or numeric order. The grouping feature allows saving some screen space which is especially helpful in the case of mobile devices. The built-in exporting feature allows exporting your table to the following formats: HTML, CSV, Excel, PDF, and PNG.

This component supports different types of formatting:

  • Conditional formatting allows highlighting cells depending on particular values.
  • Number formatting is convenient for changing the appearance of numbers, without actual changing of value. You can add currency symbols or decimal separators.

The demo page contains a lot of examples each of which is explained in detail. The source code for each demo is available on JSFiddle. The documentation page is pretty detailed and contains a lot of step-by-step guides, code examples, and some screenshots. Looks like a great component indeed! But unfortunately, it’s not a free tool. The annual subscription will cost you $799. Perpetual license, in its turn, costs $1999.

2. PivotTable.js

PivotTable.js example
PivotTable.js example

 

PivotTable.js is a lightweight open-source JavaScript Pivot Table with the drag-n-drop support. This component allows changing the appearance by re-defining the initial color set and using a custom color scale. Almost every part of this pivot grid can be customized with ease. For example, the localization process is quite simple and well-described in the documentation. The input data is a set of records with attributes. It can be passed to the app in different ways: CSV files, arrays of objects, arrays of arrays, functions that call back, or jQuery references to simple tables.

In addition to the built-in table, heat map, and table-bar chart renderers, PivotTable.js allows creating different types of charts. You can use either C3 Charts, D3 Visualizations, or Google Charts for such tasks. Unfortunately, currently, there’s no feature that allows you to export to an Excel file. But you can generate TSV output similar to the Table Renderer, which, in turn, can be copy-pasted to Excel. This component was initially designed to be a client-side component. It requires all the data to be supplied up front in the browser. Thus, you can integrate this library with any server-side technology which is able to provide data in a compatible format, but there is no ‘deep’ integration beyond the original data load.

The main page of the project contains a bunch of demos, each of which has the basic description and source code. The documentation wiki describes the use of the main parameters and features. In general, I can say that the documentation is rather modest. But since PivotTable.js is a pretty simple and minimalistic component, it’s unlikely that you will face any difficulties. This pivot grid is a free-to-use tool and distributed under the MIT license.

3. dhtmlxPivot

dhtmlxPivot
dhtmlxPivot example

The dhtmlxPivot JavaScript component is a fully-customizable pivot grid intended for rendering huge amounts of data. Despite the size of the dataset used, your app will run smoothly on all browsers. You can customize each aspect of this pivot by modifying one of the available attributes. To simplify the work with this component, developers are provided the possibility to load data in JSON format. Besides that, you can use CSV, the same format that the Google Spreadsheet uses. To load data that is stored on the server, you can use Java, .NET, PHP, Node.js, and other technologies.

Using aliases, you can make a data set more compact by reducing the number of duplicate data values. Conditional cell formatting allows for the highlighting those cells that have particular values. You can filter the content of cells in accordance with the type of data they contain. There are three different filters:

  • String filter
  • Number filter
  • Dates filter

By default, dhtmlxPivot supports four basic operations (sum, max, min, and count), but if needed, you can add custom ones. When you click on the header of the row, a sorting icon will appear on the screen in order to help you to sort the listed data according to your needs. The exporting feature allows exporting your tables to the Excel files. It’s worth noting that all custom styles that were added during the work with the table will be exported as well.

The documentation page is quite exhaustive. It has a step-by-step Getting Started guide for those who are just starting to work with this component, a bunch of more advanced guides, and detailed API references. The demos page contains samples that demonstrate the most important features of this pivot table. I can say that dhtmlxPivot is the most well-documented JavaScript component among the other ones mentioned in this article. If you decide to try it, there’s the Free Trial edition available. Besides that, there are two more options. The Commercial license for teams of five or fewer developers will cost you $299. The Enterprise license, which includes extended support, costs $499 at the moment. Among the pivot components that are distributed under a commercial license, dhtmlxPivot is the most affordable option.

Comparison of JavaScript Pivot Grids for Developers - DZone Web Dev
React Dev

React Dev

1665454439

React Admin Dashboard from Scratch with Modern UI and UX

In this practical react js project tutorial, I will teach you how to create a react admin dashboard from scratch with modern UI and UX. By the end of this video, you will know how to create a react app from scratch, how to use react-router-dom, how to use the remix icon library in your react projects, how to use react useState hooks, useEffect hooks, how to build modern website designs with CSS3, how to use the react charts, how to use circular progress bar in your react projects.
React Admin Dashboard Design Tutorial in React.js | Car Rental React Admin Panel Using ReactJs

Startup project repo
https://github.com/codingwithmuhib/Car-Rantal-Dashboard 

☝ Start developing the project (base files + images)
- Click on the GitHub link
- Click the green button (code)
- Click Download ZIP
- Extract the project to the desired location

💻 Source code
https://github.com/codingwithmuhib/Car-Rantal-Dashboard/tree/main-source-code 

📂Resource
remix icon: https://remixicon.com/
font: https://fonts.google.com/
Recharts: https://recharts.org/en-US/
React Circular Progress: https://www.npmjs.com/package/react-circular-progressbar

🔔 Subscribe: https://www.youtube.com/c/CodingWithMuhib 

1: React Admin Dashboard Design Tutorial in React.js | Car Rental React Admin Panel Using ReactJs [ Part1 ]


2: React Admin Dashboard Design Tutorial in React.js | Car Rental React Admin Panel Using ReactJs [ Part 2 ]

#react #JavaScript 

React Admin Dashboard from Scratch with Modern UI and UX

Push Array Element In Node.js with Example

In this guide, we will see how to push array elements in the node js example. Also, learn how to push objects in an array in node.js. To do that we use The push() method adds new items to the end of an array. The push() method changes the length of the array. The push() method returns the new length.

push() is an array function from node.js that is used to add element to the end of an array.

Syntax

array_name.push(element)

Example 1:

push_array = [3, 5, 7, 9, 11, 13];
  
push_array.push(15);
  
console.log(push_array);

Output

[ 3, 5, 7, 9, 11, 13, 15 ]

Example 2 : Key and Value

Now, we will see key and value push in an array object.

key_val_arr = [
    {id: 1, name: "iphone10" },
    {id: 2, name: "iphone11" },
    {id: 3, name: "iphone12" }
];
  
key_val_arr.push({id: 4, name: "iphone13"});
  
console.log(key_val_arr);

Output

[

{ id: 1, name: 'iphone10' },

{ id: 2, name: 'iphone11' },

{ id: 3, name: 'iphone12' },

{ id: 4, name: 'iphone13' }

]

Example 3: unshift() function

In this example, we will add key and value in the first position of the array object using unshift() function.

key_val_arr = [
    { id: 1, name: "iphone10" },
    { id: 2, name: "iphone11" },
    { id: 3, name: "iphone12" }
];
  
key_val_arr.unshift({id: 4, name: "iphone13"});
  
console.log(key_val_arr);

Output

[
{ id: 4, name: 'iphone13' },

{ id: 1, name: 'iphone10' },

{ id: 2, name: 'iphone11' },

{ id: 3, name: 'iphone12' }

]

#JavaScript #nodejs 

Push Array Element In Node.js with Example

Danish Thebo

1665260481

Remove Links Underline Using JavaScript

Here is how to remove links underline using JavaScript. In this first example we are using JavaScript textDecoration property to remove underline from hyperlinks anchor tags. We will simply set its value to none and it will do the job:



#javascript #JavaScript #programming 

https://laramatic.com/remove-links-underline-using-javascript/

Remove Links Underline Using JavaScript

Jim Walsh

1664468996

Still wondering what MEAN stack is?

When it comes to the development process, you’ll need a software stack that is both standardized and consistent. Does MEAN stack meet the criteria? #MEAN is a relatively new stack that refers to the collection of four user-friendly full-stack #JavaScript frameworks such as MongoDB, Express.js, Angular.js, and Node.js. These frameworks are typically used for building dynamic, fast, and robust cloud-ready apps and websites.
Let's review MEAN stack, pros and cons, and use cases.

https://www.youtube.com/watch?v=ilOMkeJVHmE

Still wondering what MEAN stack is?
Raja Tamil

Raja Tamil

1661774400

Make A Selected/Clicked Button Active In JavaScript [2022]

Make A Selected/Clicked Button Active In JavaScript

Learn how to make a selected or clicked button active in JavaScript without Loop.

You can either add a CSS class or add one or more CSS propertiesdirectly to a selected button to be active.

Add A Background Colour To A Selected Button

When you want to add some CSS style to a selected/clicked button in JavaScript to make it active,

For Loop will most likely be the first choice in our minds.

But, you do not need to use loop at all.

Let’s see how to do it in action.

Create HTML Button Elements

Here is a simple div tag with an id wrapper.

It has five HTML button elements in it.

Nothing fancy.

<div id="wrapper">
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>4</button>
  <button>5</button>
</div>

Attach Click Events To HTML Button Elements

• First, let’s add a click event listener to all the elements inside a div.

const wrapper = document.getElementById("wrapper");

wrapper.addEventListener('click',(e) => {
})

• Check to see if the clicked item is a button inside the click event callback function.

const isButton = e.target.nodeName === 'BUTTON';

• If the clicked item is NOT a button, exit the click event callback function.

So it won’t execute anything further if it’s not a button click.

if (!isButton) {
    return;
}

Add A CSS Property To Clicked Button

Add a background colour to a selected/clicked button by accessing the event object that is passed into the click event callback function.

e.target.style.background = 'red';

This code works fine until the second button is clicked.

By then, both the first and second clicked buttons will have a background colour of red to indicate the active state.

But what we want is to add a background colour to only the currently clicked item and remove it from the previously selected item.

To do that, we need to capture the previously selected/clicked button and remove the background colour from it.

Capture Previously Selected/Clicked Item

• Declare a constant called prevButton outside of the button click event.

• Set its initial value to null.

let prevButton = null;

• Now check to see if any button is added into the prevButton constant.

If it does, remove the background colour by setting its value to none.

if(prevButton !== null) {
   prevButton.style.background = 'none';
}

• Finally, add the currently clicked item to the prevButton.

This way the prevButton does not have any previously clicked button object when a user clicks any of the button for the first time.

And it will become available when a user clicks any button second time onwards.

Continue Reading…

#JavaScript #webdev #webdevelopement #programming #softauthor 

Make A Selected/Clicked Button Active In JavaScript [2022]
w3hubs com

w3hubs com

1661626407

Display Current Time Using HTML,CSS And JavaScript

In this Display Current Time, we were Using HTML, CSS And JavaScript. We used the javascript inbuild function for a time, and to display, we used javascript DOM. To show the live time, we used javascript setInterval functions.

Also Read:- Bootstrap Progress Bar Percentage Using Jquery

For the responsive side, we used CSS media queries. Also, to make it more attractive, we used a background image with an opacity background.

Make it yours now by using it, downloading it, and please share it. we will design more elements for you.

Source Code

 

#javascript #JavaScript #html #HTML 

Display Current Time Using HTML,CSS And JavaScript
Matteo Namoti

Matteo Namoti

1661397814

How to Create Tab Layout using CSS, HTML and JS

In this article, you'll learn How to Create Simple Tab Layout using CSS, HTML and JS 

1. HTML Code

<head>
    <link rel="stylesheet" type="css" href="css/tab.css" />
    <script src="js/tab.js" type="text/javascript"></script>
</head>

<body>
    <div class="tab-wrapper">
        <div class="tab-button-wrapper">
            <ul>
                <li><a class="tab-button-first" id="tab-button1" href="javascript:void(0)" onclick="loadTab(1)">Tab
                        1</a></li>
                <li><a class="tab-button-hidden" id="tab-button2" href="javascript:void(0)" onclick="loadTab(2)">Tab
                        2</a></li>
                <li><a class="tab-button-hidden tab-button-last" id="tab-button3" href="javascript:void(0)"
                        onclick="loadTab(3)">Tab 3</a></li>
            </ul>
        </div>
        <div class="tab-body-wrapper">
            <div class="tab-body" id="tab1">
                <p>Body 1</p>
            </div>
            <div class="tab-body tab-body-hidden" id="tab2">
                <p>Body 2</p>
            </div>
            <div class="tab-body tab-body-hidden" id="tab3">
                <p>Body 3</p>
            </div>
        </div>
    </div>
</body>

2. CSS code 

body
{
	background-color: #252525;
}

div.tab-wrapper {
	width: 60%;
	margin: auto;
}

div.tab-button-wrapper ul {
	padding: 0;
	list-style: none;
}

div.tab-button-wrapper li {
	float: left;
}

a.tab-button-first {
	border-radius: 3px 0 0 0;
	-webkit-border-radius: 3px 0 0 0;
	-moz-border-radius: 3px 0 0 0;
}

a.tab-button-last {
	border-radius: 0 3px 0 0;
	-webkit-border-radius: 0 3px 0 0;
	-moz-border-radius: 0 3px 0 0;
	border-right: none;
}

div.tab-button-wrapper a {
	display: block;
	padding: 1em;
	text-decoration: none;
	color: #252525;
	background-color: #FFFFFF;
	border-right: 1px solid black;
}

a.tab-button-hidden {
	opacity: 0.5;
}

div.tab-body {
	padding: 1em;
	clear: both;
	background-color: #FFFFFF;
	min-height: 85%;
	border-radius: 0 3px 3px 3px;
	-webkit-border-radius: 0 3px 3px 3px;
	-moz-border-radius: 0 3px 3px 3px;
}

div.tab-body-hidden {
	display: none;
}

3. JS code

var last_tab = 1;

function loadTab(tab_number) {
    if (tab_number === last_tab) return;

    document.getElementById("tab" + last_tab).style.display = "none";
    document.getElementById("tab" + tab_number).style.display = "block";
    document.getElementById("tab-button" + last_tab).style.opacity = "0.5";
    document.getElementById("tab-button" + tab_number).style.opacity = "1.0";

    last_tab = tab_number;
}

Output

Dowload code

Edit on Morioh

Thank you!

#css #JavaScript #html 

How to Create Tab Layout using CSS, HTML and JS
Raja Tamil

Raja Tamil

1661169600

Make Pop-Up Modal Window In Vanilla JavaScript [2022]

Make Pop-Up Modal Window In Vanilla JavaScript


Learn how to create a simple responsive pop-up modal window using Vanilla JavaScript along with HTML and CSS with a bit of Flexbox.

Create A Button That Opens Pop Up Modal Window

Declare a <button> HTML element with an id open-modal.

<button id="open-modal">Open Modal Window</button>

The goal is when a user presses this button, the pop-up modal window will open.

Style the button using CSS Flexbox and centre it on the screen.

* {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    box-sizing: border-box;
}

body {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

button {
    padding: 10px;
    font-size: 1.1em;
    background: #32bacf;
    color: white;
    border: none;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

button:hover {
    background: rgba(0, 0, 0, 0.7);
}

Create Pop-Up Modal Overlay

Normally, pop-up modal windows have overlays with a transparent darker background that covers the entire browser screen.

Define a div with an id model-overlay which will cover the entire screen.

<div id="modal-overlay">
<div>

Then, make it to full screen using height:100vh CSS property.

Bring it in front of the button by using position:absolute with a transparent background colour.

#modal-overlay {
    width: 100%;
    height: 100vh;
    position: absolute;
    background: rgba(0, 0, 0, 0.7);
}

I just added the border to see the boundaries of the modal-overlay element.

Center Pop-Up Modal Window To The Modal Overlay

Create a div with an id modal inside the modal-overlay element, which will be an actually pop-up modal window that user interacts with.

<div id="modal-overlay">
  <div id="modal">
  </div>
<div>

Add CSS style to make it visible on the screen.

Adding width:100% and max-width:650px will make sure the width of the pop-up modal window won’t exceed when the browser width is more than 650px.

If the browser width is less than 650px, the pop-up modal window will stretch the width to fill the screen which is normally for mobile viewports.

#modal-overlay #modal {
    max-width: 650px;
    width: 100%;
    background: white;
    height: 400px;
}

Centre the pop-up modal window to the screen using Flexbox.

To do that, just add the three lines of Flexbox code to the modal-overlay which are

  • display:flex → Convert an HTML element to Flexbox
  • align-items:center → centre the pop-up modal window vertically to the viewport
  • justify-content:center → centre the pop-up modal window horizontally to the viewport
#modal-overlay {
   ...
  
   display: flex;
   align-items: center;
   justify-content: center;
}

Open Up Pop-Up Modal Window On Button Click

Now we have the basic pop-up modal window designed using CSS.

Make it visible when a user presses the open modal button.

To do that,

First, hide the modal overlay by default by changing its display property from flex to none.

#modal-overlay {
   ...
  
   display: none; // Changed from flex to none
   align-items: center;
   justify-content: center;
}

Create a DOM reference to the open-modal button as well as the modal-overlay elements.

const openModalButton = document.getElementById("open-modal");
const modalWindowOverlay = document.getElementById("modal-overlay");

Attach a click event to the openModalButton with the callback arrow function showModalWindow.

const showModalWindow = () => {
    modalWindowOverlay.style.display = 'flex';
}

openModalButton.addEventListener("click", showModalWindow);

Set the display property of the modalWindowOverlay to flex inside showModalWindow() function which will open up the modal window.

As you can see, there is no way we can close/hide the pop-up modalwindow after its became visible on the screen.

Let’s fix it!

Close/Hide Pop-Up Modal Window On Button Click

Typically, there will be a close button on the top or bottom right side of the pop-up modal window.

Let’s add a close button on the bottom left side of the modal window.

Define header, content and footer HTML elements inside the pop-up modal window.

<div id="modal">

    <div class="modal-header">
        <h2>Modal Pop Up Window</h2>
    </div>

    <div class="modal-content">
        <p>Modal Content</p>
    </div>
    
    <div class="modal-footer">
        <button id="close-modal">Close</button>
        <button>Save</button>
    </div>

</div>

Generally, you’ll have two buttons on the footer of the pop-up modal window, which may be save and close.

Let’s push the buttons to the bottom using Flexbox.

Turn the display property of the pop-up modal window to flex and set the flex direction to column.

Continue Reading…

#JavaScript #programming #webdev #softauthor 

Make Pop-Up Modal Window In Vanilla JavaScript [2022]
Xander  Crooks

Xander Crooks

1661082420

Himalayausa Clone using React JS and Redux

Inspired from Himalayausa.com

Project-code: closed-birthday-4512

Tech Stack Used

#React.js

#Redux

#Chakra-UI

#React Slick

#JavaScript

#HTML

#CSS

#Heroku

#Versel

#NPM

Deploy link:- Versal

This website was originally inspired from Himalayausa.com Our Team made Tremendus efforts and build this website within 5 consicutive days. We used React.js library for the UI part and used REDUX store for maintaing the states of the components. We used Heroku server API for getting the Mock Data and used Versel to deploy.

sneak peeks of the project...

Landing page...

Alt text

Shop By Category ...

Alt text

Best Seller ...

Alt text

Navbar ...

Alt text

Footer ...

Alt text

About Page ...

Alt text

Login page ...

Alt text

Signup page ...

Alt text

product page ...

Alt text

Single Product ...

Alt text

Cart page ...

Alt text

Checkout page ...

Alt text

Main Contributors

#Anurag Dinkar Pawar GitHub

#Veena Sahu GitHub

#Narayan Chatalwar GitHub

#SHILAJIT PAUL GitHub

#Govind Lakhotiya GitHub


Author: AnuragPawar-132
Source code: https://github.com/AnuragPawar-132/closed-birthday-4512

#react #javascript #Redux 

Himalayausa Clone using React JS and Redux
Iara  Simões

Iara Simões

1660662720

Como O Escopo Funciona Em JavaScript

O escopo é um conceito importante que gerencia a disponibilidade de variáveis. O escopo está na base de fechamentos, define a ideia de variáveis ​​globais e locais.

Se você quiser codificar em JavaScript, é essencial entender o escopo das variáveis.

Neste post, explicarei passo a passo, em profundidade, como funciona o escopo em JavaScript.

1. O escopo

Antes de mergulhar no que é o escopo, vamos fazer um experimento que demonstra como o escopo se manifesta.

Digamos que você defina uma variável message:

const message = 'Hello';
console.log(message); // 'Hello'

Então, você pode facilmente registrar essa variável na próxima linha após a declaração. Sem perguntas aqui.

Agora, vamos mover a declaração de messagedentro de um ifbloco de código:

if (true) {
  const message = 'Hello';
}
console.log(message); // ReferenceError: message is not defined

Desta vez, ao tentar registrar a variável, o JavaScript lança ReferenceError: message is not defined.

Por que isso acontece?

O ifbloco de código cria um escopo para messagevariável. E messagevariável pode ser acessada apenas dentro deste escopo.

Escopo do JavaScript

Em um nível mais alto, a acessibilidade das variáveis ​​é limitada pelo escopo onde elas são criadas. Você é livre para acessar a variável definida dentro de seu escopo. Mas fora de seu escopo, a variável é inacessível.

Agora, vamos colocar uma definição geral de escopo:

O escopo é uma política que gerencia a acessibilidade das variáveis.

2. Escopo do bloco

Um bloco de código em JavaScript define um escopo para variáveis ​​declaradas usando lete const:

if (true) {
  // "if" block scope
  const message = 'Hello';
  console.log(message); // 'Hello'
}
console.log(message); // throws ReferenceError

A primeira console.log(message)registra corretamente a variável porque messageé acessada a partir do escopo onde está definida.

Mas o segundo console.log(message)lança um erro de referência porque a messagevariável é acessada fora de seu escopo: a variável não existe aqui.

O bloco de código de instruções if, for, whiletambém cria um escopo.

No exemplo a seguir , o forloop define um escopo:

for (const color of ['green', 'red', 'blue']) {
  // "for" block scope
  const message = 'Hi';
  console.log(color);   // 'green', 'red', 'blue'
  console.log(message); // 'Hi', 'Hi', 'Hi'
}
console.log(color);   // throws ReferenceError
console.log(message); // throws ReferenceError

colore messagevariáveis ​​existem dentro do escopo do whilebloco de código.

Da mesma forma que o bloco de código da whileinstrução cria um escopo para suas variáveis:

while (/* condition */) {
  // "while" block scope
  const message = 'Hi';
  console.log(message); // 'Hi'
}
console.log(message); // => throws ReferenceError

messageé definido dentro do while()corpo, consequentemente messageé acessível apenas dentro do while()corpo.

Em JavaScript você pode definir blocos de código autônomos. Os blocos de código autônomos também delimitam um escopo:

{
  // block scope
  const message = 'Hello';
  console.log(message); // 'Hello'
}
console.log(message); // throws ReferenceError

2.1 var não tem escopo de bloco

Como visto na seção anterior, o bloco de código cria um escopo para variáveis ​​declaradas usando conste let. No entanto, esse não é o caso de variáveis ​​declaradas usando var.

O snippet abaixo declara uma variável countusando uma varinstrução:

if (true) {
  // "if" block scope
  var count = 0;
  console.log(count); // 0
}
console.log(count); // 0

countvariável, como esperado, é acessível dentro do escopo do ifbloco de código. No entanto, counta variável também é acessível do lado de fora!

Um bloco de código não cria um escopo para varvariáveis, mas um corpo de função sim . Leia a frase anterior novamente e tente lembrá-la.

Vamos continuar no escopo da função na próxima seção.

3. Escopo da função

Uma função em JavaScript define um escopo para variáveis ​​declaradas usando var, lete const.

Vamos declarar uma varvariável dentro de um corpo de função:

function run() {
  // "run" function scope
  var message = 'Run, Forrest, Run!';
  console.log(message); // 'Run, Forrest, Run!'
}
run();
console.log(message); // throws ReferenceError

run()o corpo da função cria um escopo. A variável messageé acessível dentro do escopo da função, mas inacessível fora.

Da mesma forma, um corpo de função cria um escopo para lete constaté mesmo declarações de função.

function run() {
  // "run" function scope
  const two = 2;
  let count = 0;
  function run2() {}
  console.log(two);   // 2
  console.log(count); // 0
  console.log(run2);  // function
}
run();
console.log(two);   // throws ReferenceError
console.log(count); // throws ReferenceError
console.log(run2);  // throws ReferenceError

4. Escopo do módulo

O módulo ES2015 também cria um escopo para variáveis, funções, classes.

O módulo circledefine uma constante pi(para algum uso interno):

// "circle" module scope
const pi = 3.14159;
console.log(pi); // 3.14159
// Usage of pi

pivariável é declarada dentro do escopo do circlemódulo. Além disso, a variável pinão é exportada do módulo.

Em seguida, o circlemódulo é importado:

import './circle';
console.log(pi); // throws ReferenceError

A variável pinão é acessível fora do circlemódulo (a menos que seja exportada explicitamente usando export).

O escopo do módulo torna o módulo encapsulado. Cada variável privada (que não é exportada) permanece um detalhe interno do módulo, e o escopo do módulo protege essas variáveis ​​de serem acessadas externamente.

Olhando de outro ângulo, o escopo é um mecanismo de encapsulamento para blocos de código, funções e módulos.

5. Os escopos podem ser aninhados

Uma propriedade interessante dos escopos é que eles podem ser aninhados.

No exemplo a seguir, a função run()cria um escopo e dentro de um ifbloco de código de condição cria outro escopo:

function run() {
  // "run" function scope
  const message = 'Run, Forrest, Run!';
  if (true) {
    // "if" code block scope
    const friend = 'Bubba';
    console.log(message); // 'Run, Forrest, Run!'
  }
  console.log(friend); // throws ReferenceError
}
run();

ifo escopo do bloco de código está aninhado dentro do run()escopo da função. Escopos de qualquer tipo (bloco de código, função, módulo) podem ser aninhados.

O escopo contido em outro escopo é denominado escopo interno . No exemplo, ifo escopo do bloco de código é um escopo interno do escopo da run()função.

O escopo que envolve outro escopo é denominado escopo externo . No exemplo, o escopo da run()função é um escopo externo para o escopo ifdo bloco de código.

Escopos aninhados de JavaScript

E quanto à acessibilidade da variável? Aqui está uma regra simples para lembrar:

O escopo interno pode acessar as variáveis ​​de seu escopo externo .

messagevariável, que faz parte do escopo da run()função (escopo externo), é acessível dentro ifdo escopo do bloco de código (escopo interno).

6. Escopo global

O escopo global é o escopo mais externo. É acessível a partir de qualquer escopo interno (também conhecido como local ).

Em um ambiente de navegador, o escopo mais alto do arquivo JavaScript carregado usando <script>a tag é um escopo global:

<script src="myScript.js"></script>
// myScript.js
// "global" scope
let counter = 1;

Uma variável declarada dentro do escopo global é denominada variável global . As variáveis ​​globais são acessíveis de qualquer escopo.

No trecho de código anterior, counteré uma variável global. Esta variável pode ser acessada de qualquer lugar do JavaScript da página web.

O escopo global é um mecanismo que permite que o host do JavaScript (navegador, Node) forneça aos aplicativos funções específicas do host como variáveis ​​globais.

windowe document, por exemplo, são variáveis ​​globais fornecidas pelo navegador. Em um ambiente Node, você pode acessar processo objeto como uma variável global.

7. Escopo lexical

Vamos definir 2 funções, tendo a função innerFunc()aninhada dentro outerFunc()de .

function outerFunc() {
  // the outer scope
  let outerVar = 'I am from outside!';
  function innerFunc() {
    // the inner scope
    console.log(outerVar); // 'I am from outside!'
  }
  return innerFunc;
}
const inner = outerFunc();
inner();

Veja a última linha do snippet inner(): a innerFunc()invocação acontece fora do outerFunc()escopo. Ainda assim, como o JavaScript entende que outerVarinside innerFunc()corresponde à variável outerVarde outerFunc()?

A resposta é devido ao escopo lexical.

JavaScript implementa um mecanismo de escopo chamado escopo léxico (ou escopo estático). Escopo lexical significa que a acessibilidade das variáveis ​​é determinada estaticamente pela posição das variáveis ​​dentro dos escopos da função aninhada: o escopo da função interna pode acessar variáveis ​​do escopo da função externa .

Uma definição formal de escopo lexical:

O escopo léxico consiste em escopos externos determinados estaticamente.

No exemplo, o escopo léxico de innerFunc()consiste no escopo de outerFunc().

Além disso, o innerFunc()é um encerramento porque captura a variável outerVardo escopo lexical.

Se você quiser dominar o conceito de closure, eu recomendo ler meu post A Simple Explanation of JavaScript Closures .

8. Isolamento de variáveis

Uma propriedade imediata do escopo surge: o escopo isola as variáveis. E o que é bom escopos diferentes podem ter variáveis ​​com o mesmo nome.

Você pode reutilizar nomes de variáveis ​​comuns ( count, index, current, value, etc) em diferentes escopos sem colisões.

foo()e bar()escopos de função têm suas próprias variáveis, mas com o mesmo nome count:

function foo() {
  // "foo" function scope
  let count = 0;
  console.log(count); // 0
}
function bar() {
  // "bar" function scope
  let count = 1;
  console.log(count); // 1
}
foo();
bar();

9. Conclusão

O escopo é uma política que gerencia a disponibilidade de variáveis. Uma variável definida dentro de um escopo é acessível apenas dentro desse escopo, mas inacessível fora dele.

Em JavaScript, os escopos são criados por blocos de código, funções, módulos.

Enquanto conste letvariáveis ​​são delimitadas por blocos de código, funções ou módulos, varvariáveis ​​são delimitadas apenas por funções ou módulos.

Os escopos podem ser aninhados. Dentro de um escopo interno você pode acessar as variáveis ​​de um escopo externo.

O escopo léxico consiste nos escopos da função externa determinados estaticamente. Qualquer função, não importa o local onde está sendo executada, pode acessar as variáveis ​​de seu escopo léxico (este é o conceito de closure ).

Espero que meu post tenha ajudado você a entender melhor o escopo!

Fonte: https://dmitrupavlutin.com/javascript-scope/

#JavaScript 

Como O Escopo Funciona Em JavaScript