GIT417 Project Requirements:
~HTML/CSS Specific Requirements~
-Must be fixed at 1280px.
-Must Include authentic content (no placeholder content)
~JavaScript Requirements~
-Include a control and the proper functionality to allow the user to choose whether to display your site in light or dark mode
-A contact form. This should have at least these inputs:
full name (or first and last name separately)
phone number
email address
comments
a radio set that allows the user to choose whether they'd like to be contacted by phone or email.
The name(s) and comments should be required, and the choice of how the user would like to be contacted should require either the phone or email (depending on what the user chose). The form should validate the required fields on submit (using regex, at least for the email and phone) and it should use the valid user info to create an object (customer) when the form is valid and submitted. Errors in the form should display to the user next to the input with the error and should be descriptive and noticeable. When the form is complete and submitted properly, the form should reset and display a message to the user thanking them for their submission, with the info they submitted, pulled from the object you created.
-When viewing your site in the browser, no errors should be visible in the console.
-Add the async or defer attribute to your script tag in the header to prevent errors on page load with the JS.
-Your JS should "use strict"; globally
~Main JavaScript Functionality~
-Product Display - This would be a section of your page that allows the user to view some of the available products or services this company offers one at a time, by clicking on a control that includes the product name. Each "product" must include a name, image, and short description (at least a sentence or two) that is displayed when chosen. One product will display by default on page load, and only one product should ever display on screen at a time.
-Game Play - This section will most likely make sense as a sort of "contest" for the user. There will be an input where the user enters a number between 1 and 10. You will generate a random number that you display to the screen (with that the user guessed), and either declare them a winner (their guess matches the random number) or ask them to try again (their guess does not match the random number). You don't have to actually do anything when they "win" except say that they won.
~General Requirements~
-ALL of your files, including any JS, HTML or CSS should be well organized, properly indented, well-commented, and appropriate (in terms of content and layout).
~Behance Requirements~
-Project requirements
-What the requirements inspired you to create
-An explanation of the goals/purpose/users of the site
-The steps you took when building the site (include any mockups or wireframes or brainstorming documents - wireframes will be required, mockups are optional). These should include: discovery/goals/content gathering, design, writing the code, testing the site design and code, final look/functionality
-The tools you used, sources of images and other assets (include these in code comments too to be safe)
-Explanation of the next steps you would take and/or what you would do to add to or change the site with more time, what you struggled with, what you enjoyed the most, etc.
Inspirations:
When we were given the opportunity to do a website on our own subject matter, I was instantly excited. I am a small streamer who hardly uploads, but the subject matter has always been very interesting to me. I am heavily influenced in my styling by space themes. The requirements gave me an excellent vision of the silly Easter eggs that I could hide within the project such as the products worth millions of dollars.
Goals/Purpose:
The goal of this website is to provide an additional source of marketing for my streams. The site will be used on my various streaming accounts to combine content and distribute it all in one place.
Original Mockup Images:
Discovery/goals/content gathering: My goals were to bring all sources of streams to one site. I gathered my links and embedded content from all three streaming sites.
Design: The designs were to be simple and easy to look at without adding a ton of elements. Since I am a small streamer, my identity and style isn't well established yet.
Writing the code: The code was fairly simple to create as I didn't have a ton of moving parts. My site was mostly information based, so I didn't have to include a lot of moving parts outside of the requirements for the site.
Testing the site design and code: Testing the code was the most stressful part as I frequently ran into problems with my code that had to be adjusted. I also gathered opinions and testing from friends whom I showed the site and the feedback wasn't great at first. Lots of code was adjusted and changed over the week.
Final look/functionality: I overall wasn't thrilled with the overall look of the site when completed. The functionality works well, but I wish I hadn't decided to go so simple in design as it doesn't stand out much. It was very basic and didn't have a massive wow factor. It did accomplish the goal I set out of being informational. It was also easy to navigate between my streaming platforms using the site, so I did accomplish my initial goal.
Tools Used: HTML/CSS, JavaScript, Github, AI Image generation tools (Each image is linked to the specific site used).
Next Steps: I overall enjoyed the experience of building the site. Troubleshooting could get extremely frustrating, but I was always excited when I managed to solve the problem. I am hoping to have more content to add to the site as I branch out and start creating more content in my free time. I am hoping to eventually remove the AI generated images and add actual products that I could sell on my site. I also am hoping to implement a shopping cart function.
Background Images Used
Icons Used:
Product Images
Fonts Used:
Colors Used
Videos / Content Utilized:
