Skip to content
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

7-strings_dates_AndriiMorozov88 #341

Merged
merged 9 commits into from
Nov 20, 2023
Merged

7-strings_dates_AndriiMorozov88 #341

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
9f1ff8b
added calculation time
AndriiMorozov88 Nov 18, 2023
2c7d4e9
add time of function execution
AndriiMorozov88 Nov 18, 2023
426c128
added addAddition function, added negative numbers error
AndriiMorozov88 Nov 18, 2023
b2f950a
Merge branch 'main' into 7-strings_dates_AndriiMorozov88
AndriiMorozov88 Nov 18, 2023
60e4bee
Update logic.js
AndriiMorozov88 Nov 18, 2023
b0e36ad
removed unnecery console.log
AndriiMorozov88 Nov 18, 2023
7ff8eed
Merge branch '7-strings_dates_AndriiMorozov88' of https://github.com/…
AndriiMorozov88 Nov 18, 2023
42f6883
changed timeformat
AndriiMorozov88 Nov 20, 2023
0acf208
fixed format of date
AndriiMorozov88 Nov 20, 2023
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
167 changes: 57 additions & 110 deletions homeworks/andrii.morozov_AndriiMorozov88/GamesProject/scripts/logic.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,140 +4,87 @@ const operation = document.querySelector('[data-operation]');
const button = document.querySelector('[data-button]');
const resultContainer = document.querySelector('[data-result]');
const commentContainer = document.querySelector('[data-comment]');
const inputCardContainer = document.querySelector('[data-input-card]');
const resultCardContainer = document.querySelector('[data-result-card]');
const operatorContainer = document.querySelector('[data-operator]');
const secondOperandContainer = document.querySelector('[data-second-operand]');
resultContainer.innerText = 'Result';
function showCalcResult() {
function getDate() {
const currentDate = new Date();
const dateOptions = {
day: 'numeric',
month: 'short',
year: 'numeric',
};
return currentDate.toLocaleString('en-GB', dateOptions).replace(/ /g, '-');
}
function getTime() {
const currentDate = new Date();
const timeOptions = {
hour: '2-digit',
minute: '2-digit',
};
return currentDate.toLocaleString('en-GB', timeOptions);
}
function getAbsoluteTime() {
const date = new Date();
return date.getTime();
}
function getAddition(number) {
if (number <= 1) {
return 'game';
}
return 'games';
}
function showResult() {
const timeStart = getAbsoluteTime();
let result;
commentContainer.innerText = '';
commentContainer.classList.remove('comment-container--error');
const firstNumber = Number(firstNumberInput.value);
const secondNumber = Number(secondNumberInput.value);
if (firstNumberInput.value.trim() === '' || secondNumberInput.value.trim() === '') {
resultContainer.innerText = 'Error';
commentContainer.innerText = 'Enter a number';
commentContainer.classList.add('comment-container--error');
return;
}
if (Number.isNaN(firstNumber) || Number.isNaN(secondNumber)) {
resultContainer.innerText = 'Error';
commentContainer.innerText = 'Enter a number';
commentContainer.classList.add('comment-container--error');
return;
}
switch (operation.value) {
case '1':
result = firstNumber + secondNumber;
commentContainer.innerText = `${firstNumber} + ${secondNumber} = ${result}`;
break;
case '2':
result = firstNumber - secondNumber;
commentContainer.innerText = `${firstNumber} - ${secondNumber} = ${result}`;
break;
case '3':
result = firstNumber * secondNumber;
commentContainer.innerText = `${firstNumber} * ${secondNumber} = ${result}`;
break;
case '4':
result = firstNumber / secondNumber;
commentContainer.innerText = `${firstNumber} / ${secondNumber} = ${result}`;
break;
default:
result = firstNumber ** secondNumber;
commentContainer.innerHTML = `${firstNumber}<sup>${secondNumber}</sup> = ${result}`;
break;
}
if (firstNumber > 100) {
result = 'Error';
commentContainer.innerText = 'Enter a first number less then 100';
}
if (firstNumberInput.value.trim() === '' || secondNumberInput.value.trim() === '') {
result = 'Error';
commentContainer.innerText = 'Enter a number';
}
if (Number.isNaN(firstNumber) || Number.isNaN(secondNumber)) {
result = 'Error';
commentContainer.innerText = 'Enter a number';
}
resultContainer.innerText = `${result}`;
resultContainer.innerText = `${result} ${getAddition(result)}`;

if (result > 100) {
resultContainer.innerText = 'Error';
commentContainer.innerText = 'Too many games';
commentContainer.classList.add('comment-container--error');
return;
}
if (result < 0) {
resultContainer.innerText = 'Error';
commentContainer.innerText = 'Negative count of games is not possible';
commentContainer.classList.add('comment-container--error');
return;
}
resultContainer.classList.add('calculator__result--calc');
return result;
}
function getDataObject() {
const result = showCalcResult();
const firstNumber = Number(firstNumberInput.value);
const secondNumber = Number(secondNumberInput.value);
const operationType = operation.value;
const dataObject = {
result,
firstNumber,
secondNumber,
operationType,
fullInputColumns: Math.floor(firstNumber / 10),
lastInputColumn: Math.floor((firstNumber % 10)),
fullResultColumns: Math.floor(result / 10),
lastResultColumn: Math.floor((result % 10)),
};
return dataObject;
}
function getImageColumn(amount) {
let top = 0;
const imageContainer = document.createElement('div');
imageContainer.classList.add('card-container__column');
for (let count = 0; count < amount; count++) {
const card = document.createElement('div');
card.classList.add('card-container__card');
card.style.top = `${top}px`;
top += 20;
imageContainer.append(card);
}
return imageContainer;
}
function get10ImagesColumn() {
return getImageColumn(10);
}
function showHalfCard() {
const halfCard = document.createElement('div');
halfCard.classList.add('card-container__card--half');
return halfCard;
}
function showCards() {
inputCardContainer.innerHTML = '';
resultCardContainer.innerHTML = '';
operatorContainer.innerHTML = '';
secondOperandContainer.innerHTML = '';
resultCardContainer.classList.remove('card-container__cards--error');
const dataObject = getDataObject();
if (dataObject.result !== 'Error') {
for (let count = 0; count < dataObject.fullInputColumns; count++) {
inputCardContainer.append(get10ImagesColumn());
}
inputCardContainer.append(getImageColumn(dataObject.lastInputColumn));
if (!Number.isInteger(dataObject.firstNumber)) {
inputCardContainer.append(showHalfCard());
}
if (dataObject.result < 100) {
for (let count = 0; count < dataObject.fullResultColumns; count++) {
resultCardContainer.append(get10ImagesColumn());
}
resultCardContainer.append(getImageColumn(dataObject.lastResultColumn));
if (!Number.isInteger(dataObject.result) && dataObject.result > 0) {
resultCardContainer.append(showHalfCard());
}
} else {
resultCardContainer.innerText = 'Too many games';
resultCardContainer.classList.add('card-container__cards--error');
}
secondOperandContainer.innerText = `${dataObject.secondNumber} = `;
switch (dataObject.operationType) {
case '1':
operatorContainer.innerText = '+';
break;
case '2':
operatorContainer.innerText = '-';
break;
case '3':
operatorContainer.innerText = '*';
break;
case '4':
operatorContainer.innerText = '/';
break;
default:
operatorContainer.innerText = '^';
break;
}
}
for (let count = 0; count < 10000000; count++);
const timeFinish = getAbsoluteTime();
commentContainer.innerText = `Date of calculation: ${getDate()}, ${getTime()}. Time of function execution: ${timeFinish - timeStart} ms`;
}
button.addEventListener('click', showCards);
button.addEventListener('click', showResult);
52 changes: 6 additions & 46 deletions homeworks/andrii.morozov_AndriiMorozov88/GamesProject/styles/calculator.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@
min-width: 100px;
height: 50px;
font-size: 20px;
padding: 0 5px;
justify-content: center;
align-items: center;
color: #C9C2C2;
Expand Down Expand Up @@ -60,54 +61,13 @@
height: 50px;
justify-content: center;
align-items: center;
font-size: 48px;
font-weight: 600;
color: #E35734;
margin: 0 auto;
font-size: 32px;
font-weight: 400;
}

.card-container {
display: flex;
justify-content: center;
}

.card-container__cards {
display: grid;
grid-template-columns: repeat(4, 80px);
grid-template-rows: repeat(3, 270px);
}

.card-container__cards--rtl {
direction: rtl;
}

.card-container__cards--error {
display: flex;
font-size: 80px;
.comment-container--error {
font-size: 48px;
font-weight: 600;
color: #E35734;
}

.card-container__column {
position: relative;
}

.card-container__card {
position: absolute;
background-image: url("../images/game_img.png");
width: 70px;
height: 80px;
}

.card-container__card--half {
background-image: url("../images/game_img.png");
background-repeat: no-repeat;
height: 40px;
}

.card-container__operation {
display: flex;
justify-content: center;
min-width: 100px;
font-size: 80px;
margin-right: 20px;
}