Skip to content

Commit 1e064b6

Browse files
nilajcodernilajcoder
committed
FormvalidationWeatherTemp
1 parent 8682266 commit 1e064b6

11 files changed

Lines changed: 367 additions & 0 deletions

File tree

‎ValidationandWeatherTemp/css/about.css‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
2+
*{
3+
box-sizing: border-box;
4+
margin: 0;
5+
padding: 0;
6+
}
7+
8+
9+
body{
10+
font-family: Arial, sans-serif;
11+
background-color: #f0f0f0;
12+
color: #333;
13+
align-items: center;
14+
justify-content: center;
15+
}
16+
17+
18+
.aboutorm{
19+
display: inline-table;
20+
width: 100%;
21+
max-width: 750px;
22+
margin: 0 auto;
23+
padding: 20px;
24+
background-color: #f9f9f9;
25+
border-radius: 5px;
26+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
27+
border: 1px solid black;
28+
}

‎ValidationandWeatherTemp/css/home.css‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
2+
3+
.navbar{
4+
5+
background-color: darkblue;
6+
color: white;
7+
padding: 20px;
8+
9+
}
10+
.navbar a{
11+
color: white;
12+
text-decoration: none;
13+
padding: 20px;
14+
}

‎ValidationandWeatherTemp/css/login.css‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
2+
.login-form{
3+
display: grid;
4+
width: 100%;
5+
max-width: 400px;
6+
margin: 0 auto;
7+
padding: 20px;
8+
background-color: #f9f9f9;
9+
border-radius: 5px;
10+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
11+
border: 1px solid black;
12+
}
13+
14+
h2{
15+
text-align: center;
16+
}
17+

‎ValidationandWeatherTemp/css/register.css‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
2+
3+
.register-form{
4+
display: grid;
5+
width: 100%;
6+
max-width: 400px;
7+
margin: 0 auto;
8+
padding: 20px;
9+
background-color: #f9f9f9;
10+
border-radius: 5px;
11+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
12+
border: 1px solid black;
13+
14+
}
15+
16+
h2{
17+
text-align: center;
18+
}

‎ValidationandWeatherTemp/html/about.html‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Document</title>
7+
<link rel="stylesheet" href="/css/home.css">
8+
</head>
9+
<body>
10+
11+
12+
<header>
13+
<nav class="navbar">
14+
<a href="home.html">Home</a>
15+
<a href="about.html">About</a>
16+
<a href="login.html">Login</a>
17+
<a href="register.html">Register</a>
18+
</nav>
19+
</header>
20+
21+
22+
<div class="temperature-converter-container">
23+
<h2>Temperature Converter</h2>
24+
<label for="temperature">Enter Temperature:</label>
25+
<input type="text" id="temperature" placeholder="Enter temperature">
26+
27+
<label for="unit">Select Unit:</label>
28+
<select id="unit">
29+
<option value="Celsius">Celsius to Fahrenheit</option>
30+
<option value="Fahrenheit">Fahrenheit to Celsius</option>
31+
</select>
32+
33+
<button onclick="convertTemperature()">Convert</button>
34+
35+
<p id="result"></p>
36+
37+
38+
<script>
39+
  function convertTemperature() {
40+
    const temperatureInput = document.getElementById('temperature').value;
41+
    const unit = document.getElementById('unit').value;
42+
    let resultText = '';
43+
44+
    if (temperatureInput === '') {
45+
      resultText = 'Please enter a temperature!';
46+
    } else {
47+
      let temperature = parseFloat(temperatureInput);
48+
      if (unit === 'Celsius') {
49+
        const fahrenheit = (temperature * 9/5) + 32;
50+
        resultText = `${temperature}°C is equal to ${fahrenheit.toFixed(2)}°F.`;
51+
      } else {
52+
        const celsius = (temperature - 32) * 5/9;
53+
        resultText = `${temperature}°F is equal to ${celsius.toFixed(2)}°C.`;
54+
      }
55+
    }
56+
57+
    document.getElementById('result').innerText = resultText;
58+
  }
59+
</script>
60+
61+
</body>
62+
</html>

‎ValidationandWeatherTemp/html/home.html‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Home Page</title>
7+
8+
<link rel="stylesheet" href="/css/home.css">
9+
</head>
10+
<body>
11+
12+
<header>
13+
14+
15+
16+
<nav class="navbar">
17+
<a href="#">Home</a>
18+
<a href="about.html">About</a>
19+
<a href="login.html">Login</a>
20+
<a href="register.html">Register</a>
21+
22+
23+
</nav>
24+
25+
26+
27+
</header>
28+
29+
30+
31+
32+
</body>
33+
</html>

‎ValidationandWeatherTemp/html/login.html‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Document</title>
7+
<link rel="stylesheet" href="/css/home.css">
8+
<link rel="stylesheet" href="/css/login.css">
9+
</head>
10+
<body>
11+
12+
<header>
13+
14+
<h1>Welcome to the Home Page</h1>
15+
16+
<nav class="navbar">
17+
<a href="home.html">Home</a>
18+
<a href="about.html">About</a>
19+
<a href="login.html">Login</a>
20+
<a href="register.html">Register</a>
21+
22+
23+
</nav>
24+
25+
26+
27+
</header>
28+
29+
30+
<div class="login-container">
31+
32+
<form class="login-form" onsubmit=" return validateLoginForm()">
33+
34+
<h2>Login</h2>
35+
36+
<label for="email">Email</label>
37+
<input type="text" id="email" name="email" placeholder="Enter Your Email"> <br><br>
38+
39+
<label for="password">Password:</label>
40+
<input type="password" id="password" name="password" placeholder="Enter Password" ><br><br>
41+
42+
<button type="submit" >Login</button>
43+
44+
<p>Don't have an account? <a href="register.html">Register here</a></p>
45+
</form>
46+
</div>
47+
48+
49+
<script src="/js/login.js"></script>
50+
51+
</body>
52+
</html>

‎ValidationandWeatherTemp/html/register.html‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Document</title>
7+
<link rel="stylesheet" href="/css/home.css">
8+
<link rel="stylesheet" href="/css/register.css">
9+
</head>
10+
<body>
11+
12+
<header>
13+
14+
15+
<nav class="navbar">
16+
<a href="home.html">Home</a>
17+
<a href="about.html">About</a>
18+
<a href="login.html">Login</a>
19+
<a href="register.html">Register</a>
20+
21+
22+
</nav>
23+
24+
25+
26+
</header>
27+
28+
<div class="register-container">
29+
30+
<form class="register-form" onsubmit="return validateRegisterForm()">
31+
<h2>Register</h2>
32+
33+
<label for="username">Username:</label>
34+
<input type="text" id="username" name="username" placeholder="Enter Your Username" > <br><br>
35+
36+
<label for="email">Email:</label>
37+
<input type="text" id="email" name="email" placeholder="Enter Your Email" > <br><br>
38+
39+
<label for="password">Password:</label>
40+
<input type="password" id="password" name="password" placeholder="Enter Password" ><br><br>
41+
42+
<label for ="confirm-password">Confirm Password:</label>
43+
<input type="password" id="confirm-password" name="confirm-password" placeholder="Enter Confirm Password" ><br><br>
44+
45+
46+
<button type="submit" >Register</button>
47+
48+
<p>Already have an account? <a href="login.html">Login here</a></p>
49+
</form>
50+
</div>
51+
52+
53+
54+
<script src="/js/register.js"></script>
55+
56+
</body>
57+
</html>

‎ValidationandWeatherTemp/js/cel.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
function convertToCelsius() {
2+
const fahrenheit = document.getElementById("fahrenheit").value;
3+
let resultText = "";
4+
if (fahrenheit === "") {
5+
document.getElementById("result").innerText = "Please enter a value.";
6+
return;
7+
}
8+
const celsius = ((fahrenheit - 32) * 5) / 9;
9+
resultText=`${fahrenheit}°F ${celsius.toFixed(2)}°C`;
10+
11+
12+
}

‎ValidationandWeatherTemp/js/login.js‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
2+
// validation for login form
3+
function validateLoginForm() {
4+
5+
var email = document.getElementById("email").value;
6+
var password = document.getElementById("password").value;
7+
8+
if (email== "" || password == "") {
9+
alert("Username and Password must be filled out");
10+
11+
return false;
12+
}
13+
14+
if(password.length < 6) {
15+
alert("Password must be at least 6 characters long");
16+
return false;
17+
}
18+
19+
var emailregex= /^\S+@\S+\.\S+$/;
20+
21+
22+
if(!emailregex.test(email)) {
23+
alert("Please enter a valid email address");
24+
return false;
25+
}
26+
27+
28+
// if all validations pass, return true
29+
alert("Login successful!");
30+
return true;
31+
32+
33+
34+
35+
}

0 commit comments

Comments
 (0)