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>
|
||||
14
js/lab-1.js
14
js/lab-1.js
@ -14,17 +14,13 @@ function AddSet() {
|
||||
}
|
||||
|
||||
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');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
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