CollegeStash

Make sure you are logged into the WordPress admin console and that you have necessary permissions to toggle the Jetpack modules and navigate to the following link after replacing the domain name with yours. Here you should be able to easily activate and deactivate the Jetpack list of modules easily.
https://www.url-here.com/wp-admin/admin.php?page=jetpack_modules

Write a function to determine whether a person can reach the other end of the array if he starts at index 0 and if he cannot hop more than the value contained at that index.

var jumper = [];
var arr = [4, 0, 0, 1];

function hopper(index) {
  if (index + arr[index] >= arr.length) {
    jumper[index] = true;
    return;
  } else {
    for (var i = index + 1; i <= index + arr[index]; i++) {
      if (jumper[i]) {
        jumper[index] = true;
        return;
      }
    }
    jumper[index] = false;
  }
}

function isReachable() {
  for (var j = arr.length - 1; j >= 0; j--) {
    hopper(j);
  }
  return jumper[0];
}

isReachable()

Output

isReachable => true
jumper => [true, false, false, true]

Time Complexity: O(n^2)
Space Complexity: O(n)
Demo

Get Minimum Hops

To get the minimum hops, now we need to keep track of the hops at each index using another array or we can create a Data Structure (here Object) to keep track of them.

var jumper = [];
var mjumper = [];
var arr = [4, 1, 1, 1];

function hopper(index) {
  if (index + arr[index] >= arr.length) {
    jumper[index] = true;
    mjumper[index] = 1;
  } else {
    for (var i = index + 1; i <= index + arr[index]; i++) {
      if (jumper[i]) {
        if (jumper[index]) {
          mjumper[index] = Math.min(mjumper[i] + 1, mjumper[index]);
        } else {
          jumper[index] = true;
          mjumper[index] = mjumper[i] + 1;
        }
      }
    }
    if (!jumper[index]) {
      jumper[index] = false;
    }
  }
}

function getMinimumSteps() {
  for (var j = arr.length - 1; j >= 0; j--) {
    hopper(j);
  }

  if (jumper[0])
    return mjumper[0];
  else return -1;
}

getMinimumSteps();

Output

1

Time Complexity: O(n^2)
Space Complexity: O(n)
Demo

SimpleJS is a lightweight javascript library to get you started on plane javascript project that doesn’t need libraries to start with.
Some of the major functionality includes the following.

• Manipulate Cookies.
• Make GET, POST calls with JSON data.
• Load attributes to an element by passing an object.
• Insert element before an element in DOM.
• Get Parent element in DOM.

github

import {timeAgo} from './time-ago.ts';
...
// Pass Date Object and it returns a string.
timeAgo(new Date());

You need to pass a date object and this method returns a string. This is compatible with Angular 5.0.3.

Make sure you have jquery and bootstrap installed.
or else you can use the following commands.

npm i jquery bootstrap@4.0.0-beta.2 --save

If you are using angular-cli, then you need to include the jquery in the scripts section of .angular-cli.json file. The same goes with bootstrap files as well. My file looks somewhat similar to the following.

"styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "../node_modules/font-awesome/css/font-awesome.min.css",
        "styles.scss"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.slim.min.js",
        "../node_modules/popper.js/dist/umd/popper.min.js",
        "../node_modules/bootstrap/dist/js/bootstrap.min.js"
      ],

Here is the HTML you would want to use to trigger the modal to show up. The fade class is removed from the modal with id = “exampleModal” when the button with the attributes data-toggle = “modal” data-target = “#exampleModal” is clicked.

HTML

  Launch demo modal




  

    

      

        
Modal title
        
          ×
        
      
      

        ...
      
      

        Close
        Save changes
      
    
  

Programmatically

If you want trigger the opening and closing of the modal programmatically, then use the following in your methods inside the component with the above HTML after installing the required.

npm install @types/jquery --save

This is the best approach if all that we want to use is the modal. We can avoid the overhead of an angular wrapper around bootstrap jQuery functions.
Now in the component in which you are using jQuery import it as the following.

import * as $ from 'jquery';

// opening
$('#modalTrigger').click();

// closing
 $('#postJobModalClose').click();

The approach that will be discussed in this post uses the recommended HttpClient from angular 4.

login.service.ts

import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {Observable} from 'rxjs/Observable';

import {LoginObj} from './login-obj';
// import {ReturnObj} from './return-obj';
import {baseUrl} from '../backend';

@Injectable()
export class LoginService {
    
    constructor(private http: HttpClient) {
    }

    // submitUser(obj: LoginObj): Observable {
    submitUser(obj: LoginObj): Observable {
        return this.http.post(`${baseUrl}login.php`, obj);
    }
}

The above login service returns an observable of type any. We can also validate the object being returned by expecting a certain class.
Now the service needs to be injected into the component that we are going to use.

login.component.ts

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

import {LoginService} from './login.service';
import {LoginObj} from './login-obj';

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

    loading = false;
    errorMessage = '';
    successMessage = '';
    loginObj = new LoginObj();
   
    constructor(private userLoginSer: LoginService) {}

    ngOnInit(): void {}

    onLoginSubmit(): void { 
            this.loading = true;
            this.userLoginSer.submitUser(this.loginObj)
                .finally(() => {
                    // This does exactly what it says, it executes finally irrespective of success, failure.
                    this.loading = false;
                })
                .subscribe(returnObj => {
                   this.successMessage = 'Hurray!';
                    },
                    error => {
                        this.errorMessage = 'Sorry! Something went wrong!';
                    },
                      () => {  
                       // onComplete
                       // This runs only if it is a success and after the code in the success block.
                        });
        }
    }

The login and return classes may look somewhat like this,

login-obj.ts

export class LoginObj {
    message: string
    constructor() {
    }
}

return-obj.ts

export class ReturnObj {
    message: string
    constructor() {
    }
}

Now we finally need to add the service and component into the app.module.ts.

The service goes into the providers section, and the component goes into the declarations.

app.module.ts

import {NgModule} from '@angular/core';

import {LoginComponent} from './login.component';
import {LoginService} from './login.service';

@NgModule({
    declarations: [
        LoginComponent,
      ...],
     ....
    providers: [
       LoginService,
       ....
     ],
   ...
})

export class AppModule {
}

Make sure that you have listed the domain you are using to run this piece of php code, under the list of allowed domains in your corresponding recaptcha module in google.
Enter
recaptcha.php

 $secret, 'response' => $_POST['recaptcha']);
    // use key 'http' even if you send the request to https://...
    $options = array(
        'http' => array(
            'header' => "Content-type: application/x-www-form-urlencoded\r\n",
            'method' => 'POST',
            'content' => http_build_query($data)
        )
    );
    $context = stream_context_create($options);
    $result = file_get_contents($url, false, $context);
    if ($result === FALSE) {
        error_log('https request to Google API failed!');
        echo '{"message" : "Sorry! Something went wrong."}';
    } else {
        $result = json_decode($result, true);
        if (!$result) {
            error_log(json_last_error_msg());
            echo '{"message" : "Sorry! Something went wrong."}';
        } else {
            if ($result["success"] === true) {
                echo '{"message" : "OK"}';
            } else {
                error_log("error : " . $result["challenge_ts"]
                    . "hostname : " . $result["hostname"]
                    . "error-codes : " . $result["error-codes"]);
                echo '{"message" : "Sorry! Something went wrong."}';
            }
        }
    }
}

Let us take can example of a function that checks whether a given string is a .edu email address or not.

job-state.ts

Let us assume we have a job object with the following properties.

export interface JobState {
    id: number;
    title: string;
    company: string;
    city: string;
    state: string;
    zip: number;
}

job-state.ts

Let us create actions classes by implementing the Action interface and then export them with type All, to avoid type mismatch errors.

import {Action} from '@ngrx/store';

import {JobState} from './job-state';

export const ADDJOB = 'ADDJOB';
export const GETJOB = 'GETJOB';

export class AddJobPost implements Action {
    readonly type = ADDJOB;

    constructor(public payload: JobState) {
    }
}

export class GetJobPost implements Action {
    readonly type = GETJOB;
}

export type All = AddJobPost | GetJobPost;

job.reducer.ts

Now we need to create the reducer which maps the actions to the correct state.

import * as PostActions from './job-actions';
import {JobState} from './job-state';

export type Action = PostActions.All;

const emptyJobState = {
    id: null,
    title: null,
    company: null,
    city: null,
    state: null,
    zip: null,
};

const newState = (state, newData) => {
    return Object.assign({}, state, newData);
};

export function jobReducer(state: JobState = emptyJobState, action: Action) {
    switch (action.type) {
        case PostActions.ADDJOB: {
            return newState(state, action.payload);
        }
        case PostActions.GETJOB: {
            return Object.assign({}, state);
        }
        default: {
            return Object.assign({}, state);
        }
    }
}

app.component.ts

Now we need to include the reducer in the component, that we can to make use of this functionality. Here let us consider app.component.ts

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

import * as PostActions from '../reducers/job-actions';
import {JobState} from './job-state';
import {JobStateInterface} from './job-state.interface';

@Component({
    selector: 'app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
    job: Observable;
    jobs: JobState[];

    constructor(private store: Store) {
        this.job = store.select('job');
    }

 
    setJob(obj: JobState): void {
        this.store.dispatch(new PostActions.AddJobPost(obj));
    }

}

job-state.interface.ts

We need to define the interface that the store uses to retrieve the state.

import {JobState} from './job-state';

export interface JobStateInterface {
    job: JobState;
}

app.module.ts

Finally we need to add the reducer to the app.module.ts. There is a nice chrome plugin called redux dev-tools</ that comes in handy to view the current state of the application and manipulate it. You need add the StoreDevtoolsModule line as shown below, after installing and enabling the above plugin in your code.

// ...
import {job} from 'job.reducer';

@NgModule({
// ...

 imports: [
        BrowserModule,
        AppRoutingModule,
        FormsModule,
        HttpClientModule,
        StoreModule.forRoot({login: loginReducer, job: jobReducer}),
        StoreDevtoolsModule.instrument({
            maxAge: 25
        }),

// ...
})

// ...