VALENTIME
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!
CONTENTS
User Experience (UX)
User Stories
First Time Visitor Goals
- 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.
Returning Visitor Goals
- 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.
Frequent Visitor Goals
- 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.
Design
Colour Scheme
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.
Typography
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.
Imagery
Wireframes
Wireframes were created for mobile, tablet and desktop with Balsamiq
Features
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.
Accessibility
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
Technologies Used
Languages Used
HTML, CSS, Javascript, Bootstrap5
Frameworks, Libraries & Programs Used
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
Deployment & Local Development
Deployment
The site is deployed using GitHub Pages.
Local Development
How to Fork
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.
How to Clone
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
Testing was ongoing throughout the entire build. We utilised Chrome developer tools while building to pinpoint and troubleshoot any issues as we went along.
W3C Validator
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.
JavaScript Validator
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
Solved Bugs
- 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.
Known Bugs
- 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.
Testing User Stories
- 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.
Lighthouse
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.
Full Testing
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.
Credits
Code Used
Content
All the siter content were written by Cupids Coders.
Media
Index Page
Images acquired under licence from Adobe Stock: Clapperboard | Heart Biscuits | Heart Dice
Images acquired under licence from Adobe Stock: Clapperboard | Heart Biscuits | Heart Dice
Movies Page
Movie Category Images
Film Suggestions Images
-
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
Food & Drinks Page
Food & Drink Category Images
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 |
Games Night Page
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.
Contact Us Page
The images of each team member belong to the individual.
404 Error Page
Acknowledgments
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.