DEV Community: Ibukun Demehin

Picking Numbers - HakerRank Solution - Javascript

Ibukun Demehin — Sun, 01 Sep 2024 17:21:51 +0000

Given an array of integers, find the longest subarray where the absolute difference between any two elements is less than or equal to

Example

_a = [1,1,2,2,4,4,5,5,5]_
There are two subarrays meeting the criterion: [1,1,2,2] and [4,4,5,5,5]. The maximum length subarray has 5 elements.

Function Description

Complete the pickingNumbers function in the editor below.

pickingNumbers has the following parameter(s):

int a[n]: an array of integers

Returns

int: the length of the longest subarray that meets the criterion

Input Format

The first line contains a single integer n, the size of the array a.
The second line contains n space-separated integers, each an a[i].

Solution

function pickingNumbers(a) {
    // Create an array to store frequency of each element in the input array
    let frequency = new Array(100).fill(0);

    // Count frequency of each element
    for (let i = 0; i < a.length; i++) {
        frequency[a[i]]++;
    }

    // Initialize a variable to store the maximum length of subarray found
    let maxLength = 0;

    // Traverse through frequency array to find the longest subarray
    for (let i = 1; i < frequency.length; i++) {
        // The length of a valid subarray is the sum of the frequency of
        // the current element and the previous element
        maxLength = Math.max(maxLength, frequency[i] + frequency[i - 1]);
    }

    return maxLength;
}

How to Set Up an Expo React Native Project with React Query

Ibukun Demehin — Sat, 31 Aug 2024 15:31:46 +0000

Interacting with external APIs is often essential, and React Query simplifies this by allowing you to focus on the data rather than the complexity of fetching it. This guide will walk you through setting up a React Native project using Expo and integrating it with React Query.

Step 1: Set Up Your Expo Project

To get started, install Expo CLI and create a new project. If you already have a project, skip to the next step.

Install Expo CLI:

  npm install -g expo-cli

Create a New Project:

  expo init my-react-native-query-app

Choose a template based on your needs.

Step 2: Install React Query & Dependencies

React Query is powerful for managing server state in your React Native apps.

Install React Query:

  npm install @tanstack/react-query

Install Additional Dependencies:

  npx expo install @react-native-community/netinfo

Step 3: Create Helper Functions

Create three custom hooks in a hooks folder at the root of your project.

useAppState.ts:

   import NetInfo from '@react-native-community/netinfo';
   import { onlineManager } from '@tanstack/react-query';

   onlineManager.setEventListener((setOnline) => {
     return NetInfo.addEventListener((state) => {
       setOnline(!!state.isConnected);
     });
   });

This enables auto-refetch when the app reconnects to the internet.

UseOnlineManager.ts:

   import { useEffect } from 'react';
   import { AppState, Platform } from 'react-native';
   import { focusManager } from '@tanstack/react-query';

   function onAppStateChange(status: AppStateStatus) {
     if (Platform.OS !== 'web') {
       focusManager.setFocused(status === 'active');
     }
   }

   useEffect(() => {
     const subscription = AppState.addEventListener('change', onAppStateChange);
     return () => subscription.remove();
   }, []);

This updates the app state when the app is active.

useRefreshOnFocus.ts:

   import React from 'react';
   import { useFocusEffect } from '@react-navigation/native';

   export function useRefreshOnFocus<T>(refetch: () => Promise<T>) {
     const firstTimeRef = React.useRef(true);

     useFocusEffect(
       React.useCallback(() => {
         if (firstTimeRef.current) {
           firstTimeRef.current = false;
           return;
         }

         refetch();
       }, [refetch]),
     );
   }

This custom hook triggers a refetch when the screen is focused.

Step 4: Implement the Functions in Your Root File

In your main route file, set up the following:

import {
  QueryClient,
  QueryClientProvider,
  focusManager,
} from "@tanstack/react-query";
import { AppStateStatus, Platform } from "react-native";
import { useOnlineManager } from "@/hooks/query/useOnlineManager";
import { useAppState } from "@/hooks/query/useAppState";

export default function RootLayout() {
  function onAppStateChange(status: AppStateStatus) {
    if (Platform.OS !== "web") {
      focusManager.setFocused(status === "active");
    }
  }

  const queryClient = new QueryClient({
    defaultOptions: { queries: { retry: 2 } },
  });

  useOnlineManager();
  useAppState(onAppStateChange);

  return (
    <QueryClientProvider client={queryClient}>
      {Rest of your project}
    </QueryClientProvider>
  );
}

Step 5: Start Your Development Server

Navigate to your project directory and start the Expo development server:

expo start

Expo allows quick testing via the Expo Go app or by building a development app. For more details on creating a development build, refer to Expo's documentation.

Conclusion

Setting up an Expo React Native project with React Query simplifies state management and API interactions. By leveraging React Query's powerful features, such as caching and background updates, you can focus more on your data and less on the intricacies of fetching it.

Happy Coding! 👨🏼‍💻 👩🏻‍💻 💻

Creating a Multipage Form with React-Hook-Form and Redux-Toolkit

Ibukun Demehin — Mon, 03 Jun 2024 12:11:29 +0000

Building a multipage form in React can be streamlined using React-Hook-Form for form handling and Redux-Toolkit for state management. Here’s a guide on how to effectively combine these tools.

Step 1: Setup Your Project
First, set up your React project and install the necessary dependencies:

npx create-react-app multipage-form
cd multipage-form
npm install @reduxjs/toolkit react-redux react-hook-form

Step 2: Configure Redux-Toolkit
Create a Redux store and slice to manage the form state.

store.js

import { configureStore } from '@reduxjs/toolkit';
import formReducer from './formSlice';

export const store = configureStore({
  reducer: {
    form: formReducer,
  },
});

formSlice.js

import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  formData: {},
};

const formSlice = createSlice({
  name: 'form',
  initialState,
  reducers: {
    updateFormData: (state, action) => {
      state.formData = { ...state.formData, ...action.payload };
    },
    resetFormData: (state) => {
      state.formData = {};
    },
  },
});

export const { updateFormData, resetFormData } = formSlice.actions;
export default formSlice.reducer;

Step 3: Create Form Pages
Define individual form pages using react-hook-form to handle validation and data collection.

Page1.js

import React from 'react';
import { useForm } from 'react-hook-form';
import { useDispatch } from 'react-redux';
import { updateFormData } from './formSlice';
import { useNavigate } from 'react-router-dom';

const Page1 = () => {
  const { register, handleSubmit } = useForm();
  const dispatch = useDispatch();
  const navigate = useNavigate();

  const onSubmit = (data) => {
    dispatch(updateFormData(data));
    navigate('/page2');
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('firstName')} placeholder="First Name" />
      <input {...register('lastName')} placeholder="Last Name" />
      <button type="submit">Next</button>
    </form>
  );
};

export default Page1;

Page2.js

import React from 'react';
import { useForm } from 'react-hook-form';
import { useDispatch, useSelector } from 'react-redux';
import { updateFormData } from './formSlice';
import { useNavigate } from 'react-router-dom';

const Page2 = () => {
  const { register, handleSubmit } = useForm();
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const formData = useSelector((state) => state.form.formData);

  const onSubmit = (data) => {
    dispatch(updateFormData(data));
    navigate('/summary');
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('email')} placeholder="Email" />
      <input {...register('phone')} placeholder="Phone" />
      <button type="submit">Next</button>
    </form>
  );
};

export default Page2;

Step 4: Summary Page
Create a summary page to display collected data.

Summary.js

import React from 'react';
import { useSelector } from 'react-redux';

const Summary = () => {
  const formData = useSelector((state) => state.form.formData);

  return (
    <div>
      <h2>Summary</h2>
      <pre>{JSON.stringify(formData, null, 2)}</pre>
    </div>
  );
};

export default Summary;

Step 5: Set Up Routing
Configure routing to navigate between form pages. Or you could just have a single page and have the different form show up when you click on the next button, but for this example I will use the routing option

App.js

import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Page1 from './Page1';
import Page2 from './Page2';
import Summary from './Summary';
import { Provider } from 'react-redux';
import { store } from './store';

const App = () => (
  <Provider store={store}>
    <Router>
      <Routes>
        <Route path="/" element={<Page1 />} />
        <Route path="/page2" element={<Page2 />} />
        <Route path="/summary" element={<Summary />} />
      </Routes>
    </Router>
  </Provider>
);

export default App;

Conclusion
By using react-hook-form and redux-toolkit, you can easily manage form data across multiple pages. This approach ensures a seamless user experience with efficient state management and form handling.

Introduction to the project (Frontend)

Ibukun Demehin — Sun, 02 Jul 2023 13:30:37 +0000

In this series, I will begin a journey into creating a platform that will allow anyone willing, to contribute to an open source project that is exciting and challenging at the same time.

This project is aim at developing a community of people that will provide up-to-date information about schools all around Nigeria.

We will begin with universities and trickle down to the basics of schools.

At the end of the day, we will have an API that will be available to anyone that wants to build a project that needs information about schools in Nigeria.

This will be a very long journey that we hope to write about for as long as we can and also help anyone for as much as we can

Why HTML is a must for every site

Ibukun Demehin — Tue, 17 May 2022 09:09:23 +0000

HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. "Hypertext" refers to links that connect web pages to one another, either within a single website or between websites. HTML uses "markup" to annotate text, images, and other content for display in a Web browser. Some website that makes use of HTML semantics properly are

In programming, Semantics refers to the meaning of a piece of code. In HTML, for example, the h1 element is a semantic element, which gives the text it wraps around the role (or meaning) of "a top level heading on your page."

Some of the benefits from writing semantic markup are as follows:

Search engines will consider its contents as important keywords to influence the page's search rankings (see SEO)
Screen readers can use it as a signpost to help visually impaired users navigate a page
Finding blocks of meaningful code is significantly easier than searching through endless with or without semantic or namespaced classes

HTML Tags

head - The head HTML element contains machine-readable information (metadata) about the document, like its title, scripts, and style sheets.
meta - The meta HTML element represents Metadata that cannot be represented by other HTML meta-related elements, like base, link, script, style or title. The HTML element represents the dominant content of the body of a document.
main - The main HTML element represents the dominant content of the body of a document.
nav - The nav HTML element represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents
blockquote - The blockquote HTML element indicates that the enclosed text is an extended quotation.
figure - The figure HTML element represents self-contained content, potentially with an optional caption, which is specified using the figcaption element.
hr - The hr HTML element represents a thematic break between paragraph-level elements:
li - The li HTML element is used to represent an item in a list.
p - The p HTML element represents a paragraph
a - The a HTML element (or anchor element), with its href attribute, creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address.
b - The b HTML element is used to draw the reader's attention to the element's contents, which are not otherwise granted special importance.
cite - The cite HTML element is used to describe a reference to a cited creative work, and must include the title of that work
em - The em HTML element marks text that has stress emphasis.
q - The q HTML element indicates that the enclosed text is a short inline quotation.
s - The s HTML element renders text with a strikethrough, or a line through it.
sup - The sup HTML element specifies inline text which is to be displayed as superscript for solely typographical reasons
img - The img HTML element embeds an image into the document.
caption - The caption HTML element specifies the caption (or title) of a table.
td - The td HTML element defines a cell of a table that contains data. It participates in the table model.
form - The form HTML element represents a document section containing interactive controls for submitting information.

🥇Counting Valleys - HackerRank Solution (Javascript) 🚀

Ibukun Demehin — Tue, 01 Mar 2022 14:00:39 +0000

An avid hiker keeps meticulous records of their hikes. During the last hike that took exactly steps steps, for every step it was noted if it was an uphill, U, or a downhill, D step. Hikes always start and end at sea level, and each step up or down represents a 1 unit change in altitude. We define the following terms:

A mountain is a sequence of consecutive steps above sea level, starting with a step up from sea level and ending with a step down to sea level.
A valley is a sequence of consecutive steps below sea level, starting with a step down from sea level and ending with a step up to sea level.

Given the sequence of up and down steps during a hike, find and print the number of valleys walked through.

Example

steps = 8 path = [DDUUUUDD]
The hiker first enters a valley 2 units deep. Then they climb out and up onto a mountain 2 units high. Finally, the hiker returns to sea level and ends the hike.

Function Description

Complete the countingValleys function in the editor below.
countingValleys has the following parameter(s):

int steps: the number of steps on the hike string path: a string describing the path

Returns

int: the number of valleys traversed

Input Format

The first line contains an integer , the number of steps in the hike.
The second line contains a single string , of characters that describe the path.

function countingValleys(steps, path) {
    // Write your code here

    let strArr = path.split('')
    let count = 0
    let result = 0
    for(let step=0; step<steps; step++){
        if(count == 0 && strArr[step].toLowerCase() == 'd'){
            count -= 1
            result += 1
        } else if(strArr[step].toLowerCase() == 'd'){
            count -= 1
        } else {
            count += 1
        }
    }
    return result
}

Drawing Book (HackerRank JavaScript Solution) 🚀🚀

Ibukun Demehin — Thu, 24 Feb 2022 15:46:16 +0000

A teacher asks the class to open their books to a page number. A student can either start turning pages from the front of the book or from the back of the book. They always turn pages one at a time. When they open the book, page 1 is always on the right side:

When they flip page 1, they see pages 2 and 3. Each page except the last page will always be printed on both sides. The last page may only be printed on the front, given the length of the book. If the book is n pages long, and a student wants to turn to page p, what is the minimum number of pages to turn? They can start at the beginning or the end of the book.

Given n and p, find and print the minimum number of pages that must be turned in order to arrive at page p.

Example

n = 5
p = 3

Using the diagram above, if the student wants to get to page 3, they open the book to page 1, flip 1 page and they are on the correct page. If they open the book to the last page, page 5, they turn 1 page and are at the correct page. Return 1.

Function Description

Complete the pageCount function in the editor below.

pageCount has the following parameter(s):

int n: the number of pages in the book
int p: the page number to turn to

Returns

int: the minimum number of pages to turn

Solution



function pageCount(n, p) {
    // Write your code here
    let count = 0
    const bookHalf = Math.floor(n/2) 
    const pageDiff = n - p
    if(p == bookHalf){
// if page is at the center of the book
        count = Math.floor(bookHalf/2)
    }else if(p < bookHalf){
// if page is closer to the front
        count = Math.floor(p / 2)
    } else if(pageDiff == 1 && n%2 == 0){
// if page is at the end and last page number is even
        count = Math.ceil(pageDiff / 2)
    } else if(pageDiff == 1 && n%2 !== 0){
// if page is at the end and last page number is odd
        count = Math.floor(pageDiff / 2)
    }
    else {
// if page is closer to the end
        count = Math.floor(pageDiff / 2)
    }
    return count
}

2D Array - HackerRank JavaScript Solution

Ibukun Demehin — Wed, 23 Feb 2022 13:20:43 +0000

Given a 6 X 6 Array arr:

1 1 1 0 0 0
0 1 0 0 0 0
1 1 1 0 0 0
0 0 0 0 0 0
0 0 0 0 0 0
0 0 0 0 0 0

An hourglass in A is a subset of values with indices falling in this pattern in arr's graphical representation:

a b c
  d
e f g

There are 16 hourglasses in arr. An hourglass sum is the sum of an hourglass' values. Calculate the hourglass sum for every hourglass in arr, then print the maximum hourglass sum. The array will always be 6 X 6.

Example

arr =

-9 -9 -9  1 1 1 
 0 -9  0  4 3 2
-9 -9 -9  1 2 3
 0  0  8  6 6 0
 0  0  0 -2 0 0
 0  0  1  2 4 0

The 16 hourglass sums are:

-63, -34, -9, 12, 
-10,   0, 28, 23, 
-27, -11, -2, 10, 
  9,  17, 25, 18

The highest hourglass sum is 28 from the hourglass beginning at row 1, column 2:

0 4 3
  1
8 6 6

Function Description

Complete the function hourglassSum in the editor below.

hourglassSum has the following parameter(s):

int arr[6][6]: an array of integers

Returns

int: the maximum hourglass sum

Input Format
Each of the 6 lines of inputs arr[i] contains 6 space-separated integers arr[i][j].

Solution

function hourglassSum(arr) {
    // Write your code here
    let maxSum = ''
    for (let step1 = 0; step1 < arr.length-2; step1++){
        for (let step2 = 0; step2 < arr.length-2; step2++){
            const currentSum = arr[step1][step2] + arr[step1][step2+1] 
         + arr[step1][step2+2] + arr[step1+1][step2+1] 
         + arr[step1+2][step2] + arr[step1+2][step2+1] 
         + arr[step1+2][step2+2]

            if(currentSum <= 0){
               const temp = currentSum
               if (typeof maxSum == 'string' ){
                   maxSum = temp
               } else if(temp == 0 && maxSum <= 0){
                   maxSum = temp
               }
                else if(temp > maxSum){
                   maxSum = temp
               }
            } else if(currentSum > maxSum){
                maxSum = currentSum
            } 
        }
    }
    return maxSum
}

Sales by Match (HackerRank Javascript Solution)

Ibukun Demehin — Wed, 23 Feb 2022 10:59:22 +0000

There is a large pile of socks that must be paired by color. Given an array of integers representing the color of each sock, determine how many pairs of socks with matching colors there are.

Example

n = 7
ar = [1, 2, 1, 2, 1, 3, 2]
There is one pair of color and one of color . There are three odd socks left, one of each color. The number of pairs is.

Function Description

Complete the sockMerchant function in the editor below.

sockMerchant has the following parameter(s):

int n: the number of socks in the pile
int ar[n]: the colors of each sock

Returns

int: the number of pairs

Input Format

The first line contains an integer n, the number of socks represented in ar.
The second line contains n space-separated integers, ar[i], the colors of the socks in the pile.

function sockMerchant(n, ar) {
    // Write your code here
    const uniqueValues = [... new Set(ar)]
    let count = 0
    uniqueValues.forEach(value => {
        const filterValues = ar.filter(element => element == value)
        const pairsNumber = Math.floor(filterValues.length/2)
        count += pairsNumber
    })
    return count
}

Bill Division (HackerRank Javascript Solution)

Ibukun Demehin — Wed, 23 Feb 2022 10:25:23 +0000

Two friends Anna and Brian, are deciding how to split the bill at a dinner. Each will only pay for the items they consume. Brian gets the check and calculates Anna's portion. You must determine if his calculation is correct.

For example, assume the bill has the following prices: bill=[2,4,6]. Anna declines to eat item k=bill[2] which costs 6. If Brian calculates the bill correctly, Anna will pay (2 + 4)/2 = 3. If he includes the cost of bill[2], he will calculate (2 + 4 + 6)/2 = 6. In the second case, he should refund 3 to Anna.

Function Description

Complete the bonAppetit function in the editor below. It should print Bon Appetit if the bill is fairly split. Otherwise, it should print the integer amount of money that Brian owes Anna.

bonAppetit has the following parameter(s):

bill: an array of integers representing the cost of each item ordered
k: an integer representing the zero-based index of the item Anna doesn't eat
b: the amount of money that Anna contributed to the bill

Solution

function bonAppetit(bill, k, b) {
    // Write your code here
    let result = ''
    bill.splice(k,1)
    const billCost = bill.reduce((previous, next) => previous+next, 0) / 2
    if (billCost == b){
        result = 'Bon Appetit'
    } else {
        result = b - billCost
    }
    console.log(result)

}

Migratory Birds (HackerRank - JavaScript Solution)

Ibukun Demehin — Tue, 22 Feb 2022 15:25:19 +0000

Given an array of bird sightings where every element represents a bird type id, determine the id of the most frequently sighted type. If more than 1 type has been spotted that maximum amount, return the smallest of their ids.

Solution

function migratoryBirds(arr) {
    // Write your code here

    let newArr = {}
    const uniqueVal = [... new Set(arr)]
    uniqueVal.forEach(elem => {
        const filterVal = arr.filter(val => val == elem)       
        const totalVal = filterVal.length
        newArr[elem] = totalVal
    })

    let result = Object.entries(newArr).sort(([,a], [,b]) => b-a)
    let final = result[0][0]
    return final
}

My HNG Internship goals and ambition

Ibukun Demehin — Mon, 16 Aug 2021 10:44:09 +0000

The HNG Internship is an ambitious attempt to change the way education is done in Africa. It’s the bridge between learning to code, and becoming the best in the world.

In this program, my goal is to network with other developers and build a good working relationship with others in this strong community. I also will want to be engaged in a positive way where I will learn from students, mentors and instructors, and be among the top students that will brag of my achievement at the end of the program

In 8 weeks time, I want to have learnt the basics of the required programming language in the frontend track and probably a framework to top it off so as to stand out in the industry. I also want to have built a strong portfolio with all the tasks and projects I will undertake in this program.

I currently know a bit of HTML, CSS and JavaScript.

if you want to join the program you can register with this link and join us in this wonderful journey

https://internship.zuri.team

Below are some awesome links to learn the basis of Figma, Git, HTML, CSS, Python and Javascript. You should check it out

Figma - https://www.youtube.com/watch?v=Gu1so3pz4bA&t=259s&ab_channel=DesignCourse

Git - https://www.youtube.com/watch?v=8JJ101D3knE&ab_channel=ProgrammingwithMosh

HTML & CSS - https://www.youtube.com/watch?v=D-h8L5hgW-w&ab_channel=DesignCourse

Javascript - https://www.youtube.com/watch?v=dOnAC2Rr-6A

Python - https://www.youtube.com/playlist?list=PLEsfXFp6DpzQjDBvhNy5YbaBx9j-ZsUe6

You can buy and sell your cars for an affordable price via https://cars.ng/