vegard-uni/webtek-assignment-3
0
0
Fork 0
Code Issues Pull Requests Releases Activity

mobile friendly

Browse Source
This commit is contained in:
Vegard Bieker Matthey
2025-10-24 13:51:56 +02:00
parent c02ccaf272
commit a2461e1cf9
4 changed files with 211 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
form.html
View File

@@ -4,55 +4,42 @@
<title>User registration</title>
<meta charset="UTF-8">
<link href="style.css" rel="stylesheet">
<script src="script.js"></script>
<script src="script.js" defer></script>
</head>
<body>
<header>
<h1>User registration</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<form id="userinfo">
<fieldset>
<legend>What is your personal information?</legend>
<label for="prename">
Prename:
<input type="text" id="prename" name="userinfo" required>
</label>
<br>
<label for="surname">
Surname:
<input type="text" id="surname" name="userinfo" required>
</label>
<br>
<label for="email">
Email:
<input type="email" id="email" name="userinfo" required>
</label>
<br>
<label for="password">
Password:
<input type="password" id="password" name="userinfo" minlength="16" maxlength="1024" required>
</label>
<br>
<label for="phone">
Phone:
<input type="tel" id="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" name="userinfo" required>
</label>
<br>
<div id="name">
<label for="prename">
<input type="text" id="prename" name="userinfo" placeholder="Prename" required>
</label>
<label for="surname">
<input type="text" id="surname" name="userinfo" placeholder="Surname" required>
</label>
</div>
<div id="logininfo">
<label for="email">
<input type="email" id="email" name="userinfo" placeholder="Email" required>
</label>
<label for="password">
<input type="password" id="password" name="userinfo" minlength="16" maxlength="1024" placeholder="Password" required>
</label>
</div>
<div id="phone_container">
<label for="phone">
<input type="tel" id="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" name="userinfo" placeholder="Phone" required>
</label>
</div>
<label for="birthdate">
Birthdate:
<input type="date" id="birthdate" max="2007-10-23" name="userinfo">
</label>
<br>
<label for="countries">
<div>
Country:
<select name="countries" id="country-select">
<option value="">--Please choose a country--</option>
@@ -61,38 +48,38 @@
<option value="denmark">Denmark</option>
<option value="china">China</option>
</select>
</label>
</div>
<br>
<fieldset>
<fieldset id="gender">
<legend>Gender:</legend>
<label for="male">
<input type="radio" id="gender" name="gender" required>
<input type="radio" id="male" name="gender" required>
Male
</label>
<br>
<label for="female">
<input type="radio" id="gender" name="gender">
<input type="radio" id="female" name="gender">
Female
</label>
<br>
<label for="other">
<input type="radio" id="gender" name="gender">
<input type="radio" id="other" name="gender">
Other
</label>
</fieldset>
<fieldset>
<fieldset id="interests">
<legend>Interests:</legend>
<label for="interests">
<label for="sports">
<input type="checkbox" id="sports" name="interests">
Sports
</label>
<br>
<label for="interests">
<label for="reading">
<input type="checkbox" id="reading" name="interests">
Reading
</label>
<br>
<label for="interests">
<label for="traveling">
<input type="checkbox" id="traveling" name="interests">
Traveling
</label>
@@ -103,8 +90,8 @@
<textarea id="comments" name="comments"></textarea>
</label>
<br>
<p>Satisfaction level: <output id="satisfaction_level"></output></p>
<label for="satisfaction">
<p>Satisfaction level: <output id="satisfaction_level"></output>5</p>
<input type="range" id="satisfaction" name="userinfo" min="1" max="10" step="1" value="5" list="markers">
<datalist id="markers">
<option value="1"></option>
@@ -134,7 +121,6 @@
</form>
</main>
<footer>
<p>&copy; 2025 Responsive Website</p>
</footer>
</body>
</html>

70
responsive.html
View File

@@ -1,9 +1,71 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>A title</title>
<meta charset="UTF-8">
<link href="style.css" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
}
header {
background: #333;
color: #fff;
padding: 20px;
text-align: center;
}
nav ul {
list-style: none;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 10px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
.intro {
text-align: center;
padding: 40px;
background: #f4f4f4;
}
.features {
display: flex;
justify-content: space-around;
padding: 20px;
}
.feature-item {
background: #fff;
padding: 20px;
border: 1px solid #ddd;
width: 30%;
}
footer {
text-align: center;
padding: 20px;
background: #333;
color: #fff;
}
</style>
</head>
<body>
<header>
@@ -13,7 +75,7 @@
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="form.html">User Registration</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>

4
script.js
View File

@@ -7,11 +7,11 @@ input.addEventListener("input", (event) => {
const form = document.getElementById('userinfo');
const checkboxes = form.querySelectorAll('input[name="interests"]');
const checkedCount = Array.from(checkboxes).some(cb => cb.checked);
const checkedCount = Array.from(checkboxes).some(cb => cb.checked).length;
form.addEventListener('submit', (event) => {
if (checkedCount < 1) {
event.preventDefault();
alert('Please select at least one country.');
alert('Please select at least one interest.');
}
});

150
style.css
View File

@@ -1,59 +1,129 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
font-family: 'Inter', sans-serif;
line-height: 3.0;
font-size: 32px;
@media (min-width: 600px) {
font-size: 24px;
}
background-color: #bcd3f2;
}
header {
background: #333;
color: #fff;
padding: 20px;
text-align: center;
input {
font-size: 32px;
@media (min-width: 600px) {
font-size: 24px;
}
border-radius: 2em;
border: none;
padding: 0em 1em 0em 1em;
background-color: #0e7c7b;
height: 2em;
}
nav ul {
list-style: none;
padding: 0;
::placeholder {
color: white;
opacity: 1;
}
nav ul li {
display: inline;
margin-right: 10px;
input:focus {
outline: 0.1em solid blue;
}
nav ul li a {
color: #fff;
text-decoration: none;
select {
padding: 0em 1em 0em 1em;
font-size: 32px;
@media (min-width: 600px) {
font-size: 24px;
}
border-radius: 2em;
height: 2em;
border: none;
background-color: #0e7c7b;
color: white;
}
.intro {
text-align: center;
padding: 40px;
background: #f4f4f4;
#gender>label {
display: block;
background-color: #0e7c7b;
border-radius: 2em;
padding: 0em 1em 0em 1em;
color: white;
}
#interests>label {
display: block;
background-color: #0e7c7b;
border-radius: 2em;
padding: 0em 1em 0em 1em;
color: white;
}
.features {
display: flex;
justify-content: space-around;
padding: 20px;
input[type="range"] {
border: none;
box-sizing: border-box;
width: 100%;
}
.feature-item {
background: #fff;
padding: 20px;
border: 1px solid #ddd;
width: 30%;
input[type="radio"]:focus {
outline: none;
}
input[type="checkbox"]:focus {
outline: none;
}
input[type="date"] {
color: white;
}
footer {
text-align: center;
padding: 20px;
background: #333;
color: #fff;
#name {
display: flex;
justify-content: space-between;
width: 100%;
}
#logininfo {
display: flex;
justify-content: space-between;
}
label[for="prename"] {
box-sizing: border-box;
flex: 0 0 45%;
}
label[for="surname"] {
box-sizing: border-box;
flex: 0 0 45%;
}
label[for="email"] {
box-sizing: border-box;
flex: 0 0 45%;
}
label[for="password"] {
box-sizing: border-box;
flex: 0 0 45%;
}
#prename {
width: 100%;
box-sizing: border-box;
}
#surname {
box-sizing: border-box;
width: 100%;
}
#email {
box-sizing: border-box;
width: 100%;
}
#password {
box-sizing: border-box;
width: 100%;
}
#phone_container {
display: flex;
justify-content: space-around;
width: 100%;
}
fieldset {
border: none;
}