Skip to content

Improve website functionality #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
webdevsalmann wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Improve website functionality #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
100 changes: 65 additions & 35 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,49 +1,79 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Thala For A Reason</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="./styles.css">
</head>

<body>
<div id="confetti-container" class="js-container container" style="top:0px !important; display:none;"></div>

<h1>Thala For A Reason</h1>

<div id="container">
<h1>Thala For A Reason</h1>
<div id="tabs">
<button class="tab active" onclick="showTab('oneDigit')">One Digit</button>
<button class="tab" onclick="showTab('twoDigits')">Two Digits</button>
<button class="tab" onclick="showTab('threeDigits')">Three Digits</button>
</div>

<div id="oneDigit" class="tabContent">
<input type="text" id="singleDigit" placeholder="Type the Lucky number">
<button onclick="checkOneDigit()">Submit</button>
</div>

<div id="twoDigits" class="tabContent" style="display: none;">
<input type="text" id="firstDigit" placeholder="First Lucky number">
<input type="text" id="secondDigit" placeholder="Second Lucky number">
<button onclick="checkTwoDigits()">Submit</button>
</div>

<div id="threeDigits" class="tabContent" style="display: none;">
<input type="text" id="digitOne" placeholder="First Lucky number">
<input type="text" id="digitTwo" placeholder="Second Lucky number">
<input type="text" id="digitThree" placeholder="Third Lucky number">
<button onclick="checkThreeDigits()">Submit</button>
</div>
<div id="link-icons" style="text-align: center; margin-top: 20px;">
<a href="https://github.com/ankitkat042/ThalaForAReason" aria-label="Homepage" class="footer-octicon" title="GitHub">
<svg aria-hidden="true" class="octicon octicon-mark-github" height="24" version="1.1" viewBox="0 0 16 16" width="24"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path>
</svg>
</a>
<script data-name="BMC-Widget" data-cfasync="false" src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js" data-id="ankitkat" data-description="Support me on Buy me a coffee!" data-message="" data-color="#5F7FFF" data-position="Right" data-x_margin="18" data-y_margin="18"></script>
<div class="card">
<div class="tab-container" id="tabs">
<button class="btn tab active" data-tab="oneDigit">One Digit</button>
<button class="btn tab" data-tab="twoDigits">Two Digits</button>
<button class="btn tab" data-tab="threeDigits">Three Digits</button>
</div>

<div class="tab-content-container">
<div class="heading">Enter your favourite number</div>

<div id="oneDigit" class="tabContent active">
<input type="text" id="one-digit-i1" placeholder="Your favourite number">
<button class="btn btn-submit" onclick="checkOneDigit()">Submit</button>
</div>

<div id="twoDigits" class="tabContent">
<input type="text" id="two-digit-i1" placeholder="First">
<input type="text" id="two-digit-i2" placeholder="Second">
<button class="btn btn-submit" onclick="checkTwoDigits()">Submit</button>
</div>

<div id="threeDigits" class="tabContent">
<input type="text" id="three-digit-i1" placeholder="First">
<input type="text" id="three-digit-i2" placeholder="Second">
<input type="text" id="three-digit-i3" placeholder="Third">
<button class="btn btn-submit" onclick="checkThreeDigits()">Submit</button>
</div>
</div>

<div class="explaination-container"></div>

<div class="result-box hidden">
<p class="heading">Thala for a reason</p>
<div class="result-container">
<div class="img-box">
<img src="./thala.jpg" alt="Thala Image">
</div>
</div>
</div>

<div id="link-icons" style="text-align: center; margin-top: 20px;">
<a href="https://github.com/ankitkat042/ThalaForAReason" aria-label="Homepage" class="footer-octicon"
title="GitHub">
<svg aria-hidden="true" class="octicon octicon-mark-github" height="24" version="1.1"
viewBox="0 0 16 16" width="24">
<path fill-rule="evenodd"
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z">
</path>
</svg>
</a>
<script data-name="BMC-Widget" data-cfasync="false"
src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js" data-id="ankitkat"
data-description="Support me on Buy me a coffee!" data-message="" data-color="#5F7FFF"
data-position="Right" data-x_margin="18" data-y_margin="18"></script>
</div>
</div>
</div>

<script src="script.js"></script>

<audio id="success-sound" src="music.mp3" preload="auto"></audio>
<script defer src="script.js"></script>
</body>
</html>

</html>
207 changes: 112 additions & 95 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,114 +1,131 @@
// Function to show a tab
function showTab(tabName) {
// Hide all tab content
var tabcontent = document.getElementsByClassName("tabContent");
for (var i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}

// Remove 'active' class from all tabs
var tablinks = document.getElementsByClassName("tab");
for (var i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}

// Show the current tab, and add an "active" class to the button that opened the tab
document.getElementById(tabName).style.display = "block";
document.getElementById(tabName + "Tab").className += " active";
const tabs = document.querySelectorAll('.tab');
const tabContentContainers = document.querySelectorAll(".tabContent")
const resultBox = document.querySelectorAll(".result-box")[0]
const explanationContainer = document.querySelector('.explaination-container');
const targetProduct = 7;


// TAB HANDLER
tabs.forEach(tab => { tab.addEventListener("click", handleTabClick) });
function handleTabClick(event) {
// Remove all active tabs and tab-content
tabs.forEach(tab => { tab.classList.remove('active') });
tabContentContainers.forEach(item => { item.classList.remove('active') });

// Add active class on selected tabs and tab-content
event.target.classList.add('active');
const selectedTabContainer = document.getElementById(event.target.getAttribute('data-tab'));
selectedTabContainer.classList.add("active");

// Clear the explanation container
clearExplanationContainer();
}

// Function to check if the number(s) sum to 7
function checkDigits(digits, tabName) {
var sum = digits.reduce(function(a, b) { return parseInt(a) + parseInt(b); }, 0);

if (sum === 7) {
showCongratulations(tabName);
} else {
showAlert('Try again!', tabName);
showAlert('hint: addition of numbers', tabName);
// =========================================================================
// FUNCTION TO CONVERT ANY LENGTH OF INPUTED NUMBERS TO SUM UP TO 7
// =========================================================================
// Function to clear the explanation container
function clearExplanationContainer() {
explanationContainer.innerHTML = '';
}

// Add paragraph to the explanation container
async function addPara(text) {
const p = await document.createElement("p");
p.innerText = text;
await explanationContainer.appendChild(p);
}

// Handle Output at the end
function handleResultOutput() {
resultBox.classList.remove("hidden")
// // Play the success sound
// var sound = document.getElementById('success-sound');
// sound.play();
setTimeout(() => {
resultBox.classList.add("hidden")
}, 5000);
}


// conditions
async function meetInputConditions(numbers) {
if (numbers.length === 0) {
const msg = await 'Please enter at least one number.';
await alert(msg);
return await false;
} else if (numbers.some(item => isNaN(item))) {
await alert('Please enter numbers only.');
return await false;
}
return await true;
};

// get total of all numbers
async function sumNumbers(arr) {
return await arr.reduce((a, b) => a + b, 0);
}

// Function to show congratulations message
function showCongratulations(tabName) {
var tab = document.getElementById(tabName);
tab.innerHTML = '<div class="animate__animated animate__zoomIn">' +
'You Guessed It Correct!<br>' +
'Thala for a reason❤' +
'</div>';

// Play the success sound
var sound = document.getElementById('success-sound');
sound.play();

setTimeout(function() {
tab.innerHTML = '';
// Reset tab content after animation
setupTabContent(tabName);
}, 5000); // Display the message for 5 seconds
// handle number if it is less than 7
async function handleLessThanSeven(num) {
const multiplier = await targetProduct / num;
await addPara(`If we multiply ${num} by ${multiplier.toFixed(2)}, \n the result we get is 7.`);
await handleResultOutput();
return await num * multiplier;
}

// Function to show alert message
function showAlert(message, tabName) {
var tab = document.getElementById(tabName);
tab.innerHTML = '<div class="animate__animated animate__shakeX">' +
message +
'</div>';
setTimeout(function() {
tab.innerHTML = '';
setupTabContent(tabName);
}, 2000); // Display the alert for 2 seconds
// handle number if it is greater than 7
async function handleGreaterThanSeven(num) {
const divisor = await num / 7;
await addPara(`If we divide ${num} by ${divisor.toFixed(2)}, \n the result we get is 7.`);
await handleResultOutput();
return await num / divisor;
}

// Setup tab content after the congratulations or alert message
function setupTabContent(tabName) {
if (tabName === 'oneDigit') {
document.getElementById(tabName).innerHTML = '<input type="text" id="singleDigit" placeholder="Type the Lucky number">' +
'<button onclick="checkOneDigit()">Submit</button>';
} else if (tabName === 'twoDigits') {
document.getElementById(tabName).innerHTML = '<input type="text" id="firstDigit" placeholder="First number">' +
'<input type="text" id="secondDigit" placeholder="Second number">' +
'<button onclick="checkTwoDigits()">Submit</button>';
} else if (tabName === 'threeDigits') {
document.getElementById(tabName).innerHTML = '<input type="text" id="digitOne" placeholder="First number">' +
'<input type="text" id="digitTwo" placeholder="Second number">' +
'<input type="text" id="digitThree" placeholder="Third number">' +
'<button onclick="checkThreeDigits()">Submit</button>';

const getNumSeven = async (num) => {
if (num < 7) {
return await handleLessThanSeven(num);
} else if (num > 7) {
return await handleGreaterThanSeven(num);
} else {
return await handleResultOutput();
}
}

// Event listeners for the submit buttons
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('oneDigitTab').addEventListener('click', function() {
showTab('oneDigit');
});
document.getElementById('twoDigitsTab').addEventListener('click', function() {
showTab('twoDigits');
});
document.getElementById('threeDigitsTab').addEventListener('click', function() {
showTab('threeDigits');
});

setupTabContent('oneDigit');
setupTabContent('twoDigits');
setupTabContent('threeDigits');
});

// Functions to check digits on submit
// HANDELING USER INPUT MUTATION TO GET NUMBER SEVEN
async function mutateUserInput(numbers, tabId) {
clearExplanationContainer();

// Check if the array meets input conditions
if (!await meetInputConditions(numbers)) { return; }

// get total value of all the numbers
const sumNum = await sumNumbers(numbers);
if (sumNum !== targetProduct) {
addPara(`On adding all the numbers, we get ${sumNum}.`);
}
await getNumSeven(sumNum);
}




// FUNCTIONS TO GET THE NUMBER SEVEN
function checkOneDigit() {
var digit = document.getElementById('singleDigit').value;
checkDigits([digit], 'oneDigit');
const inputOne = document.getElementById('one-digit-i1').value;
mutateUserInput([parseInt(inputOne, 10)], 'oneDigit');
}

function checkTwoDigits() {
var firstDigit = document.getElementById('firstDigit').value;
var secondDigit = document.getElementById('secondDigit').value;
checkDigits([firstDigit, secondDigit], 'twoDigits');
const inputOne = document.getElementById('two-digit-i1').value;
const inputTwo = document.getElementById('two-digit-i2').value;
mutateUserInput([parseInt(inputOne, 10), parseInt(inputTwo, 10)], 'twoDigits');
}

function checkThreeDigits() {
var digitOne = document.getElementById('digitOne').value;
var digitTwo = document.getElementById('digitTwo').value;
var digitThree = document.getElementById('digitThree').value;
checkDigits([digitOne, digitTwo, digitThree], 'threeDigits');
}
const inputOne = document.getElementById('three-digit-i1').value;
const inputTwo = document.getElementById('three-digit-i2').value;
const inputThree = document.getElementById('three-digit-i3').value;
mutateUserInput([parseInt(inputOne, 10), parseInt(inputTwo, 10), parseInt(inputThree, 10)], 'threeDigits');
}
Loading