Giter VIP home page Giter VIP logo

combyne-ag-interview-js-paint's Introduction

JS Technical Interview - Paint

Instructions

Given the base project, you need to implement floodFillAt method in the src/paint.js

  • floodFillAt: Given x and y coordinates and a color chosen by the user, implement the flood fill feature (the paint bucket feature on any image editing software): Any pixel adjacent to the original pixel at (x, y) that is the same color as the pixel's original color should be changed to the new color, and this should also apply to its adjacent pixels (adjacent includes diagonals, so there are up to 8 adjacent pixels to one pixel). An example of flood fill can be found here. This method should be called when the Flood Fill button is pressed on the screen.

UI

The UI portion of this project should be done using React and have the following components:

  • A way for the user to choose an X and Y coordinate. This can either be two inputs, or the user should be able to click a point on the grid directly.
  • A picker that allows the chooser to choose a color from the COLORS array.
  • A button that allows the user to run the flood fill algorithm.
  • A grid of colors, originally generated by generateRandomGrid() (note that the algorithm should work no matter what the width and height are, but those do not need to be set by the user via the UI), and then updated each time by running of the flood fill algorithm.

Things to Consider:

  • Approach this project as you would any new project i.e. use whatever best practices, styles etc. you would normally use.
  • You can add as many new methods, variables, objects, classes (etc.) as you want.
  • You can change the given code if you deem it necessary.
  • Please feel free to completely regenerate this project should you want to set it up correctly using React, as long as the initial code remains (mostly) untouched.
  • The only thing expected is to fill out the 1 method and complete the UI, but feel free to go further if wanted. Anything extra (such as tests) will be counted as bonus points!
  • Feel free to use StackOverflow or any other online resource as you would normally do (although please do not search for the answer directly!).
  • You should be using Git as you normally would in a project.

combyne-ag-interview-js-paint's People

Contributors

dghazi12 avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.