Skip to content

ColorNumber.md

Latest commit

 

History

History
75 lines (48 loc) · 2.85 KB

ColorNumber.md

File metadata and controls

75 lines (48 loc) · 2.85 KB

Internship Assignment: Background generator with user input

Objective

Assess the candidate's proficiency in HTML, CSS, and JavaScript by developing an interactive web page that dynamically changes its background color based on a user-inputted 6-digit number.

Assignment Overview

Create a web page where users can enter any 6-digit number, and the page background will change to the corresponding color (hex code equivalent). The UI should be highly interactive and include smooth animations for an engaging experience.

Requirements

1. Input Field

  • A single input box (large enough for visibility and easy typing).
  • Should accept only 6-digit numerical values.
  • Display an error message on the same input field if the entered value is invalid (less than 6 digits, more than 6 digits, or contains non-numeric characters).

2. Dynamic Background Color Change

  • When a valid 6-digit number is entered, convert it into a hex color (e.g., 123456 → #123456).
  • Apply the color as the background of the page.

3. Scroll-Driven Animation

  • As the user scrolls down, the input box should smoothly move to the top of the page.
  • Utilize CSS Grid to center the text dynamically.

4. User Experience & UI Enhancements

  • Ensure a smooth scrolling effect when the input field moves to the top.
  • The color should fade in smoothly when changed.
  • Display the entered number in large, centered text over the background.

Technology Stack

  • HTML: Structure the page with semantic elements.
  • CSS: Use CSS Grid for layout, and animations/transitions for effects.
  • JavaScript: Validate input, update UI, and handle scroll-based interactions.

Code Quality

Write clean and well-documented HTML, CSS, and JavaScript code. Ensure the website is compatible with major web browsers. Implement responsive design principles for a smooth experience on various devices.

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)

  • Add a button to reset the background color.
  • Provide a preview of the color before applying it.
  • Implement a smooth entry animation for the input box when the page loads.

Evaluation Criteria

  • Code Quality: Clean, well-structured, and commented code.
  • Functionality: All core requirements must work correctly.
  • Design & UX: Smooth animations and an engaging interface.
  • GitHub Usage: Proper repository structure, README, and commits.

Good luck! 🚀

© 2025 RecursiveZero private limited | All rights reserved.