Haiku Poem Generator Using HMTL ,CSS and JavaScript with Source Code

Language

Welcome to the Haiku Poem Generator, a beautifully designed web application that brings the ancient art of Japanese haiku poetry into the digital age. This interactive tool combines modern web technologies with poetic tradition, allowing both seasoned writers and curious beginners to explore the elegant 5-7-5 syllable structure that defines haiku. With its clean, intuitive interface and soothing color palette, the application creates a serene creative space where inspiration can flourish and artistic expression can thrive.

Experience the joy of instant poetry generation at the touch of a button, or craft your own masterpieces with the help of our syllable analysis tool. The application offers multiple ways to engage with your creations—save your favorite haikus for later reflection, share them with friends, or even listen to them spoken aloud. Whether you're looking for a moment of creative escape, a tool for classroom learning, or simply a daily dose of beauty, the Haiku Poem Generator offers a harmonious blend of technology and artistry.

You may also check this simple HTML, CSS and JavaScript project:

Key Features:

  • Random Haiku Generation: Automatically creates authentic 5-7-5 syllable pattern haikus

  • Custom Haiku Creation: Write and analyze your own poetic creations

  • Syllable Counter: Validates and displays syllable counts for each line

  • Save Functionality: Store your favorite haikus in local storage

  • Share Options: Copy haikus to clipboard or use the Web Share API

  • Text-to-Speech: Listen to your haikus being read aloud

  • Dark/Light Mode: Toggle between color themes for comfortable viewing

  • Responsive Design: Optimized for both desktop and mobile devices

  • Modern UI: Clean, attractive interface with smooth animations

Technologies Used:

  • HTML5: Semantic structure and application framework

  • CSS3: Modern styling with gradients, flexbox, animations, and responsive design

  • JavaScript (ES6): Application logic and interactivity

  • Local Storage API: For saving user haikus

  • Web Speech API: For text-to-speech functionality

  • Web Share API: For sharing haikus (with fallback)

  • Font Awesome: For iconography

How to Use:

  • Generate a Random Haiku: Click the "Generate Haiku" button to create a new random haiku

  • Save Haikus: Use the "Save" button to store haikus you particularly enjoy

  • Share Poetry: Share your creations using the "Share" button

  • Listen to Haikus: Click "Speak" to hear your haiku read aloud

  • Create Custom Haikus: Type your own haiku in the text area and click "Analyze Syllables" to check the structure

  • Toggle Theme: Use the moon/sun icon in the top-right to switch between light and dark modes

  • View Saved Haikus: Access all your saved creations in the "Saved Haikus" section

Sample Screenshots of the Project

Landing Page

Sample Haiku Generate

How to Run?

  • Download the provided source code zip file.
  • Extract the downloaded zip file.
  • Open the html file and you are now ready to go!

Video Demonstration for Installation/Setup:

Conclusion:

In conclusion, the Haiku Poem Generator successfully merges traditional poetic form with modern web technology, creating an accessible and engaging platform that celebrates the beauty of haiku while demonstrating the potential of HTML, CSS, and JavaScript to deliver meaningful creative experiences. This application not only serves as a tool for inspiration and learning but also stands as a testament to how thoughtfully designed digital interfaces can enhance and preserve artistic traditions for new generations of creators.

That's it! I hope this "Haiku Poem Generator Using HTML, CSS and JavaScript" will assist you on your  programming journey, providing value to your current and upcoming projects.

For additional tutorials and free source codes, explore our website.

Enjoy Coding :>>

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.