Skip to content

QuotePaper.md

Latest commit

 

History

History
71 lines (46 loc) · 2.7 KB

QuotePaper.md

File metadata and controls

71 lines (46 loc) · 2.7 KB

Internship Assignment: Creative Quote Typography Generator

Objective

Assess the candidate’s ability to work with HTML, CSS, JavaScript, SVG, and Canvas API by developing an interactive typography generator that transforms user-inputted text into beautifully styled designs.

Assignment Overview

Create a web page where users can write a short quote (up to 20 words) and generate different typography-styled images with various backgrounds, text colors, and font styles. Users can then save the generated designs as images and add them to a feed.

Requirements

User Input

  • A single input field where users can type their quote (max 20 words).
  • Once the text is submitted, the input box should smoothly move to the top of the page.

Typography Design Generation

  • Display multiple typography variations using different fonts, colors, and layouts.
  • Reference Pinterest-style designs for inspiration.
  • Use SVG and HTML Canvas to render the quote beautifully.

Save & Feed Feature

  • Users should be able to save their typography-generated quote as an image.
  • The saved designs should appear in a feed-style section below.
  • Allow users to delete or edit saved quotes.

UI Enhancements & Effects

  • Apply smooth scrolling animation when input is submitted.
  • Generate randomized color schemes and typography styles for each quote.
  • Ensure a visually appealing layout with proper spacing and alignment.

Technology Stack

  • HTML: Structure the page with semantic elements.
  • CSS: Use animations, transitions, and flexible layouts.
  • JavaScript: Handle input, text rendering, and image generation.
  • SVG & Canvas API: Convert the text into styled images.

Submission Instructions

  • Complete the assignment within one week.
  • Upload the project to your own GitHub repository.
  • Share the GitHub repository link along with a README.md containing:
    • Brief description of the project.
    • Steps to run the project.
    • Any additional features implemented.

Bonus Points (Optional Enhancements)

  • Allow users to choose typography themes manually.
  • Implement drag-and-drop customization for text placement.
  • Provide multiple font and color presets.

Evaluation Criteria

  • Code Quality: Clean, structured, and well-documented.
  • Functionality: Proper input handling, typography generation, and saving feature.
  • Design & UX: Aesthetic typography and smooth interactions.
  • GitHub Usage: Proper repo structure, README, and commits.

Good luck! 🚀

© 2025 RecursiveZero private limited | All rights reserved.