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

intial

Browse Source
This commit is contained in:
Vegard Bieker Matthey
2025-10-23 20:10:40 +02:00
commit c02ccaf272
5 changed files with 262 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored Normal file
View File

@@ -0,0 +1 @@
*.pdf

141
form.html Normal file
View File

@@ -0,0 +1,141 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>User registration</title>
<meta charset="UTF-8">
<link href="style.css" rel="stylesheet">
<script src="script.js"></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>
<label for="birthdate">
Birthdate:
<input type="date" id="birthdate" max="2007-10-23" name="userinfo">
</label>
<br>
<label for="countries">
Country:
<select name="countries" id="country-select">
<option value="">--Please choose a country--</option>
<option value="norway">Norway</option>
<option value="germany">Germany</option>
<option value="denmark">Denmark</option>
<option value="china">China</option>
</select>
</label>
<br>
<fieldset>
<legend>Gender:</legend>
<label for="male">
<input type="radio" id="gender" name="gender" required>
Male
</label>
<br>
<label for="female">
<input type="radio" id="gender" name="gender">
Female
</label>
<br>
<label for="other">
<input type="radio" id="gender" name="gender">
Other
</label>
</fieldset>
<fieldset>
<legend>Interests:</legend>
<label for="interests">
<input type="checkbox" id="sports" name="interests">
Sports
</label>
<br>
<label for="interests">
<input type="checkbox" id="reading" name="interests">
Reading
</label>
<br>
<label for="interests">
<input type="checkbox" id="traveling" name="interests">
Traveling
</label>
</fieldset>
<label for="comments">
Comments:
<br>
<textarea id="comments" name="comments"></textarea>
</label>
<br>
<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>
<option value="2"></option>
<option value="3"></option>
<option value="4"></option>
<option value="5"></option>
<option value="6"></option>
<option value="7"></option>
<option value="8"></option>
<option value="9"></option>
<option value="10"></option>
</datalist>
</label>
<br>
<label for="profile_picture_upload">
Upload profile picture:
<br>
<input type="file" id="profile_picture_upload" name="userinfo">
</label>
<br>
<input type="submit" value="Submit user info">
<br>
<input type="reset" value="Reset user info">
</fieldset>
</form>
</main>
<footer>
<p>&copy; 2025 Responsive Website</p>
</footer>
</body>
</html>

44
responsive.html Normal file
View File

@@ -0,0 +1,44 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>A title</title>
<meta charset="UTF-8">
<link href="style.css" rel="stylesheet">
</head>
<body>
<header>
<h1>Responsive Website Design</h1>
<nav>
<ul>
<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>
</ul>
</nav>
</header>
<main>
<section class="intro">
<h2>Welcome to our site</h2>
<p>This is a demonstration of a responsive website using HTML5 and CSS3.</p>
</section>
<section class="features">
<div class="feature-item">
<h3>Feature 1</h3>
<p>Description of feature 1.</p>
</div>
<div class="feature-item">
<h3>Feature 2</h3>
<p>Description of feature 2.</p>
</div>
<div class="feature-item">
<h3>Feature 3</h3>
<p>Description of feature 3.</p>
</div>
</section>
</main>
<footer>
<p>&copy; 2025 Responsive Website</p>
</footer>
</body>
</html>

17
script.js Normal file
View File

@@ -0,0 +1,17 @@
const value = document.querySelector("#satisfaction_level");
const input = document.querySelector("#satisfaction");
value.textContent = input.value;
input.addEventListener("input", (event) => {
value.textContent = event.target.value;
});
const form = document.getElementById('userinfo');
const checkboxes = form.querySelectorAll('input[name="interests"]');
const checkedCount = Array.from(checkboxes).some(cb => cb.checked);
form.addEventListener('submit', (event) => {
if (checkedCount < 1) {
event.preventDefault();
alert('Please select at least one country.');
}
});

59
style.css Normal file
View File

@@ -0,0 +1,59 @@
* {
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;
}