Looking for a new hobby? Do you have an interest in sewing? Unsure of sewing terminology? You've reached the right place! Sew Bug Tips is a site which provides SEWING 101 information with images, fabric terminology, reference links and sew much more!
While learning how to code HTML, CSS and JavaScript I was tasked with creating a project to demonstrate my coding skills. I choose to create a site focused on my hobby - sewing! This site is intended to help anyone interested in sewing, but may feel a little intimated by the jargon. In version 1.0, the site focus was on fabric precuts. In version 2.0, the site includes additional JavaScript to display information as referenced below. It also includes a new page which converts inches to cm. The contact us form inputs will now be saved and the phone number field is now a required field with validation in regular expression.
Sew Bug Tips Version 2.0 - Date 3/16/2022
Hi 👋, I'm Kim Wolf - A novice coder learning how to become a front-end web developer
🔭 I’m currently working on a project to create a website titled SewBugTips
🌱 I’m currently learning HTML, CSS & JavaScript
💬 Ask me about quilting! Did I mention I love to sew?
📫 How to reach me: SewBug66@yahoo.com
👨💻 My current project is available at SewBugTips.com which will redirect to https://kimbug29.github.io/SewBugTips2 Or in Github at https://github.com/KimBug29/SewBugTips2.git
GENERAL USAGE NOTES The website is built using HTML5, CSS and JavaScript.
Sew Bug Tips Version 2.0 - Date 3/16/2022 Version 2.0 is a responsive design site with the following project requirements:
- Three media queries, including sizes for mobile, tablet and laptop/desktop - THANKS page displays a different sized image on mobile - also several sections adjust images based on screen display sizes
- Project is specifically named and uploaded in GitHub
- A README file with at least one paragraph explaining the project and listing of project requirements included
- Feature 1 - Read and parse an external JSON file into your application and display some data from that file into your app - Refer to preCuts.json for the external information which is displayed in the the PRECUT IMAGES section
- Feature 2 - Create an array with multiple values, retrieve at least one value and use or display it in your application - Refer to preCuts.js which now displays content in the PRECUT IMAGES section
- Feature 3 - Implement a regular expression (regex) to ensure a phone number field is always stored and displayed in the same format [Use of pattern attribute which takes a regular expression to validate the phone number input] - Refer to Contact Us form - specifically the phone input field
- Feature 4 - Build a conversion tool that converts user input to another type and displays it - Refer to the FABRIC PRECUTS section
- Feature 5 - Calculate and display data based on an external factor [Get current date and display how many days remaining until an event] - Refer to the EXPO section to view the countdown clock
- Feature 6 - Create and use a function that accepts two or more values (parameters), calculates or determines a new value based on those inputs, and returns a new value - Refer to functions used to calculate date
Sew Bug Tips Version 1.0 - Date 12/4/2021 Version 1.0 is a responsive design site with the following project requirements:
- Three media queries, including sizes for mobile, tablet and laptop/desktop - THANKS page displays a different sized image on mobile - also several sections adjust images based on screen display sizes
- Project is specifically named and uploaded in GitHub
- A README file with at least one paragraph explaining the project and listing of project requirements included
- CSS Feature 1 - Flexbox to organize content - PRECUT IMAGES section
- CSS Feature 2 - Use of ".nth-child" to change background color for every other row in table - FABRIC PRECUTS section
- JavaScript Feature 3 - Used in responsive navigation hamburger menu - SITE NAVIGATION
- JavaScript Feature 4 - Contact Us form, with two validation fields - both name and email are required fields. Also, a Thanks html page which allows user to view their name and email address submission from the CONTACT US FORM
- Multiple additional feature items from any of the project list requirements: a) Contact us form resizes from horizontal to vertical based on screen size b) Images within the 'About' section allow site visitors to "zoom" c) Site contains different sections with background color changes in sections d) Navigation background changes on mouse-over e) Web Accessibility Compliance Report included in GitHub in PDF format f) Includes favicon on both pages g) Hyperlinks to external pages, LinkedIn, Code Kentucky and GitHub
Contact information regarding this site: Developer: Kim Wolf Email: SewBug66@yahoo.com
Copyright 2022 SewBugTips. All rights reserved.