Posts
All Comments
1. install your python exe or python version
2. check python --version or py --version and keep that in mind to use it
windows
python --version
pip install virtualenv
#here python --version says 3.9, then while creating Venv, use python or python3.9 which ever works
python -m venv env3.9
env3.9\Scripts\activate
deactivate
linux
sudo apt install python3.9
sudo apt install python3.9-venv
python3.9 --version
python3.9 -m venv env3.9
source env3.9/bin/activate
deactivate
Just open x:<python>\lib\site-packages\slimit\__init__.py and comment the line number 27 with #.
1. Just Download the Build Tools from Microsoft.
2. Add the C++ and the 2 Optional Tools.
3. Re-Open the Command Prompt and use PIP to install. Enjoy !
Step 1: Create 3 file in the name of
index.html
form.js
form.css
Step 2: below are the code for 3 files
Step 3: once created, open index.html in browser.
Type some thing in field. CLICK SAVE. close the browser, open the browser again and type the index.html url. you can see the previous typed msg.
index.html
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="form.css" />
<title>Save Later</title>
</head>
<body>
<div class="alert"></div>
<form id="save-later-form">
<h3>Simple Save Later Form</h3>
<label for="full-name">Full Name</label>
<input type="text" name="full-name" id="full-name" />
<label for="email">Email</label>
<input type="email" name="email" id="email" />
<label for="phone">Phone Number</label>
<input type="tel" name="phone" id="phone" maxlength="11" />
<label for="dob">Date Of Birth</label>
<input type="date" name="dob" id="dob" />
<label for="security">Security Question</label>
<select name="security" id="security" tabindex="0">
<option value="">Select a question</option>
<option value="best-friend">What's your best friend's name?</option>
<option value="pet">What's the name of your first pet?</option>
<option value="spouse">Where did you meet your spouse?</option>
</select>
<label for="security-answer">Answer</label>
<input type="text" name="security-answer" id="security-answer" />
<label for="description">Description</label>
<textarea
name="description"
id="description"
placeholder="Describe yourself in 100 words"
></textarea>
<button type="submit" id="submit">SUBMIT</button>
<button type="submit" id="save">SAVE</button>
</form>
</body>
<script src="form.js"></script>
</html>
form.js
// form.js
const formId = "save-later-form"; // ID of the form
const url = location.href; // href for the page
const formIdentifier = `${url} ${formId}`; // Identifier used to identify the form
const saveButton = document.querySelector("#save"); // select save button
const alertBox = document.querySelector(".alert"); // select alert display div
let form = document.querySelector(`#${formId}`); // select form
let formElements = form.elements; // get the elements in the form
/**
* This function gets the values in the form
* and returns them as an object with the
* [formIdentifier] as the object key
* @returns {Object}
*/
const getFormData = () => {
let data = { [formIdentifier]: {} };
for (const element of formElements) {
if (element.name.length > 0) {
data[formIdentifier][element.name] = element.value;
}
}
return data;
};
saveButton.onclick = event => {
event.preventDefault();
data = getFormData();
localStorage.setItem(formIdentifier, JSON.stringify(data[formIdentifier]));
const message = "Form draft has been saved!";
displayAlert(message);
};
/**
* This function displays a message
* on the page for 1 second
*
* @param {String} message
*/
const displayAlert = message => {
alertBox.innerText = message;
alertBox.style.display = "block";
setTimeout(function() {
alertBox.style.display = "none";
}, 1000);
};
/**
* This function populates the form
* with data from localStorage
*
*/
const populateForm = () => {
if (localStorage.key(formIdentifier)) {
const savedData = JSON.parse(localStorage.getItem(formIdentifier)); // get and parse the saved data from localStorage
for (const element of formElements) {
if (element.name in savedData) {
element.value = savedData[element.name];
}
}
const message = "Form has been refilled with saved data!";
displayAlert(message);
}
};
document.onload = populateForm(); // populate the form when the document is loadedd
form.css
/* form.css */
@import url("https://fonts.googleapis.com/css?family=Nunito");
*,
*:before,
*:after {
box-sizing: border-box;
}
body {
background-color: whitesmoke;
font-family: "Nunito", sans-serif;
}
h3,
label {
text-transform: uppercase;
}
.alert {
width: 80vw;
margin: 2rem auto;
background-color: #d4edda;
color: #155724;
padding: 0.75rem 1.25rem;
border-radius: 0.25rem;
display: none;
}
#save-later-form {
position: relative;
width: 80vw;
margin: 3rem auto;
background-color: white;
padding: 1rem 2rem;
border-radius: 3px;
}
label {
margin: 1rem 0 0;
display: block;
}
input {
font-size: 0.875em;
width: 100%;
height: 40px;
padding: 0px 15px 0px 15px;
background: whitesmoke;
outline: none;
color: #000;
border: none;
border-radius: 3px;
}
input:hover {
background: whitesmoke;
color: black;
}
button[type="submit"] {
background-color: #349bab;
width: calc((100% / 2) - 3px);
display: inline-block;
color: white;
font-weight: 600;
height: 2.8rem;
border: none;
font-family: Nunito;
font-size: 1rem;
cursor: pointer;
outline: none;
}
#save {
background-color: #30383f;
}
select {
width: 100%;
height: 40px;
background: whitesmoke;
border: none;
padding: 0 0 0 0.5rem;
outline: none;
}
select:focus,
input:focus,
textarea:focus {
outline: #349bab solid 1px;
}
textarea {
width: 100%;
max-width: 100%;
height: 110px;
max-height: 110px;
padding: 15px;
margin: 0 0 1rem 0;
background: whitesmoke;
outline: none;
color: black;
font-size: 0.875em;
border: none;
}
/* ========MEDIA QUERIES======== */
@media screen and (min-width: 768px) {
#save-later-form,
.alert {
width: 60vw;
}
}
@media screen and (min-width: 992px) {
#save-later-form,
.alert {
width: 40vw;
}
}
Sample Output
