diff --git a/Lesson/index.html b/Lesson/index.html index abbdfd9..e118fd8 100644 --- a/Lesson/index.html +++ b/Lesson/index.html @@ -5,35 +5,57 @@ Lesson 10 + - - + + +
+ + + + + + + + + + + + + +
diff --git a/Lesson/js/script.js b/Lesson/js/script.js index 272b2e2..51edf4b 100644 --- a/Lesson/js/script.js +++ b/Lesson/js/script.js @@ -1,42 +1,67 @@ -// let form = document.querySelector(".form"); -// let nameInput = document.querySelector(".inputName"); -// let lastNameInput = document.querySelector(".inputLastName"); -// let age = document.querySelector("#age"); +// const form = document.querySelector(".form"); +// const nameInput = document.querySelector(".inputName"); +// const lastNameInput = document.querySelector(".inputLastName"); +// const age = document.querySelector("#age"); // let male = document.getElementsByName("radio"); // form.addEventListener("submit", handleSubmit); // function handleSubmit(event) { -// event.preventDefault(); +// event.preventDefault(); + // const info = { // name: nameInput.value, // lastName: lastNameInput.value, // age: age.value, // male: male[0].checked, // }; + // console.log(info); + // localStorage.setItem("info", JSON.stringify(info)); // } +// function check() { +// let val = document.getElementsByName("radio"); + +// if ( val[0]. checked) { +// console.log("Жіноча"); +// } else { +// console.log("Чоловіча") +// } +// } + +// const a = localStorage.getItem("info"); + +// console.log(JSON.parse(a)); + // if (localStorage.getItem("info")) { // const ls = JSON.parse(localStorage.getItem("info")); + // console.log(ls); + // nameInput.value = ls.name; // lastNameInput.value = ls.lastName; // } -// let form = document.querySelector("#form"); -// let formData = {}; +// ----->>> More usefull version -// form.addEventListener("input", function (event) { -// formData[event.target.name] = event.target.value; -// localStorage.setItem("formData", JSON.stringify(formData)); -// }); -// if (localStorage.getItem("formData")) { -// formData = JSON.parse(localStorage.getItem("formData")); +let form = document.querySelector("#form"); +let formData = {}; -// for (let key in formData) { -// form.elements[key].value = formData[key]; -// } -// } +form.addEventListener("input", + function (event) { + formData[event.target.name] = event.target.value; + + localStorage.setItem("formData", JSON.stringify(formData)); + } +); + +if (localStorage.getItem("formData")) { + formData = JSON.parse(localStorage.getItem("formData")); + + for (let key in formData) { + form.elements[key].value = formData[key]; + } +} diff --git a/Lesson/js/uuid.js b/Lesson/js/uuid.js index e69de29..aff8b59 100644 --- a/Lesson/js/uuid.js +++ b/Lesson/js/uuid.js @@ -0,0 +1,3 @@ +import { v4 as uuidv4 } from "uuid"; + +uuidv4(); \ No newline at end of file diff --git a/Lesson/style.css b/Lesson/style.css new file mode 100644 index 0000000..e12096d --- /dev/null +++ b/Lesson/style.css @@ -0,0 +1,11 @@ +* { + margin: 0; +} + +#form { + width: 150px; + display: flex; + flex-direction: column; + align-items: center; + gap: 5px +} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 7c3fa2c..ad26ee8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,41 +1,13 @@ { "name": "lesson10", "version": "1.0.0", - "lockfileVersion": 2, + "lockfileVersion": 1, "requires": true, - "packages": { - "": { - "name": "lesson10", - "version": "1.0.0", - "license": "ISC", - "dependencies": { - "uuid": "^9.0.0", - "validator": "^13.9.0" - }, - "devDependencies": {} - }, - "node_modules/uuid": { - "version": "9.0.0", - "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.0.tgz", - "integrity": "sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==", - "bin": { - "uuid": "dist/bin/uuid" - } - }, - "node_modules/validator": { - "version": "13.9.0", - "resolved": "https://registry.npmjs.org/validator/-/validator-13.9.0.tgz", - "integrity": "sha512-B+dGG8U3fdtM0/aNK4/X8CXq/EcxU2WPrPEkJGslb47qyHsxmbggTWK0yEA4qnYVNF+nxNlN88o14hIcPmSIEA==", - "engines": { - "node": ">= 0.10" - } - } - }, "dependencies": { "uuid": { - "version": "9.0.0", - "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.0.tgz", - "integrity": "sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==" + "version": "9.0.1", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz", + "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==" }, "validator": { "version": "13.9.0", diff --git a/package.json b/package.json index 040e7da..c68ca07 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,7 @@ "homepage": "https://github.com/GeniusSpaseJS/Lesson10#readme", "description": "", "dependencies": { - "uuid": "^9.0.0", + "uuid": "^9.0.1", "validator": "^13.9.0" } }