DEV Community: Will Sheppard

FizzBuzz: Writing and Testing the Classic Problem in JavaScript

Will Sheppard — Mon, 11 Sep 2023 20:10:47 +0000

Introduction

In this tutorial, we will walk through solving the classic FizzBuzz problem in JavaScript. The code and testing procedures are part of my "EssentialAlgos" project available on GitHub.

If you'd like to connect with me professionally, find my LinkedIn profile here and my GitHub profile here.

What is FizzBuzz?

FizzBuzz is a programming challenge often used in coding interviews. The task is to print numbers from 1 to n, replacing multiples of 3 with "Fizz", multiples of 5 with "Buzz", and multiples of both 3 and 5 with "FizzBuzz".

The Core FizzBuzz Function

Let's dive right into the code. The fizzBuzz function in JavaScript is as follows:

// fizzBuzzVersion2
let fizzBuzz = (int) => {
    let arr = [];

    for(let index = 1; index <= int; index++){
        let value = '';

        if(index % 3 === 0){
            value += "Fizz";
        }

        if(index % 5 === 0){
            value += "Buzz";
        }

        if(!value){
            value += `${index}`;
        }

        arr.push(value);
    }

    return arr;
}

To be totally transparent this was the original version i came up with before the refactored version above.

// originalFizzBuzz
let fizzBuzz = (int) => {
    let arr = [];

    for(let index = 1; index <= int; index++) {
      if(index % 3 === 0 && index % 5 !== 0) {
        arr.push("Fizz");
        continue;
       }

      if(index % 5 === 0 && index % 3 !== 0){
        arr.push("Buzz")
        continue;
      } 

      if(index % 5 === 0 && index % 3 === 0) {
          arr.push("FizzBuzz");
          continue;
      }

      arr.push(`${index}`)
    }

    return arr;
}

This function takes an integer int and returns an array containing the FizzBuzz sequence.

Testing FizzBuzz with Jest

Testing is crucial for validating the correctness of your code. I have written Jest tests for this function. I've written test for both version that i've created for fizzBuzz

const originalFizzBuzz = require("./fizzbuzz");
const fizzBuzzVersion2 = require("./fizzbuzz.v2/fizzbuzz.v2");

const checkReturnsEmptyArray = (func) => {
    let arr = func();
    expect(arr).toStrictEqual([]);
};

describe('FizzBuzz Tests', () => {
    describe('Empty Array Tests', () => {
        test.each([
            [originalFizzBuzz, 'Returns an empty array when given no values'],
            [fizzBuzzVersion2, 'Returns an empty array when given no values']
        ])('%s', (func, description) => {
            checkReturnsEmptyArray(func);
        });
    })

    describe('Output for Input 3', () => {
        test('Original version should return ["1", "2", "Fizz"] when given 3', () => {
            const arr = originalFizzBuzz(3);
            expect(arr).toStrictEqual(["1", "2", "Fizz"]);
        });

        test('Version 2 should return ["1", "2", "Fizz"] when given 3 for v2', () => {
            const arr = fizzBuzzVersion2(3);
            expect(arr).toStrictEqual(["1", "2", "Fizz"]);
        });
    });

    describe('Output for Input 15', () => {
        test('Original version should return the expected FizzBuzz sequence up to 15', () => {
            const arr = originalFizzBuzz(15);
            expect(arr).toStrictEqual(["1","2","Fizz","4","Buzz","Fizz","7","8","Fizz","Buzz","11","Fizz","13","14","FizzBuzz"]);
        });

        test('Version 2 should return the expected FizzBuzz sequence up to 15', () => {
            const arr = fizzBuzzVersion2(15);
            expect(arr).toStrictEqual(["1","2","Fizz","4","Buzz","Fizz","7","8","Fizz","Buzz","11","Fizz","13","14","FizzBuzz"]);
        });
    })

});

This test ensures that when the function is provided an input, it returns the right output.

LeetCode Submission and GitHub Repository

You can find my FizzBuzz submission on LeetCode. The complete code and tests are available in my GitHub repository: EssentialAlgos.

Conclusion

We have successfully tackled the FizzBuzz problem and validated its correctness through Jest testing. This exercise is a foundational problem but provides a valuable practice platform for budding coders and seasoned developers alike.

Feel free to connect with me for any questions or discussions on algorithms, coding, or potential opportunities:

Happy coding! 🚀

Creating a Linked List in JavaScript using Mockedin-Client Data

Will Sheppard — Mon, 04 Sep 2023 16:56:25 +0000

Introduction

In this tutorial, we will learn how to create a simple linked list in JavaScript. Specifically, we will populate this linked list with data from a project called "Mockedin-Client." This client-side project simulates key LinkedIn features and is available on GitHub.

If you're looking to hire or connect with me, you can find my LinkedIn profile here and my GitHub profile here.

What is a Linked List?

A linked list is a data structure used for storing a sequence of elements. Each element contains a reference (or link) to the next element in the sequence.

Setting up the Node and LinkedList Classes

First, let's set up our Node and LinkedList classes in JavaScript:

// Node Class: Represents each element in the linked list
class Node {
  constructor(user) {
    this.user = user;  // Store user data
    this.next = null;  // Initialize next to null
  }
}

// LinkedList Class: Manages the linked list
class LinkedList {
  constructor() {
    this.head = null;  // Initialize head to null
  }

  // Method to append a user to the list
  append(user) {
    const newNode = new Node(user);  // Create new node with user data

    if (!this.head) {
      this.head = newNode;  // If list is empty, set head to new node
      return;
    }

    // Traverse to the last node in the list
    let current = this.head;
    while (current.next) {
      current = current.next;
    }

    // Attach new node to the last node's next pointer
    current.next = newNode;
  }
}

Populating the Linked List with Mockedin-Client Data

Assuming you have your data stored in a db.json file, here is a sample:

{
  "linkedinUsers": [
    { "id": 1, "name": "John Doe", "position": "Developer" },
    { "id": 2, "name": "Jane Smith", "position": "Recruiter" },
    { "id": 3, "name": "Emily Johnson", "position": "CEO" },
    { "id": 4, "name": "Mike Brown", "position": "Sales" }
  ]
}

We can populate our linked list with this data as follows:

// Sample data from Mockedin-Client
const db = {
  "linkedinUsers": [
    { "id": 1, "name": "John Doe", "position": "Developer" },
    { "id": 2, "name": "Jane Smith", "position": "Recruiter" },
    { "id": 3, "name": "Emily Johnson", "position": "CEO" },
    { "id": 4, "name": "Mike Brown", "position": "Sales" }
  ]
};

// Create a new linked list instance
const userList = new LinkedList();

// Populate linked list with Mockedin-Client data
db.linkedinUsers.forEach((user) => {
  userList.append(user);
});

// Now, userList is a linked list containing Mockedin-Client users.

Conclusion

And there you have it! We've created a simple linked list in JavaScript and populated it with data from the Mockedin-Client project. This is a basic example, but you can extend it to suit your specific needs.

Feel free to reach out to me on LinkedIn or GitHub if you have any questions or if you're interested in discussing algorithms, coding, or potential opportunities. Happy coding!

Connect with me:

Reversing Strings: A Two-Pointer Approach in JavaScript

Will Sheppard — Sat, 02 Sep 2023 14:20:51 +0000

Introduction

Welcome to my Dev.to blog post! In this article, we'll explore a solution for the classic "Reverse String" problem using an in-place approach. The solution is implemented in JavaScript and can be found in my GitHub repository EssentialAlgos. If you're looking to hire or connect with me, you can find my LinkedIn profile here and my GitHub profile here.

Problem Statement

The problem we're addressing is the Reverse String problem on LeetCode. Given an array of characters, we need to reverse the order of its elements in-place using O(1) extra memory.

Solution Overview

We're going to take a two-pointer approach to solve this problem. The reverse_string.js file contains the implementation of the solution:

// reverse_string.js

const reverseString = function(arrayOfStrings) {
    // Create pointers
    let startIndex = 0;
    let endIndex = arrayOfStrings.length - 1;

    // Iterate through the string
    while (startIndex < endIndex) {
        // Swap characters at indexes
        let temporaryChar = arrayOfStrings[startIndex];
        arrayOfStrings[startIndex] = arrayOfStrings[endIndex];
        arrayOfStrings[endIndex] = temporaryChar;

        startIndex++;
        endIndex--;
    }
};

module.exports = reverseString;

Code Walkthrough

We define the reverseString function that takes an array of characters as its parameter.
Two pointers, startIndex and endIndex, are initialized. The startIndex points to the beginning of the array, and the endIndex points to the end of the array.
We enter a loop that continues until the startIndex is less than the endIndex. This loop ensures that we only swap elements until we've reached the middle of the array.
Within the loop, we use a temporary variable to store the character at startIndex. We then swap the characters at startIndex and endIndex.
After swapping, we increment the startIndex and decrement the endIndex to move towards the center of the array.
The loop continues until the startIndex is no longer less than the endIndex.
The array has now been reversed in-place!

Unit Testing

I've also included unit tests in the reverse_string.test.js file to ensure the correctness of our solution. Here's a snippet of the test cases:

const reverseString = require("./reverse_string");

test('Reverses an empty array', () => {
    let arrayOfStrings = [];
    reverseString(arrayOfStrings);
    expect(arrayOfStrings).toStrictEqual([]);
});

test('Reverse a longer array of strings', () => {
    let arrayOfStrings = ["h","e","l","l","o"];

    reverseString(arrayOfStrings);
    expect(arrayOfStrings).toStrictEqual(["o","l","l","e","h"]);
});

Runtime Complexity

The runtime complexity of this solution is O(n), where n is the number of elements in the array. This is because we iterate through the array once, and for each iteration, we perform constant-time operations (swapping elements).

Conclusion

In this article, we explored an in-place solution to the "Reverse String" problem using a two-pointer approach. The solution is efficient and meets the requirement of using only O(1) extra memory. If you're interested in the code implementation and want to explore more algorithms, check out my GitHub repository EssentialAlgos.

Feel free to reach out to me on LinkedIn or GitHub if you have any questions or if you're interested in discussing algorithms, coding, or potential opportunities. Happy coding!

Connect with me:

Building Mockedin: A Simplified LinkedIn Experience with React, Vite, JSON Server, and Concurrently

Will Sheppard — Fri, 25 Aug 2023 15:19:00 +0000

📬 Contact Me:
Github: https://github.com/willshepp28
Email: willsheppard.dev@gmail.com
LinkedIn: https://www.linkedin.com/in/will-sheppard-81a184145/

Github Repo for this project:
https://github.com/willshepp28/Mockedin

Introduction
Why Mockedin-Client?
Setting Up Mockedin-Client
- With Yarn
- With npm
Inside Mockedin-Client
In Layman's Terms
Conclusion
Project Folder Structure

Introduction

Welcome, developers! 🎉 Introducing "Mockedin," a client-side project simulating key LinkedIn features. This project is powered by React, Vite, JSON Server, and Concurrently, forming a robust environment for real-world development simulation.

Why Mockedin?

React: For interactive UI components 🧩
Vite: For speedy development 🚀
JSON Server: To mock REST APIs effortlessly 📡
Concurrently: To run frontend and backend simultaneously, saving development time 🕒

Setting Up Mockedin

With Yarn

Create new Vite-React project

   yarn create vite mockedin-client --template react

Go into your project folder

   cd mockedin-client

Install JSON Server and Concurrently

   yarn add json-server concurrently --dev

Optionally, install Axios

   yarn add axios

Update package.json scripts

   "scripts": {
     "dev": "concurrently \"vite\" \"yarn mock-api\"",
     "build": "vite build",
     "serve": "vite preview",
     "mock-api": "json-server --watch db.json --port 5000"
   }

Run your project

   yarn dev

With npm

Create new Vite-React project

   npm init vite@latest mockedin-client -- --template react

Navigate to your project folder

   cd mockedin-client

Install JSON Server and Concurrently

   npm install json-server concurrently --save-dev

Optional: Install Axios

   npm install axios

Update package.json scripts

   "scripts": {
     "dev": "concurrently \"vite\" \"npm run mock-api\"",
     "build": "vite build",
     "serve": "vite preview",
     "mock-api": "json-server --watch db.json --port 5000"
   }

Run your project

   npm run dev

Inside Mockedin-Client

Database File (`db.json`)

Create a db.json file to act as our faux LinkedIn database.

{
  "linkedinUsers": [
    { "id": 1, "name": "John Doe", "position": "Developer" },
    { "id": 2, "name": "Jane Smith", "position": "Recruiter" },
    { "id": 3, "name": "Emily Johnson", "position": "CEO" },
    { "id": 4, "name": "Mike Brown", "position": "Sales" }
  ]
}

React Component (`App.jsx`)

Here is how the React component looks to fetch and display data.

import React, { useEffect, useState } from 'react';
import axios from 'axios';

const App = () => {
  const [linkedinUsers, setLinkedinUsers] = useState([]);

  useEffect(() => {
    axios.get('http://localhost:5000/linkedinUsers').then(response => {
      setLinkedinUsers(response.data);
    });
  }, []);

  return (
    <div>
      {linkedinUsers.map(user => (
        <div key={user.id}>{user.name} - {user.position}</div>
      ))}
    </div>
  );
};

In Layman's Terms

db.json: A pretend LinkedIn database 📚
App.jsx: The orchestrator, getting LinkedIn profiles from our mock database and displaying them 🎭
Concurrently: Our helper that ensures both the stage and the script are set before the show starts 🎬

Conclusion

Mockedin offers a rich development experience with React, Vite, JSON Server, and Concurrently. It is perfect for those wanting to develop LinkedIn-like features without worrying about real-world API limitations. 🌟

Project Folder Structure

Here's how the folder structure of Mockedin-Client looks:

mockedin-client/
├── node_modules/
├── public/
│   └── index.html
├── src/
│   ├── App.jsx
│   └── main.jsx
├── db

.json
├── package.json
└── README.md

DEV Community: Will Sheppard

FizzBuzz: Writing and Testing the Classic Problem in JavaScript

Introduction

What is FizzBuzz?

The Core FizzBuzz Function

Testing FizzBuzz with Jest

LeetCode Submission and GitHub Repository

Conclusion

Creating a Linked List in JavaScript using Mockedin-Client Data

Introduction

What is a Linked List?

Setting up the Node and LinkedList Classes

Populating the Linked List with Mockedin-Client Data

Conclusion

Reversing Strings: A Two-Pointer Approach in JavaScript

Introduction

Problem Statement

Solution Overview

Code Walkthrough

Unit Testing

Runtime Complexity

Conclusion

Building Mockedin: A Simplified LinkedIn Experience with React, Vite, JSON Server, and Concurrently

Table of Contents

Introduction

Why Mockedin?

Setting Up Mockedin

With Yarn

With npm

Inside Mockedin-Client

Database File (db.json)

React Component (App.jsx)

In Layman's Terms

Conclusion

Project Folder Structure

Database File (`db.json`)

React Component (`App.jsx`)