Skip to content

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 …

Notifications You must be signed in to change notification settings

kera-cudmore/valentime

 
 

Repository files navigation

VALENTIME

Valentime Logo

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!

Valentime Site on a variety of device sizes

Visit the Valentime site here

GitHub last commit GitHub contributors GitHub language count GitHub top language W3C Validation GitHub forks

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.

Valentime Full Site Colour Palette

Typography

Google Fonts was used to import the chosen fonts for use in the site.

Imagery

Wireframes

Wireframes were created for mobile, tablet and desktop with Balsamiq

Desktop | Tablet | Mobile |

Features

The website is comprised of:

  1. Home page. Home screenshot
  2. Movies page. Movies screenshot
  3. Food and drink page. Food and drink screenshot
  4. Games night page. Games Night screenshot
  5. Contact us page. contact screenshot
  6. 404 error page. 404 screenshot

All Pages on the website have:

  • A favicon icon. Favicon Icon

  • A responsive navbar. Navbar

  • A responsive footer. Footer

  • An interactive heart effect on click - this can be switched on or off in the footer. Heart interactive click effect

  • 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:

  1. Log in (or sign up) to Github.
  2. Go to the repository for this project, valentime.
  3. Click the Fork button in the top right corner.

How to Clone

To clone the repository:

  1. Log in (or sign up) to GitHub.
  2. Go to the repository for this project, valentime.
  3. Click on the code button, select whether you would like to clone with HTTPS, SSH or GitHub CLI and copy the link shown.
  4. Open the terminal in your code editor and change the current working directory to the location you want to use for the cloned directory.
  5. 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.

contact page w3c error

All 6 pages have now passed W3C validation checks.

W3C validator pass

The CSS on the site was tested using the Jigsaw W3C CSS Validator The CSS passed.

CSS validation

JavaScript Validator

JSHint

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.

Home Page Desktop |Mobile

Movies Page Desktop |Mobile

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

Solo Man | Couple | Group

Film Suggestions Images

Food & Drinks Page

Food & Drink Category Images

Cook It ! | Bake It ! | Shake It ! |

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

Broken Heart


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.

About

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 …

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • HTML 64.7%
  • JavaScript 20.1%
  • CSS 11.8%
  • Dockerfile 1.8%
  • Shell 1.6%