doileo/potluck-guest-list-and-dish

This web app helps event organizers manage their guest lists by allowing them to create and assign items, and mark attendance during the event.

Skillcrush project - potluck-guest-list-and-dish

As part of my Front-End Developer Track at Skillcrush, I completed this project which enabled me to acquire additional front-end development skills.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources
• Author

Overview

The challenge

Users should be able to:

• Click on an invite button to add a new guest to a list of attendees
• See the total number of guests attending
• Be alerted when the guest list is full
• Click on an assign button to randomly assign potluck items to each guest on the list, and display the assigned items in a separate list.

Screenshot

Links

• Live Site URL: Live site URL here

My process

Built with

• Flexbox
• Mobile-first workflow
• JavaScript

What I learned

Working on this project I could learn:

• how to use arrays to store and manipulate data.
• how to generate random numbers using Math.random() and use them to select items from an array.
• how to use loops to iterate over arrays and perform operations on their contents.

Here are some code snippets for the things mentioned earlier:

{
//using arrays to store and manipulate data
const potluckItems = [
  "potato salad",
  "hummus",
  "cookies",
  "fruit",
  "tomato and mozzarella caprese skewers",
  "chicken salad spring rolls",
  "sandwiches",
  "cucumber noodles",
  "salsa",
  "icebox cake",
  "peach tarts",
  "ice-cream"
];

const allGuests = document.querySelectorAll(".guest-list li");

//using Math.random()
let randomPotluckIndex = Math.floor(Math.random() * potluckItems.length);
let randomPotluckItem = potluckItems[randomPotluckIndex];

//using loops to iterate over arrays
for (let guest of allGuests) {
  let randomPotluckIndex = Math.floor(Math.random() * potluckItems.length);
  let randomPotluckItem = potluckItems[randomPotluckIndex];

  let listItem = document.createElement("li");
  listItem.innerText = `${guest.innerText} is bringing ${randomPotluckItem}.`;
  assignedItems.append(listItem);

  potluckItems.splice(randomPotluckIndex, 1);
}
}

Useful resources

• Resource 1 - This helped me for getting a detailed guide to working with arrays in JavaScript. It covers topics like creating arrays, adding and removing elements, and using array methods like forEach and map
• Resource 2 - This is an amazing article which helped me arrays in JavaScript. It covers everything from creating and initializing arrays to using array methods to manipulate their contents.

Author

• LinkedIn - Doina Leovchin