Web Development Project using HTML, SCSS and JS
- General
- Vanilla JS only
- Github public Repository
- Commit every requirement
- Layout
- Mobile layout structured using given template
- Screen 1
- All quizzes given by the API's server must be listed
- User quizzes list must show only the ones they created, while the list below must not contain these user quizzes
- Quizzes layout according to template on Figma. Upon clicking on a quizz, first screen must give place to second screen
- Upon Clicking on "Create Quizz", first screen must give place to third screen
- Screen 2 (questions)
- Quizz banner according to template
- Answers to each question must be listed randomly
- After clicking on an answer, the rest must have a "dimmed" filter
- User must not be able to change answer after they have made a choice
- After choosing an answer, colors of the text below of each answer must change to red or green, depending on if it is the correct or incorrect answer
- 200 milliseconds after choosing, screen must scroll to next question
- Screen 2 (end of quizz)
- After responding all questions, quizz's final result must be shown and screen must scroll to it
- Quizz's points (percentage of hits) must be calculated in front-end, as well as the quizz's level the user landed on
- Title, image and description of the level the player landed on must be shown
- Score must be rounded
- Upon clicking "Restart Quizz", screen must screen to the beginning, all answers must be zeroed-out, and results hidden
- Upon clicking "Home Page", second screen must be given place to first screen
- Upon clicking the background, sidebar must close
- Screen 3
- Quizz creation has 4 sections, and on each, before advancing to next screen, validations to input infos must be made, as in:
- Screen 3.1: Quizz basic info
- Quizz title: between 20 to 65 characters
- Image URL: must be a valid URL
- Number of questions: 3 questions minimum
- Number of levels: 2 levels minimum
- Screen 3.2: Quizz questions
- Questions text: 20 characters minimum
- Background color: must be a hexadecimal code
- Answer's image URL: must be a valid URL
- Correct answer and at least one incorrect answer must be filled out
- Screen 3.3: Quizz Levels
- Level title: 10 characters minimum
- Mininum hit percentage: a number between 0 and 100
- Level's image URL: must be a valid URL
- Level description: 30 characters minimum
- At least one level must have a hit mininum of 0%
- Screen 3.1: Quizz basic info
- If validation fails, an alert must be shown, alerting the user to fill the data correctly
- After finishing the quizz's creation and saving it to serverm user must view screen 3.4. In this screen, user may click on "Acess Quizz" button to visualize the quizz they have created (screen 2), or return to home page (screen 1)
- When user returns to home page, the page must be updated to show newly created quizzes
- Quizz creation has 4 sections, and on each, before advancing to next screen, validations to input infos must be made, as in:
- Screen 3
- Server will resppond with an object containing an ID unique to the user-created quizz
- Created quizz's ID must be stored in local storage
- On screen 1, these user-created quizz's IDs must be compared to quizzes sent by server
- Deploy
- Deploy to Github Pages
- Bonus (optional)
- Bonus 1: Delete quizz
- Button to allow user to delete an existing quizz that belongs to them
- Upon clicking the button, a confirmation pop-up must be shown
- After confirmation, quizz must be deleted from server and user's quizzes must be listed once again
- Bonus 2: Edit quizz
- Button to allow user to edit an existing quizz that belongs to them
- Upon clicking the button, a screen identical to quizz creation screen must be shown, with filled out sections acordding to current quizz. User may change inputs and each section must be validated
- After finishing the edit, if they return to home page, user's created quizzes must be listed once again
- Bonus 3: Loading screens
- Quizzes list loading
- Quizz loading
- Create/edit/delete quizz loading
- Bonus 4: Show validation errors
- Each validation error must have an unique alert below them shown
- Bonus 1: Delete quizz
In this section I included all Youtube content I used or refered to while studying for this project. Keep in mind that most of these videos contain information that was not previously studied during class, which may affect some parts of the code that contain these extras.
