Адресная книга Javascript
Добавить в избранное
Добро пожаловать на статью о том, как создать простую адресную книгу с помощью чистого Javascript.
ЧАСТЬ 1) HTML
Создаём файл index.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="description" content="Address Book">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.5">
<title>JS Address Book</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- ДОБАВИТЬ/РЕДАКТИРОВАТЬ ФОРМУ ЗАПИСИ -->
<div id="abForm">
<form onsubmit="return ab.save()">
<div id="abClose" class="material-icons" onclick="ab.toggle(false)">
закрыть
</div>
<input type="hidden" id="abID"/>
<label>Имя <br>
<input type="text" id="abName" required/>
</label>
<label>Email <br>
<input type="email" id="abEmail"/>
</label>
<label>Телефон <br>
<input type="text" id="abTel"/>
</label>
<label>Адрес <br>
<input type="text" id="abAddr"/>
</label>
<input type="submit" value="Сохранить" id="abGo"/>
</form></div>
<!-- СПИСОК ЗАПИСЕЙ -->
<div id="abWrap">
<div id="abHead">
<h2>АДРЕСНАЯ КНИГА</h2>
<div id="abAdd" class="material-icons" onclick="ab.toggle(true)">
Добавить
</div>
</div>
<div id="abList"></div>
</div>
<script src="js.js"></script>
</body>
</html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="description" content="Address Book">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.5">
<title>JS Address Book</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- ДОБАВИТЬ/РЕДАКТИРОВАТЬ ФОРМУ ЗАПИСИ -->
<div id="abForm">
<form onsubmit="return ab.save()">
<div id="abClose" class="material-icons" onclick="ab.toggle(false)">
закрыть
</div>
<input type="hidden" id="abID"/>
<label>Имя <br>
<input type="text" id="abName" required/>
</label>
<label>Email <br>
<input type="email" id="abEmail"/>
</label>
<label>Телефон <br>
<input type="text" id="abTel"/>
</label>
<label>Адрес <br>
<input type="text" id="abAddr"/>
</label>
<input type="submit" value="Сохранить" id="abGo"/>
</form></div>
<!-- СПИСОК ЗАПИСЕЙ -->
<div id="abWrap">
<div id="abHead">
<h2>АДРЕСНАЯ КНИГА</h2>
<div id="abAdd" class="material-icons" onclick="ab.toggle(true)">
Добавить
</div>
</div>
<div id="abList"></div>
</div>
<script src="js.js"></script>
</body>
</html>
ЧАСТЬ 2) JAVASCRIPT
Создаём файл js.js
let ab = {
// INIT
hForm: null, // html форма добавления/редактирования
hID: null,
hName: null,
hEmail: null,
hTel: null,
hAddr: null,
data: [], // записи в адресной книге
hList: null, // список записей html
init: () => {
// ПОЛУЧИТЬ HTML-ЭЛЕМЕНТЫ
ab.hID = document.querySelector("#abID");
ab.hForm = document.querySelector("#abForm");
ab.hName = document.querySelector("#abName");
ab.hEmail = document.querySelector("#abEmail");
ab.hTel = document.querySelector("#abTel");
ab.hAddr = document.querySelector("#abAddr");
ab.hList = document.querySelector("#abList");
// ЗАГРУЗИТЬ ЗАПИСИ ИЗ ЛОКАЛЬНОГО ХРАНИЛИЩА
let data = localStorage.getItem("ab");
if (data != null) {
ab.data = JSON.parse(data);
}
// ВЫВЕСТИ АДРЕСНЫЕ ЗАПИСИ
ab.draw();
},
// ПЕРЕКЛЮЧИТЬ ПОКАЗАТЬ/СКРЫТЬ ФОРМУ ЗАПИСИ
toggle: (id) => {
// ЗАКРЫТЬ И СКРЫТЬ
if (id === false) {
ab.hID.value = "";
ab.hName.value = "";
ab.hEmail.value = "";
ab.hTel.value = "";
ab.hAddr.value = "";
ab.hForm.classList.remove("show");
}
// ПОКАЗЫВАТЬ
else {
// РЕЖИМ РЕДАКТИРОВАНИЯ
if (Number.isInteger(id)) {
ab.hID.value = id;
ab.hName.value = ab.data[id]["n"];
ab.hEmail.value = ab.data[id]["e"];
ab.hTel.value = ab.data[id]["t"];
ab.hAddr.value = ab.data[id]["a"];
}
// ПОКАЗАТЬ ФОРМУ ДОБАВЛЕНИЯ/РЕДАКТИРОВАНИЯ
ab.hForm.classList.add("show");
}
},
// СОХРАНИТЬ ВВОД АДРЕСА
save : () => {
// ВВОД ДАННЫХ
let data = {
n: ab.hName.value,
e: ab.hEmail.value,
t: ab.hTel.value,
a: ab.hAddr.value
};
// ДОБАВИТЬ/ОБНОВИТЬ ЗАПИСЬ
if (ab.hID.value == "") {
ab.data.push(data);
}
else {
ab.data[ab.hID.value] = data;
}
// ОБНОВИТЬ ЛОКАЛЬНОЕ ХРАНИЛИЩЕ
localStorage.setItem("ab", JSON.stringify(ab.data));
ab.toggle(false);
ab.draw();
return false;
},
// УДАЛИТЬ ЗАПИСЬ АДРЕСА
del : (id) => { if (confirm("Delete Entry?")) {
ab.data.splice(id, 1);
localStorage.setItem("ab", JSON.stringify(ab.data));
ab.draw();
}},
// ВЫВОД ЗАПИСЕЙ В АДРЕСНОЙ КНИГЕ
draw : () => {
ab.hList.innerHTML = "";
for (let i in ab.data) {
let row = document.createElement("div");
row.className = "row";
row.innerHTML = `<div class="info">
<div>Имя ${ab.data[i]["n"]}</div>
<div>email ${ab.data[i]["e"]}</div>
<div>Телефон ${ab.data[i]["t"]}</div>
</div>
<div>Адрес ${ab.data[i]["a"]}</div>
</div>
<input type="button" class="material-icons" value="удалить" onclick="ab.del(${i})"/>
<input type="button" class="material-icons" value="редактировать" onclick="ab.toggle(${i})"/>`;
ab.hList.appendChild(row);
}
}
};
window.addEventListener("load", ab.init);
// INIT
hForm: null, // html форма добавления/редактирования
hID: null,
hName: null,
hEmail: null,
hTel: null,
hAddr: null,
data: [], // записи в адресной книге
hList: null, // список записей html
init: () => {
// ПОЛУЧИТЬ HTML-ЭЛЕМЕНТЫ
ab.hID = document.querySelector("#abID");
ab.hForm = document.querySelector("#abForm");
ab.hName = document.querySelector("#abName");
ab.hEmail = document.querySelector("#abEmail");
ab.hTel = document.querySelector("#abTel");
ab.hAddr = document.querySelector("#abAddr");
ab.hList = document.querySelector("#abList");
// ЗАГРУЗИТЬ ЗАПИСИ ИЗ ЛОКАЛЬНОГО ХРАНИЛИЩА
let data = localStorage.getItem("ab");
if (data != null) {
ab.data = JSON.parse(data);
}
// ВЫВЕСТИ АДРЕСНЫЕ ЗАПИСИ
ab.draw();
},
// ПЕРЕКЛЮЧИТЬ ПОКАЗАТЬ/СКРЫТЬ ФОРМУ ЗАПИСИ
toggle: (id) => {
// ЗАКРЫТЬ И СКРЫТЬ
if (id === false) {
ab.hID.value = "";
ab.hName.value = "";
ab.hEmail.value = "";
ab.hTel.value = "";
ab.hAddr.value = "";
ab.hForm.classList.remove("show");
}
// ПОКАЗЫВАТЬ
else {
// РЕЖИМ РЕДАКТИРОВАНИЯ
if (Number.isInteger(id)) {
ab.hID.value = id;
ab.hName.value = ab.data[id]["n"];
ab.hEmail.value = ab.data[id]["e"];
ab.hTel.value = ab.data[id]["t"];
ab.hAddr.value = ab.data[id]["a"];
}
// ПОКАЗАТЬ ФОРМУ ДОБАВЛЕНИЯ/РЕДАКТИРОВАНИЯ
ab.hForm.classList.add("show");
}
},
// СОХРАНИТЬ ВВОД АДРЕСА
save : () => {
// ВВОД ДАННЫХ
let data = {
n: ab.hName.value,
e: ab.hEmail.value,
t: ab.hTel.value,
a: ab.hAddr.value
};
// ДОБАВИТЬ/ОБНОВИТЬ ЗАПИСЬ
if (ab.hID.value == "") {
ab.data.push(data);
}
else {
ab.data[ab.hID.value] = data;
}
// ОБНОВИТЬ ЛОКАЛЬНОЕ ХРАНИЛИЩЕ
localStorage.setItem("ab", JSON.stringify(ab.data));
ab.toggle(false);
ab.draw();
return false;
},
// УДАЛИТЬ ЗАПИСЬ АДРЕСА
del : (id) => { if (confirm("Delete Entry?")) {
ab.data.splice(id, 1);
localStorage.setItem("ab", JSON.stringify(ab.data));
ab.draw();
}},
// ВЫВОД ЗАПИСЕЙ В АДРЕСНОЙ КНИГЕ
draw : () => {
ab.hList.innerHTML = "";
for (let i in ab.data) {
let row = document.createElement("div");
row.className = "row";
row.innerHTML = `<div class="info">
<div>Имя ${ab.data[i]["n"]}</div>
<div>email ${ab.data[i]["e"]}</div>
<div>Телефон ${ab.data[i]["t"]}</div>
</div>
<div>Адрес ${ab.data[i]["a"]}</div>
</div>
<input type="button" class="material-icons" value="удалить" onclick="ab.del(${i})"/>
<input type="button" class="material-icons" value="редактировать" onclick="ab.toggle(${i})"/>`;
ab.hList.appendChild(row);
}
}
};
window.addEventListener("load", ab.init);
ЧАСТЬ 3) CSS
Создаём style.css
/* вся страница */
* {
font-family: arial, sans-serif;
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
}
/* ДОБАВИТЬ/РЕДАКТИРОВАТЬ ОБОЛОЧКУ ФОРМЫ */
#abForm {
/* ПОЛНАЯ СТРАНИЦА */
position: fixed;
top: 0;
left: 0;
z-index: 999;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.7);
/* ЦЕНТРАЛЬНАЯ ФОРМА НА ЭКРАНЕ */
display: flex;
align-items: center;
justify-content: center;
/* СКРЫТО ПО УМОЛЧАНИЮ */
visibility: hidden;
opacity: 0;
transition: opacity 0.3s;
}
#abForm.show {
visibility: visible;
opacity: 1;
}
/* ОБЩИЙ */
#abAdd, #abClose {
color: #fff;
background: #a12020;
font-size: 20px;
padding: 5px 10px;
font-weight: 700;
}
#abClose {
position: absolute;
top: 0; right: 0;
}
input[type=button], input[type=submit], #abAdd, #abClose {
cursor: pointer;
}
/* ДОБАВИТЬ/РЕДАКТИРОВАТЬ ФОРМУ */
#abForm form {
position: relative;
border-radius: 10px;
padding: 20px;
width: 400px;
border: 1px solid #000;
background: #f5f5f5;
}
#abForm label, #abForm input {
display: block;
width: 100%;
}
#abForm label {
margin: 10px 0;
}
#abForm input {
padding: 10px;
border: 1px solid #ccc;
}
#abForm input[type=submit] {
margin-top: 20px;
border: 0;
color: #fff;
background: #780000;
}
/* ОБОРОЧКА СПИСКА */
#abWrap {
margin: 0 auto;
padding: 10px;
max-width: 1000px;
}
#abHead {
display: flex;
align-items: center;
}
#abHead h2 {
flex-grow: 1;
}
/* СПИСОК ЗАПИСЕЙ */
#abList .row {
display: flex;
margin: 10px 0;
border: 1px solid #aaa;
background: #ededed;
}
#abList .info {
padding: 10px;
flex-grow: 1;
line-height: 28px;
}
i.tag {
color: #326abd;
font-size: 18px;
margin-right: 5px;
}
.row input[type=button] {
font-size: 30px;
padding: 0 10px;
border: 0;
background: 0;
}
* {
font-family: arial, sans-serif;
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
}
/* ДОБАВИТЬ/РЕДАКТИРОВАТЬ ОБОЛОЧКУ ФОРМЫ */
#abForm {
/* ПОЛНАЯ СТРАНИЦА */
position: fixed;
top: 0;
left: 0;
z-index: 999;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.7);
/* ЦЕНТРАЛЬНАЯ ФОРМА НА ЭКРАНЕ */
display: flex;
align-items: center;
justify-content: center;
/* СКРЫТО ПО УМОЛЧАНИЮ */
visibility: hidden;
opacity: 0;
transition: opacity 0.3s;
}
#abForm.show {
visibility: visible;
opacity: 1;
}
/* ОБЩИЙ */
#abAdd, #abClose {
color: #fff;
background: #a12020;
font-size: 20px;
padding: 5px 10px;
font-weight: 700;
}
#abClose {
position: absolute;
top: 0; right: 0;
}
input[type=button], input[type=submit], #abAdd, #abClose {
cursor: pointer;
}
/* ДОБАВИТЬ/РЕДАКТИРОВАТЬ ФОРМУ */
#abForm form {
position: relative;
border-radius: 10px;
padding: 20px;
width: 400px;
border: 1px solid #000;
background: #f5f5f5;
}
#abForm label, #abForm input {
display: block;
width: 100%;
}
#abForm label {
margin: 10px 0;
}
#abForm input {
padding: 10px;
border: 1px solid #ccc;
}
#abForm input[type=submit] {
margin-top: 20px;
border: 0;
color: #fff;
background: #780000;
}
/* ОБОРОЧКА СПИСКА */
#abWrap {
margin: 0 auto;
padding: 10px;
max-width: 1000px;
}
#abHead {
display: flex;
align-items: center;
}
#abHead h2 {
flex-grow: 1;
}
/* СПИСОК ЗАПИСЕЙ */
#abList .row {
display: flex;
margin: 10px 0;
border: 1px solid #aaa;
background: #ededed;
}
#abList .info {
padding: 10px;
flex-grow: 1;
line-height: 28px;
}
i.tag {
color: #326abd;
font-size: 18px;
margin-right: 5px;
}
.row input[type=button] {
font-size: 30px;
padding: 0 10px;
border: 0;
background: 0;
}
Можете посмотреть и скачать пример
Посмотреть
Скачать