- 🎁The project is deployed Click here to play!
| Section |
|---|
| Project description, link, etc. |
| Typography |
| Features |
| UX / UI |
| Testing |
| Unfixed Bugs |
| Deployment |
| Credits |
| Future Features |
-
🎁 Header
- Contains the navigation links to change from page to page.
-
🎁 Team page
- This page shows the team of individuals who collaborated together to make this game.
-
🎁 Gameplay
- All mini games will be different and fun, while also relating to christmas theme
-
🎁 How to play
- Instructions to help users understand what they must do in order to complete the game
-
🎁 The project fits the theme of celebrating the holidays.
The "12 Days of Christmas" is the period in Christian theology that marks the span between the birth of Christ and the coming of the three wise men. It begins on Christmas and runs to the Epiphany (6th January). We have decided to celebrate the "12 Days of Code-mas!" -
🎁 The project is well planned and executed (Using GitHub Projects/Kanban). We utilised a project board on GitHub in order to plan our tasks and stay organised with the project. We also communicated well on Slack throughout the Hackathon time period.
-
🎁 The project has a basic README that follows the provided template. Please refer to the current README.
-
🎁 The project has an overall sense of completeness.
We are happy with the project we have produced. We have a homepage (index.html) with Bootstrap cards which lead to different holiday themed animations and interactive games to get you into the holiday spirit! -
🎁 The project showcases a strong sense of creativity and originality.
Each team member was responsible for two days and were delighted by the opportunity to showcase our individual creative thoughts and ideas. We showcased our ideas regularly on Slack and were very supportive of each other. We think that the 12 Days of Code-mas is an original idea as most people don't realise that the 12 days begins on Christmas day - we are not an Advent Calendar!
When you enter our site, you are greeted with twelve cards: 1 - 12. Behind each day is a different holiday based animation or interactive task. The idea is that each day represents the "12 days of Code-mas". Come back each day for holiday fun!
- 🎄 Problem Statement: Once it gets to Christmas, people can get a bit blue that it's all over but the 12 Days of Code-mas extends the joy until the Epiphany! (6th January)
- 🎄 Objective(s): Our project aims to bring festive joy to people over the festive period.
- 🎄 Target Audience: Any age group can appreciate the 12 Days of Code-mas. Young children would probably need some assistance from an adult with the games.
- 🎄 Benefits: The games are replayable so you can return as often as you like to feel holiday joy! The animations are bright and cheerful - perfect for if you are sitting at your desk and want a pick-me up!
- JS: the primary language used to develop interactive components of the website.
- HTML: the markup language used to create the website.
- CSS: the styling language used to style the website.
- GitHub: used to host the website's source code.
- Chrome DevTools: was used to debug the website.
- Font Awesome: was used to create the icons used on the website.
- BootStrap: was used to create responsive elements.
- Canva: was used to generate/ design images and cards
- The font for the website were imported using Google Fonts. The Merienda font has a cursive and slightly whimsical style, which is perfect for creating a fun, informal, and engaging atmosphere—ideal for a surprise calendar website.
- The background images, images and the emojies were either from google or desigend featruing Christmas theme.
- As a curious user, I want to click on a calendar box and unlock a surprise (e.g., a game, song, or message), so that I can experience excitement and fun daily.
- As a music lover, I want some calendar surprises to feature songs, playlists, or musical snippets, so I can discover new music or enjoy a favorite tune.
- As a gamer, I want some surprises to unlock fun mini-games that I can play instantly, so I can take a quick break and relax.
- As a knowledge seeker, I want some surprises to reveal trivia, puzzles, or fun facts, so I can learn something new while engaging with the calendar.
- As a returning user, I want the surprises to vary every day, so the experience remains fresh and exciting for me over time.
| Page | screenshot | Page | screenshot |
|---|---|---|---|
| Home page |  |
mobile |  |
| Team page |
- Day 4 html file is not responsive.
The project was developed in Gitpod, committed and push to GitHub through using the terminal section in Gitpod. To deploy this page to GitHub pages from its GitHub repository, the following steps were taken:
- Log into GitHub
- From the list of repositories on the screen, select the relevant repository
- From the menu list near the top below the project name, select settings
- There will be a nav down the left of the screen. Find pages and select it when found
- Select the branch dropdown which will say none and change it to main
- Click the save button to the right of it
How to run this project locally:
- To clone this project into Gitpod you will need a GitHub account
- Use the Chrome browser
Then follow the steps:
- Install Gitpod Browser Extensions for Chrome
- After installation, restart the browser
- Log into Gitpod with your Gitpod account
- Navigate to the project GitHub repository
- Click the green 'Gitpod' button in the top right corner of the repository
- This will trigger a new Gitpod workspace to be created from the code in GitHub where you can work locally
-
day 10 https://www.cleanpng.com https://www.citypng.com/png-download/29819 https://creazilla.com/media/clipart/38206/santa-claus-hat (edited)
-
day 11 animation: https://www.perssondennis.com/articles/33-christmas-animations-to-easily-add-to-your-website
-
Audio files day 1 & 3 https://pixabay.com/music/search/programming/
-
Ai generated images day 3 https://deepai.org/machine-learning-model/cute-creature-generator
-
Youtube tutorials How to Create a Snow Effect Animation with CSS and JS https://www.youtube.com/watch?v=J7YiXf8gvDo&t=670s
-
Animated Christmas Tree using HTML & CSS https://www.youtube.com/watch?v=Dg0WMIiW3Yk&t=294s
- Add extra rooms
- Add leaderboards
- Add mobile and tablet functionality.