akshayaparida/sillystorygenerator

sillystorygenerator

This project covers several fundamental concepts in web development and JavaScript:

1. DOM Manipulation: Interaction with HTML elements using JavaScript to dynamically update content based on user actions (button clicks, input changes).

2. Event Handling: Responding to user actions (such as button clicks) by attaching event listeners (addEventListener) to HTML elements.

3. String Manipulation: Using string methods (replace()) to modify text and replace placeholders with dynamically generated content.

4. Arrays and Randomization: Storing data in arrays and selecting random elements from those arrays.

5. Conditional Statements: Using if statements to execute code based on certain conditions (checking for user input or radio button selection).

6. Basic Math Operations: Performing simple mathematical calculations for unit conversion (pounds to stones, Fahrenheit to Celsius).

7. Functions: Defining and utilizing functions to encapsulate reusable pieces of code (e.g., randomValueFromArray()).

8. Variable Scope: Understanding the scope of variables declared within different blocks of code.

9. HTML/CSS Interaction: Updating HTML content and visibility based on JavaScript-generated data.

These concepts come together in a practical project where user input and selections dynamically modify the generated story's content and format.

pseudo- codes:

1. Gather references to HTML elements:

   • customName = get element by ID 'customname'
   • randomize = query selector for button with class 'randomize'
   • story = query selector for paragraph with class 'story'

2. Define a function randomValueFromArray(array):

   • Generate a random number between 0 and the array's length minus one
   • Return the element in the array at the generated random index

3. Define storyText as a template with placeholders:

   • "It was 94 fahrenheit outside, so :insertx: went for a walk. When they got to :inserty:, they stared in horror for a few moments, then :insertz:. Bob saw the whole thing, but was not surprised — :insertx: weighs 300 pounds, and it was a hot day."

4. Define arrays insertX, insertY, insertZ with possible values for placeholders

5. Attach an event listener to the 'randomize' button:

   • When clicked, trigger a function called result()

6. Define the function result():

   • Generate random items xItem, yItem, zItem by calling randomValueFromArray() on insertX, insertY, insertZ respectively
   • Create newStory by replacing placeholders in storyText with xItem, yItem, zItem
   • If customName input is not empty:
     • Get the entered name and replace all occurrences of 'Bob' in newStory with the entered name
   • If the 'uk' radio button is checked:
     • Convert weightInPounds to weightInStones by multiplying pounds with a conversion factor
     • Convert temperatureInFahrenheit to temperatureInCentigrade using the Fahrenheit to Celsius formula
     • Replace occurrences of '94 fahrenheit' in newStory with temperatureInCentigrade and '300 pounds' with weightInStones
   • Display the generated story by updating the textContent of the story element and making it visible