Skip to content

🎨 This project serves as a practical demonstration of styling techniques utilizing the Tailwind CSS framework, highlighting its capabilities in efficiently designing and formatting web content.

Notifications You must be signed in to change notification settings

paulinasiwko/Code-Quiz

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

20 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Code-Quiz

GitHub top language

Description

The aim of this project is creating code for a timed Friends Quiz with multiple-choice questions using JavaScript.

By maintaining this deployed webpage, I aim to present a comprehensive overview of my work and make it easy for others to connect with me.

This application operates within the browser environment, with HTML dynamically updated using jQuery. Styling has been implemented using Tailwind.

Usage

A dataset is composed of an array with questions and answers. For each question only one answer is correct.

I am using an even listener on a button to start the quiz and the timer. If the user choose a correct answer, the game will show another question. If the user choose an incorrect answer, 10 seconds are substracted from the clock. The quiz is over when all questions are answered or the timer reaches 0. When the quiz is over, the user can enter their initials. After clicking on 'Submit' button, the user will see all the highscores. I am using local storage to store all user's initials and scores. After clicking on 'Clear Highscores' button, local storage is cleared.

After opening the code in the browser the resulting analysis looks as following:

A screenshot of the deployed application

The URL of deployed application.

Technologies Used

  • JavaScript
  • Tailwind
  • HTML
  • jQuery
  • ghPages

Credits

Use of localStorage for highscores was inspired by this tutorial.

About

🎨 This project serves as a practical demonstration of styling techniques utilizing the Tailwind CSS framework, highlighting its capabilities in efficiently designing and formatting web content.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published