Skip to content

Commit

Permalink
Merge pull request #49 from mehaksmansoori/main
Browse files Browse the repository at this point in the history 
commit for history button
  • Loading branch information
@Akanchha112
Akanchha112 authored Jan 21, 2024
2 parents 8dbe8c2 + 6596b51 commit 26652f2
Show file tree
Hide file tree
Showing 5 changed files with 125 additions and 20 deletions.
3 changes: 3 additions & 0 deletions .vscode/settings.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5501
}
18 changes: 18 additions & 0 deletions SPINNER.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@

function showSpinner() {
var spinner = document.getElementById("spinner");
if (spinner) {
spinner.style.display = "block";
}
}

// Function to hide the spinner
function hideSpinner() {
var spinner = document.getElementById("spinner");
if (spinner) {
spinner.style.display = "none";
}
}
showSpinner();
setTimeout(hideSpinner, 3000);

18 changes: 18 additions & 0 deletions index,js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@

const scores = [
{ date: "2024-01-06", score: 80 },
{ date: "2024-01-05", score: 75 },
// Add more scores as needed
];

// Function to display score history
function displayScoreHistory() {
const scoreList = document.getElementById("score-list");
scoreList.innerHTML = ''; // Clear existing list

scores.forEach((entry) => {
const listItem = document.createElement("li");
listItem.textContent = `Date: ${entry.date}, Score: ${entry.score}%`;
scoreList.appendChild(listItem);
});
}
91 changes: 71 additions & 20 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,75 @@
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Kviz: A quiz app</title>
<link rel="icon" href="./assets/logo-kviz.jpg" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div id="home" class="flex-center flex-column">
<h1>Kviz</h1>
<div class="flex-row">
<a class="btn" href="/Dark/index.html">Dark Theme</a>
<a class="btn" href="/Light/index.html">Light Theme</a>
</div>
</div>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Kviz: A quiz app</title>
<link rel="icon" href="./assets/logo-kviz.jpg" />
<link rel="stylesheet" href="style.css" />
<style>
/* Add some basic styling for the score history */
#score-history {
display: none;
}
</style>
</head>
<body>
<div class="container">
<div id="home" class="flex-center flex-column">
<h1>Kviz</h1>
<div class="flex-row">
<a class="btn" href="/Dark/index.html">Dark Theme</a>
<a class="btn" href="/Light/index.html">Light Theme</a>
<a class="btn" href="#" onclick="toggleScoreHistory()">Score History</a>
</div>
</div>

<!-- <script src="toggle.js"></script> -->
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- ... (your existing head content) ... -->
<script src="index.js"></script>
</head>
<body>
<!-- ... (your existing body content) ... -->

<!-- Score History Section -->
<div id="score-history">
<h2>Score History</h2>
<ul id="score-list"></ul>
</div>
</body>
</html>
<!-- ... (your existing JavaScript) ... -->
<script>
// Function to toggle the visibility of the score history
function toggleScoreHistory() {
var scoreHistory = document.getElementById("score-history");
scoreHistory.style.display = (scoreHistory.style.display === 'block') ? 'none' : 'block';

// Call the function to display score history when showing it
if (scoreHistory.style.display === 'block') {
displayScoreHistory();
}
}
</script>
<!-- ... (your existing JavaScript) ... -->


<!-- Spinner Loader -->
<div id="spinner" class="spinner"></div>

<!-- Uncomment the script if you want to use it -->
<!-- <script src="toggle.js"></script> -->
<script src="SPINNER.js"></script>

<script>
// Function to toggle the visibility of the score history
function toggleScoreHistory() {
var scoreHistory = document.getElementById("score-history");
scoreHistory.style.display = (scoreHistory.style.display === 'block') ? 'none' : 'block';
}
</script>
</body>
</html>
15 changes: 15 additions & 0 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -214,3 +214,18 @@ input {
input::placeholder {
color: #aaa;
}
.spinner {
border: 4px solid rgba(0, 0, 0, 0.1);
border-top: 4px solid #3498db;
border-radius: 50%;
width: 30px;
height: 30px;
animation: spin 1s linear infinite;
display: none; /* Initially hidden */
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

0 comments on commit 26652f2

Please sign in to comment.