I use the software Atom, the assignment is coding using HTML, JAVAscript, and CSS. I dont need the assignment to be perfect...also, I just need someone to send me the code and I can copy and paste it on my local machine on Atome and submit it. Thanks
1/5 Tic Tac Toe Submitting a website url or a file upload Assignment Overview Your final JavaScript program of the semester will pull all the pieces together. You're going to create a simple two player Tic Tac Toe game. Related Lecture(s) Module 5: Lecture #6 - Bringin' it all Together with Tic Tac Toe Module 5: Lecture #7 - Wrap up Tic Tac Toe Basic Content Part 1 - File Structure 1. Create a project folder called "tic-tac-toe" on your local machine. 2. Make sure that inside of the "tic-tac-toe" folder you have the following items: 1. img folder 2. css folder 3. js folder 4. index.html file 3. Make sure that the index.html file links off to your JavaScript file inside of the js folder 4. Make sure that the index.html file links off to your CSS file inside of the css folder 5. Once you've build the page, upload the entire "tic-tac-toe" folder to the htdocs folder on your server 6. Put a link to this program on your site's home page Basic Content Part 2 - Functionality 1. Create an HTML page that display's a Tic Tac Toe grid 2. Ask for player one's name (use prompts or HTML Form) 3. Ask for player two's name (use prompts or HTML Form) 4. Display a message on the page that says "Joe's Turn" (or whatever player one's name is) 5. Let "Joe" take his turn by clicking on a square in the grid 6. Mark it with an X (or O) 7. Display a message on the page that says "Sue's Turn" (or whatever player two's name is) 8. Let "Sue" take her turn by clicking on a square in the grid https://slcc.instructure.com/courses/610036/pages/module-5-lecture-number-6-bringin-it-all-together-with-tic-tac-toe https://slcc.instructure.com/courses/610036/pages/module-5-lecture-number-7-wrap-up-tic-tac-toe 2/5 9. Mark it with an O (or X) 10. Continue alternating until there is a winner or a tie 11. Display a message declaring the winner (or tie) 12. Add a Play Again button that functions as follows: It only appears after the game is over It disappears once they click it If they click play again, the game starts over without requiring them to re-enter their names. 13. Users should not be able to click in a square that has already been marked 14. Note that ALL messages need to be displayed in the DOM (on the HTML page) not in an alert pop up box. 15. We will go over the "check for a win" code in class Basic Content Part 3 - Customization The version done together in class is plain and has no personality. Turning in an assignment that looks as "sad" and plain as mine will result in no more than a final score of 75% (could be less). Take the time to give your site a theme or a look and feel that is unique This can be done in many ways: Change the markers from X's and O's to images Change the look of the board and the location of it Choose unique fonts and colors Create a theme (e.g., Mario Bros, Star Wars, Marvel, Anime, etc.) Also, regardless of theme, be sure to use good layout sense: Proper spacing (padding & margin) Proper colors (beware of font colors that don't blend well with the background colors) Proper fonts (be sure that fonts aren't too small or hard to read due to size or style or color) Additional Content Correctly implement at least 2 of the following items: Create a score board on the screen that displays the total number of wins for each player and the total number of ties* Use a web form (rather than prompt()s) to get the player names* Play a "happy sound" when someone wins and a "sad sound" when there's a tie. Allow the users to choose their avatar (i.e., the image they'll use for their marker) from a list of avatars* Change the color of the three winning X's or O's (or the squares) on the game board once the game is won (see sample below)* *Note: The mere existence of this item is not enough. It needs to be styled and demonstrated that effort and thought was put into the style and layout Sample: Highlighting Winner Tic Tac Toe Assignment Rubric Submission Upload the direct link to the tic-tac-toe program folder (NOT your home page) to this assignment by the due date. Add a submission comment that lists which "Additional Content" items you chose. Copy and paste the exact items that you chose to do and paste the copied items as a submission comment. Failure to do this will result in 0 points for the "Additional Content" points. IMPORTANT: Upload the validation screen shot. Click here for details. MAKE SURE YOU READ THE RUBRIC BEFORE SUBMITTING! Note: All submissions (validation image(s) and web URL) must be done as "submissions" not comments. *** If the program does not run, the grade will be zero points *** https://slcc.instructure.com/courses/610036/pages/validating-your-web-code Criteria Ratings Pts 25 pts 30 pts 40 pts 10 pts Submitted on time Completed Assignment turned in before the due date/time (not the "until" time). 25 pts Full Marks 0 pts No Marks Basic Content Correctly Implemented all parts of the "Basic Content" with no Syntax or nesting errors in HTML, CSS or JS. 1) Structure 2) Functionality 3) Customization 30 pts Completed all 3 of the 3 "Basic Content" elements Completed all 3 of the 3 (Structure, Functionality, & Customization) required "Basic Content" elements. 20 pts Only Completed 2 of the 3 "Basic Content" elements Only completed 2 of the 3 (Structure, Functionality, & Customization) required "Basic Content" elements. 10 pts Only Completed 1 of the 3 "Basic Content" elements Only completed 1 of the 3 (Structure, Functionality, & Customization) required "Basic Content" elements. 0 pts Only Completed 0 of the 3 "Basic Content" elements Completed 0 of the 3 (Structure, Functionality, & Customization) required "Basic Content" elements. Additional Content Correctly implemented (at least) the minimum number of the "Additional Content" items. 40 pts Full Marks 20 pts 1 of 2 Additional Content Items Completed 0 pts 0 of 2 Additional Content Items Completed Items must be done and a copy-paste of the items done must be in the comments. If the comment is not there, 0 points will be awarded. As per the instructions, the comment must be present to get credit for the "Additional Content" Passed HTML validation with No errors and No warnings. Screen Shot of web page passing validation from https://validator.w3.org/LinksLinksLinks (https://validator.w3.org/LinksLinksLinks) to an external site. to an external site. to an external site. was submitted. 10 pts Full Marks 0 pts Did not properly follow validation instructions Click on the "details" link under the "submission" section in the instructions. 0 pts No Marks https://validator.w3.org/LinksLinksLinks 5/5 Total Points: 125 Criteria Ratings Pts 10 pts 10 pts 0 pts Proper Spacing The site demonstrates the proper spacing (i.e., padding, and margin). Elements have content that looks well spaced and is not "squished". Elements are not too crowded and close to each other. 10 pts Full Marks 0 pts No Marks Correct URL Submission Format The URL submitted must match the exact form as explained in the assignment instructions. 10 pts Full Marks 0 pts No Marks Extra Mile Bonus Points Those students who take the initiative to go above and beyond (not by a little bit, but by a lot) can possibly earn a couple of bonus points. Note: If any part of the "Basic Content" or "Additional Content" assignment is missing (or done incorrectly), bonus points will not be awarded. 0 pts Full Marks 0 pts No Marks