Giter Club home page Giter Club logo

svg-logo-maker's Introduction

Module Ten Challenge: SVG Logo Maker

Description

A command line node app that takes user input to generate a simple svg logo.

Acceptance Criteria

GIVEN a command-line application that accepts user input:

WHEN I am prompted for text
THEN I can enter up to three characters

WHEN I am prompted for the text color
THEN I can enter a color keyword (OR a hexadecimal number)

WHEN I am prompted for a shape
THEN I am presented with a list of shapes to choose from: circle, triangle, and square

WHEN I am prompted for the shape's color
THEN I can enter a color keyword (OR a hexadecimal number)

WHEN I have entered input for all the prompts
THEN an SVG file is created named `logo.svg`

AND the output text "Generated logo.svg" is printed in the command line

WHEN I open the `logo.svg` file in a browser
THEN I am shown a 300x200 pixel image that matches the criteria I entered

Mock-Up

The following is a link to a video walkthrough of the app in use as well as render tests:

https://youtu.be/n0q862Pd2Ho

Screenshots of the app in use and example svg:

screenshot of command line interface asking the user questions about the svg they would like to make

Example of svg file created using app. the text "git" in dark orange inside a black circle

Installation

  1. npm i or npm install to download dependencies.
  2. node index.js to run app. svg created by app will be in examples folder.

Credits

Validate Color package/documentation for validating color name/hex user entry:

https://www.npmjs.com/package/validate-color

Inquirer Documentation:

https://www.npmjs.com/package/inquirer

Phind for debugging:

https://www.phind.com/

svg-logo-maker's People

Contributors

omar-razo avatar

Watchers

 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.