#javascript #html #radio #checkboxlist #session-storage
Вопрос:
У меня есть 2 html-страницы job.html и apply.html и 1 javascript.js 1 — Я хочу использовать хранилище сеансов для ввода радио и флажков. это помогает пользователю выполнять множество заданий и не повторять заполнение формы. 2 — Я хочу получить идентификатор работы от job.html чтобы apply.html при нажатии на гиперссылку.. у каждой работы есть свой идентификатор для подачи заявки на работу
<!DOCTYPE html>
<!-- This is the jobs page of Assignment1 -->
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="description" content="Assigment1" />
<meta name="keywords" content="HTML5, CSS" />
<meta name="author" content="Marwan Alrehaili" />
<!-- other meta stuff -->
<link href="styles/style.css" rel="stylesheet"/>
<title> Mar | IT solutions</title>
</head>
<!-- This is a comment. Indenting child elements makes the markup much more readable -->
<body id="jobPage">
<header>
<!-- Logo Starts -->
<img src="images/logo.png" alt="logo" >
<!-- #Logo Ends -->
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="jobs.html">Jobs</a></li>
<li><a href="apply.html">Apply</a></li>
<li><a href="about.html">About</a></li>
<li><a href="enhancments.html">Enhancment</a></li>
</ul>
</nav>
</header>
<main>
<h1>job descriptions</h1>
<section>
<!-- This information from indeed.com -->
<h2><a href="apply.html" id="jobhyperlink">Mobile Application Developer</a> </h2>
<input id="Job_number" value="MD12111" type="submit" >
<h3>Job reference number:</h3>
<p >MD123
</p>
<!--
<label for = "Job_number">Student ID: </label>
<input name= "Job_number" id="Job_number" > -->
<h3>Location:</h3>
<p>Dubai
</p>
<aside>
<p> We are looking for a strong Mobile App Developer who welcomes both engineering and maintenance tasks. The primary focus will be to implement new user interfaces and features together with automated unit and integration tests.
</p>
</aside>
<p class="paragraph">
You will be working with our candid and collaborative team, where your knowledge and advice about application architecture and the newest mobile technologies will be highly appreciated. The code you write will need to be cleanly organized and of the highest quality. You will also help ensure solid application performance and an excellent user experience.
</p>
<h3>Responsibilities</h3>
<ol>
<li>Perform full life-cycle development</li>
<li>Adhere to agreed upon delivery schedules</li>
<li>Utilizes source control, continuous integration, and unit testing best practices</li>
<li>Work cross-functionally to define and write code for new features</li>
<li>Fixing bugs and performance problems</li>
<li>Writing clean, readable, and testable code</li>
</ol>
<h3>Qualifications: (Essential)</h3>
<ul>
<li>Extensive knowledge about mobile app development. This includes the whole process, from the first line of code to publishing in the store(s)</li>
<li>Experience with iOS and Android platforms</li>
<li>Experience with profiling and debugging mobile applications</li>
<li>Understanding mobile app design guidelines on each platform and being aware of their differences</li>
<li>Bachelor's degree or equivalent in Computer Science</li>
<li>3 years' experience in related area</li>
</ul>
<h3>Job Type:</h3>
<p>Full-time
</p>
<h3>Salary:</h3>
<p>AED5,000.00 - AED6,000.00 per month
</p>
<h3>Experience: (Preferred)</h3>
<ul>
<li>iOS platform: 3 years </li>
<li>Android platform: 3 years</li>
<li>Mobile App: 3 years </li>
</ul>
</section>
<section>
<h2>UX/UI Designer</h2>
<h3>Job reference number:</h3>
<p>D1234
</p>
<h3>Location:</h3>
<p>Dubai
</p>
<aside>
<p>UX/UI Designer for AI Cameras..
AI cameras are transforming industries including security, transportation, and public services.</p>
</aside>
<p class="paragraph">
Smarter AI's Web Designer will design, develop, and manage our websites. You have eyes for clean and artful design, possesses superior design skills, and can translate high-level requirements into beautiful, intuitive, and functional websites.
</p>
<h3>Responsibilities</h3>
<ol>
<li>Design beautiful, intuitive, and functional user interfaces for our connected camera cloud services and products</li>
<li>Deliver responsive Web designs and scalable application designs</li>
<li>Present milestone deliverables to peers and executive level stakeholders</li>
<li>Conduct user research and evaluate user feedback</li>
<li>Produce professional results that reflect AnyConnects brand</li>
<li>Contribute to team effort by taking on additional responsibilities</li>
<li>Demonstrable UX/UI design skills with a world-class portfolio</li>
<li>Up-to-date with the latest UX/UI trends, techniques, and technologies</li>
</ol>
<h3>Qualifications: (Essential)</h3>
<ul>
<li>Progressive / responsive / scalable design</li>
<li>Android and iOS UX/UI design</li>
<li>Adobe Creative Suite, HTML, CSS, JavaScript</li>
</ul>
<h3>Job Type:</h3>
<p>Full-time
</p>
<h3>Salary:</h3>
<p>AED18,000.00 per month
</p>
<h3>Experience: (Preferred)</h3>
<ul>
<li>Graphic Design: 1 year</li>
</ul>
</section>
<section>
<h2>Front End Developer</h2>
<h3>Job reference number:</h3>
<p>FED00
</p>
<h3>Location:</h3>
<p>Dubai
</p>
<p class="paragraph">
Smarter AI's Web Designer will design, develop, and manage our websites. You have eyes for clean and artful design, possesses superior design skills, and can translate high-level requirements into beautiful, intuitive, and functional websites.
</p>
<h3>Responsibilities</h3>
<ol>
<li>Contributing to requirements, designs, UX, tools and technology for our products.</li>
<li>Participating in planning, estimation, story elaboration, product/design/code reviews, test planning, retrospectives, and release activities.</li>
<li>Producing well structured, re-usable, robust, scalable, maintainable, and well documented code</li>
<li>Delivering compelling user experiences for our applications using ASP.NET MVC and Vue.js</li>
<li>Creating reusable components that can be auto tested and meet the unique look and feel of our applications</li>
</ol>
<h3>Qualifications: (Essential)</h3>
<ul>
<li>3 years’ industry experience in web application development</li>
<li>Experience with a Vue.js and associated tooling and libraries (e.g. Vite)</li>
<li>Have developed UI within an ASP.NET MVC architecture and its related technologies</li>
<li>Have been involved in UX/UI design</li>
<li>Knowledge of AWS or Azure cloud computing services for the efficient deployment of user experiences to a global customer base</li>
<li>Implementation experience of web accessibility standards</li>
<li>Experience in testing front-end code,</li>
<li>Data visualisation with D3, WebGL, SVG, etc</li>
<li>Excellent working knowledge of HTML, CSS and JavaScript</li>
<li>Familiarity with the creation of design systems, management of reusable controls and styling</li>
<li>Ability to write clean, readable, and easily maintainable code</li>
<li>Experience with the latest browser DevTools</li>
<li>A strong understanding of HTTP its best practice usage</li>
<li>Working experience of web application authentication methods</li>
<li>Knowledge of testing client-side code</li>
<li>Proficient understanding of version control using Git and / or TFS and associated workflows</li>
<li>Experience working in an agile development environment</li>
</ul>
<h3>Job Type:</h3>
<p>Full-time
</p>
<h3>Salary:</h3>
<p>Salary: AED7,000.00 - AED15,000.00 per month
</p>
</section>
</main>
<footer>
<hr>
<p>Sources..</p>
<p>ae.indeed.com</p>
<p>https://www.unico.com.au/</p>
<p>2021 Marwan Alrehaili</p>
</footer>
<!-- #link to javascript file -->
<script src="js/javascript.js"></script>
</body>
</html> enter code he
// java script file
// Assignment 2
//Marwan Alrehaili
function saveInfoSessionStorage(){ // save to session storage from job bage
var fname = document.getElementById("fname").value;
var lname = document.getElementById("lname").value;
var date = document.getElementById("date").value;
//var Job_number = document.getElementById("Job_number").value;
var Street_Address = document.getElementById("Street_Address").value;
var Suburb_town = document.getElementById("Suburb_town").value;
var State = document.getElementById("State").value;
var Postcode = document.getElementById("Postcode").value;
var email = document.getElementById("email").value;
var Phone_number = document.getElementById("Phone_number").value;
// var HTML = document.getElementById("HTML").checked;
// var Java = document.getElementById("Java").checked;
var Other_skills = document.getElementById("Other_skills").value;
sessionStorage.setItem("fname",fname);
sessionStorage.setItem("lname",lname);
sessionStorage.setItem("date",date);
// sessionStorage.setItem("Phone_number",Phone_number);
sessionStorage.setItem("Street_Address",Street_Address);
sessionStorage.setItem("Suburb_town",Suburb_town);
sessionStorage.setItem("State",State);
sessionStorage.setItem("Postcode",Postcode);
sessionStorage.setItem("email",email);
sessionStorage.setItem("Phone_number",Phone_number);
// sessionStorage.setItem("HTML",HTML);
// sessionStorage.setItem("Java",Java);
sessionStorage.setItem("Other_skills",Other_skills);
}
function getInfoSessionStorage(){ //get session storage to apply page
document.getElementById("fname").value = sessionStorage.getItem("fname");
document.getElementById("lname").value = sessionStorage.getItem("lname");
document.getElementById("date").value = sessionStorage.getItem("date");
// document.getElementById("lname").value = sessionStorage.getItem("lname");
document.getElementById("Street_Address").value = sessionStorage.getItem("Street_Address");
document.getElementById("Suburb_town").value = sessionStorage.getItem("Suburb_town");
document.getElementById("State").value = sessionStorage.getItem("State");
document.getElementById("lname").value = sessionStorage.getItem("lname");
document.getElementById("Postcode").value = sessionStorage.getItem("Postcode");
document.getElementById("email").value = sessionStorage.getItem("email");
document.getElementById("Phone_number").value = sessionStorage.getItem("Phone_number");
// document.getElementById("Other_skills").value = sessionStorage.getItem("Other_skills");
document.getElementById("Other_skills").value = sessionStorage.getItem("Other_skills");
}
function saveResult (){ //// save job no
var Job_number = document.getElementById("Job_number").value;
if(typeof(Storage)!=="undefined"){
localStorage.setItem("Job_number", Job_number);
}
}
function getResult(){
if(typeof(Storage)!=="undefined"){
if (localStorage.getItem("Job_number") !== null) {
var Job_number= document.getElementById("Job_number");
Job_number.value = localStorage.getItem("Job_number"); // span or label: use textContent
}
}
}
function validation(){ // validation data
var errorMsgage= ""; //error massage
var errorMsgstate= "";
var errorMsgskills= "";
var result= true; // true result
var dateFromUser = document.getElementById("date").value.trim(); //age between 15-80 start
var dob = new Date(dateFromUser);
//calculate month difference from current date in time
var month_diff = Date.now() - dob.getTime();
//convert the calculated difference in date format
var age_dt = new Date(month_diff);
//extract year from date
var year = age_dt.getUTCFullYear();
//now calculate the age of the user
var age = Math.abs(year - 1970);
var state = document.getElementById("State").value.trim(); //Postcode match with state start
var postcode = document.getElementById("Postcode").value.trim();
var OtherSkills = document.getElementById("other").checked;
if(age<15 || age>80){ //condition age between 15-80 End
errorMsgage ="sorry, it just for people between 15 and 80 agesn";
result=false;
} //age between 15-80 End
// var state = document.getElementById("State").value.trim(); //Postcode match with state start
// var postcode = document.getElementById("Postcode").value.trim();
if ((state == "VIC") amp;amp; ((postcode.charAt(0) == "3") || (postcode.charAt(0) == "8"))){
}
else if ((state == "NSW") amp;amp; ((postcode.charAt(0) == "1") || (postcode.charAt(0) == "2"))){
}
else if ((state == "QLD") amp;amp; ((postcode.charAt(0) == "4") || (postcode.charAt(0) == "9"))) {
}
else if ((state == "NT" || state == "NT ") amp;amp; (postcode.charAt(0) == "0")){
}
else if ((state == "WA" || state == "WA ") amp;amp; (postcode.charAt(0) == "6")) {
}
else if ((state == "SA" || state == "SA ") amp;amp; (postcode.charAt(0) =="5")) {
}
else if ((state == "TAS") amp;amp; (postcode.charAt(0) == "7")){
}
else if ((state == "ACT") amp;amp; (postcode.charAt(0) == "0")){
}
else{
errorMsgstate =" Postcode not matched with staten ";
result = false;
} //Postcode match with state End
// var OtherSkills = document.getElementById("other").checked;
if(OtherSkills amp;amp; document.getElementById("Other_skills").value.trim().length===0){
errorMsgskills =" Specify other skills nnnnnnnnnnn ";
result = false;
}
if (errorMsgage!=""){
document.getElementById("errage").innerHTML=errorMsgage;
}
if (errorMsgstate!=""){
document.getElementById("errstate").innerHTML=errorMsgstate;
}
if (errorMsgskills!=""){
document.getElementById("errskills").innerHTML=errorMsgskills;
}
saveInfoSessionStorage();
return resu<
}
function init(){
if (document.getElementById("jobPage")) {
document.getElementById("jobhyperlink").onclick = saveResu<// save job no
}
getInfoSessionStorage(); //// Retrieve from session storage
if (document.getElementById("applyPage")) {
getResult(); // get job no
document.getElementById("applyform").onsubmit = validation;//validation
}
}
window.onload = init; <!DOCTYPE html>
<!-- This is the apply page of Assignment1 -->
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="description" content="Assigment1" />
<meta name="keywords" content="HTML5, CSS" />
<meta name="author" content="Marwan Alrehaili" />
<!-- other meta stuff -->
<link href="styles/style.css" rel="stylesheet"/>
<title> Mar | IT solutions</title>
</head>
<!-- This is a comment. Indenting child elements makes the markup much more readable -->
<body id="applyPage">
<header>
<!-- Logo Starts -->
<img src="images/logo.png" alt="logo" >
<!-- #Logo Ends -->
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="jobs.html">Jobs</a></li>
<li><a href="apply.html">Apply</a></li>
<li><a href="about.html">About</a></li>
<li><a href="enhancments.html">Enhancment</a></li>
</ul>
</nav>
</header>
<main>
<h1> Let's Start By Entrring Your Information</h1>
<form id="applyform" method="post" action="https://mercury.swin.edu.au/it000000/formtest.php">
<label for="Job_number">Job reference number:</label>
<input type="text" readonly placeholder="Enter Job number" id="Job_number" name="Job_reference_number" pattern="[A-Za-z0-9]{}" maxlength="5" required><span id="Job_number"></span><br>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname" placeholder="First name" pattern="[A-Za-z]{}" maxlength="20" required><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname" placeholder="Last name" pattern="[A-Za-z]{}" maxlength="20" required><br><br>
<label for="date">Date of birth:</label>
<input type="text" pattern="d{1,2}/d{1,2}/d{4}" placeholder="dd/mm/yyyy" id="date" name="Date_of_Birth" value="dd/mm/yyyy" required>
<a id="errage"></a><br> <!-- #display error massage -->
<fieldset>
<legend>Your Gender:</legend>
<label for="male">male</label>
<input class="inputs" type="radio" name="Gender" id="male"
value="male" required >
<label for="female">female</label>
<input class="inputs" type="radio" name="Gender" id="female"
value="female">
</fieldset>
<br>
<label for="Street_Address">Street Address</label>
<input type="text" id="Street_Address" name="Street Address" pattern="[A-Za-z0-9]{}" maxlength="40" required >
<br><br>
<label for="Suburb_town">Suburb/town</label>
<input type="text" id="Suburb_town" name="Suburb_town" pattern="[A-Za-z0-9]{}" maxlength="40" required><br><br>
<label for="State">Choose your State:</label>
<select id="State" name="State" >
<option selected value="VIC">VIC</option>
<option value="NSW">NSW</option>
<option value="QLD">QLD</option>
<option value="NT">NT</option>
<option value="WA">WA</option>
<option value="SA">SA</option>
<option value="TAS">TAS</option>
<option value="ACT">ACT</option>
</select>
<a id="errstate"></a> <!-- #display error massage -->
<br><br>
<label for="Postcode">Postcode:</label>
<input type="text" id="Postcode" name="Postcode" pattern="[0-9]{4}" maxlength="4" required> <br><br>
<label for="email">Email address:</label>
<input type="email" id="email" pattern="[a-z0-9._% -] @[a-z0-9.-] .[a-z]{1-4}" required><br>
<br>
<label for="Phone_number">Phone number:</label>
<input type="text" id="Phone_number" name="Phone number" pattern="[0-9 ]{8,12}" maxlength="12" required><br>
<label>skill list:</label><br>
<label><input type="checkbox" id="HTML" name="skill" value="HTML"/>HTML</label>
<label><input type="checkbox" id="Java" name="skill" value="Java"/>Java</label>
<label><input type="checkbox" id="c " name="skill" value="c "/>c </label>
<label><input type="checkbox" id="other" name="skill">Other skills (Please list bellow)</label>
<br>
<label for="Other_skills">Other skills:</label><br>
<textarea name="Other_skills" rows="6" cols="30" id="Other_skills" placeholder="Enter any other skills..."></textarea>
<a id="errskills"></a> <!-- #display error massage -->
<br><br>
<input type="submit" value="Apply">
</form>
<br>
</main>
<footer>
<hr>
<p>Sources..</p>
<p>ae.indeed.com</p>
<p>https://www.unico.com.au/</p>
<p>2021 Marwan Alrehaili</p>
</footer>
<!-- #link to javascript file -->
<script src="js/javascript.js"></script>
</body>
</html> re