The site's puprose is to provide information on general canine health. Be that physical, mental or social. Through a series of responsive questionaires we evalute dietery needs and optimal excercise duration. We also provide 'the four keys' which address the most common mistakes involving socialising a dog. The aim is to help onwers learn through simple changes they can make to their pets everyday life. There is a repeated drive for users to sign up to our newsletter for further engagement.
What separates the site from others is our 'Pet First' approach. Above all else our goal is wider awaremness of the simple things we can all do to improve our pet's life.
Our Secondary objective is to grow a community using added value and pulling from external partners to offer a varied range of services to those in need of more than the basic information.
A live version can be found here
- Dynamic Front End Project: Write custom JS, HTML, and CSS code to create a front-end application of more than one page with significant interactive functionality.
- Achieved - The site has 5 pages. Index & Socialsation have minor JS, while Excercise and Feeding guide have more substantial interactivity via guides.
- Site Responses: Use JS to have the site produce relevant responses dependant on users' actions.
- Achieved - Both the feeding guide and excercise guide respond to user input selections from drop downs, and directly from typed input.
- Documentation: Write a 'README' file for your project that explains what the project does and the value it provides.
- Achieved - Overview of project outline in the 'Project aim' section.
- Write JS code that cycles through data and handles incoreect user entires, and store non-trival code in external sources using all applicale readability standards suchs as indentation and comments where needed.
- Achieved - Both guides deploy if/else loops and conditional responses via text messages or class changes depending on user interaction.
- Design an implement manual testing with screen shots for verification, and fully document the project's start and end/ fully developed journey using a README.md file.
- Achieved - Manual testing is outlined below, and further testing/validation was carried out utilises W3C validators along with Chrome's lighthouse feature.
- Deploy finalised version to GitHub with clearly distinguishable comments where external sources were used.
- Achieved - deployed
- All code must pass code validators such as W3C and Jshint.
- Achieved - results in the validation section below.
The website is targeted at dog owners in need of advice and initially directs them to the three most common problems.
- Weight issues.
- Energy levels.
- Behaviour.
The site offers simple first steps to tackle each issue and offers increased help if needed via social media pages.
In terms of scope the current site was kept conscise so as not to overwhelm already worried owners.
"My pet is over weight, even though I'm feeding him exactly what his food says I should."
"The site provides some simple facts on feeding, and an interactive guide on how much the user's pet's protein needs with a further option to provide food weigh in grams based on the user's current food type."
"My dog is overly agressive towards other dogs, regardless of their size, and I'm afarid they'll get hurt, or hurt someone else."
"The site provides 'the four keys' to help with socialising your pet." The link for socialsation is displayed clearly on the landing page.
"I walk my dog everyday but they still have boundless energy, and when I leave them alone they destroy furniture and anythign else they can get a hold of."
"The site provides information on exercise utilising a list of facts, a snippet of our own experiance and a quick, helpful guide to demonstrate how long a dog should be walked based on some user inputs."
In keeping with the uncomplicated approach agreed upon in our Scope plane, the initial wireframes were created with consistency in mind so each advancing page's style follows the previous.
Overall the site is responsive and scales with user screen size.
The site follows a correlating scheme or colours (Custom Purple #f75ce8, Custom Blue #93bef7, Cutsom Green #c6f7a9, Custon Orange #f7ce77 and some bootstrap basics like primary, info and success classes ). These colours are interchanged periodically to avoid visual fatigue.
- Header : Navigation collapse when needed on smaller screens so as not to clutter mobile decives. An active class is appled to current user pages.
- Index : The welcome message changes depending on the time of the day. Colourful cards are deployed to draw the users attention.
- Excercise : Firstly we debunk commonly held beliefs, and provide an interactive guide. Utilising Jquery for show/hide, text changes and calculations.
- Socialsation: Again we utilise cards to organise the four keys to successful socialisation. Utilising Jquery for show/hide and text changes.
- Feeding Guide: Mirroring the Excercise page, we debunk misnomers and provide an interctaive guide. Utilising Jquery for show/hide, text changes and calculations.
- Contact Us : We outline our newsletter benefits and proivide a sign up form with working Email.js, and Modal to verify message sent.
- Footer : Links provided to fictional social medias.
- A large form which encompasses diet, excercise and some socialisation tricks which would take longer to fill out but may yield better user results.
- A shop element to utilise refferal links for equipment, toys and books reviewed and rated by our social media community.
- HTML-For basic structure.
- CSS-For styling and required Media Query outside of Bootstrap.
- JavaScriprt
- Email.JS
- Jquery
- W3C validator-Used in testing HTML and CSS.
- JsHINT-Used for Java Script validation.
- GitHub -For deployment.
- GitPod -IDE.
- Bootstrap (including JQuery) -Utilized for responsiveness via columns, buttons and navbars.
- Google Fonts -Used for primary font employed throughout. Lato.
- Visual Studio -For offline work.
- Font Awesome - For icons.
- Google Chrome's Responsive Viewer found here
- Google Chrome's lighthouse function.
-
Header Links
- Header links are housed in a BootStrap Nav Collasable Bar on each page.
- Home
- Excercise Guide
- Socialsation (The Four Keys)
- Feeding Guide
- Contact Us
- All links when selected lead to the assigned pages.
- Header links are housed in a BootStrap Nav Collasable Bar on each page.
-
Footer Links
- Footer links are housed in a Bootstrap Container to ensure correct sizing. Font size is set to zero using media queries so the footer remains neat on small screens.
- Donate
- All links open in a new tab as expected.
- Footer links are housed in a Bootstrap Container to ensure correct sizing. Font size is set to zero using media queries so the footer remains neat on small screens.
-
Index Page
- Contains eight internal links mirroring the options available from the navigation bar.
- Diet
- Excercise
- Socialsation
- Contact Us
- The links when selected navigates the user to the intended pages.
- Contains eight internal links mirroring the options available from the navigation bar.
- Guides / Forms are found on both the Excercise Guide page and the Feeding Guide page.
- Exercise Guide
- The Gender, and Neutered inputs are optional, though both create response based messages when selected.
- For Example on the Feeding Guide 'Oh who's a good boy !' appears if male is selected. (Text colour changes via AddClass methods based on gender)
- A selected Gender also shows a hidden input requesting the pet's name. Once populated the following questions are populated with the inputted name.
- If a Neutered option is selected it creates two messages (coloured again depending on selection)
- The first appears under the Neutered option. The second appears only once a weight option is selected.
- The weight input is required for any output in the final line. Upon selection it populates the final output with a custom response based on input in the form of minutes per day.
- Resseting Gender and Neutered to the 'make selection' options removes generated messages and the name option input box, but does not clear any previously inputted name.
- The reset button removes all entries and added classes.
- The Neutered option also influences the Final output by reducing the minutes needed by 10%. A message further conveys this to the user.
- Feeding Guide
- As with the excercise guide both Gender and Neutered options are not required for calculations, but both create custom messages, while only gender may influence the final output by 10% up or down.
- Upon gender selction a new input is shown which requests the pet's name, this input is then used to customise the following questions.
- The weight option is required for the Daily Protein needs output to user.
- Food bag size, and current protein range, as well as weight, are both required to populate the Final output.
- Populating just bag size, or just protein range, or both will not generate any output. A weight selection is needed.
- Populating a weight selction, and either bag size OR protein range will not generate a final output.
- Exercise Guide
I used Google Chrome's Responsive Viewer found here. The following are exerts from three tests.
| Page | Performance | Accessibility | Best Practise | Seo |
|---|---|---|---|---|
| Index | 93 | 93 | 100 | 90 |
| Exercise Guide | 94 | 96 | 100 | 78 |
| Socialsation | 93 | 93 | 100 | 78 |
| Feeding Guide | 93 | 96 | 100 | 78 |
| Contact Us | 93 | 84 | 100 | 89 |
Note: Lighthouse proposed other fixes but most were beyond my capability.
Using W3C validator both HTML and CSS were checked by direct input. Issues arising were promptly corrected.
Using JShint
- Warnings relating to the use of 'let' to declare variables and the use of template literal's for older versions. The script was not amended to address these, as I wasn't sure how relevant the warnings were.
The project was developed using GitPod workspace, committed to git and pushed to GitHub using the built in function within Gitpod. To deploy this page from the GitHub respository, the following steps were taken.
- Log in to GitHub.
- From the list of repositories on screen select 'A-Better-Puppers'.
- Select Settings from the menu.
- Scroll down to GitHub Pages
- Under Source click the dropdown menu labelled none and select the Master Branch.
- On selecting Master Branch the is automatically refreshed, the website is now deployed.
- A link can be found in the GitHub pages section, and also in the about section within A-Better-Puppers.
- Link to site
-
Go to GitHub Repository: A-Better-Puppers
-
Select 'Code' dropdown button (next to green 'gitpod' button).
-
These are your three options Clone-Options.
- Copy the URL to your local IDE such as Visual Studio.
- Intsall GitHub desktop.
- Download the Zip file and use with local IDE such as Visual Studio.
- Some text was taken from the following sites.