olimp-web · gdeozhav · May 10, 2022 · May 10, 2022 · May 10, 2022 · May 10, 2022
diff --git a/Yusupova-P-A-hw10/index.html b/Yusupova-P-A-hw10/index.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="styles/style-minimal.css">
+    <!-- fonts -->
+    <link rel="stylesheet" href="https://fonts.sandbox.google.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Michroma&display=swap" rel="stylesheet">
+    <!-- fonts -->
+    <title>Calculator</title>
+</head>
+<body>
+    <div class="calc-container">
+        <div class="calc-display-window">
+            <div id="datafield"></div>
+        </div>
+        <button id="clear" onclick="clearAll()">C</button>
+        <button id="/" class="dark" onclick="setArgument(this.id)">/</button>
+        <button id="*" class="dark" onclick="setArgument(this.id)">*</button>
+        <button class="dark" onclick="backspace()"><span class="material-symbols-outlined">backspace</span></button>
+        <button id="7" onclick="setArgument(this.id)">7</button>
+        <button id="8" onclick="setArgument(this.id)">8</button>
+        <button id="9" onclick="setArgument(this.id)">9</button>
+        <button id="-" class="dark" onclick="setArgument(this.id)">-</button>
+        <button id="4" onclick="setArgument(this.id)">4</button>
+        <button id="5" onclick="setArgument(this.id)">5</button>
+        <button id="6" onclick="setArgument(this.id)">6</button>
+        <button id="+" class="dark" onclick="setArgument(this.id)">+</button>
+        <button id="1" onclick="setArgument(this.id)">1</button>
+        <button id="2" onclick="setArgument(this.id)">2</button>
+        <button id="3" onclick="setArgument(this.id)">3</button>
+        <button class="double-zero-button" id="00" onclick="setArgument(this.id)">00</button>
+        <button class="zero-button" id="0" onclick="setArgument(this.id)">0</button>
+        <button class="dark" id="." onclick="setArgument(this.id)">.</button>
+        <button id="equals" class="equals" onclick="compute()">=</button>
+    </div>
+    <div class="history-container">
+        <span>History</span>
+        <div id="history"></div>
+    </div>
+    <script src="script.js" defer></script>
+    <div class="style-buttons">
+        <span>Styles</span>
+        <button class="dark" onclick="changeToStyle1()">Minimal</button>
+        <button class="dark" onclick="changeToStyle2()">Retro</button>
+    </div>
+</body>
+</html>
diff --git a/Yusupova-P-A-hw10/script.js b/Yusupova-P-A-hw10/script.js
@@ -0,0 +1,89 @@
+"use strict";
+
+let display = document.getElementById("datafield"); //output string
+let firstArgument = "", secondArgument = "", currentOperation = "";
+let isOperatorChosen = false;
+let historyArray = [];
+
+function clearAll() {
+    firstArgument = "";
+    secondArgument = "";
+    isOperatorChosen = false;
+    currentOperation = "";
+    display.innerHTML = "";
+}
+
+function addToHistory(result) {
+    if (historyArray.length <= 10) historyArray.unshift(result);
+    else {
+        historyArray.unshift(result); //add first
+        historyArray.pop(); //delete last
+    }
+    document.getElementById("history").innerHTML = historyArray.join("<br>"); 
+    //display array in history div separated by line breaks
+}
+
+// document.querySelectorAll(".calc-button").addEventListener("click", setArgument(this.id));
+//наверное можно сделать эффективнее, чем через onclick в html, но конкретно вот это ^ не работает.
+
+function setArgument(buttonId) {
+    if ((buttonId == "+")||(buttonId == "-")||(buttonId == "*")||(buttonId == "/")) {
+
+        if (((buttonId == "+")||(buttonId == "-"))&&(firstArgument === "")) { 
+            //if + or - entered before 1st argument, add them to 1st argument
+            firstArgument += buttonId;
+        } else {
+            isOperatorChosen = true;
+            currentOperation = buttonId;
+        }
+    } else {
+        if (isOperatorChosen === false) {
+            firstArgument += buttonId; //input before operator is chosen -> first argument
+        } else {
+            secondArgument += buttonId;
+        }
+    }
+    display.innerHTML = firstArgument + currentOperation + secondArgument;
+}
+
+function backspace() {
+    if (isOperatorChosen === false) {
+        firstArgument = firstArgument.slice(0, -1); //delete last element of string
+    } else {
+        if (secondArgument === "") { //if no second argument, delete operator
+            currentOperation = "";
+            isOperatorChosen = false;
+        }
+        secondArgument = secondArgument.slice(0, -1);
+    }
+    display.innerHTML = firstArgument + currentOperation + secondArgument;
+}
+
+function compute() {
+    switch(currentOperation) {
+        case "+":
+            display.innerHTML = +firstArgument + +secondArgument;
+            break;
+        case "-":
+            display.innerHTML = +firstArgument - +secondArgument;
+            break;
+        case "*":
+            display.innerHTML = +firstArgument * +secondArgument;
+            break;
+        case "/":
+            display.innerHTML = +(+firstArgument / +secondArgument).toPrecision(5);
+            break;
+    }
+    addToHistory(display.innerHTML);
+    firstArgument = "";
+    secondArgument = "";
+    isOperatorChosen = false;
+    currentOperation = "";
+}
+
+function changeToStyle1() {
+    document.getElementsByTagName("link")[0].href="styles/style-minimal.css";
+}
+function changeToStyle2() {
+    document.getElementsByTagName("link")[0].href="styles/style-old.css";
+}
diff --git a/Yusupova-P-A-hw10/styles/SevenSegment.ttf b/Yusupova-P-A-hw10/styles/SevenSegment.ttf
diff --git a/Yusupova-P-A-hw10/styles/background.jpg b/Yusupova-P-A-hw10/styles/background.jpg
diff --git a/Yusupova-P-A-hw10/styles/style-minimal.css b/Yusupova-P-A-hw10/styles/style-minimal.css
@@ -0,0 +1,91 @@
+* {
+    margin: 0;
+    box-sizing: border-box;
+    font-family: 'Poppins', sans-serif;
+    font-weight: 400;
+    font-size: 20px;
+}
+@font-face {
+    font-family: "Seven Segment";
+    src: url("SevenSegment.ttf");
+}
+body {
+    display: flex;
+    justify-content: center;
+
+    padding: 5px 0;
+}
+.calc-container {
+    display: grid;
+    gap: 10px;
+    grid-template-columns: repeat(4, 100px);
+    grid-template-rows: minmax(120px, auto) repeat(5, 100px);
+    /* change!! */
+    padding: 20px;
+    border-radius: 10px;
+}
+.calc-container button {
+    cursor: pointer;
+    border-radius: 5px;
+    border: none;
+    background-color: rgb(244, 244, 244);
+}
+.calc-container button:hover {
+    background-color: aquamarine;
+}
+.calc-display-window {
+    grid-column-start: 1;
+    grid-column-end: 5;
+    position: relative;
+}
+#datafield {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: end;
+    align-items: center;
+    padding: 20px;
+    border: 2px solid rgb(235, 235, 235);
+    font-family: "Poppins", sans-serif;
+    font-size: 40px;
+    border-radius: 5px;
+}
+.equals {
+    grid-row-start: 5;
+    grid-row-end: 7;
+    grid-column-start: 4;
+    grid-column-end: 5;
+}
+.history-container {
+    position: absolute;
+    left: 50px;
+    top: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+.style-buttons {
+    position: absolute;
+    right: 50px;
+    top: 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 20px;
+}
+.style-buttons button {
+    cursor: pointer;
+    border-radius: 5px;
+    border: 2px solid rgb(235, 235, 235);
+    background-color: white;
+    width: 150px;
+    height: 50px;
+}
+.style-buttons button:hover {
+    background-color: rgb(244, 244, 244);
+    border: none;
+}
+.history-container span, .style-buttons span{
+    font-weight: 500;
+    font-size: 32px;
+}