HTML

How to create new components in Angular using the CLI

How to create new components in Angular using the CLI

How to create new components in Angular using the CLI : It just so happens, when creating your own new components in Angular, you can finish the cycle totally by hand. That was useful for learning the subtleties of what goes in to an Angular Component. Well we as a whole like automation, and you can really build another Angular command automatically using the Angular CLI, That sounds magnificent as less composing code is a reward in my book. How about we take a stab at building another Angular Component yet this time, we’ll utilize that extremely helpful Angular command line interface.

So before you start generating component using the CLI, please setup Angular app locally on your system. if you already setup angular app skip this step and move to Step 2 : CLI Component Generation

Step 1: Angular App Installation :

See how to install Angular 
after installation move to Step 2 below.

Step  2 : CLI Component Generation

You’ll want to have the ng serve process already running in a command line window for your application. Then, you can open another instance of the command line and type ng generate component edit-new-corporate to create a new edit-new-corporate component.

PS D:\corporateApp> ng g c components/edit-new-corporate
or 
PS D:\corporateApp> ng genarte component components/edit-new-corporate

> corporateApp@0.0.0 ng D:\corporateApp
> ng "g" "c" "components/edit-new-corporate"

CREATE src/app/components/edit-new-corporate/edit-new-corporate.component.html (33 bytes)
CREATE src/app/components/edit-new-corporate/edit-new-corporate.component.spec.ts (700 bytes)
CREATE src/app/components/edit-new-corporate/edit-new-corporate.component.ts (322 bytes)
CREATE src/app/components/edit-new-corporate/edit-new-corporate.component.scss (0 bytes)

Alright exceptionally interesting! It seems as though the CLI naturally made the new folder to hold our new component in src/components/edit-corporate. Likewise we see four new files related with the naturally created component.

edit-new-corporate.component.html

<p>
  edit-new-corporate works!
</p>

edit-new-corporate.component.spec.ts

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { EditNewCorporateComponent } from './edit-new-corporate.component';

describe('EditNewCorporateComponent', () => {
  let component: EditNewCorporateComponent;
  let fixture: ComponentFixture<EditNewCorporateComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ EditNewCorporateComponent ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(EditNewCorporateComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

edit-new-corporate.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-edit-new-corporate',
  templateUrl: './edit-new-corporate.component.html',
  styleUrls: ['./edit-new-corporate.component.scss']
})
export class EditNewCorporateComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

edit-new-corporate.component.css

/* todo: add your styles here */

Angular Google Bar Chart Example

Angular Google Bar Chart

Angular Google Bar Chart :

Google chart tools are powerful, simple to use, and free. Try out our rich gallery of interactive charts and data tools. Get started Chart Gallery. insert_chart Rich Gallery Choose from a variety of charts. From simple scatter plots to hierarchical treemaps, find the best fit for your data.

This instructional exercise shows you Angular google bar graph model. it’s straightforward illustration of Angular google bar graph npm. This post will give you straightforward illustration of Angular precise google-graphs google bar diagram . Here you will figure out how to add google bar graph in Angular .

you can without much of a stretch add google programming interface bar graph in Angular 6, Angular 7, Angular 8, Angular 9, Angular 10, Angular 11 and Angular 12 form application.

In this model we will utilize Angular google-graphs npm bundle to make google programming interface bar outline model in Angular 11 application. we will essentially introduce that Angular google-graphs npm bundle and use GoogleChartsModule module to make code.

Along these lines, we should see cry step and get qr code as like roar screen capture:

Step 1: Create New App

ng new myNewApp

Step 2: Install angular-google-charts npm Package

Add angular-google-charts in our angular application by using following command.

npm install angular-google-charts

Step 3: Import GoogleChartsModule

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
  
import { AppComponent } from './app.component';
import { GoogleChartsModule } from 'angular-google-charts';
   
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    GoogleChartsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 4: Update Ts File

src/app/app.component.ts

import { Component } from '@angular/core';
   
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
    
  chartData = {
      type: 'BarChart',
      data: [
      ["Pendrive",  500],
      ["Hard Disk",  800],
      ["Charger",  400],
   ],
   chartColumns: ['Sweets', 'Sell'],
   width: 1000,
   height: 400
  };
     
}

Step 5: Update HTML File

<google-chart 
    [type]="chartData.type" 
    [data]="chartData.data" 
    [columns]="chartData.chartColumns" 
    [width]="chartData.width"
    [height]="chartData.height">     
</google-chart>

Now run your application using the following command

ng serve

 

Solved – can’t bind to ‘formgroup’ since it isn’t a known property of ‘form’

can’t bind to ‘formgroup’ since it isn’t a known property of ‘form’

Can’t bind to ‘formgroup’ since it isn’t a known property of ‘form’ :  Whenever start with Angular App, everyone needs to start with form kind of information, So In most of the cases we start collect user information using form in Angular. Creating form and giving it name is the process of Angular, We declare the form name and use it in the HTML form. While executing the application It start throwing an error.  Let’s checkout this with code example.

app.component.html

<form [formGroup]="myForm">
  Naam: <input type="text" formControlName="name"><br>
  Age: <input type="number" formControlName="age">

  <button>Submit</button>
</form>

app.component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
    myForm: FormGroup;

    constructor(private fb: FormBuilder) { }

    ngOnInit() {
        this.myForm = this.fb.group({
            name: ['', Validators.required],
            age: ['', Validators.required]
        });
    }
}

Error after running app

Can't bind to 'formgroup' since it isn't a known property of 'form'

In order to solve can’t bind to ‘formgroup’ since it isn’t a known property of ‘form’ error you need to import ReactiveFormsModule in each submodule file.

app.module.ts

 import { FormsModule, ReactiveFormsModule } from '@angular/forms';`

@NgModule({
  declarations: [
    AppComponent,
  ]
  imports: [
    FormsModule,
    ReactiveFormsModule,
    yourModule,
],
...

You will have to import ReactiveFormsModule in your yourModule like this:

...
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

...

@NgModule({
  imports: [
    ...,
    FormsModule,    //import here
    ReactiveFormsModule //import here
  ],
  declarations: [...],
  providers: [...]
})

export class yourModule {}

 

Like us on facebook

React Color Picker Tutorial Example

React Color Picker Tutorial Example

React Color Picker Tutorial Example : In this instructional exercise, you will figure out how to execute color picker in React JS applications.

You more likely than not seen in many web and applications that you can pick the shading straightforwardly on color picker. You need to add basic color picker to your React JS application. So in this instructional exercise you will get bit by bit guide. With the assistance of which you can add your React JS application basic color picker.

Live demo : See here

Create Color Picker in React :

  • Step 1 – Create React App
  • Step 2 – Add Bootstrap Library
  • Step 3 – Add Color Picker Library
  • Step 4 – Create Color Picker Component
  • Step 5 – Add Color Picker Component in App.js

Step 1 – Create React App :

npx create-react-app my-colorpicker-app

Run app now:

npm start

Go to URL: localhost:3000

Step 2 – Add Bootstrap Library :

Install bootstrap:

npm install bootstrap --save

Add bootstrap.min.css file in src/App.js file:

import React, { Component } from 'react'
 
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
 
function App() {
  return (
    <div>
      <h2>How to create color picker in React</h2>
    </div>
  );
}
 
export default App;

Step 3 – Add Color Picker Library :

npm install react-color --save

Step 4 – Create Color Picker Component :

Make ColorPickerComponent.js document. Along these lines, visit the src directory of your application and make a table component document named ColorPickerComponent.js. What’s more, add the accompanying code into it :

'use strict'
 
import React from 'react'
import reactCSS from 'reactcss'
import { SketchPicker } from 'react-color'
 
class ColorPickerComponent extends React.Component {
    state = {
      displayColorPicker: false,
      color: {
        r: '241',
        g: '112',
        b: '19',
        a: '1',
      },
    };
 
    handleClick = () => {
      this.setState({ displayColorPicker: !this.state.displayColorPicker })
    };
 
    handleClose = () => {
      this.setState({ displayColorPicker: false })
    };
 
    handleChange = (color) => {
      this.setState({ color: color.rgb })
    };
 
    render() {
 
      const styles = reactCSS({
        'default': {
          color: {
            width: '36px',
            height: '14px',
            borderRadius: '2px',
            background: `rgba(${ this.state.color.r }, ${ this.state.color.g }, ${ this.state.color.b }, ${ this.state.color.a })`,
          },
          swatch: {
            padding: '5px',
            background: '#fff',
            borderRadius: '1px',
            boxShadow: '0 0 0 1px rgba(0,0,0,.1)',
            display: 'inline-block',
            cursor: 'pointer',
          },
          popover: {
            position: 'absolute',
            zIndex: '2',
          },
          cover: {
            position: 'fixed',
            top: '0px',
            right: '0px',
            bottom: '0px',
            left: '0px',
          },
        },
      });
 
      return (
        <div>
          <div style={ styles.swatch } onClick={ this.handleClick }>
            <div style={ styles.color } />
          </div>
          { this.state.displayColorPicker ? <div style={ styles.popover }>
            <div style={ styles.cover } onClick={ this.handleClose }/>
            <SketchPicker color={ this.state.color } onChange={ this.handleChange } />
          </div> : null }
 
        </div>
      )
    }
}
 
export default ColorPickerComponent

Step 5 – Add Color Picker Component in App.js

In this progression, you need to add ColorPickerComponent.js document in src/App.js record:

import React from 'react';
 
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
 
import ColorPickerComponent from './ColorPickerComponent'
 
function App() {  
     
  return (  
    <div className="App">  
      <ColorPickerComponent />  
    </div>  
  );  
}  
 
export default App;

Angular Display JSON Data in Table Example

Angular Display JSON Data in Table Example

Angular Display JSON Data in Table : This instructional exercise will give you illustration of Angular showcase json data in table. you can comprehend an idea of how to show information in Angular . this model will help you Angular show information in table. I disclosed just about how to show information in Angular. Okay, how about we plunge into the means.

At some point we need to show our information in table arrangement for front end. we will utilize *ngfor mandate for show information in table. we will likewise utilize bootstrap for showing information in Angular application.

JSON is an abbreviation for JavaScript Object Notation, is an open standard organization, which is lightweight and text-based, planned expressly for intelligible information exchange. It is a language-free information design. It upholds pretty much every sort of language, structure, and library.

How about we see straightforward after advance to done basic model that will help you to showing information in Angular application.

 

Create New App

Assuming you are doing model without any preparation, You can undoubtedly make your Angular application utilizing cry order:

ng new my-app

In this record we will make understudies object cluster utilizing Student interface. so how about we see howl record code.

src/app/app.component.ts

import { Component } from '@angular/core';
  
interface Employee{
    id: Number;
    name: String;
    email: String;
    gender: String;
}
  
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
    
  students: Employee[] = [
    {
      id: 1,
      emp_code : "3505",
      name: "Rohit",
      email: "rohit@gmail.com",
      gender: "male"
      
    },
    {
      id: 2,
      emp_code : "3506",
      name: "Amit",
      email: "amit@gmail.com",
      gender: "male"
    },
    {
      id: 3,
      emp_code : "3507",
      name: "Kumkum",
      email: "kumkum@gmail.com",
      gender: "female"
    },
    {
      id: 4,
      emp_code : "3508",
      name: "Ajit",
      email: "ajit@gmail.com",
      gender: "male"
    },
    {
      id: 5,
      emp_code : "3509",
      name: "Mohit",
      email: "mohit@gmail.com",
      gender: "male"
    },
  ]
}

In this step, we will write code for display data of employee object array variable using ngfor directive.

I have used bootstrap class.

src/app/app.component.html

<div class="container"> 
  <table class="table table-striped">
    <thead>
        <tr>
          <th>S.no</th>
          <th>Name</th>
          <th>Employee Code</th>
          <th>Email</th>
          <th>Gender</th>
        </tr>
    </thead>
    <tbody>
      <tr *ngFor="let emp of employee">
        <td>{{ emp.id }}</td>       
        <td>{{ emp.name }}</td>
        <td>{{ emp.emp_code}}</td>       
        <td>{{ emp.email }}</td>  
        <td>{{ emp.gender }}</td>     
      </tr>
    </tbody>
  </table>
</div>

Presently you can run your application using following command.

ng serve

 

Output :

Angular Display JSON Data in Table Example

How to remove duplicates from an array of objects using JavaScript?

How to remove duplicates from an array of objects using JavaScript? : Given an assortment of articles and the task is to dispose of the duplicate item part from the group list. There are two procedures to deal with this issue which are discussed below :

Strategy 1:

Using one of the keys as index: A temporary array is created which stores the objects of the original array using one of its keys as the index. Anyone of the object properties can be used as a key. The key is extracted from the object and used as the index of the new temporary array. The object is then assigned to this index. This approach will remove the duplicate objects as only one of each object of the original array will get assigned to the same index.

<!DOCTYPE html>
<html>

<head>
    <title>
        How to remove duplicates from an array of objects using JavaScript ?
    </title>
</head>

<body>
    <h1 style="color: green">
        Online Portfolio
    </h1>

    <b>
        How to remove duplicates from an array of objects?
    </b>

    <p>
        Click on the button to remove the duplicated in the array
    </p>

    <p>Check the console for the output</p>

    <button onclick="deleteDuplicates()">
        Remove Duplicate
    </button>

    <script type="text/javascript">
        function deleteDuplicates() {

            // Create an array of objects
            subjects = [{
                title: "C++",
                author: "Rohit Gautam"
            }, {
                title: "JavaScript",
                author: "James"
            }, {
                title: "Python",
                author: "Ajit"
            }, {
                title: "ReactJS",
                author: "Sandeep"
            }, {
                title: "ReactJS",
                author: "Alok"
            }, {
                title: "ReactJS",
                author: "Ankit"
            }, ];

            // Display the list of array objects
            console.log(subjects);

            // Declare a new array
            let newArray = [];

            // Declare an empty object
            let otherObject = {};

            // Loop for the array elements
            for (let i in subjects) {

                // Extract the title
                objTitle = subjects[i]['title'];

                // Use the title as the index
                otherObject[objTitle] = subjects[i];
            }

            // Loop to push unique object into array
            for (i in otherObject) {
                newArray.push(otherObject[i]);
            }

            // Display the unique objects
            console.log(newArray);
        }
    </script>
</body>

</html>

Output :

How to remove duplicates from an array of objects using JavaScript?

How to remove duplicates from an array of objects using JavaScript?

Strategy 2:

Converting the exhibit to a Set to eliminate the copies: A Set item holds just extraordinary upsides of any sort. This property can be utilized to store just the items that are special in the cluster.

Each object of the cluster is first changed over into a JSON encoded string utilizing the JSON.stringify technique. The JSON encoded string is then planned to an exhibit utilizing the guide() strategy. Another set is made by passing this cluster to the new set constructor. This progression will eliminate every one of the copy components as the JSON encoded strings will be something similar for similar components.

The set is then changed over to an Array utilizing the from() strategy, passing the set as a boundary. This exhibit won’t have copied objects.

 

<!DOCTYPE html>
<html>

<head>
    <title>
        How to remove duplicates from an array of objects using JavaScript ?
    </title>
</head>

<body>
    <h1 style="color: red">
        Online Portfolio
    </h1>

    <b>
        How to remove duplicates from an array of objects?
    </b>

    <p>
        Click on the button to remove the duplicated in the array
    </p>

    <p>Check the console for the output</p>

    <button onclick="deleteDuplicates()">
        Remove Duplicate
    </button>

    <script type="text/javascript">
        function deleteDuplicates() {

            // Create an array of objects
            subjects = [{
                title: "C++",
                author: "Rohit Gautam"
            }, {
                title: "JAVA",
                author: "Alok"
            }, {
                title: "Python",
                author: "Ajit"
            }, {
                title: "JAVA",
                author: "Alok"
            }, {
                title: "Python",
                author: "Ajit"
            }, {
                title: "C++",
                author: "Rohit Gautam"
            }, ];
            jsonObject = subjects.map(JSON.stringify);

            console.log(jsonObject);

            uniqueSet = new Set(jsonObject);
            uniqueArray = Array.from(uniqueSet).map(JSON.parse);
            console.log(uniqueArray);
        }
    </script>
</body>

</html>

Output

remove duplicate

CSS MEGA MENU/ FULLY RESPONSIVE

CSS MEGA MENU/ FULLY RESPONSIVE

CSS MEGA MENU/ FULLY RESPONSIVE

CSS MEGA MENU/ FULLY RESPONSIVE

The solitary strategy we had of investigating a site used to a little menu with navigational connections to chronicles and classes. This improved when the drop-down menu became. And afterward came the super menu.

Today, most news sites, online stores, and eCommerce sites would be inadequate without a super menu. Indeed, even the greatest retail sites, for example, Amazon and eBay wouldn’t be such a triumph without assistance from their uber menus.

What is a super menu, precisely? Would it be advisable for you to utilize a super menu on your site? How might you introduce one in WordPress? Continue to peruse to discover the appropriate responses.

 

Create A Mega Menu 

Make a mega menu that seems when the user moves the mouse over a component inside a navbar and hover on it, that time mega menu will start display. This is a very good approach to use only with css no any JS and jQuery required. Examining immense areas has dependably been a plan issue. You could make a huge sitemap-like menu with relationship with each page, yet it would turn out to be difficult to review and become legitimately colossal as more pages are added.

Step 1 : Add HTML

<div class="nav">
<nav>
<a href="javascript:void(0);" class="mobile-menu-trigger">Open mobile menu</a>
<ul class="menu menu-bar">
<li>
<a href="javascript:void(0);" class="menu-link menu-bar-link" aria-haspopup="true">1. Multilevel mega
menu</a>
<ul class="mega-menu mega-menu--multiLevel">
<li>
<a href="javascript:void(0);" class="menu-link mega-menu-link" aria-haspopup="true">1.1 Flyout
link</a>
<ul class="menu menu-list">
<li>
<a href="/page" class="menu-link menu-list-link">1.1.1 Page link</a>
</li>
<li>
<a href="javascript:void(0);" class="menu-link menu-list-link" aria-haspopup="true">1.1.2 Flyout link</a>
<ul class="menu menu-list">
<li>
<a href="/page" class="menu-link menu-list-link">1.1.2.1 Page link</a>
</li>
<li>
<a href="/page" class="menu-link menu-list-link">1.1.2.2 Page link</a>
</li>
</ul>
</li>
<li>
<a href="/page" class="menu-link menu-list-link">1.1.3 Page link</a>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0);" class="menu-link mega-menu-link" aria-haspopup="true">1.2 Flyout
link</a>
<ul class="menu menu-list">
<li>
<a href="/page" class="menu-link menu-list-link">1.2.1 Page link</a>
</li>
<li>
<a href="/page" class="menu-link menu-list-link">1.2.2 Page link</a>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0);" class="menu-link mega-menu-link" aria-haspopup="true">1.3 Flyout
link</a>
<ul class="menu menu-list">
<li>
<a href="/page" class="menu-link menu-list-link">1.3.1 Page link</a>
</li>
<li>
<a href="/page" class="menu-link menu-list-link">1.3.2 Page link</a>
</li>
</ul>
</li>
<li>
<a href="/page" class="menu-link mega-menu-link">1.4 Page link</a>
</li>
<li class="mobile-menu-back-item">
<a href="javascript:void(0);" class="menu-link mobile-menu-back-link">Back</a>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0);" class="menu-link menu-bar-link" aria-haspopup="true">2. Flat mega menu (3
cols)</a>
<ul class="mega-menu mega-menu--flat">
<li>
<a href="/page" class="menu-link mega-menu-link mega-menu-header">2.1 Page link header</a>
<ul class="menu menu-list">
<li>
<a href="/page" class="menu-link menu-list-link">2.1.1 Page link</a>
</li>
<li>
<a href="/page" class="menu-link menu-list-link">2.1.2 Page link</a>
</li>
<li>
<a href="/page" class="menu-link menu-list-link">2.1.3 Page link</a>
</li>
</ul>
</li>
<li>
<a href="/page" class="menu-link mega-menu-link mega-menu-header">2.2 Page link header</a>
<ul class="menu menu-list">
<li>
<a href="/page" class="menu-link menu-list-link">2.2.1 Page link</a>
</li>
<li>
<a href="/page" class="menu-link menu-list-link">2.2.2 Page link</a>
</li>
<li>
<a href="/page" class="menu-link menu-list-link">2.2.3 Page link</a>
</li>
</ul>
</li>
<li>
<a href="/page" class="menu-link mega-menu-link mega-menu-header">2.3 Page link header</a>
<ul class="menu menu-list">
<li>
<a href="/page" class="menu-link menu-list-link">2.2.1 Page link</a>
</li>
<li>
<a href="/page" class="menu-link menu-list-link">2.2.2 Page link</a>
</li>
</ul>
</li>
<li class="mobile-menu-back-item">
<a href="javascript:void(0);" class="menu-link mobile-menu-back-link">Back</a>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0);" class="menu-link menu-bar-link" aria-haspopup="true">3. Flat mega menu (2
cols)</a>
<ul class="mega-menu mega-menu--flat">
<li>
<a href="#" class="menu-link mega-menu-link mega-menu-header">3.1 Page link header</a>
<ul class="menu menu-list">
<li>
<a href="/page" class="menu-link menu-list-link">
3.1.1 Page link<br />
<small>Short decription of link</small>
</a>
</li>
<li>
<a href="/page" class="menu-link menu-list-link">
3.1.2 Page link<br />
<small>Short decription of link</small>
</a>
</li>
<li>
<a href="/page" class="menu-link menu-list-link">
3.1.2 Page link<br />
<small>Short decription of link</small>
</a>
</li>
</ul>
</li>
<li class="mega-menu-content">
<p class="mega-menu-header">3.2 Page link header</p>
<p>This is just static content. You can add anything here. Images, text, buttons, your grandma's secrect recipe.</p>
</li>
<li class="mobile-menu-back-item">
<a href="javascript:void(0);" class="menu-link mobile-menu-back-link">Back</a>
</li>
</ul>
</li>
<li>
<a href="/page" class="menu-link menu-bar-link">Static link</a>
</li>
<li class="mobile-menu-header">
<a href="/home" class>
<span>Home</span>
</a>
</li>
</ul>
</nav>
</div>

Modal Explained

So, Utilize any component to open the mega menu, for example, a button element.

Utilize a holder component to make the dropdown menu and add a framework (segments) and add dropdown joins inside the lattice.

Wrap a component around the catch and the holder component ( to position the dropdown menu effectively with CSS.

STEP 2 : ADD CSS

* {
font-family: cursive;
}

nav ul,
nav li {
list-style: none;
padding: 0;
margin: 0;
}

nav a {
display: block;
text-decoration: none;
}

nav a:hover,
nav a:visited {
text-decoration: none;
}

.menu-bar {
background: #ffffff;
display: flex;
}

.menu-link {
padding: 15px 10px;
background: #ffffff;
color: #c16161;
transition: background 0.2s, color 0.2s;
position: relative;
z-index: 1;
}

.menu-link[aria-haspopup="true"] {
padding-right: 40px;
}

.menu-link[aria-haspopup="true"]:after {
content: "";
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1397521/arrowRight.svg#accent');
background-size: 14px;
width: 14px;
height: 14px;
font-size: 12px;
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
}

.mega-menu-header {
font-size: 1.2em;
text-transform: uppercase;
font-weight: bold;
color: #136a73;
}

.mega-menu {
background: #ffffff;
z-index: 10;
}

.mega-menu--multiLevel {
flex-direction: column;
}

@media all and (min-width: 951px) {
.nav {
background: #ffffff;
}
.nav>nav {
max-width: 900px;
margin: 0 auto;
}
.menu [aria-haspopup="true"]~ul {
display: none;
}
.menu-bar {
position: relative;
}
.menu-bar>li>[aria-haspopup="true"]:after {
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1397521/arrowBottom.svg#accent');
}
.menu-bar>li>[aria-haspopup="true"]:hover:after {
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1397521/arrowBottom.svg#light');
}
.menu-bar>li>[aria-haspopup="true"]:focus~ul {
display: flex;
transform-origin: top;
animation: dropdown 0.2s ease-out;
}
.menu-bar>li>[aria-haspopup="true"]~ul:hover {
display: flex;
}
.menu-bar>li:focus-within>[aria-haspopup="true"]~ul {
display: flex;
}
.menu-bar>li>[aria-haspopup="true"]:focus,
.menu-bar>li:focus-within>[aria-haspopup="true"],
.menu-bar>li:hover>a {
background: #c16161;
color: #ffffff;
}
.menu-bar>li>[aria-haspopup="true"]:focus:after,
.menu-bar>li:focus-within>[aria-haspopup="true"]:after,
.menu-bar>li:hover>a:after {
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1397521/arrowTop.svg#light');
}
.mega-menu {
position: absolute;
top: 100%;
left: 0;
width: 100%;
}
.mega-menu:hover {
display: flex;
}
.mega-menu a:hover {
background: #dceced;
color: #136a73;
}
.mega-menu--multiLevel>li {
width: 33.33333333%;
}
.mega-menu--multiLevel>li>[aria-haspopup="true"]~ul {
left: 33.33333333%;
width: 33.33333333%;
}
.mega-menu--multiLevel>li>[aria-haspopup="true"]~ul ul {
width: 100%;
left: 100%;
}
.mega-menu--multiLevel li:hover>[aria-haspopup="true"]~ul {
display: block;
transform-origin: left;
animation: flyout 0.2s ease-out;
}
.mega-menu--multiLevel li:focus-within>[aria-haspopup="true"]~ul {
display: block;
}
.mega-menu--multiLevel li:hover>[aria-haspopup="true"],
.mega-menu--multiLevel li:focus-within>[aria-haspopup="true"],
.mega-menu--multiLevel li:hover>a,
.mega-menu--multiLevel li:focus-within>a {
background: #dceced;
color: #136a73;
}
.mega-menu--multiLevel [aria-haspopup="true"]~ul,
.mega-menu--multiLevel [aria-haspopup="true"] {
border-left: 1px solid #f0f0f0;
}
.mega-menu--multiLevel [aria-haspopup="true"]~ul:hover,
.mega-menu--multiLevel [aria-haspopup="true"]:hover {
display: block;
}
.mega-menu--multiLevel [aria-haspopup="true"]~ul {
position: absolute;
top: 0;
height: 100%;
}
.mega-menu--flat>* {
flex: 1;
}
.mobile-menu-trigger,
.mobile-menu-header,
.mobile-menu-back-item {
display: none;
}
}

@media all and (max-width: 950px) {
.nav {
padding: 20px;
}
.mobile-menu-trigger,
.mobile-menu-header,
.mobile-menu-back-item {
display: block;
}
.mobile-menu-trigger {
background: #c16161;
color: #ffffff;
border: 0;
padding: 10px;
font-size: 1.2em;
border-radius: 4px;
}
.mobile-menu-header {
order: -1;
background: grey;
}
.mobile-menu-header a {
padding: 20px 25px;
color: #ffffff;
visibility: visible;
}
.menu-bar {
flex-direction: column;
position: fixed;
top: 0;
left: -100%;
height: 100vh;
width: 350px;
max-width: 350px;
max-width: 90%;
overflow-x: hidden;
transition: left 0.3s;
box-shadow: 1px 0px 2px 0px rgba(0, 0, 0, 0.25);
}
.menu-bar>li>[aria-haspopup="true"]~ul {
display: flex;
flex-direction: column;
background: #ffffff;
position: absolute;
left: 100%;
top: 0;
max-height: 100vh;
width: 100%;
transition: left 0.3s;
}
.menu-bar>li>[aria-haspopup="true"]~ul>li>[aria-haspopup="true"] {
font-size: 1.2em;
}
.menu-bar>li>[aria-haspopup="true"]~ul>li>[aria-haspopup="true"]~ul a {
padding-left: 40px;
}
.menu-bar>li>[aria-haspopup="true"]~ul>li>[aria-haspopup="true"]~ul>li>[aria-haspopup="true"]~ul a {
padding-left: 80px;
}
.menu-bar>li>[aria-haspopup="true"]~ul [aria-haspopup="true"] {
color: #2a2a2a;
}
.menu-bar>li>[aria-haspopup="true"]~ul [aria-haspopup="true"]:after {
content: "+";
background: none;
font-size: 1em;
font-weight: normal;
height: 20px;
line-height: 1;
}
.menu-bar>li>[aria-haspopup="true"]~ul [aria-haspopup="true"]~ul {
max-height: 0px;
transform-origin: top;
transform: scaleY(0);
transition: max-height 0.1s;
}
.mega-menu-content {
padding: 20px 25px;
}
.mobile-menu-back-item {
order: -1;
}
.mobile-menu-back-item a {
background: #d9d9d9;
color: #2a2a2a;
max-height: calc(1.4em + 40px);
margin-top: calc(0px - (1.4em + 40px));
pointer-events: none;
}
.mobile-menu-back-item a:before {
content: "";
width: 14px;
height: 12px;
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1397521/arrowLeft.svg#default');
background-size: 14px;
margin-right: 10px;
display: inline-block;
}
.mobile-menu-trigger:focus~ul {
left: 0;
}
.menu-bar:hover,
.menu-bar:focus-within {
left: 0;
}
.menu-bar>li>[aria-haspopup="true"]:focus~ul {
left: 0;
}
.menu-bar>li>[aria-haspopup="true"]~ul {
margin-top: calc(1.4em + 40px);
}
.menu-bar>li>[aria-haspopup="true"]~ul:hover,
.menu-bar>li>[aria-haspopup="true"]~ul:focus-within {
left: 0;
}
.menu-bar>li>[aria-haspopup="true"]~ul [aria-haspopup="true"]:focus~ul {
max-height: 500px;
animation: dropdown 0.3s forwards;
}
.menu-bar>li>[aria-haspopup="true"]~ul li:focus-within>[aria-haspopup="true"]~ul {
max-height: 500px;
transform: scaleY(1);
}
.menu-bar>li:focus-within~.mobile-menu-header a {
visibility: hidden;
}
}

@media all and (max-width: 950px) and (hover: none) {
.mobile-menu-trigger:hover~ul {
left: 0;
}
.menu-bar>li>[aria-haspopup="true"]:hover~ul {
left: 0;
}
.menu-bar>li>[aria-haspopup="true"]~ul:hover {
left: 0;
}
.menu-bar>li>[aria-haspopup="true"]~ul [aria-haspopup="true"]:hover~ul {
max-height: 500px;
animation: dropdown 0.3s forwards;
}
.menu-bar>li>[aria-haspopup="true"]~ul [aria-haspopup="true"]~ul:hover {
max-height: 500px;
transform: scaleY(1);
}
.menu-bar>li:hover~.mobile-menu-header a {
visibility: hidden;
}
}

@keyframes dropdown {
0% {
opacity: 0;
transform: scaleY(0);
}
50% {
opacity: 1;
}
100% {
transform: scaleY(1);
}
}

@keyframes flyout {
0% {
opacity: 0;
transform: scaleX(0);
}
100% {
opacity: 1;
transform: scaleX(1);
}
}

See all the CSS related posts

LIVE DEMO

See the Pen sdfsdf by Rohit Gautam (@TheRrohitt) on CodePen.

Web Designer Top Interview Question and Answer

Web Designer Top Interview Question and Answer

Web Designer Top Interview Question and Answer

Web Designer Top Interview Question and Answer : After collecting questions from many interviews. I came to search for those answer which is needed for the interviews question. These questions are very interesting which covers mostly HTML, CSS/ JavaScript, and jQuery, and Experience a couple of years. This is going to be very useful before anyone faces any interview.

 

In CSS when will you use a CSS float?

Ans –  The “float” CSS property specifies that an element should be placed along the left or right side of its container, where text and inline elements will wrap around it.

Q2 – While writing an error message what are all things do you need to take into consideration?

Ans –  Be Clear And Not Ambiguous

Be Short And Meaningful

Be Humble

Be Specific And Relevant

Don’t Use Technical Jargons.

Avoid Negative Words

Avoid Uppercase Text.

Give Direction to User

Explain what a Grid System is?

Ans –  There is nothing worse for an artist than a blank canvas. A grid system is a set of measurements a graphic designer can use to align and size objects within the given format. Although there are a few different categories of grid systems, there are no strict rules on what can or cannot be a grid. It’s up to you. Any guides that help you shape the final design are okay.

Q4 – What does is NaN Function do?

Answer –  The isNaN() function determines whether a value is an illegal number (Not-a-Number). This function returns true if the value equates to NaN. Otherwise, it returns false.

isNaN(123) //false

isNaN(-1.23) //false

isNaN(52) //false

isNaN(0) //false

isNaN(‘123’) //false

isNaN(‘Hello’) //true

isNaN(‘2005/12/12’) //true

isNaN() //false

isNaN(true) //false

isNaN(undefined) //true

isNaN(‘NaN’) //true

isNaN(NaN) //true

Explain What is Information Architecture?

Answer –  Information architecture (IA) is the structural design of shared information environments; the art and science of organizing and labelling websites, intranets, online communities and software to support usability and findability; and an emerging community of practice focused on bringing principles of design, architecture and information science to the digital landscape.

What is the difference between span & Div?

Answer –  The primary difference between a div and a span is their default behavior. By default, a <div> is a block-level-element and a <span> is an inline element. In other words, if you want to adjust a small portion of text and not break it out of the current line, you should use a <span>. If you need to modify a large division, the height, move an element, or contain other elements, you should use a <div>.

What is Mobile-First Design ?.

Answer – Responsive design starts on the desktop; that is, at the maximum required resolution, and then scales down to the smallest screen. Even though the content and layout contract to fit smartphones, the navigation, content, and download speeds are geared more for your traditional website.

Mobile-first design is similar to designing a mobile app and then adapting the layout that it can be viewed neatly on tablet and desktop devices without too many modifications. Your whole design and layout are based on providing an excellent mobile user experience: fast download speeds, rich media content to keep your target audience interested, easy touchscreen navigation, and so on.

WHY MOBILE-FIRST DESIGN

Responsive design sounds good, we hear you say. Why should you risk a mobile-first design? Quite simply, the stats show that we have become addicted to surfing on mobile devices. Currently, 52.64% of the total traffic on the Internet is done via mobile phones, and by the end of the year experts from Zenith Media predict an increase of up to 75%. With this information in mind, it is essential to understand what mobile-first design is and what its benefits are. Unlike responsive design, mobile-first is about a complete mobile user experience: adapted app-like user interface, less text, larger fonts, fast download speed, video and audio, one call-to-action per page, short forms, etcetera. Additionally, mobile browsers shortly will have access to more of the smartphone features like camera, haptic feedback, voice detection, so that a mobile-first design will be able to provide a unique experience to put your site ahead of the competition and drive traffic.

Difference between bootstrap3 and bootstrap 4?

Answer – Bootstrap 3 Source CSS Files is LESS.

Bootstrap 4 Source CSS files Converted in SCSS. 

Bootstrap 3 has 4 grid system (col-xs-3, col-sm-3, col-md-3, col-lg-3).

Bootstrap 4 has 5 grid system (.col-, .col-sm-3, .col-md-3, .col-lg-3, .col-xl-3). Bootstrap 4 has removed the xs from the lowest break point. Therefore, (col-) covers all devices. 

Bootstrap 3 Offset class is like this (col-md-offset-4).

Bootstrap 4 has changed the offset class (offset-md-4). 

In Bootstrap 3 we are used this (.img-responsive) class for the responsive images.

Bootstrap 4 has changed the class for responsive image (.img-fluid). 

In Bootstrap 3 we are used (.input-lg) and (.input-sm) to increase and decrease the input size.

Bootstrap 4 has changed to (.form-control-lg) and (.form-control-sm) to increase and decrease the input size.

What is the difference between Body.Onload() & document.ready() ?

Answer- The main differences between the two are:

  1. Body.Onload() event will be called only after the DOM and associated resources like images got loaded, but jQuery’s document.ready() event will be called once the DOM is loaded i.e., it won’t wait for the resources like images to get loaded. Hence, the functions in jQuery’s ready event will get executed once the HTML structure is loaded without waiting for the resources.
  2. We can have multiple document.ready() in a page but Body.Onload() event cannot.

What are the Different JavaScript Types?

Answer- In JavaScript, there are two different kinds of data: primitives, and objects. A primitive is simply a data type that is not an object and has no methods.

In JS, there are six primitive data types:

BUNNSS

Boolean, Undefined,  Number, Null, String, Symbol

What about Objects?

Objects are not a primitive dataType.

An object is a collection of properties. These properties are stored in key/value pairs. Properties can reference any type of data, including objects and/or primitive values.

What is the prompt box?

Answer – The prompt() method displays a dialog box that prompts the visitor for input. A prompt box is often used if you want the user to input a value before entering a page.

Note: When a prompt box pops up, the user will have to click either “OK” or “Cancel” to proceed after entering an input value. Do not overuse this method, as it prevents the user from accessing other parts of the page until the box is closed.

The prompt() method returns the input value if the user clicks “OK”. If the user clicks “cancel” the method returns null.

What is the difference between HTML & HTML5?

Ans – The biggest advantage that HTML5 has over its unnumbered predecessor is that it has high-level audio and video support which was not a part of the version specifications in the previous HTML. Other differences between HTML and HTML5:

SVG, canvas and other virtual vector graphics are supported in HTML5, whereas in HTML, using vector graphics was only possible by using it in conjunction with different technologies like Flash, VML, and Silver-light, etc.

HTML5 uses web SQL databases, application cache for temporary storing data, meanwhile, in HTML, only browser cache could be utilized for this purpose.

Another difference between HTML and HTML5 worth mentioning is that the former doesn’t allow JavaScript to run within the web browser (it instead runs in the browser interface thread) whereas the latter provides full support for JavaScript to run in the background (This is a possible courtesy to the JS web worker API of HTML5).

HTML5 is not based on SGML, and that allows it to have improved parsing rules which provide enhanced compatibility.

In HTML5, inline MathML and SVG can be used in text whereas this wasn’t possible in HTML.

Some of the deprecated elements that have now been dropped completely are index, no frames, acronym, applet, basefont, dir, font, frame, frameset, big, center, strike, tt.

HTML5 supports new kinds of form controls, for example, dates and times, email, number, range, tel, url, search, etc.

There are many new elements introduced in HTML. Some of the most important ones are: summary, time, aside, audio, command, data, data list, details, embed, wbr, figcaption, figure, footer, header, article, hgroup, bdi, canvas, keygen, mark, meter, nav, output, progress, rp, rt, ruby, section, source, track, video.

What is $() in the jQuery library? 

Answer – The $() function is an alias of jQuery() function, at first it looks weird and makes jQuery code cryptic, but once you get used to it, you will love its brevity. $() function is used to wrap any object into a jQuery object, which then allows you to call various method-defined jQuery objects. You can even pass a selector string to the $()function, and it will return a jQuery object containing an array of all matched DOM elements. I have seen this jQuery asked several times, despite it’s quite basic, it is used to differentiate between developers who know jQuery or not.

https://career.guru99.com/top-50-jquery-interview-questions/

https://www.codeproject.com/Articles/620811/Latest-JavaScript-Interview-Questions-and-Answers

 What is Grouping?

Answer – When more than one selector shares the same declaration, they may be grouped together via a comma-separated list; this allows you to reduce the size of the CSS (every bit and byte is important) and makes it more readable. The following snippet applies the same background to the first three heading elements.h1, h2, h3 {background: red;}

What is “Semantic Element”?

Ans – A semantic element clearly describes its meaning to both the browser and the developer.

Examples of non-semantic elements: <div> and <span> – Tells nothing about its content.

Examples of semantic elements: <form>, <table>, and <article> – Clearly defines its content.

Which command will give you a version of Jquery”?

Ans – The command $.ui.version returns jQuery UI version.

What is event bubbling?

Event bubbling is a term you might have come across on your JavaScript travels. It relates to the order in which event handlers are called when one element is nested inside a second element, and both elements have registered a listener for the same event (a click, for example).

Why do we use metatag?

The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page but will be machine parsable.

Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata.

The metadata can be used by browsers (how to display content or reload the page), search engines (keywords), or other web services.

What is a web worker?

Ans- When executing scripts on an HTML page, the page becomes unresponsive until the script is finished.

A web worker is a JavaScript that runs in the background, independently of other scripts, without affecting the performance of the page. You can continue to do whatever you want: clicking, selecting things, etc., while the web worker runs in the background.

What are webhooks?

Webhooks provide a mechanism whereby a server-side application can notify a client-side application when a new event (that the client-side application might be interested in) has occurred on the server. Webhooks operate on the concept of “event reaction” (don’t call me, I’ll call you if I have something new), and thus avoids the need for constant polling of the server-side application by the client-side application. Thus, rather than the client-side application constantly polling the server-side application to check for new events, the server-side application calls the client-side application (by invoking a client-provided webhook URL) anytime the server-side has something new to report to the client.

This is the core concept of the Webhook.

What is DOCTYPE!?

The <!DOCTYPE> declaration must be the very first thing in your HTML document, before the <html> tag.

The <!DOCTYPE> declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in.

In HTML 4.01, the <!DOCTYPE> declaration refers to a DTD, because HTML 4.01 was based on SGML. The DTD specifies the rules for the markup language so that the browsers render the content correctly.

HTML5 is not based on SGML and therefore does not require a reference to a DTD.

Tip: Always add the <!DOCTYPE> declaration to your HTML documents, so that the browser knows what type of document to expect.

What is the Callback Function? 

Simply put: A callback is a function that is to be executed after another function has finished executing — hence the name ‘call back’.

Is JavaScript case sensitive?

Ans: Yes!

A function getElementById is not the same as getElementbyID.

 What are undeclared and undefined variables?

Undeclared variables are those that do not exist in a program and are not declared. If the program tries to read the value of an undeclared variable, then a runtime error is encountered.

Undefined variables are those that are declared in the program but have not been given any value. If the program tries to read the value of an undefined variable, an undefined value is returned.

What is the ‘this’ keyword in JavaScript?

‘This’ keyword refers to the object from where it was called.

What is closure in JavaScript?

A closure is a combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function’s scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time.

Lexical scoping

Consider the following example code:

function init() {
  var name = 'Mozilla'; // name is a local variable created by init
  function displayName() { // displayName() is the inner function, a closure
    alert(name); // use variable declared in the parent function
  }
  displayName();
}
init();

init() creates a local variable called name and a function called displayName(). The displayName() function is an inner function that is defined inside init() and is available only within the body of the init() function. Note that the displayName() function has no local variables of its own. However, since inner functions have access to the variables of outer functions, displayName() can access the variable name declared in the parent function, init().

What is Hoisting in JavaScript?

JavaScript Declarations are Hoisted

In JavaScript, a variable can be declared after it has been used.

In other words; a variable can be used before it has been declared.