Scribd
Upload
4 views

webTech file MJ

The document outlines a series of experiments focused on web development using HTML and CSS. Each experiment aims to create different web components, including navigation pages, simple and complex calculators, emphasizing structure, styling, and user interaction. The provided code snippets illustrate the implementation of these components with specific objectives and styles.

Uploaded by

Yuvraj Mritunjay Singh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views

webTech file MJ

The document outlines a series of experiments focused on web development using HTML and CSS. Each experiment aims to create different web components, including navigation pages, simple and complex calculators, emphasizing structure, styling, and user interaction. The provided code snippets illustrate the implementation of these components with specific objectives and styles.

Uploaded by

Yuvraj Mritunjay Singh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 27

Experiment:3

Aim: Create a navigation page using html and css.


Objective : To create a basic page frame using HTML and CSS, we'll structure the HTML to
define the sections of the page, and then use CSS to style those sections. The objective is to
set up a clean, organized layout that can serve as a foundation for any web page.
Code:
Index.html
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Frames Example</title>
<link rel="stylesheet" href="style.css">
</head>
<frameset cols="20%, 80%">
<frame src="navigation.html" name="navigation">
<frame src="content.html" name="content">
<noframes>

<body>
<h1>Welcome to My Website</h1>
<p>This website uses frames, which your browser
does not support.</p>
<p>Use the navigation menu to explore different
sections of the site.</p>
</body>
</noframes>
</frameset>

</html>

Navigation.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Navigation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul>
<li><a href="cv.html" target="content">My C V</a></li>
<li><a href="" target="content">Link 2</a></li>
<li><a href="" target="content">Link 3</a></li>
</ul>
</body>
</html>

Content.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Content</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- This will be replaced by content from the clicked links -->
</body>
</html>

Style.css

/* General styles for all frames */


body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}

nav {
background-color: #333;
height: 100vh;
color: white;
padding: 1rem;
}

nav ul {
list-style: none;
padding: 0;
}
nav ul li {
margin-bottom: 1rem;
}

nav ul li a {
color: white;
text-decoration: none;
transition: color 0.3s;
}

nav ul li a:hover {
color: #4CAF50;
}

main {
padding: 2rem;
}

h2 {
color: #333;
}

p {
color: #666;
}

/* Specific styles for frameset */


frameset, frame {
border: none; /* Remove default frame borders */
}

Output:
Experiment: 4
Aim: Create a page frame using Html and Css.
Objective: The objective is to design and implement a user-friendly and visually appealing
navigation page using HTML and CSS, enhancing the website's usability and accessibility. This
exercise aims to teach basic web development principles, including HTML structuring, CSS
styling, and responsive design techniques.

Code:
Navigation.html
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-
scale=1.0" />
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/
all.min.css"/>
<link rel="stylesheet" href="style.css" />
<title>dropdown Menu</title>
</head>
<body>
<div class="menu-bar">
<h1 class="logo">@rtist<span>MJ</span></h1>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Pages <i class="fas fa-caret-down"></i></a>

<div class="dropdown-menu">
<ul>
<li><a href="#">Pricing</a></li>
<li><a href="#">Portfolio</a></li>
<li>
<a href="#">Team <i class="fas fa-caret-
right"></i></a>

<div class="dropdown-menu-1">
<ul>
<li><a href="#">Team-1</a></li>
<li><a href="#">Team-2</a></li>
<li><a href="#">Team-3</a></li>
<li><a href="#">Team-4</a></li>
</ul>
</div>
</li>
<li><a href="#">FAQ</a></li>
</ul>
</div>
</li>
<li><a href="#">Blog</a>
</li>
<li><a href="#">Contact us</a></li>
</ul>
</div>

<div class="hero">
&nbsp;
</div>
</body>
</html>

Style.css
:root {
--color-primary: #0073ff;
--color-white: #e9e9e9;
--color-black: #141d28;
--color-black-1: #212b38;
}

body, html {
margin: 0;
padding: 0;
height: 100%;
font-family: Arial, sans-serif;
background: url('img/img2.jpg') no-repeat center center fixed;
background-size: cover;
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: sans-serif;

.logo {
color: var(--color-white);
font-size: 30px;
}

.logo span {
color: var(--color-primary);
}

.menu-bar {
background-color: var(--color-black);
height: 80px;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 5%;

position: relative;
}

.menu-bar ul {
list-style: none;
display: flex;
}

.menu-bar ul li {
/* width: 120px; */
padding: 10px 30px;
/* text-align: center; */
position: relative;
}

.menu-bar ul li a {
font-size: 20px;
color: var(--color-white);
text-decoration: none;

transition: all 0.3s;


}

.menu-bar ul li a:hover {
color: var(--color-primary);
}

.fas {
float: right;
margin-left: 10px;
padding-top: 3px;
}

/* dropdown menu style */


.dropdown-menu {
display: none;
}

.menu-bar ul li:hover .dropdown-menu {


display: block;
position: absolute;
left: 0;
top: 100%;
background-color: var(--color-black);
}

.menu-bar ul li:hover .dropdown-menu ul {


display: block;
margin: 10px;
}

.menu-bar ul li:hover .dropdown-menu ul li {


width: 150px;
padding: 10px;
}

.dropdown-menu-1 {
display: none;
}
.dropdown-menu ul li:hover .dropdown-menu-1 {
display: block;
position: absolute;
left: 150px;
top: 0;
background-color: var(--color-black);
}

.hero {
height: calc(100vh - 80px);
background-image: url(./bg.jpg);
background-position: center;
}

Output:
Experiment : 5
Aim: Implement a simple calculator using Html and Css.
Objective: The objective is to create a basic calculator interface using HTML for structure
and CSS for styling. The calculator should have buttons for digits (0-9), arithmetic operations
(+, -, *, /), and a display to show the entered numbers and the result of calculations.

Code:
// program for a simple calculator

// take the operator input


const operator = prompt('Enter operator ( either +, -, * or / ): ');

// take the operand input


const number1 = parseFloat(prompt('Enter first number: '));
const number2 = parseFloat(prompt('Enter second number: '));

let result;

// using if...else if... else


if (operator == '+') {
result = number1 + number2;
}
else if (operator == '-') {
result = number1 - number2;
}
else if (operator == '*') {
result = number1 * number2;
}
else {
result = number1 / number2;
}

// display the result


console.log(`${number1} ${operator} ${number2} = ${result}`);

Output:
Experiment: 6
Aim: Implement a complex calculator using Html and Css
Objective: The objective is to design and implement a complex calculator
using HTML and CSS, focusing on creating an interactive and visually
appealing interface. This experiment aims to teach advanced web
development skills, including the structuring of complex HTML elements,
sophisticated CSS styling, and enhancing user experience through
intuitive design.

Code:
Calculator.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Title</title>
</head>
<body>
<div class="container">
<div class="calculator dark">
<div class="theme-toggler active">
<i class="toggler-icon"></i>
</div>
<div class="display-screen">
<div id="display"></div>
</div>
<div class="buttons">
<table>
<tr>
<td><button class="btn-operator"
id="clear">C</button></td>
<td><button class="btn-operator"
id="/">&divide;</button></td>
<td><button class="btn-operator"
id="*">&times;</button></td>
<td><button class="btn-operator"
id="backspace"><</button></td>
</tr>
<tr>
<td><button class="btn-number"
id="7">7</button></td>
<td><button class="btn-number"
id="8">8</button></td>
<td><button class="btn-number"
id="9">9</button></td>
<td><button class="btn-operator" id="-">-
</button></td>
</tr>
<tr>
<td><button class="btn-number"
id="4">4</button></td>
<td><button class="btn-number"
id="5">5</button></td>
<td><button class="btn-number"
id="6">6</button></td>
<td><button class="btn-operator"
id="+">+</button></td>
</tr>
<tr>
<td><button class="btn-number"
id="1">1</button></td>
<td><button class="btn-number"
id="2">2</button></td>
<td><button class="btn-number"
id="3">3</button></td>
<td rowspan="2"><button class="btn-equal"
id="equal">=</button></td>
</tr>
<tr>
<td><button class="btn-operator"
id="(">(</button></td>
<td><button class="btn-number"
id="0">0</button></td>
<td><button class="btn-operator"
id=")">)</button></td>
</tr>
</table>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

Style.css
* {
padding: 0;
margin: 0;
box-sizing: border-box;
outline: 0;
transition: all 0.5s ease;
}

body {
font-family: sans-serif;
}

a {
text-decoration: none;
color: #fff;
}

body {
background-image: linear-gradient( to bottom right, rgba(116, 110,
110, 0.993),rgba(56, 53, 53, 0.993));
}

.container {
height: 100vh;
width: 100vw;
display: grid;
place-items: center;
}

.calculator {
position: relative;
height: auto;
width: auto;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 30px #000;
}

.theme-toggler {
position: absolute;
top: 30px;
right: 30px;
color: #fff;
cursor: pointer;
z-index: 1;
}

.theme-toggler.active {
color: #333;
}

.theme-toggler.active::before {
background-color: #fff;
}

.theme-toggler::before {
content: '';
height: 30px;
width: 30px;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
background-color: #333;
z-index: -1;
}

#display {
margin: 0 10px;
height: 150px;
width: auto;
max-width: 270px;
display: flex;
align-items: flex-end;
justify-content: flex-end;
font-size: 30px;
margin-bottom: 20px;
overflow-x: scroll;
}

#display::-webkit-scrollbar {
display: block;
height: 3px;
}

button {
height: 60px;
width: 60px;
border: 0;
border-radius: 30px;
margin: 5px;
font-size: 20px;
cursor: pointer;
transition: all 200ms ease;
}

button:hover {
transform: scale(1.1);
}

button#equal {
height: 130px;
}

/* light theme */

.calculator {
background-color: #fff;
}

.calculator #display {
color: #0a1e23;
}

.calculator button#clear {
background-color: #ffd5d8;
color: #fc4552;
}

.calculator button.btn-number {
background-color: #c3eaff;
color: #000000;
}

.calculator button.btn-operator {
background-color: #ffd0fb;
color: #f967f3;
}

.calculator button.btn-equal {
background-color: #adf9e7;
color: #000;
}

/* dark theme */

.calculator.dark {
background-color: #071115;
}

.calculator.dark #display {
color: #f8fafb;
}

.calculator.dark button#clear {
background-color: #2d191e;
color: #bd3740;
}

.calculator.dark button.btn-number {
background-color: #1b2f38;
color: #f8fafb;
}

.calculator.dark button.btn-operator {
background-color: #2e1f39;
color: #aa00a4;
}

.calculator.dark button.btn-equal {
background-color: #223323;
color: #ffffff;
}

Script.js
const display = document.querySelector("#display");
const buttons = document.querySelectorAll("button");

buttons.forEach((item) => {
item.onclick = () => {
if (item.id == "clear") {
display.innerText = "";
} else if (item.id == "backspace") {
let string = display.innerText.toString();
display.innerText = string.substr(0, string.length - 1);
} else if (display.innerText != "" && item.id == "equal") {
display.innerText = eval(display.innerText);
} else if (display.innerText == "" && item.id == "equal") {
display.innerText = "Empty!";
setTimeout(() => (display.innerText = ""), 2000);
} else {
display.innerText += item.id;
}
};
});

const themeToggleBtn = document.querySelector(".theme-toggler");


const calculator = document.querySelector(".calculator");
const toggleIcon = document.querySelector(".toggler-icon");
let isDark = true;
themeToggleBtn.onclick = () => {
calculator.classList.toggle("dark");
themeToggleBtn.classList.toggle("active");
isDark = !isDark;
};
Input:

Output:
Experiment: 7
Aim: Create a responsive form using html, css and javaScript.
Objective : The objective is to design and implement a responsive form using HTML, CSS,
and JavaScript, ensuring it functions seamlessly across various devices and screen sizes. This
experiment aims to teach the principles of responsive web design, form validation, and user
interaction to enhance accessibility, usability, and data integrity.

Code:
regForm.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">

<!----======== CSS ======== -->


<link rel="stylesheet" href="style.css">

<!----===== Iconscout CSS ===== -->


<link rel="stylesheet"
href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">

<title>Responsive Regisration Form </title>


</head>
<body>
<div class="container">
<header><img src="img/gu_img.png" alt="GU Logo"
class="center"></header>
<h1>Registration</h1>

<form action="#">
<div class="form first">
<div class="details personal">
<span class="title">Personal Details</span>

<div class="fields">
<div class="input-field">
<label>Full Name</label>
<input type="text" placeholder="Mritunjay
Kumar" required>
</div>
<div class="input-field">
<label>Date of Birth</label>
<input type="date" placeholder="Enter birth
date" required>
</div>

<div class="input-field">
<label>Email</label>
<input type="text"
placeholder="[email protected]" required>
</div>

<div class="input-field">
<label>Mobile Number</label>
<input type="number"
placeholder="62052775XX" required>
</div>

<div class="input-field">
<label>Gender</label>
<select required>
<option disabled selected>Select
gender</option>
<option>Male</option>
<option>Female</option>
<option>Others</option>
</select>
</div>

<div class="input-field">
<label>Occupation</label>
<input type="text" placeholder="Enter your
ccupation" required>
</div>
</div>
</div>

<div class="details ID">


<span class="title">Identity Details</span>

<div class="fields">
<div class="input-field">
<label>ID Type</label>
<input type="text" placeholder="Enter ID
type" required>
</div>

<div class="input-field">
<label>ID Number</label>
<input type="number" placeholder="Enter ID
number" required>
</div>

<div class="input-field">
<label>Issued Authority</label>
<input type="text" placeholder="Enter
issued authority" required>
</div>

<div class="input-field">
<label>Issued State</label>
<input type="text" placeholder="Enter
issued state" required>
</div>

<div class="input-field">
<label>Issued Date</label>
<input type="date" placeholder="Enter your
issued date" required>
</div>

<div class="input-field">
<label>Expiry Date</label>
<input type="date" placeholder="Enter
expiry date" required>
</div>
</div>

<button class="nextBtn">
<span class="btnText">Next</span>
<i class="uil uil-navigator"></i>
</button>
</div>
</div>

<div class="form second">


<div class="details address">
<span class="title">Address Details</span>

<div class="fields">
<div class="input-field">
<label>Address Type</label>
<input type="text" placeholder="Permanent
or Temporary" required>
</div>
<div class="input-field">
<label>Nationality</label>
<input type="text" placeholder="Enter
nationality" required>
</div>

<div class="input-field">
<label>State</label>
<input type="text" placeholder="Enter your
state" required>
</div>

<div class="input-field">
<label>District</label>
<input type="text" placeholder="Enter your
district" required>
</div>

<div class="input-field">
<label>Block Number</label>
<input type="number" placeholder="Enter
block number" required>
</div>

<div class="input-field">
<label>Ward Number</label>
<input type="number" placeholder="Enter
ward number" required>
</div>
</div>
</div>

<div class="details family">


<span class="title">Family Details</span>

<div class="fields">
<div class="input-field">
<label>Father Name</label>
<input type="text" placeholder="Enter
father name" required>
</div>

<div class="input-field">
<label>Mother Name</label>
<input type="text" placeholder="Enter
mother name" required>
</div>
<div class="input-field">
<label>Grandfather</label>
<input type="text" placeholder="Enter
grandfther name" required>
</div>

<div class="input-field">
<label>Spouse Name</label>
<input type="text" placeholder="Enter
spouse name" required>
</div>

<div class="input-field">
<label>Father in Law</label>
<input type="text" placeholder="Father in
law name" required>
</div>

<div class="input-field">
<label>Mother in Law</label>
<input type="text" placeholder="Mother in
law name" required>
</div>
</div>

<div class="buttons">
<div class="backBtn">
<i class="uil uil-navigator"></i>
<span class="btnText">Back</span>
</div>

<button class="sumbit">
<span class="btnText">Submit</span>
<i class="uil uil-navigator"></i>
</button>
</div>
</div>
</div>
</form>
</div>

<script src="script.js"></script>
</body>
</html>

Style.css
@import url('https://fonts.googleapis.com/css2?
family=Poppins:wght@200;300;400;500;600&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}

body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #b5b8c1;
}
.container{
position: relative;
max-width: 900px;
width: 100%;
border-radius: 6px;
padding: 30px;
margin: 0 15px;
background-color: #fff;
box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}
.center{
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
.container header{
background-color: #265df2;
}
.container h1{
position: relative;
font-size: 20px;
font-weight: 600;
color: #333;
}
.container h1::before{
content: "";
position: absolute;
left: 0;
bottom: -2px;
height: 3px;
width: 27px;
border-radius: 8px;
background-color: #4070f4;
}
.container form{
position: relative;
margin-top: 16px;
min-height: 490px;
background-color: #fff;
overflow: hidden;
}
.container form .form{
position: absolute;
background-color: #fff;
transition: 0.3s ease;
}
.container form .form.second{
opacity: 0;
pointer-events: none;
transform: translateX(100%);
}
form.secActive .form.second{
opacity: 1;
pointer-events: auto;
transform: translateX(0);
}
form.secActive .form.first{
opacity: 0;
pointer-events: none;
transform: translateX(-100%);
}
.container form .title{
display: block;
margin-bottom: 8px;
font-size: 16px;
font-weight: 500;
margin: 6px 0;
color: #333;
}
.container form .fields{
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
form .fields .input-field{
display: flex;
width: calc(100% / 3 - 15px);
flex-direction: column;
margin: 4px 0;
}
.input-field label{
font-size: 12px;
font-weight: 500;
color: #2e2e2e;
}
.input-field input, select{
outline: none;
font-size: 14px;
font-weight: 400;
color: #333;
border-radius: 5px;
border: 1px solid #aaa;
padding: 0 15px;
height: 42px;
margin: 8px 0;
}
.input-field input :focus,
.input-field select:focus{
box-shadow: 0 3px 6px rgba(0,0,0,0.13);
}
.input-field select,
.input-field input[type="date"]{
color: #707070;
}
.input-field input[type="date"]:valid{
color: #333;
}
.container form button, .backBtn{
display: flex;
align-items: center;
justify-content: center;
height: 45px;
max-width: 200px;
width: 100%;
border: none;
outline: none;
color: #fff;
border-radius: 5px;
margin: 25px 0;
background-color: #4070f4;
transition: all 0.3s linear;
cursor: pointer;
}
.container form .btnText{
font-size: 14px;
font-weight: 400;
}
form button:hover{
background-color: #265df2;
}
form button i,
form .backBtn i{
margin: 0 6px;
}
form .backBtn i{
transform: rotate(180deg);
}
form .buttons{
display: flex;
align-items: center;
}
form .buttons button , .backBtn{
margin-right: 14px;
}

@media (max-width: 750px) {


.container form{
overflow-y: scroll;
}
.container form::-webkit-scrollbar{
display: none;
}
form .fields .input-field{
width: calc(100% / 2 - 15px);
}
}

@media (max-width: 550px) {


form .fields .input-field{
width: 100%;
}
}

Script.js
const form = document.querySelector("form"),
nextBtn = form.querySelector(".nextBtn"),
backBtn = form.querySelector(".backBtn"),
allInput = form.querySelectorAll(".first input");

nextBtn.addEventListener("click", ()=> {
allInput.forEach(input => {
if(input.value != ""){
form.classList.add('secActive');
}else{
form.classList.remove('secActive');
}
})
})

backBtn.addEventListener("click", () =>
form.classList.remove('secActive'));

Output:

Responsive Output:

You might also like