css file
This commit is contained in:
Shchoholiev
parent
2a02057c0a
commit
133edfbe51
98
Lab-1/index.html
Normal file
98
Lab-1/index.html
Normal file
@ -0,0 +1,98 @@
|
||||
<!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">
|
||||
|
||||
<title>Lab-1</title>
|
||||
|
||||
<link rel="stylesheet" href="../style.css">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<header>
|
||||
<div class="content">
|
||||
<h3><a href="">CDM</a></h3>
|
||||
<div class="theme">
|
||||
<h3><a href="">Set Algebra</a></h3>
|
||||
<h3><a href="">Boolean Algebra</a></h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</header>
|
||||
|
||||
<div class="wrapper">
|
||||
|
||||
<div class="wrap-side">
|
||||
<h1>Sets</h1>
|
||||
<div id="sets">
|
||||
<div class="input-wrap">
|
||||
<h1 class="text">Set A = </h1>
|
||||
<div class="input"><input type="set" id="set0" placeholder="1,2,3" /></div>
|
||||
</div>
|
||||
<div class="input-wrap">
|
||||
<h1 class="text">Set B = </h1>
|
||||
<div class="input"><input type="set" id="set1" placeholder="Define set" /></div>
|
||||
</div>
|
||||
</div>
|
||||
<input class="addSet" type="button" value="Add Set" onclick="AddSet()" />
|
||||
</div>
|
||||
|
||||
<div class="wrap-side">
|
||||
<h1>Problem</h1>
|
||||
<h2><input type="problem" id="formula" placeholder="!A-C+B/U" /></h2>
|
||||
<div class="buttons">
|
||||
<input class="button" type="button" id="calculate" value="Evaluate" onclick="Evaluate()" />
|
||||
<input class="button" type="button" id="calculate" value="Step by step" onclick="Evaluate()" />
|
||||
</div>
|
||||
<div class="wrap-result">
|
||||
<div class="input-wrap">
|
||||
<h1 class="text">Result </h1>
|
||||
<div class="input"><input type="result" id="result" readonly/></div>
|
||||
</div>
|
||||
</div>
|
||||
<h6 class="description">Define sets: A, B, C, and Universal set. Then write the problem you need to solve. </h6>
|
||||
<h6 class="operations">
|
||||
<div class="operation">
|
||||
<div class="operation-bg">!</div>
|
||||
<h6>Complement</h6>
|
||||
</div>
|
||||
<div class="operation">
|
||||
<div class="operation-bg">/</div>
|
||||
<h6>Intersection</h6>
|
||||
</div>
|
||||
<div class="operation">
|
||||
<div class="operation-bg">+</div>
|
||||
<h6>Union</h6>
|
||||
</div>
|
||||
<div class="operation">
|
||||
<div class="operation-bg">-</div>
|
||||
<h6>Substraction</h6>
|
||||
</div>
|
||||
</h6>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wrapper hide">
|
||||
<div class="step-by-step">
|
||||
<h1>Step by step</h1>
|
||||
<div class="input-wrap">
|
||||
<h1 class="text">1.</h1>
|
||||
<div class="input"><input type="result" id="step1" readonly/></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- -----------------------------------JS---------------------------- -->
|
||||
<script src="../js/lab-1.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
70
js/lab-1.js
70
js/lab-1.js
@ -7,43 +7,39 @@ function AddSet() {
|
||||
|
||||
let charNum = 65 + currNum;
|
||||
currNum++;
|
||||
|
||||
|
||||
let delBtn = document.querySelectorAll('#delBtn');
|
||||
if (delBtn[delBtn.length - 1]) {
|
||||
delBtn[delBtn.length - 1].style="display: none;";
|
||||
delBtn[delBtn.length - 1].style = "display: none;";
|
||||
}
|
||||
|
||||
node = document.getElementById('sets');
|
||||
node.insertAdjacentHTML('beforeend', ` <div class="field" id="setfield${charNum - 65}">
|
||||
<div style="display: flex; align-items: center;">
|
||||
<button class="delete is-small mr-1" type="button" onclick="DeleteSet(${charNum - 65})" id="delBtn"></button>
|
||||
<label class="label">Set &#${charNum}</label>
|
||||
</div>
|
||||
<div class="control">
|
||||
<input class="input" type="text" placeholder="e.g. 1,2,5" id="set${charNum - 65}">
|
||||
</div>
|
||||
node.insertAdjacentHTML('beforeend', ` <div class="input-wrap">
|
||||
<h1 class="text">Set &#${charNum} = </h1>
|
||||
<div class="input"><input type="set" id="set${charNum}" placeholder="Define set"/></div>
|
||||
</div>`);
|
||||
|
||||
} else {
|
||||
console.log('You have reached a limint of available sets');
|
||||
alert('You have reached a limint of available sets');
|
||||
}
|
||||
}
|
||||
|
||||
function DeleteSet(setNum) {
|
||||
|
||||
|
||||
let setField = document.querySelector(`#setfield${setNum}`);
|
||||
setField.remove();
|
||||
currNum--;
|
||||
|
||||
let delBtn = document.querySelectorAll('#delBtn');
|
||||
if (delBtn[delBtn.length - 1]) {
|
||||
delBtn[delBtn.length - 1].style="display: inline-block;";
|
||||
delBtn[delBtn.length - 1].style = "display: inline-block;";
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
let universalSet = new Set();
|
||||
|
||||
function Complement (set) {
|
||||
function Complement(set) {
|
||||
|
||||
let _complement = new Set();
|
||||
|
||||
@ -52,7 +48,7 @@ function Complement (set) {
|
||||
return _complement;
|
||||
}
|
||||
|
||||
function Intersection (set1, set2) {
|
||||
function Intersection(set1, set2) {
|
||||
|
||||
let _intersection = new Set();
|
||||
|
||||
@ -65,7 +61,7 @@ function Intersection (set1, set2) {
|
||||
return _intersection;
|
||||
}
|
||||
|
||||
function Union (set1, set2) {
|
||||
function Union(set1, set2) {
|
||||
|
||||
let _union = new Set(set1);
|
||||
|
||||
@ -76,12 +72,12 @@ function Union (set1, set2) {
|
||||
return _union;
|
||||
}
|
||||
|
||||
function Difference (set1, set2) {
|
||||
function Difference(set1, set2) {
|
||||
|
||||
let _difference = new Set(set1);
|
||||
|
||||
set2.forEach(element => {
|
||||
|
||||
|
||||
if (_difference.has(element)) {
|
||||
_difference.delete(element);
|
||||
}
|
||||
@ -98,7 +94,7 @@ let SETSNAMES = new Set();
|
||||
let SETS = new Array();
|
||||
|
||||
function Evaluate() {
|
||||
|
||||
|
||||
FetchSets();
|
||||
|
||||
let formulaString = document.getElementById('formula').value;
|
||||
@ -109,7 +105,7 @@ function Evaluate() {
|
||||
let result = SolveRPNFormula(RPN_Array);
|
||||
|
||||
let readableResult = ConvertToReadableResult(result);
|
||||
|
||||
|
||||
|
||||
let resultField = document.getElementById('result');
|
||||
resultField.value = readableResult;
|
||||
@ -126,7 +122,7 @@ function ConvertFormulaCharArrayToRPN(chars) {
|
||||
let actionsStack = new Array();
|
||||
|
||||
chars.forEach(element => {
|
||||
|
||||
|
||||
if (SETSNAMES.has(element)) {
|
||||
|
||||
setsStack.push(GetSetFromIndex(element));
|
||||
@ -181,7 +177,7 @@ function ConvertFormulaCharArrayToRPN(chars) {
|
||||
|
||||
function SolveRPNFormula(RPN_Array) {
|
||||
|
||||
let stack = new Array();
|
||||
let stack = new Array();
|
||||
|
||||
for (let i = 0; i < RPN_Array.length; i++) {
|
||||
const element = RPN_Array[i];
|
||||
@ -189,35 +185,35 @@ function SolveRPNFormula(RPN_Array) {
|
||||
if (OPERATORS.has(element)) {
|
||||
|
||||
if (element == '~' || element == '!') {
|
||||
|
||||
|
||||
let currSet = stack.pop();
|
||||
|
||||
let result = Complement(currSet);
|
||||
|
||||
stack.push(result);
|
||||
stack.push(result);
|
||||
} else if (element == '∩' || element == '/') {
|
||||
|
||||
|
||||
let secondSet = stack.pop();
|
||||
let firstSet = stack.pop();
|
||||
|
||||
|
||||
let result = Intersection(firstSet, secondSet);
|
||||
|
||||
|
||||
stack.push(result);
|
||||
} else if (element == '∪' || element == '+') {
|
||||
|
||||
let secondSet = stack.pop();
|
||||
let firstSet = stack.pop();
|
||||
|
||||
|
||||
let result = Union(firstSet, secondSet);
|
||||
|
||||
|
||||
stack.push(result);
|
||||
} else if (element == '-') {
|
||||
|
||||
let secondSet = stack.pop();
|
||||
let firstSet = stack.pop();
|
||||
|
||||
|
||||
let result = Difference(firstSet, secondSet);
|
||||
|
||||
|
||||
stack.push(result);
|
||||
}
|
||||
} else {
|
||||
@ -238,21 +234,21 @@ function FetchSets() {
|
||||
for (let i = 0; i < currNum; i++) {
|
||||
|
||||
let inputField = document.getElementById(`set${i}`);
|
||||
|
||||
|
||||
let numArray;
|
||||
if (inputField != undefined && inputField.value.length != 0) {
|
||||
numArray = inputField.value.split(',');
|
||||
|
||||
numArray.sort();
|
||||
|
||||
|
||||
let newSet = new Set();
|
||||
|
||||
|
||||
numArray.forEach(element => {
|
||||
|
||||
|
||||
newSet.add(+element);
|
||||
universalArray.push(+element);
|
||||
});
|
||||
|
||||
|
||||
SETSNAMES.add(String.fromCharCode(65 + i));
|
||||
SETS.push(newSet);
|
||||
} else {
|
||||
@ -269,7 +265,7 @@ function FetchSets() {
|
||||
function GetSetFromIndex(index) {
|
||||
|
||||
let unicode = index.charCodeAt(0);
|
||||
|
||||
|
||||
let num = unicode - 65;
|
||||
|
||||
return SETS[num];
|
||||
|
||||
316
style.css
Normal file
316
style.css
Normal file
@ -0,0 +1,316 @@
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:focus,
|
||||
:active {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
a:focus,
|
||||
a:active {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
nav,
|
||||
footer,
|
||||
header,
|
||||
aside {
|
||||
display: block;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
font-size: 100%;
|
||||
line-height: 1;
|
||||
font-size: 14px;
|
||||
-ms-text-size-adjust: 100%;
|
||||
-moz-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
input,
|
||||
button,
|
||||
textarea {
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
input::-ms-clear {
|
||||
display: none;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
a,
|
||||
a:visited {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
ul li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
img {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
font-family: Roboto, sans-serif;
|
||||
color: #fff;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
|
||||
h1 {
|
||||
color: #fff;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-weight: 300;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
|
||||
/* ----------------------------Top Menu--------------------------------- */
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 45px;
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 92%;
|
||||
margin: auto auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.theme {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.theme a {
|
||||
margin-left: 20px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
|
||||
/* ----------------------------------------------------------------- */
|
||||
|
||||
body {
|
||||
background: #E71F65;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
background: linear-gradient(#2394F0, #E71F65);
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
display: flex;
|
||||
margin: 30px auto;
|
||||
width: 92%;
|
||||
max-width: 1000px;
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 12px;
|
||||
filter: drop-shadow(0px 10px 20px rgba(0, 0, 0, 0.3));
|
||||
padding: 0px 20px;
|
||||
}
|
||||
|
||||
.wrap-side {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 40px 40px;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.set {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
#sets {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.input-wrap {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin: auto 0;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input[type=set] {
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
background: none;
|
||||
border: 3px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 8px;
|
||||
font-size: 18px;
|
||||
font-family: Roboto;
|
||||
color: #fff;
|
||||
margin: 5px auto;
|
||||
padding: 0px 0px 0px 10px;
|
||||
}
|
||||
|
||||
input[type=problem] {
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
background: none;
|
||||
border: 3px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 8px;
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
padding: 0px 0px 0px 10px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
input[type=button] {
|
||||
height: 40px;
|
||||
padding: 0 25px 0 25px;
|
||||
background: rgba(255, 255, 255, 0.45);
|
||||
color: white;
|
||||
border-radius: 22px;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
font-family: Roboto;
|
||||
}
|
||||
|
||||
input[type=result] {
|
||||
height: 44px;
|
||||
width: 100%;
|
||||
margin: 10px 0;
|
||||
background: rgba(255, 255, 255, 0.45);
|
||||
color: white;
|
||||
border-radius: 8px;
|
||||
font-size: 18px;
|
||||
font-family: Roboto;
|
||||
cursor: default;
|
||||
padding: 0px 0px 0px 10px;
|
||||
}
|
||||
|
||||
.wrap-result {
|
||||
width: 100%;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
::placeholder {
|
||||
color: rgba(255, 255, 255, 0.35);
|
||||
font-size: 18px;
|
||||
font-family: Roboto;
|
||||
}
|
||||
|
||||
.addSet {
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.button {
|
||||
margin: 15px 5px 5px 5px;
|
||||
}
|
||||
|
||||
.description {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.operations {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 30px auto;
|
||||
}
|
||||
|
||||
.operation {
|
||||
display: flex;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.operation-bg {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 11px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.step-by-step {
|
||||
width: 100%;
|
||||
margin: 40px 50px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (max-device-width: 650px) and (min-device-width: 0px) {
|
||||
.wrapper {
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
}
|
||||
.wrap-side {
|
||||
width: 85%;
|
||||
margin: 20px auto;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user