Cossio landscaping project
In this project we needed to create a website with some features. First, we had to add a product switcher that way people could easily look at our different products like hats, shirts, and mugs. Then we had to make a guessing game where users could guess a number between 1 and 10. If the user guessed right they'd see a message saying they won. Finally, we needed a form where users could input their information like their name number or email, and comments . Project also required a dark mode button.
The requirements had asked that we make up or use an actual company or topic but I decided on making up a company that will hopefully start this summer. It would be a father son business and we would be offering landscaping services to Arizona. My father has always told me how he wanted to have his own landscaping services and had asked me before to look into the legal requirements such as getting licensed, bonded, and insured. We would still need those requirements but I was inspired to make this site that would ask the user for their information and we would contact them about setting up an estimate. I did not include services in the products simply because there isn't a set amount for each service it always depends on the property and workload. That being said the form just makes sense to have so we could get the clients information and then contact them to set up an estimate.
The purpose of this site is to be the first step in starting a business with my father. This project is a step forward in both our goals and it also serves as a great piece to add to the portfolio. I was planning on using this actual site for when our business goes up since we would like to have the same features. The guessing game could be used as a "win the game and get 10% off " but I don't think he wants to miss out on money.
The steps I took to build the actual site was to first start with a rough wireframe just to have an idea of how the content will fit on a 1280 wide site. The links that would take you to reviews and about do not function but they were added just to make the navigation bar more filling. The dark mode button was added at the top but there was thoughts of having it be sticky so it follows the user but there isn't really a need to switch from light mode to dark mode while the user is scrolling and it would just be in the way.
I found this royalty free palm trees that I decided on using since we do specialize in trimming and skinning palm trees. The logo was made in photoshop and the name would simply be our last name and landscaping. After making the logo the products on the site would be a branded shirt, branded hat, and a mug. There was issues getting the palm trees logo on the products without having them get blurry so it was best to just have the company but there is plans in having a shirt with a pocket and having only the palm trees on it. The process of writing the code started with the HTML first and making sure not to use inline CSS or inline JavaScript. The HTML for header was made then the navigation bar follow by the dark mode, contact form, products switcher, and guessing game which was followed by the footer. Afterwards the appropriate CSS was applied to the features and made to match the company color. The JavaScript was coded in the respective order of the way the features were laid out.
For the form, the submitForm function handled the submission of a contact form which prevented default behavior to enable manual processing. It retrieves the user inputs such as their full name, phone number, email, and comments, determining the preferred contact method via radio buttons. Using regular expressions it validated input values, tracking form validity with a boolean. Error or success messages are displayed based on form validity which would then provide feedback to users. Finally, an event listener is added to the form for submission, invoking submitForm to ensure the data was valid before submission.
The product switcher code defines an array `products` which contains objects representing different products, each with a name, image filename, and description. The `initProductSwitcher` function initializes a product switcher feature on the webpage. It selects product buttons and elements displaying product information and setting the initial product to the first one in the array. Event listeners are added to each product button, triggering the `showProduct` function to display the corresponding product's details when it is clicked. The `showProduct` function updates the product name, image source, and description based on the selected product object. Lastly the `initProductSwitcher` function is called to set up the product switcher functionality once the page loads.
The guessing game code initializes a guessing game feature on the site. It defines a function initGuessingGame responsible for setting up the game. Within this function, it selects various elements such as the form input field for the guess, error message display, and game result display.
An event listener was then added to the form to listen for submissions. When the form is submitted the function prevents the page from refreshing. It then retrieves the guess input value and converts it to an integer. If the input is not a number between 1 and 10, it displays an error message. It then generates a random number between 1 and 10.
The function then updates the game result display to show the user's input and the random number. Lastly it determines whether the guess matches the random number and displays an appropriate message indicating whether the user won or lost.
The initGuessingGame function is called to set up the guessing game functionality when the page loads.
I struggled with keeping track of closing curly brackets. I had issues finding which bracket was missing and would just keep restarting to get the slate clean which ultimately was not a good idea. Something about not being able to find the missing semicolon just made me want to reset everything which fixed some features but then would break others. If I were to do it over I wouldn't restart so much and go with my gut feeling. I really wanted to add a way for users to upload a picture of their property so we could get a sense of what they wanted but the current clients my father has are retired older folks who can't do the work on their own or don't have the time. That being said there is concern that most if not all are not tech-savy and would probably not know how to give the site permission to access their camera or gallery. We would invest in a business line and that number to the site but for the time being none of us felt comfortable putting our phone number on it so the form was actually a really helpful feature for both sides.
Overall making this provided a fun learning experience that really helped me understand what our business site would look once we start it. It also helped me understand that there is more than one way to crack an egg but finding the most efficient way is very important.
