Skip to content

Commit

Permalink
Homework 7.5 - Strings, Dates
Browse files Browse the repository at this point in the history 
- Updated the calculate() function from task #5 to return a string indicating the number of games. If the result is greater than 1, the plural form "games" is returned.
- Updated the JSDoc for the function to accurately reflect the return value.
- Integrated the calculator page into the project. The page is added as calculator.html to the project folder.
- Added links to the calculator page on all other pages of the site.
- Added styles for the calculator.
  • Loading branch information
@LotusElize
LotusElize committed Nov 25, 2023
1 parent 4cb4ff9 commit a6bd368
Show file tree
Hide file tree
Showing 7 changed files with 774 additions and 438 deletions.
107 changes: 107 additions & 0 deletions homeworks/taras.bobov_LotusElize/GamesProject/calculator.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="description" content="this page about games">
<meta name="keywords" content="game,gamer,news">
<link rel="stylesheet" type="text/css" href="./css/style.css">
<link rel="stylesheet" type="text/css" href="./css/calculator.css">
<title>Games project</title>
</head>

<body>
<header>
<div class="container logo-menu">
<a href="index.html">
<img src="./images/logo.png" alt="Logo" class="logo">
</a>
<nav>
<ul class="menu">
<li>
<a href="calculator.html">Calculator</a>
</li>
<li>
<a href="games.html">Games</a>
</li>
<li>
<a href="index.html">About</a>
</li>
<li>
<a href="login.html">Login</a>
</li>
</ul>
</nav>
</div>
</header>
<main class="site-main calculator-game-main container">
<section class="calculator-mini">
<div class="calculator-game-main__title">
<h1 class="cal-main__heading">Calculate Games</h1>
</div>
<div class="calculator-game-main__field">
<div class="calc-max">
<div class="max">max 10</div>
<div class="min">max 100</div>
</div>
<div class="calculator">
<label class="calculator__label">
<input class="calculator__input-number" id="firstValue" type="text">
</label>
<label>
<div class="calculator-drop__down">
<select class="calculator__select" name="operation" id="operation">
<option value="+">+</option>
<option value="-">-</option>
<option value="/">/</option>
<option value="*">*</option>
<option value="**">**</option>
</select>
</div>
</label>
<label class="calculator__label">
<input class="calculator__input-number" id="secondValue" type="text">
</label>
<button class="calculator__btn" id="calculate" type="button">=</button>
<span class="calculator__result" id="result"></span>
</div>
</div>
</section>
<section class="calculator-large">

</section>
</main>
<footer>
<div class="container footer-social__info">
<div class="social-media">
<ul>
<li>
<a href="#">
<img src="./images/fb-soc-ico.svg" alt="Facebook">
</a>
</li>
<li>
<a href="#">
<img src="./images/link-soc-ico.svg" alt="LinkedIn">
</a>
</li>
<li>
<a href="#">
<img src="./images/insta-soc-ico.png" alt="Instagram">
</a>
</li>
</ul>
</div>
<div class="links">
<p>
Made with 💗 on course<a href="https://www.mastersacademy.education/frontend-for-beginners-it" target="_blank">'Frontend for beginners' from Masters Academy in
2023,</a>from Masters Academy in 2023, by Taras
</p>
</div>
</div>
</footer>
<script src="./js/script.js"></script>
<script src="./js/main.js"></script>
</body>

</html>
105 changes: 105 additions & 0 deletions homeworks/taras.bobov_LotusElize/GamesProject/css/calculator.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@


.calculator-game-main {
display: flex;
flex-direction: column;
margin-top: 160px;
/* gap: 60px; */
}

.calculator-game-main__title {
margin-bottom: 60px;
}

.cal-main__heading {
color: #221F1F;
font-size: 48px;
font-weight: 700;
line-height: 48px;
text-align: center;
margin: 0;
}

.calculator-game-main__field {
width: 630px;
height: 74px;
}

.calc-max {
display: flex;
justify-content: space-between;
font-size: 22px;
font-style: normal;
font-weight: 600;
line-height: normal;
margin-bottom: 22px;
}

.calculator {
display: flex;
flex-direction: row;
gap: 16px;
font-size: 14px;
font-style: normal;
font-weight: 400;
}

.calculator__input-number,.calculator__btn {
outline: none;
border: 1px solid #221F1F;
width: 122px;
height: 36px;
text-align: center;
border-radius: 6px;
background-color: #FFFF;
cursor: pointer;
}

.calculator__btn {
background-color: #EF4A34;
color: #FFF;
border: none;
min-width: 122px;
}

.calculator-drop__down {
position: relative;
}

.calculator__select {
width: 114px;
height: 36px;
border-radius: 6px;
padding: 0 12px;
border: 1px solid #221F1F;
background-color: #FFF;
cursor: pointer;
appearance: none;
}

.calculator__result {
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
}


/**/

.calc__result-visual {
width: 578px;
height: 120px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 80px;
margin-top: 20px;
}


.calc__result-visual-value {
font-size: 48px;
font-weight: 400;
color: #EF4A34;
}
Loading

0 comments on commit a6bd368

Please sign in to comment.