ajohnson819 Goto Github PK

I wanted to create a volunteer webpage that made it easy to volunteer for projects. The idea came from a church event. We wanted to create a meal plan, but several websites that I saw were not very helpful. One of the first things I did was create a static page using basic HTML5 and CSS3. It was fun.

##Instructions for viewing my project. The HTML page is called 'volunteer.html' instead of 'index.html'. Simply pull the repo and view it in your IDE or save the file on your computer and upload the webpage.

#Some of the features to enjoy include being able to modify the heading, adding a to-do list, see a neat carousel, play tic-tac-toe, and view today's date.

#JavaScript I learned how to implement a carousel for fun and to meet the animation requirement. The carousel also utilizes the nth-child property.

I also wanted to try my hand at the DOM and JS, so I added a way to change the color of the main heading.

I looked up a tutorial on youtube that Ania Kubow had done on tic-tac-toe. I modified it and had fun adding the tic-tac-toe board, as it was by far the greatest JavaScript challenge. I asked the mentors how to set up the win-scenario and they walked me through it.

The game really showed me how far I needed to go in JS. The to-do list features JavaScript again. It was challenging as was the game, and the mentors really came in clutch here.

The queries rearrange the fill-out form as the screen sizes vary. I used the var, let and const declarations throughout the website as needed, and to fulfill the requirements.

To fulfill the populate JS form/operation, I have included a way to change the heading color.

The carousel required a little bit of trigonometry configuration in order to get the best rotation.

Lastly, I added a mathmatical operation and a drag operation. It is a random number generator that sends out an alert for a range, and responds to the user with a random number. I chose to give an alert, as this was novel to the website.

The drag operation was more tricky, and I had to look up a tutorial but learned a lot. I tried the text feature, and then I switched it to a ball.

#CSS As for CSS accessibility requirements, I decorated the buttons so that it had contrast. (Originally, the page was to be smokey with a lot of greys however it did not have enough contrast. I changed a few of the paragraph's color to blue or green, depending on the screen size.)

I implemented the nth-child property in the carousel to fulfill the requirement.

For the navigation requirement, I created a fun page where the visitor can play tic-tac-toe and/or return to the main page.

The link for tic-tac-toe was changed to blue, but different than the 'show date' button. I implemented Display: flex throughout, as flexbox is simply the easiest and most efficient way to lay out my page.

There are 4 media queries, starting with the cell phone width. What queries modify is the form field, and the paragraphs change colors.

#HTML The structure is straightforward and entirely within flexbox using the CSS feature display:flex. To implement the date and time button, I wrote a function within the head tag.

I also implemeted the function for the fill-out form within the script element towards the bottom of the page, instead of using JavaScript.

I also implemented the link to the JS page before the closing body tag so the page would load smoothly.