https://github.com/fredm23579/svg-creator
A Node.js command-line application that takes in user input to generate a logo and save it as an SVG file. The application prompts the user to select a color and shape, provide text for the logo, and save the generated SVG to a descriptively named .svg file.
https://github.com/fredm23579/svg-creator
inquirer javascript jest oop unittest
Last synced: about 1 month ago
JSON representation
A Node.js command-line application that takes in user input to generate a logo and save it as an SVG file. The application prompts the user to select a color and shape, provide text for the logo, and save the generated SVG to a descriptively named .svg file.
- Host: GitHub
- URL: https://github.com/fredm23579/svg-creator
- Owner: fredm23579
- License: mit
- Created: 2024-03-31T02:36:51.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-03-31T20:04:17.000Z (over 1 year ago)
- Last Synced: 2025-10-14T08:03:53.261Z (about 1 month ago)
- Topics: inquirer, javascript, jest, oop, unittest
- Language: JavaScript
- Homepage:
- Size: 19.7 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# SVG CREATOR
[](https://opensource.org/licenses/MIT)
## Table of Contents
- [Description](#description)
- [Demo](#demo)
- [Installation](#installation)
- [Usage](#usage)
- [Contributing](#contributing)
- [Tests](#tests)
- [Questions](#questions)
- [License](#license)
## Description
A Node.js command-line application that takes in user input to generate a logo and save it as an [SVG file](https://en.wikipedia.org/wiki/Scalable_Vector_Graphics). The application prompts the user to select a color and shape, provide text for the logo, and save the generated SVG to a descriptively named `.svg` file.
This is a command line application and a link to a walkthrough video that demonstrates its functionality and passes all of the tests is provided below.
### User Story
```md
AS a freelance web developer
I WANT to generate a simple logo for my projects
SO THAT I don't have to pay a graphic designer
```
### Acceptance Criteria
```md
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 `.svg`
AND the output text "Generated logo.svg" is printed in the command line
WHEN I open the `.svg` file in a browser
THEN I am shown a 300x200 pixel image that matches the criteria I entered
```
## Installation
```bash
git clone git@github.com:fredm23579/svg-creator.git
```
## Demo
The following image shows a mock-up of the generated SVG given the following input entered by the user: `SVG` for the text, `white` for the text color, `circle` from the list of shapes, and `green` for the shape color.
The following video shows the demo of the application:
## Usage
The application uses [Jest](https://www.npmjs.com/package/jest) for running the unit tests and [Inquirer](https://www.npmjs.com/package/inquirer/v/8.2.4) for collecting input from the user. The application is invoked by using the following command:
```bash
node index.js
```
## Tests
The application tests are invoked by using the following command:
```bash
npm test
```
The following is the general directory structure:
```md
.
├── examples/ // Example svg file(s) created with the app
├── lib/ // Folder for classes or functions
├── shapes.js // Exports `Triangle`, `Circle`, and `Square` classes
├── shapes.test.js // Jest tests for shapes
├── .gitignore // Indicates which folders and files Git should ignore
├── index.js // Runs the application using imports from lib/
├── package.json
└── README.md // App description, link to video, setup and usage instructions
```
Each shape class tested for a `render()` method returns a string for the corresponding SVG file with the given shape color.
The following example test passes as required:
```js
const shape = new Triangle();
shape.setColor("blue");
expect(shape.render()).toEqual('');
```
## Repo Link
[Repo Link](https://github.com/fredm23579/svg-creator)
## SVG Resources
* [Example SVG](https://static.fullstack-bootcamp.com/fullstack-ground/module-10/circle.svg)
* [Scalable Vector Graphics (SVG)](https://en.wikipedia.org/wiki/Scalable_Vector_Graphics)
* [SVG tutorial](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial)
* [Basic SVG shapes](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Basic_Shapes)
* [Text in SVG](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Texts)
* [SVG VS Code extension](https://marketplace.visualstudio.com/items?itemName=jock.svg)
## Contributing
Contact the primary developer for contributions.
## Questions
Contact me:
* GitHub: [fredm23579](https://github.com/fredm23579)
* Email: motta@g.ucla.edu
## License
This project is covered under the MIT license. To learn more, see the accompanying LICENSE file or visit [https://opensource.org/licenses/MIT](https://opensource.org/licenses/MIT).