Christmas Advent

Welcome to our festive Christmas recipe website! Explore a delicious variety of European meals with our easy-to-use Slider and Advent Calendar. Each day brings a new surprise recipe from different countries, perfect for sharing with family and friends. Celebrate the holiday season with our delightful, diverse dishes and create memorable moments around the table.

Feel free to access the live website (CTRL + Click to open in a new tab).

Table of Contents

1. Table of Contents
2. Criteria
3. Goal
4. Design
5. Features
6. Technologies Used
7. Manual Testing
8. Credits

Criteria

Our team tackled the relevant criteria:

• Innovative design to improve user experience
• The project surpasses the specified task requirements
• Responsive and accessible across various screen sizes
• Well-planned project management using Github Projects
• Entirely Front-end focused

Goal

➡️ Problem Statement: Despite the widespread interest in diverse European Christmas foods, there is a lack of centralized and accessible platforms that curate authentic recipes, hindering individuals' ability to easily explore and incorporate traditional holiday cuisine into their celebrations.

➡️ Objective(s): Create an interactive Christmas Advent Calendar website with the objectives of curating authentic European holiday recipes, fostering cultural awareness, engaging users through a daily recipe format, ensuring accessibility, promoting social sharing, employing responsive design and instilling festive spirit.

➡️ Target Audience: The target audience for a Christmas Advent website showcasing different European Christmas foods includes food enthusiasts, holiday celebrators, cultural explorers, families, cooking enthusiasts, travel enthusiasts, and social media users interested in festive, European-inspired cuisine.

➡️ Benefits: The benefit of Christmas Advent calendar websites featuring diverse European Christmas foods lies in providing a unique and engaging platform that enhances user enjoyment of the holiday season by offering authentic recipes, fostering cultural exploration, and catering to the interests of food enthusiasts, holiday celebrators, and those seeking creative and festive culinary inspiration.

Design

Colour Scheme

The project incorporates Christmas-inspired colours like red, green, and gold, as well as white and black.

Fonts used

For a more festive feel, we have chosen a special fonts associated with Christmas: "merry_christmas_flakeregular", sans-serif.

We also used the following Google fonts: "Bitter", serif; "Dosis", sans-serif;

Wireframes

Wireframe mockups can be found in the "documentation" folder. These were created using Balsamiq.

Features

"	#	Feature	Desirability	Importance	Viability	Delivered
	One page
---	---	---	---	---	---
1	scroll snaping to next section	5	5	5	✅
2	sections to be 100vh	5	5	5	✅
3	sticky navigation bar	5	5	5	✅
4	Snowfall effect	3	3	5	✅
--	---	---	---	---	---
	Section Hero
---	---	---	---	---	---
5	Eye catching imagery	5	5	5	✅
6	Welcoming headline and subheadline	5	5	5	✅
7	CTA button e.g. ""Get Inspired!""	5	5	5	✅
8	Countdown Timer	5	5	5	✅
--	---	---	---	---	---
	Recipes
---	---	---	---	---	---
9	Image slider	5	5	5	✅
10	Featured recipes	5	5	5	✅
11	Buttons to slide left or right	5	5	5	✅
--	---	---	---	---	---
	Christmas Calendar
---	---	---	---	---	---
12	Advent Calendar	5	5	5	✅
13	Images and recipe information (JSON)	5	5	5	✅
14	Close and Add to Favourite options	5	5	5	✅
--	---	---	---	---	---
	Team Section
---	---	---	---	---	---
15	A section title: Meet the Team	5	5	5	✅
16	Images of team members on slider	5	5	5	✅
--	---	---	---	---	---
	FAQ section
---	---	---	---	---	---
17	FAQ questions and answers	5	5	5	✅
18	Expandable/Collapsible when clicked on questions	5	5	5	✅
19	A button that opens all questions	5	5	5	✅
--	---	---	---	---	---
	Contact form
---	---	---	---	---	---
20	A form where the user can fill	5	5	5	✅
21	Name, E-mail, Subject and Message	5	5	5	✅
22	A send button	5	5	5	✅	"

Technologies Used

Languages Used

This web application was developed using the following technologies:

• HTML: Used for structuring the content of the web pages.
• CSS: Used to style the web page.
• JavaScript: Implemented for interactivity and functionality.

Frameworks, Libraries & Programs Used

The project also utilizes the following frameworks, libraries, and programs:

• Bootstrap: to enable responsive development.
• Git: for version control.
• Github: to save code.
• Am I Responsive: to check if the website is responsive for various devices and screen sizes.
• Coolors: to create the colour palette.
• JSON: to store data.
• Google sheets: to plan and organize data.
• Miro: to create brainstorm ideas in real-time.
• Balsamiq: to create the wireframes for the website.

Manual Testing

"	#	Feature	Expected Outcome	Testing Performed	Pass/Fail
	Navigation
---	---	---	---	---
1	Scroll down and up	The navigation bar should stay fixed at the top even when you scroll down or up	Scroll up the page manually, and observe. The navigation bar should stay at the viewpoint.	✅
2	Testing responsivness	the sticky navigation bar smoothly transitions into the hamburger menu when the screen size is reduced.	Manually resize the browser window or use developer tools to simulate a smaller screen. Open the hamburger menu and click on menu items. Confirm that the navigation functions correctly	✅
--	---	---	---	---
	Image slider
---	---	---	---	---
--	---	---	---	---
	Avdent Calendar
---	---	---	---	---
6	Testing window opening	Once clicked on a specific day of the calendar, a window opens smoothly and the content displays correctly.	Click on a specific day to test if the corresponding window opens which consists of the intended information.	✅
7	Testing window closing	The window closes smoothly when clicking on ""x"" button, alternatively you could click on close button.	Inside the open window, click on the ""x"" button (found in the top-right corner). Check if the window closes with no issues. Do the same by clicking on the close button at the end of the window and confirm if the closing function is smooth.	✅
--	---	---	---	---
	FAQ
---	---	---	---	---
8	Verify initial state	The answers aren't showing, only quesions are.	Ensure that all the answers are initially collapsed, and only quesions are visibe.	✅
9	Test expansion	The expansion is smooth and the answer content displays correcly.	Click on a question to test if the corresponding answer expands and becomes visible.	✅
10	Test collapse	the collapse is smooth and the answer content disappears as expected.	Click on the same question again to test if the answer collapses and becomes hidden.	✅
11	Open All button	All the answers are showing.	Click on the open all button to test if all the questions collapse allowing all answers to appear.	✅
--	---	---	---	---
	Contact form
---	---	---	---	---
12	Test input fields	Users can input their details easily	Enter valid information into each input field (name, emai, subject, message) to test that users can put their details easily.	✅
13	Test invalid Email	Once entered an invalid email, the form prompts the user to enter a valid email.	Enter an invalid email address (e.g. without an ""@"" symbol) to check if the form prompts the user to enter a valid email.	✅
14	Test empty fields	The form prompts the user to fill in all required fields.	Try submit the form with empty fields, to check if the form prompts the user to fill the required fields.	✅
15	Test submission	Once clicked on submit button the form is submitted sucessfully.	Enter all the valid information into all the fields and click on the ""Send"" button to submit the form. Check that the form is submitted successfully.	✅
16	Check for responsiveness	The contact form remains functional and responsive acroos various devices.	Resize your browser window, or use the developer tools to simulare different screen sizes. Confirm that the form is responsive and functional.	✅	"

Credits

Contributing

We welcome contributions to improve and expand the Christmas Advent web application. If you have any suggestions, bug fixes, or new features to add, please follow these steps:

• Fork the repository on GitHub.
• Create a new branch for your feature or bug fix.
• Make your changes and test them thoroughly.
• Submit a pull request to the main repository with a clear description of your changes.

Acknowledgments

• This project was developed for the Code Institute's December Christmas Hackathon.

• We'd like to thank the Code Institute and the Hackathon organizers for the opportunity to create this festive web application.

• We also want to express our gratitude to our families for their understanding and support while we immersed ourselves in coding for a few days.

Meet the Santa's las Cookie Team (Alphabetical Order)

• Efren
• Erik
• Frank
• Mia
• Volodymyr
• Zainab Ismail

---

Happy Holidays, and enjoy a festive season full of laughter, good food, and wonderful memories! 🎅🎄