diff --git a/index.html b/index.html index 130420b..1b00ef3 100644 --- a/index.html +++ b/index.html @@ -1,49 +1,79 @@ + Thala For A Reason - - + + + +

Thala For A Reason

+
-

Thala For A Reason

-
- - - -
- -
- - -
- - - - - - - + + - + + \ No newline at end of file diff --git a/script.js b/script.js index 62f8b69..ae5e53d 100644 --- a/script.js +++ b/script.js @@ -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 = '
' + - 'You Guessed It Correct!
' + - 'Thala for a reasonā¤' + - '
'; - - // 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 = '
' + - message + - '
'; - 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 = '' + - ''; - } else if (tabName === 'twoDigits') { - document.getElementById(tabName).innerHTML = '' + - '' + - ''; - } else if (tabName === 'threeDigits') { - document.getElementById(tabName).innerHTML = '' + - '' + - '' + - ''; + +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'); +} \ No newline at end of file diff --git a/styles.css b/styles.css index 66e7b94..6402b9a 100644 --- a/styles.css +++ b/styles.css @@ -1,154 +1,209 @@ +:root { + --bg: #FAFAFA; + --bg-light: #FAFAFA; + + --grey: #afafaf; + + --white: #FFFFFA; + --black: #101010; + + --light: #FAFAFA; + --dark: #303030; + /* primary */ + --p: #3b82f6; + --safe: #22c55e; +} + body { - font-family: 'roboto', sans-serif; - background-color: #f4f6f8; + font-family: Arial, Helvetica, sans-serif; + /* background: linear-gradient(135deg, #3498db, #9b59b6); */ margin: 0; padding: 0; + min-height: 100vh; + background: rgb(254, 240, 138); + background: linear-gradient(149deg, rgba(254, 240, 138, 1) 0%, rgba(234, 179, 8, 1) 50%, rgba(202, 138, 4, 1) 100%); +} + +/* ===================================================================================== +UTILITY +======================================================================================== */ +input { + padding: .5rem .8rem; + outline: transparent; + border-radius: 4px; + border: 1px solid var(--grey); +} + +input:focus { + outline: 2px solid var(--p); +} + + +.btn { + padding: .5rem .8rem; display: flex; justify-content: center; align-items: center; - height: 100vh; + font-weight: 600; + text-transform: capitalize; + + border: none; + background: transparent; + cursor: pointer; + border-radius: 4px; + outline: 1px solid var(--dark); + border: transparent; + transition: background-color 0.3s; } -#container { - box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); - transition: 0.3s; - width: 30%; /* You can adjust the width as needed */ - border-radius: 10px; - background-color: white; - padding: 20px; - overflow: hidden; /* This ensures that nothing spills out of the container */ +.btn:focus { + outline: 2px solid var(--p); } h1 { - color: #333; + /* width: 100%; */ + color: var(--dark); text-align: center; - margin-top: 20px; - margin-bottom: 40px; } -#tabs { + +/* ===================================================================================== +CARD CONTAINER +======================================================================================== */ +#container { display: flex; - justify-content: space-around; - margin-bottom: 20px; - border-bottom: 2px solid #dee2e6; + justify-content: center; + align-items: center; } -.tab { - padding: 10px 20px; - cursor: pointer; - border: none; - background-color: grey; - border-radius: 5px; - transition: background-color 0.3s, color 0.3s; +.card { + padding: .5rem; + margin: 1rem; + width: 30%; + border-radius: .5rem; + background-color: var(--light); + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); + transition: 0.3s; + overflow: hidden; } -.tab.active, .tab:hover { - background-color: #007bff; - color: white; +/* ================================ +TAB HEADER +================================ */ +.tab-container { + padding: 1rem .2rem; + display: flex; + gap: 1rem; + justify-content: space-between; + border-bottom: 2px solid var(--grey); + overflow-x: scroll; +} + +.tab.active, +.tab:hover { + background-color: var(--p); + color: var(--light); +} + +/* ================================ +TAB BODY +================================ */ +.tab-content-container { + padding: 1rem; +} + +.tab-content-container .heading { + font-size: large; + font-weight: bold; } .tabContent { - display: flex; + padding: .5rem 0; + display: none; flex-direction: column; - align-items: center; - justify-content: center; - text-align: center; - padding: 20px; - height: 250px; /* Fixed height for consistency */ - overflow-y: auto; /* Adds scroll to the container if content overflows */ + gap: 1rem; + overflow-y: auto; } -.tabContent input[type="text"] { - margin-bottom: 10px; /* Space between input boxes */ + +.tabContent.active { + display: flex; } -.tabContent button { - margin-top: 20px; /* Space above the submit button */ + +.tabContent input { + margin: 0 auto; + width: 60%; } -input[type="text"] { - margin: 0 5px; - padding: 10px; - border: 1px solid #ddd; - border-radius: 5px; - transition: border-color 0.3s; + +.btn-submit { + width: fit-content; + margin: auto; } -input[type="text"]:focus { - border-color: #007bff; +.btn-submit:hover { + background: var(--safe); + color: var(--light); } -button { - padding: 10px 20px; - border: none; - background-color: #28a745; - color: white; - cursor: pointer; - border-radius: 20px; - transition: background-color 0.3s; + +/* ================================ +EXPLAINATION CONTAINER +================================ */ +.explaination-container { + padding: 1rem; + padding-top: 0; } -button:hover { - background-color: #218838; + +/* ================================ +RESULT BOX +================================ */ +.result-box { + position: relative; + display: block; } -#oneDigit, #twoDigits, #threeDigits { - padding: 10px; +.result-box.hidden { + display: none; } -#oneDigit input[type="text"], -#twoDigits input[type="text"], -#threeDigits input[type="text"] { - margin-right: 5px; /* Spacing between input fields */ - margin-bottom: 5px; /* Spacing between input fields and the submit button */ + +.result-box .heading { + font-size: large; + font-weight: bold; + text-align: center; } -#oneDigit button, -#twoDigits button, -#threeDigits button { - width: auto; /* Adjust width as necessary, or use auto for content-based width */ + +.result-container { + position: relative; + margin: 0 auto; + padding: .5rem; + border-radius: .5rem; + border: 1px solid var(--dark); + overflow: hidden; } -@media only screen and (max-width: 768px) { - body { - align-items: flex-start; - padding-top: 20px; - } - #container { - width: 90%; - margin-top: 20px; - } +.result-container .img-box { + display: flex; + justify-content: center; + align-items: center; +} - h1 { - margin-top: 10px; - margin-bottom: 20px; - font-size: 1.5em; - } +.result-container .img-box img { + width: 100%; + height: 100%; + object-fit: contain; +} - .tabContent { - height: auto; - } - .tab { - font-size: 0.9em; - } - input[type="text"] { - width: 80%; - } - button { - width: auto; +/* RESPONSIVENESS */ +@media only screen and (max-width: 768px) { + .card { + width: 100%; } + #link-icons { flex-direction: column; - gap: 10px; + gap: 10px; } -} - - -body { - font-family: 'roboto', sans-serif; - margin: 0; - padding: 0; - display: flex; - justify-content: center; - align-items: center; - height: 100vh; - background: linear-gradient(135deg, #3498db, #9b59b6); -} +} \ No newline at end of file diff --git a/thala.jpg b/thala.jpg new file mode 100644 index 0000000..c68ba27 Binary files /dev/null and b/thala.jpg differ