This was my first coding project and it offered a lot of challenges and new learning experiences building a website. Our website features an extensive collection of delicious drinks, each with its own ingredients and instructions for making it. The user can browse the available drinks by clicking on their images, and when a drink is selected, its name, ingredients, and instructions are displayed on the page.
In addition to the core functionality of displaying the drinks and their details, our website also includes two fun modes that users can toggle on and off: party mode and dark mode. When party mode is activated, the background color of the page changes to a random color every second, creating a lively and festive atmosphere. Dark mode, on the other hand, inverts the colors of the page to create a "dark" look, which can be easier on the eyes in low light environments.
The code that powers our website is written in JavaScript and makes use of the Document Object Model (DOM) to access and manipulate the elements on the page. We use the DOM to obtain references to the necessary elements, such as the images of the drinks, the form for adding new drinks, and the buttons for activating party and dark mode.
One of the key functions in our code is handleClick, which is called whenever a user clicks on one of the drink images. This function first clears the main container on the page, and then it creates and appends an img element representing the selected drink's image. It also updates the text of the h1 and h4 elements to display the drink's name and instructions, respectively. Additionally, the function calls the displayIngredient function for each of the drink's ingredients, which creates and apples an li element for each ingredient to the ingredientsContainer element on the page.
Another important function in our code is handleSubmit, which is called when a user submits the form for adding a new drink. This function takes the values entered into the form and uses them to create a new object representing the drink. The new drink is then added to the page by calling the displayFirstDrink and displayDrinks functions, which create and append the necessary elements to the page. The displayFirstDrink function is similar to the handleClick function, in that it creates and appends an img element for the new drink and updates the h1 and h4 elements to display the drink's name and instructions. The displayDrinks function, on the other hand, simply creates and appends an img element for the new drink to the ul element that contains all of the available drink images.
In conclusion, our website is a great resource for anyone looking to learn about and make delicious drinks. The ability to add new drinks and the fun party and dark mode features make it a unique and engaging experience for users. Whether you're looking to impress your friends with a new drink recipe or simply want to browse some tasty options, our website has you covered.
Top comments (0)