Assignment-2 Soo Shan Jing & Koh Sheng Yao

Member Allocation

Koh Sheng Yao: Home webpage, quiz webpages, cart webpage, store webpage Soo Shan Jing: Prolocation webpage, Tictactoe webpage, login webpage , store webpage

GITHUB DEPLOYMENT

https://esesjay.github.io/Assignment-2/

Proame Game And Store Website:

Introducing the ultimate gaming and shopping destination - the website that brings together all the fun and excitement of quizzes, geography, strategy and more! Our website features a wide range of games that will keep you entertained for hours. From the thrill of BuzzFeed-style quizzes that test your knowledge and challenge your intellect, to the excitement of Geoguesser-style games that put your geography skills to the test, we have it all.

For those who love a good challenge, our website also features classic strategy games such as Tic Tac Toe. With its simple yet addicting gameplay, Tic Tac Toe is a timeless classic that is perfect for players of all ages.

And if you're looking for a one-stop-shop which have our apparels available.So why wait? Sign up for our website today and start playing! Whether you're a quiz master, a geography buff, or a strategy master, we've got you covered. Join us now and discover the ultimate gaming and shopping destination.

DESIGN PROCESS:

As a user type we would want to use this website as an entertainment. There are quizzes available for kpop fans, zodiac believer and food lovers so as one of them i would like to try out the quiz and find out more about myself through the quiz. There is also games like prolocation which is for users who are a geography experts or fanatics. If i was a geography experts or fanatics i will defintely play this game to test my geography skills. There is also Tictactoe for Tictactoe lovers to play. Finally as a user who love games, these users will be able to purchase game make by this website in the store.

Framework link for Home webpage and mobile:https://xd.adobe.com/view/c8ef69a9-1f6c-44d4-86f3-bcc3f6dc705b-9dbc/

Framework link for Prolocation webpage and mobile:https://xd.adobe.com/view/b8a7ff47-289c-4634-be3b-9bd522391b5d-edf4/

Framework link for Quiz 1, 2, 3 and 4 webpage and mobile:https://xd.adobe.com/view/60438ae1-80c3-4910-82df-7332bb67f137-3510/

Framework link for Store webpage and mobile:https://xd.adobe.com/view/70a871d2-6c3f-42aa-a07f-9fc19bc7b6c4-25fb/

Framework link for Tictactoe webpage and mobile:https://xd.adobe.com/view/eb82effa-8ba4-4e49-9efc-2165dd38d718-bed1/

Framework link for Cart webpage:https://xd.adobe.com/view/f504760e-1b8b-4897-80a8-132912104d2e-a057/

FEATURES:

1. We have a sign up page for new users to register for an account.
2. After registering for one account, you can try to log in and if the information matches the database you will be brought to the home page as a logged in user. Users can logout anytime they want.
3. In the Tictactoe webpage, there is Tictactoe for 2 users to play.
4. In the prolocation website, there is a country guesser game where a picture is randomly generated and user can type into the input box to guess the country.
5. In the quiz webpage, for every quiz there are 5 questions for the users. Each question contains 4 boxes for user to choose 1. After completing the 5 questions the quiz will decide the answer based on the question chose by the user.
6. In the store webpage users can purchase merchandise.

Technology used

1. Javascript
2. Cascading Style Sheet
3. Google fonts
4. Adobe XD
5. RestDB API
6. Lottie animation

TESTING:

1. Prolocation webpage i.For every correct country guessed it will say Correct!! and state the score. ii. For every wrong country guessed it will say Wrong!! and state the score.

2. Tictactoe webpage i.When 'X' wins the game, an alert will pop up and say that X has won. After pressing the Okay button, it resets the game. ii. When 'O' wins the game, an alert will pop up and say that O has won. After pressing the Okay button, it resets the game. iii. When 'O' and 'X' draws the game, an alert will pop up and say draw!!.After pressing the Okay button, it resets the game.

3. Store Webpage i.When you click on the add to cart you can select the quantity beforehand, it is capped to 5 per add to cart. After clicking on add to cart an alert will be shown to the user which restates the details of the product the user has added to cart.

4. Cart Webpage i.After adding to cart, in the cart webpage it will display the item details. There is a checkout below which user can fill in their information and also their card details. After checking out, an alert will pop up informing the user on its successful purchase.

CREDITS:

MEDIA:

1.https://www.planetware.com/photos-large/CH/switzerland-matterhorn.jpg 2.https://cdna.artstation.com/p/assets/images/images/039/318/236/large/tokyo-ninja-kawaii-untitled2.jpg?1625569397 3.https://img.traveltriangle.com/blog/wp-content/uploads/2016/07/Vietnam-cover_9th-Mar.jpg 4.https://d.newsweek.com/en/full/1865970/statue-liberty.jpg 5.https://www.planetware.com/photos-large/ENG/uk-best-places-london.jpg 6.https://www.planetware.com/photos-large/S/sweden-stockholm-gamla-stan-stortorget.jpg 7.https://www.planetware.com/wpimages/2022/05/spain-top-attractions-barcelonas-sagrada-familie-and-gaudi-sites.jpg 8.https://www.planetware.com/wpimages/2022/05/spain-top-attractions-barcelonas-sagrada-familie-and-gaudi-sites.jpg 9.https://www.planetware.com/wpimages/2019/10/russia-moscow-top-attractions-red-square-cathedral.jpg 10.https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.worldatlas.com%2Farticles%2Fchichen-itza-a-major-tourist-attraction-in-mexico.html&psig=AOvVaw09ak2p0Oowq3GEgRAjXxag&ust=1676045591951000&source=images&cd=vfe&ved=0CBAQjRxqFwoTCLD35cLqiP0CFQAAAAAdAAAAABAD 11.https://www.destguides.com/dynamic-files/itinerary/503/background-image-4x3.jpg 12.https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.inspiringtravel.co.uk%2Fother-shores%2Fexplore%2Ftop-tourist-attractions-australia%2F&psig=AOvVaw1gVWiX7rVKFrlcEoHPztKv&ust=1676045610991000&source=images&cd=vfe&ved=0CBAQjRxqFwoTCOj7-svqiP0CFQAAAAAdAAAAABAD 13.https://www.planetware.com/photos-large/BRA/brazil-rio-cristo-redentor.jpg 14:https://www.google.com/url?sa=i&url=https%3A%2F%2Fhousing.com%2Fnews%2Fcanada-tourist-places-to-visit%2F&psig=AOvVaw3L2e0Md7kMgRGeWHWz_b43&ust=1676045605829000&source=images&cd=vfe&ved=0CBAQjRxqFwoTCLiBscnqiP0CFQAAAAAdAAAAABAD 15:https://images.chinahighlights.com/allpicture/2021/09/cf92f6ba0a924549bda4d8cf_cut_800x499_238.jpg 16:https://www.planetware.com/photos-large/F/france-paris-eiffel-tower.jpg 17:https://d3hne3c382ip58.cloudfront.net/files/uploads/bookmundi/resized/cmsfeatured/germany-tourist-attractions-1513251736-785X440.jpg 18:https://www.planetware.com/wpimages/2019/11/india-best-places-to-visit-agra.jpg 19:https://www.planetware.com/photos-large/I/italy-colosseum-day.jpg 20:https://wallpaperaccess.com/full/8351171.gif 21:https://i.pinimg.com/originals/bd/56/5d/bd565dcc0a556add0b0a0ed6b26d686e.gif

ACKNOWLEDGEMENTS:

I have received inspiration for this project from buzzfeed website for my quizzes webpage, geo-guesser website for Prolocation webpage. The link to the buzzfeed website: https://www.buzzfeed.com/quizzes , geo-guesser website https://www.geoguessr.com/.