Skip to content

Commit

Permalink
5 lab first
Browse files Browse the repository at this point in the history
  • Loading branch information
@Sadji0
Sadji0 authored Dec 24, 2021
1 parent 15c5bef commit 693c5b8
Show file tree
Hide file tree
Showing 3 changed files with 389 additions and 0 deletions.
62 changes: 62 additions & 0 deletions constructor.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Плавко Михаил - М33122</title>

<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/constructor.css">

<script src="js/nav_change.js"></script>
<script src="js/constructor.js"></script>

</head>
<body>
<div class="app">
<header>
<nav>
<a href="index.html" class="index.html">Главная</a>
<a href="#" class="about.html">Обо мне</a>
<a href="#" class="summary.html">Резюме</a>
<a href="constructor.html" class="constructor.html">Конструктор</a>
<a href="portfolio.html" class="portfolio.html">Портфолио</a>
<a href="#" class="contacts.html">Контакты</a>
</nav>
</header>
<form id="settings">
<h1>Настройки</h1>

<div class="settings-wrapper">
<div class="form-item">
<label>Max занятий в день</label>
<select name="amount-subjects">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>

</div>

<div class="form-item">
<label>Всего дней в неделе</label>
<select name="amount-day">
<option value="5">5</option>
<option value="6">6</option>
</select>
</div>
</div>

<input type="submit" value="Создать">
</form>

<div class="week">
<div class="day">

</div>
</div>
</div>
</body>
</html>
197 changes: 197 additions & 0 deletions css/constructor.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,197 @@
/* Убираем внешние отступы */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
margin: 0;
}

@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;1,300&family=Zen+Antique&family=Zen+Old+Mincho&display=swap');


body {
font-family: 'Ubuntu', 'Zen Antique', 'Zen Old Mincho', 'Exec-Corners-Medium';

}

.app {
min-height: 100vh;
display: flex;
flex-direction: column;
}

.week {
display: flex;
overflow-x: auto;
flex-grow: 1;
}

.day-name {
font-weight: bold;
font-size: 1.5rem;
align-self: flex-start;
}

.day-list {
padding: 0.2rem 0 0 0;
}

.day {
padding: 0.5rem;
box-sizing: border-box;
margin: 0 0.5rem;
display: flex;
flex-direction: column;
line-break: anywhere;
flex-basis: 20rem;
}

.day form {
margin: 0.2rem 0 0 0;
border: 0.05rem solid rgba(0, 0, 0, 0.6);
}

.day input {
width: 100%;
height: 3rem;
outline: none;
border-radius: 0;
border: none;
}

.day-item {
font-size: 1.5rem;
border: 0.1rem solid #000;
margin-bottom: 0.2rem;
cursor: pointer;
transition: all 0.1s linear;
display: flex;
}

.day-item__index {
padding: 0 1rem;
text-align: center;
line-height: 3rem;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
}

.day-item__content {
flex: 1;
padding: 0.7rem 0.7rem;
}

.day-item:hover {
transform: scale(1.04);
}

#settings {
display: flex;
justify-content: center;
align-items: center;
padding: 2rem 0;
}

.settings-wrapper {
margin: 0 2rem;
}

.form-item {
display: flex;
}

.form-item:nth-of-type(2n) {
margin-top: 1rem;
}

.form-item label {
margin: 0 1rem 0 0;
text-transform: lowercase;
font-size: 1rem;
color: #000;
font-weight: 100;
}

.form-item select {
flex: 1;
}

#settings input[type="submit"] {
width: 150px;
height: 50px;
border-radius: 2rem;
border: 0;
background: #ffffff94;
backdrop-filter: hue-rotate(90deg);
box-shadow: 0 0 0.5rem 0.5rem rgba(0, 0, 0, 0.582);
color: rgb(0, 0, 0);
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease-in;
}

#settings input[type="submit"]:hover {
background-color: #44c02b;
}

.day input {
box-sizing: border-box;
padding: 5px;
}

.day input:disabled {
background: #ccc;
}



select {
display: block;
font-size: 0.8rem;
font-family: sans-serif;
font-weight: 700;
color: #444;
line-height: 1.3;
padding: .6em 1.4em .5em .8em;
width: 100%;
max-width: 100%;
box-sizing: border-box;
margin: 0;
border: 1px solid #aaa;
box-shadow: 0 1px 0 1px rgba(0, 0, 0, .04);
border-radius: .5em;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background-color: #fff;
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'), linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%);
background-repeat: no-repeat, repeat;
background-position: right .7em top 50%, 0 0;
background-size: .65em auto, 100%;
}

select::-ms-expand {
display: none;
}

select:hover {
border-color: #888;
}

select:focus {
border-color: #aaa;
box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
box-shadow: 0 0 0 3px -moz-mac-focusring;
color: #222;
outline: none;
}
130 changes: 130 additions & 0 deletions js/constructor.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,130 @@
const Form = function(){
this.week = [];

this.settings = {
sub: 3,
days: 5
};

this.DOM = {
week: null,
settingsForm: null
};

this.load();
this.getDOM();
this.initDOM();
this.checkDisable();
}

Form.prototype.load = function(){
this.settings = JSON.parse(localStorage.getItem('settings')) || this.settings;

this.week = JSON.parse(localStorage.getItem('week')) || this.week;
};

Form.prototype.save = function(){
localStorage.setItem('settings', JSON.stringify(this.settings));
localStorage.setItem('week', JSON.stringify(this.week));
};

Form.prototype.getDOM = function(){
let handler = event => {
event.preventDefault();

this.settings.sub = parseInt(this.DOM.settingsForm.querySelector('select[name="amount-subjects"]').value);
this.settings.days = parseInt(this.DOM.settingsForm.querySelector('select[name="amount-day"]').value);

this.week = new Array(this.settings.days).fill(0).map(_ => []);

this.save();
this.initDOM();
}

this.DOM.week = document.querySelector(".week");

this.DOM.settingsForm = document.querySelector("#settings");
this.DOM.settingsForm.addEventListener("submit", handler);
};

Form.prototype.initDOM = function(){
this.DOM.settingsForm.querySelector('select[name="amount-subjects"]').value = this.settings.sub;
this.DOM.settingsForm.querySelector('select[name="amount-day"]').value = this.settings.days;

this.DOM.week.innerHTML = "";

this.week.forEach((dayItem, index) => {
let day = document.createElement("div");

day.className = 'day';

day.innerHTML = `
<div class="day-name">
${["Понедельник", "Вторник", "Среда", "Четверг", "Пятница", "Суббота"][index]}
</div>
<form data-day="${index}">
<input placeholder="Текст задания" type="text" name="text">
</form>
<div class="day-list">
</div>
`;

dayItem.forEach((actionItem, index) => {
day.querySelector(".day-list").appendChild(this.createActionNode(index, actionItem));
});

day.querySelector("form").addEventListener("submit", this.add.bind(this));

this.DOM.week.appendChild(day);
});
};

Form.prototype.createActionNode = function(index, content){

let action = document.createElement("div");
action.className = "day-item";

action.innerHTML = `
<div class="day-item__index"> </div>
<div class="day-item__content"></div>
`;

action.querySelector('.day-item__index').appendChild(document.createTextNode(++index));
action.querySelector('.day-item__content').appendChild(document.createTextNode(content));

return action;
}

Form.prototype.add = function(event){
event.preventDefault();

let day = parseInt(event.target.dataset.day);
let text = event.target.querySelector("input").value;

if(text.replace(/ /g, '') === ''){
return;
}

this.week[day].push(text);

this.DOM.week.querySelectorAll('.day')[day].appendChild(this.createActionNode(this.week[day].length - 1, text));

this.checkDisable();
this.save();

event.target.querySelector('input').value = "";
event.target.querySelector('input').blur();
};

Form.prototype.checkDisable = function(){
this.week.forEach((weekItem, index) => {
if(weekItem.length === this.settings.sub){
this.DOM.week.querySelectorAll('.day')[index].querySelector('input').disabled = true;
}
});
};

window.addEventListener("load", () => {
new Form();
})

0 comments on commit 693c5b8

Please sign in to comment.