0% found this document useful (0 votes)
12 views5 pages

Digital Root Calculator Interface

The document is an HTML file for a web application titled 'LEADER ALOSH' that allows users to input a number and choose a direction (up or down) to calculate a series of future values based on the digital root of the input number. It includes styling for layout and buttons, as well as JavaScript functionality to handle user interactions and calculations. The application displays results dynamically based on user input and selected options.

Uploaded by

Ali Thaer Mutlaq
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
12 views5 pages

Digital Root Calculator Interface

The document is an HTML file for a web application titled 'LEADER ALOSH' that allows users to input a number and choose a direction (up or down) to calculate a series of future values based on the digital root of the input number. It includes styling for layout and buttons, as well as JavaScript functionality to handle user interactions and calculations. The application displays results dynamically based on user input and selected options.

Uploaded by

Ali Thaer Mutlaq
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

<!

DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LEADER ALOSH</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
box-sizing: border-box;
}
.container {
background-color: #fff;
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 400px;
text-align: center;
}
h1 {
color: #333;
margin-bottom: 25px;
font-size: 26px;
}
.input-group {
margin-bottom: 20px;
text-align: right;
}
label {
display: block;
margin-bottom: 8px;
color: #555;
font-weight: bold;
}
input[type="number"] {
width: calc(100% - 20px);
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 18px;
text-align: center;
}
.direction-selection {
margin-bottom: 20px;
text-align: right;
}
.direction-buttons {
display: flex;
justify-content: space-between;
gap: 10px;
}
.direction-button {
flex: 1;
padding: 10px 15px;
border: 2px solid #007bff;
border-radius: 5px;
background-color: #fff;
color: #007bff;
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease;
}
.[Link] {
background-color: #007bff;
color: #fff;
}
.direction-button:hover:not(.selected) {
background-color: #e9f5ff;
}
.action-buttons {
display: flex;
justify-content: space-between;
gap: 10px;
margin-bottom: 20px;
}
.calculate-button, .clear-button {
padding: 12px 20px;
border: none;
border-radius: 5px;
font-size: 18px;
cursor: pointer;
transition: background-color 0.3s ease;
flex: 1;
}
.calculate-button {
background-color: #28a745;
color: white;
}
.calculate-button:hover {
background-color: #218838;
}
.clear-button {
background-color: #dc3545;
color: white;
}
.clear-button:hover {
background-color: #c82333;
}
.result-container {
background-color: #e9ecef;
padding: 15px;
border-radius: 8px;
text-align: center;
white-space: pre-wrap;
word-wrap: break-word;
font-size: 18px;
color: #333;
border: 1px solid #ced4da;
}
.result-title {
font-weight: bold;
margin-bottom: 10px;
font-size: 20px;
color: #000;
}
</style>
</head>
<body>
<div class="container">
<h1>LEADER ALOSH</h1>

<div class="input-group">
<label for="numberInput">‫أدخل الرقم‬:</label>
<input type="number" id="numberInput" placeholder="3211 :‫>"مثال‬
</div>

<div class="direction-selection">
<label>‫اختر االتجاه‬:</label>
<div class="direction-buttons">
<button class="direction-button selected" id="upButton">‫صاعد‬
↑</button>
<button class="direction-button" id="downButton">‫<↓ هابط‬/button>
</div>
</div>

<div class="action-buttons">
<button class="calculate-button" id="calculateButton">‫<احسب‬/button>
<button class="clear-button" id="clearButton">‫<مسح‬/button>
</div>

<div class="result-container" id="resultContainer" style="display: none;">


<div class="result-title">‫النتائج المستقبلية‬:</div>
<pre id="resultText"></pre>
</div>
</div>

<script>
const numberInput = [Link]("numberInput");
const upButton = [Link]("upButton");
const downButton = [Link]("downButton");
const calculateButton = [Link]("calculateButton");
const clearButton = [Link]("clearButton");
const resultContainer = [Link]("resultContainer");
const resultText = [Link]("resultText");

let currentDirection = "up"; // Default

const sumDigits = (numStr) => {


return [Link]("").reduce((sum, digit) => sum + parseInt(digit,
10), 0);
};

const getDigitalRoot = (num) => {


while (num >= 10) {
num = sumDigits([Link]());
}
return num;
};
const getFamily = (digitalRoot) => {
if ([1, 4, 7].includes(digitalRoot)) {
return { operation: 120 };
}
if ([2, 5, 8].includes(digitalRoot)) {
return { operation: 150 };
}
if ([3, 6, 9].includes(digitalRoot) || digitalRoot === 0) {
return { operation: 180 };
}
return { operation: 0 };
};

[Link]("click", () => {
currentDirection = "up";
[Link]("selected");
[Link]("selected");
});

[Link]("click", () => {
currentDirection = "down";
[Link]("selected");
[Link]("selected");
});

[Link]("click", () => {
const inputVal = [Link];
if (!inputVal || isNaN(parseInt(inputVal))) {
alert("‫الرجاء إدخال رقم صحيح‬.");
return;
}

const originalNumber = parseInt(inputVal, 10);


const digitSum = sumDigits(inputVal);
const digitalRoot = getDigitalRoot(digitSum);
const { operation } = getFamily(digitalRoot);

let results = [];


let currentValue = originalNumber;

for (let i = 0; i < 10; i++) {


currentValue = currentDirection === "up"
? currentValue + operation
: currentValue - operation;
[Link](currentValue);
}

[Link] = [Link](" - ");


[Link] = "block";
});

[Link]("click", () => {
[Link] = "";
[Link] = "";
[Link] = "none";
currentDirection = "up";
[Link]("selected");
[Link]("selected");
});
</script>
</body>
</html>

You might also like