Created for the Code Institute's February 2022 Hackathon, Love is in the air.
Valentime: Spend more time creating memories!
During lockdown, we had to rethink what a date night was. The local pub was closed, we were unable to eat at our favourite restaurants, and there were no new films showing at the cinemas.
It would have been great to have a site where a suitable at home date night idea could be randomly selected for you ... so we decided to make that idea a reality!
By using the Valentime site to randomly generating a date night idea based on the category you select, you will have more time to spend on the important stuff - making memories with your loved one ❤️.
And as love comes in all different forms, from self love, the love of a friend group to romantic love - we have created seperate sections for each of these - so leave the pain of choosing what to do in the past, and start using Valentime today!
- As a first time user, I want to be able to find out what the valentime site is about.
- I want to be able to see what categories there are for date night ideas.
- As a returning visitor of the site I want to be able to try different date night ideas depending on who will be participating. I may have tried a date night idea with a partner, and now I want to see what the site can suggest for a date night with a group of friends.
- As a returning visitor to the site, I want to be able to share date night ideas with my loved ones.
- As a frequent user of the site I want to be able to contact Valentime and suggest new date night ideas.
- As a frequent visitor to the site, I want to be able to subscribe to the Valentime Youtube channel.
As the theme of the site is all about love, we chose to use the classic romantic colours of reds and pinks. We have chosen some complementary colours that stand out from the pink to be used throughout the site.
Google Fonts was used to import the chosen fonts for use in the site.
-
We are using Dancing Script for the headers on the site.
-
We are using Josefin Sans for the body of the site.
Wireframes were created for mobile, tablet and desktop with Balsamiq
The website is comprised of:
- Home page.
- Movies page.
- Food and drink page.
- Games night page.
- Contact us page.
- 404 error page.
All Pages on the website have:
-
A favicon icon.
-
A responsive navbar.
-
A responsive footer.
-
An interactive heart effect on click - this can be switched on or off in the footer.
-
Future Implementations.
- Add further theme categories for date nights in the future and expand on the number of ideas in each category.
- Implement a log in function so that people could save ideas they like.
- Add a rating system for people to rate the date ideas.
We have been mindful during coding to ensure that the website is as accessible friendly as possible. This has been have achieved by:
- Using semantic HTML.
- Using descriptive alt attributes on images on the site.
- Providing information for screen readers where there are icons used and no text.
- Ensuring that there is a sufficient colour contrast throughout the site.
Contrast on the Navbar Links | Contrast on the buttons | Contrast on card text
HTML, CSS, Javascript, Bootstrap5
Balsamiq - Used to create wireframes.
Git - For version control.
Github - To save and store the files for the website.
Google Fonts - To import the fonts used on the website.
Font Awesome - For the iconography on the website.
Google Dev Tools - To troubleshoot and test features, solve issues with responsiveness and styling.
Tiny PNG To compress images.
Birme To resize images and convert to webp format.
Favicon.io To create favicon.
Am I Responsive? To show the website image on a range of devices.
Shields.io To add badges to the README
Canva To create Greyscale
The site is deployed using GitHub Pages.
To fork the repository:
- Log in (or sign up) to Github.
- Go to the repository for this project, valentime.
- Click the Fork button in the top right corner.
To clone the repository:
- Log in (or sign up) to GitHub.
- Go to the repository for this project, valentime.
- Click on the code button, select whether you would like to clone with HTTPS, SSH or GitHub CLI and copy the link shown.
- Open the terminal in your code editor and change the current working directory to the location you want to use for the cloned directory.
- Type 'git clone' into the terminal and then paste the link you copied in step 3. Press enter.
Testing was ongoing throughout the entire build. We utilised Chrome developer tools while building to pinpoint and troubleshoot any issues as we went along.
The W3C validator FreeFormatter was used to validate the HTML on all pages of the website.
Initially the movies page and food & drink page were showing 2 errors due to a H1 element not having a closing tag. This was added in and the pages then passed.
The contact page initially showed an error shown below, once removed the page passed.
All 6 pages have now passed W3C validation checks.
The CSS on the site was tested using the Jigsaw W3C CSS Validator The CSS passed.
JSHint was used to validate the JavaScript. Some minor items were identified (e.g. semi-colons missing / not required). Three warnings identified which were investiagted and remain as;
- variables declared but not used - removal prevents the function from operating correctly
- the body of a for in should be wrapped in an if statement - unable to accomodate and operate correctly (no console errors / bad behaviou encountered)
- redefinition of variable - desired change to variable for script to run
- Images not showing on deployed site
Images were not showing on the food and drinks page initially at deployment. File paths were fixed, images were then visble on deployed site.
- Navbar covering content
Padding were added to navbar so that it does not cover and overlap with content.
- Floating footer
Footer was floating and not stuck to the bottom. Fixed background color and added margin-top to CSS to ensure footer stays at the bottom.
- Facebook share button
We have attempted to implement a facebook share buttons for the users to share date night ideas with others but have failed to get it working correctly with time restrictions.
- Inconsistent behaviour with animated cursor
Users might be required to click mulitple times for the hearts to appear. In response to this inconsistency, we have added the capability to switch this feature off by using the toggle on the navbar.
- First Time Visitors
First time users are able to find out the purpose of the Valentime site on the landing page. They can easily navigate to every section on the navbar to check out different categories for date night ideas.
- Returning Visitors
Returning users are able to select different/new date night suggestions depending on who will be participating. They are also able to share the ideas with friends and loved ones.
- Frequent Visitors
Frequent users are able to contact Valtime and suggest new date night ideas. They ar also able to subscribe to the Valentime Youtube channel.
We used Lighthouse within the Chrome Developer Tools to test the performance, accessibility, best practices and SEO of the website.
Food_Drink Page Desktop |Mobile
Games Night Page Desktop |Mobile
Contact Us Page Desktop |Mobile Due to time constraint, we were unable to change the Heading elements to match the sequentially-descending order on Contact Us page.
To fully test my website we performed the following testing using a number of browsers (google chrome) and devices (Macbook Pro 14 inch, iPhone 13 pro).
We also went through each page using google chrome developer tools to ensure that they were responsive on all different screen sizes.
All the links in the page will open in a new tab implementing 'target="_blank"' and have been manually tested to confirm that they will direct to the correct destination.
All the siter content were written by Cupids Coders.
Images acquired under licence from Adobe Stock: Clapperboard | Heart Biscuits | Heart Dice
Images acquired under licence from Adobe Stock: Clapperboard | Heart Biscuits | Heart Dice
-
Solo
How to be single | Romie & Micheles High School reunion | La la land | He's just not that into you | Magic Mike
-
Couple
Romeo & Juliet | The Vow | Sleepless in Seattle | The Notebook | The wedding singer
-
Group
Girls trip | The sweetest thing | The proposal | My best friends wedding | Someone great
Cook It ! | Bake It ! | Shake It ! |
-
Cook It
Instant Pot Indian Butter Chicken | Spicy Pesto Pasta Alla Vodka | Crispy Honey Glazed Chicken Thighs | Roasted Salmon Nicoise | Shrimp and Gnocchi With Garlic Parmesan Cream Sauce |
-
Bake It
Red velvet cupcakes | Molten chocolate lava cakes | Persian Love Cake | Vanilla Cupcakes with Rose Petal Buttercream | Fudgy Brownies |
-
Shake It
Cosmopolitan | Love Potion No. 9 | Classic Mudslide | Strawberry Margarita | Strawberry Sangria |
Images acquired under licence from Adobe Stock: controller | Tic Tac Toe | Loading Screen | Lady Texting | Friends Online Gaming
All other images were screen shots typically from the linked article / site.
The images of each team member belong to the individual.
Meet team Cupids Coders :
We would like to thank the following:
-
Naoise Gaffney, our facilitator for this hackathon.
-
Our families, for their endless patience while we disappear for another long weekend of hackathon coding.