Create build-a-randomizer-generator-with-html-css-js.mdx

Author: jules-kris

projects/build-a-randomizer-generator-with-html-css-js/build-a-randomizer-generator-with-html-css-js.mdx

@@ -0,0 +1,314 @@
+---
+title: Build a Randomizer Generator with HTML/CSS/JS 
+author: Julien Kris and Ellie Popoca
+uid: 
+datePublished: 
+description: 
+header: 
+published: false
+tags:
+  - html
+  - css
+  - javascript
+  - intermediate
+
+---
+
+<BannerImage 
+  link="" 
+  description="Title Image" 
+  uid={true} 
+  cl="for-sidebar" 
+/>
+
+# Animate Images with keyframes using CSS
+
+<AuthorAvatar
+  author_name="Julien Kris"
+  author_avatar=""
+  username="julien"
+  uid={true}
+/>
+
+<AuthorAvatar
+  author_name="Ellie Popoca"
+  author_avatar="/images/projects/authors/ellie-popoca.jpg"
+  username="ellie"
+  uid={true}
+/>
+
+<BannerImage
+  link="" 
+  description="Title Image"
+  uid={true}
+/>
+
+# Introduction
+
+Are you familiar with Cher's closet from [Clueless](https://en.wikipedia.org/wiki/Clueless)? 
+
+<RoundedImage link="https://i.imgur.com/TYmiJnX.gif" description="" />
+
+It's an example of a randomizer generator! In Clueless, Cher used it to plan outfits by swiping through a catalogue of her entire wardrobe.
+
+There are other types of cool generators out there in games, movies, and TV shows. We can use the same logic to design monsters or even avatars.
+
+<RoundedImage link="https://i.imgur.com/jkgf7of.gif" description="" />
+…how many hours of BG3 do you think we've played? ⚔️
+
+Today, we'll be learning how to use HTML, CSS, and vanilla JavaScript to build our own Randomizer Generator.
+
+## Code Structure
+
+Let's take a look at some [starter code](https://glitch.com/edit/#!/generator-starter-code) and some [final code](https://glitch.com/edit/#!/generator-final-code). We'll be learning how to get from point A to point B.
+
+If you've taken the HTML, CSS, and JavaScript courses, our web stack for this project will look familiar. We have an HTML file that links to an external CSS stylesheet and an external JavaScript file, all contained within the same folder.
+
+```terminal
+CluelessGenerator/
+├── index.html
+├── style.css
+└── script.js
+```
+
+## HTML
+
+HTML buttons allow users to interact with the outfit generator. These buttons control the behavior of the app, such as randomizing outfits and cycling through different images of accessories, tops, and bottoms. Here’s what each part does:
+
+### Randomize Button:
+
+<RoundedImage link="https://i.imgur.com/PL9cXAX.gif" description="" />
+
+This button, labeled "randomize!", triggers the randomization of outfit pieces when clicked. It's located at the top and has the `id="random-btn"`.
+
+ ```html
+<button class="random-button" id="random-btn">randomize!</button>
+```
+
+### Arrow Buttons (Prev/Next)
+
+ These buttons let the user cycle through different outfit pieces within each category (add-ons, tops, bottoms). For example, the `0prevBtn` and `0nextBtn` control the add-ons (accessories) images:
+
+```html
+<div class="carousel-buttons">
+  <button id="0prevBtn"><--</button>
+  <button id="0nextBtn">--></button>
+</div>
+```
+
+Similarly, each outfit category has its own set of arrows to go backward or forward through the images.
+
+## CSS Styling
+
+### General Layout and Centering
+
+The HTML and body elements use flexbox to center the content both horizontally and vertically. This ensures that all elements appear in the center of the screen, no matter the screen size.
+```css
+html {
+  background-color: #ff5f1f;
+  display: flex;
+  justify-content: center; /* Center horizontally */
+  font-family: sans-serif;
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  overflow-x: hidden; /* Prevent horizontal scrolling */
+}
+```
+
+### Main Container
+
+The `.main-container` holds all of the sections (like the images and buttons). The flexbox layout inside the container ensures that the sections are stacked vertically with a small gap between them.
+
+```css
+.main-container {
+  display: flex;
+  flex-direction: column; /* Stack elements vertically */
+  align-items: center; /* Center content */
+  gap: 15px; /* Add space between items */
+  padding: 10px; /* Small padding around the container */
+}
+```
+
+### Image Styling
+
+The images in the outfit categories (add-ons, tops, bottoms) are set to take up 90% of the available width, with a maximum width of 250px. The aspect ratio ensures they keep their proportions. This makes sure the images look good on all screen sizes.
+
+```css
+.addons-image,
+.tops-image,
+.bottoms-image {
+  width: 90%; /* Take up 90% of the container's width */
+  max-width: 250px; /* Don't exceed 250px in width */
+  aspect-ratio: 3 / 4; /* Maintain consistent proportions */
+  object-fit: contain; /* Preserve image aspect ratio */
+}
+```
+
+### Buttons Styling
+
+The buttons are styled with a bright pink background and white text. A hover effect is added, so when you move the cursor over the button, the background turns darker. The "randomize" button is styled with a green background to make it stand out.
+
+```css
+button {
+  font-size: 1rem;
+  color: white;
+  background-color: #ff69b4; /* Pink background */
+  padding: 8px 16px;
+  cursor: pointer;
+}
+
+button:hover {
+  background-color: #d90166; /* Darker pink when hovered */
+}
+
+.random-button {
+  background-color: green; /* Green button for "randomize" */
+}
+```
+## JavaScript
+
+### Randomizer Logic
+In the starter code, the random button has a placeholder function:
+
+ ```js
+document.getElementById("random-btn").addEventListener("click", () => {
+  console.log("Randomize button clicked!");
+});
+```
+This means the button works, but it doesn't do anything useful yet. It just logs a message to the console.
+
+We'll replace the placeholder with a function that actually changes each outfit piece randomly. First, we loop through each category:
+
+```js
+for (const cat in categories) {
+  const category = categories[cat];
+```
+ 
+This lets us access the `addOns`, tops, and bottoms categories one by one.
+
+ Inside the loop, we'll generate a random number that matches an image index:
+
+``` js
+category.index = Math.floor(Math.random() * category.images.length);
+ ```
+This gives us a random index between 0 and the number of images - 1.
+
+ After picking the new index, we'll call:
+
+ ```js
+updateImage(cat);
+```
+This shows the new image on screen using the category’s updated index.
+
+Finally, we'll connect the real randomize() function to the button:
+
+ ```js
+document.getElementById("random-btn").addEventListener("click", randomize);
+```
+
+### Arrow Buttons Logic
+
+The arrow buttons (`prevBtn` and `nextBtn`) allow the user to navigate through the images of each category (`add-ons`, `tops`, `bottoms`). These buttons let you go forward and backward through the images in a loop:
+
+When the Next button is clicked, the index for the category increases by 1, and the `updateImage()` function is called to update the displayed image.
+
+```javascript
+document.getElementById(category.nextBtn).addEventListener("click", () => {
+  category.index = (category.index + 1) % category.images.length;  // Loop back to the first image
+  updateImage(cat);
+});
+```
+
+When the Prev button is clicked, the index decreases by 1, and again, the `updateImage()` function is called. It loops back to the last image if you go backward from the first one.
+
+```javascript
+document.getElementById(category.prevBtn).addEventListener("click", () => {
+  category.index = (category.index - 1 + category.images.length) % category.images.length;  // Loop to last image
+  updateImage(cat);
+});
+```
+
+The modulo (%) operator is used here to make the images cycle in a continuous loop.
+
+## Avatar Creator
+
+You can use the same logic above to create a monster or an avatar. Here's a fun example, using the heads, torsos, and legs of monsters from Monster's Inc, Inside Out, Minions.
+
+<RoundedImage link="https://i.imgur.com/HHmRCzg.png" description="" />
+
+This example also shows an alternate way of designing the arrows so the three characters swap heads, torsos, and legs at the same time. 
+
+## Adding more categories
+
+So – what if we have our avatar and want to add another category, like shoes? Here's how we'd do that:
+
+### HTML
+
+In the HTML, you'll need to add a new section for shoes. This will look similar to how the other sections are structured. You would add the following HTML code:
+
+```html
+<div class="shoes-container">
+  <img id="shoes" class="shoes-image" src="" alt="shoes" />
+  <div class="carousel-buttons">
+    <button id="3prevBtn"><--</button>
+    <button id="3nextBtn">--></button>
+  </div>
+</div>
+```
+
+This creates a new section with an image for shoes and navigation buttons (previous and next). You can place this code in the `<div class="main-container">` along with the other categories.
+
+### CSS
+To add styling for the shoes category, follow the same pattern as for other categories! Anywhere that you currently have
+```css
+.addons-image,
+.tops-image,
+.bottoms-image {
+```
+You'll also add `.shoes-image`.
+### JavaScript
+In JavaScript, you'll need to add a new category to the categories object. Each category includes an array of images, an index to track the current image, references to the HTML elements, and button IDs for navigation. Here's how you'll add the shoes category:
+```javascript
+const categories = {
+ …
+  shoes: {  // Add new category for shoes
+    images: [
+      // Your shoe images go here
+    ],
+    index: 0,
+    element: document.getElementById("shoes"),
+    nextBtn: "3nextBtn",
+    prevBtn: "3prevBtn",
+  },
+};
+```
+You'll add a `shoes` key with an array of image URLs, an index to track the current image, an element to target the HTML image element, and button IDs for the next and previous buttons.
+
+## Bonus Challenge
+
+If you've already added a fourth section, try making a feature that toggles a pop-up that says "mismatch!" when the outfit doesn't match. Or, if you're creating a monster, the feature could say the sound the monster would make, depending on the combinations.
+
+<RoundedImage link="https://i.imgur.com/4VYyB9N.jpeg" description="" />
+
+
+## Conclusion
+
+Congrats! You've built your own generator! Now you're equipped with the skills to build on this concept and create other kinds of generative projects!
+
+## Additional Resources
+
+[90's Fashion Nova Holiday Hackathon Project by Ciera](https://www.codedex.io/community/hackathon/OSlnGKjR7MWDaIRgvNdD) 
+[Archive App by Vita Newstetter](https://archive.clothing/)
+[I Recreated Cher's Closet From Clueless](https://www.studiosophy.com/blog/2022/2/28/i-recreated-chers-closet-from-clueless)
+[MoMa Exquisite Corpse Generator](https://ec.moma.org/intro)
+
+
+Share your projects with the team [@codedex_io](https://www.twitter.com/codedex_io) and us, [@exrlla](https://www.twitter.com/exrlla) and [julien](https://www.codedex.io/@Julien)! Let us know what you come up with!  
+<span style={{ fontSize: "16px", lineHeight: 1 }}>
+  <img
+    src="https://i.imgur.com/FOR1yp5.gif"
+    alt="emoji"
+    style={{ height: "1em", width: "auto", verticalAlign: "middle" }}
+  />
+</span>