Skip to content

mahamtaj29/whacky_tales_weaver

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Wacky Tales Weaver

This project implements a Wacky Tales Weaver application using HTML, CSS, and JavaScript. It allows users to create fun stories by clicking on images, which dynamically change and contribute to the story.

Table of Contents

  1. Overview
  2. Features
  3. Setup
  4. File Structure
  5. Usage
  6. Customization
  7. Technologies Used
  8. Contributing

Overview

Welcome to "Wacky Tales Weaver," a fun and engaging game where user become the master storyteller using a collection of silly images. Each click unveils a new part of tale, making every story unique.

Features

  1. Image Party:

    • Splash page with cool images.
    • Each image is a piece of story puzzle.
  2. Story Magic:

    • Click an image to reveal a snippet of tale.
    • Each image has its own story contribution.
  3. See Tale Grow:

    • Watch story build up with every click.
    • The story is displayed on the screen as it unfolds.
  4. Do-Over Button:

    • Use the "RESET STORY" button to reset story.

Setup

  1. Clone the repository to your local machine.
  2. Open index.html in your web browser to start playing "Wacky Tales Weaver."

File Structure

  1. HTML File:

    • Contains the structure of the web application and imports necessary CSS and JavaScript files.
  2. CSS File:

    • Defines the styles and layout for the web application, including container layout, image styling, and reset button.
  3. JavaScript File:

    • Implements the functionality of the Wacky Tales Weaver, including adding snippets to the story, flipping images, and resetting the game.

Usage

  1. Click on the images to reveal parts of wacky tale.
  2. Watch as story grows with each click.
  3. Use the "RESET STORY" button to reset and create a new story.

Customization

  • Images: Add or replace images in the images folder to customize your story elements.
  • Story Messages: Modify the storyMessages array in script.js to customize story snippets for each image.

Technologies Used

  • HTML
  • CSS
  • JavaScript

Contributing

  • This project is a practice exercise, and contributions are not expected. However, feel free to use the code as a learning resource or suggest improvements.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published