Assignment No.6: Govt .Post Graduate College Jhang
Uploaded by
noumanijazkhokhar442Assignment No.6: Govt .Post Graduate College Jhang
Uploaded by
noumanijazkhokhar442ASSIGNMENT NO.
Submitted to : Sir Abdullah Faraz
Submitted by : Nouman Ijaz
Roll No : 864(110272)
GOVT .POST GRADUATE COLLEGE JHANG
. Coding of Even Odd task :
<!DOCTYPE html>
<html>
<head>
<title>media</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/css">
body {
font-family: Arial, sans-serif;
input[type="number"] {
width: 200px;
height: 30px;
font-size: 18px;
padding: 10px;
button {
width: 100px;
height: 40px;
font-size: 18px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
button:hover {
background-color: #3e8e41;
#result {
font-size: 24px;
font-weight: bold;
margin-top: 20px;
</style>
</head>
<body>
<h1>Even or Odd Checker</h1>
<input type="number" id="numInput" placeholder="Enter a number">
<button id="checkButton">Check</button>
<p id="result"></p>
<script src="script.js">
document.getElementById('checkButton').addEventListener('click',
function() {
var num = document.getElementById('numInput').value;
var result = document.getElementById('result');
if (num % 2 === 0) {
result.innerHTML = num + ' is even.';
} else {
result.innerHTML = num + ' is odd.';
</script>
</body>
</html>
.Out Put Of Coding :
.Coding Of Navbar:
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>nav bar</title>
<style type="text/css">
*{margin: 0;padding: 0;font-family: calibar;box-sizing: border-box;}
nav{width: 100%;height:80px;background:linear-gradient(red,white);}
label.logo{font-size: 40px;color: black;line-height: 80px;}
nav ul{float: right;}
nav ul li{display: inline-block;line-height: 80px;}
nav ul li a{text-decoration: none;color: black;font-size: 28px;text-transform: capitalize;display:
block;padding:8px 20px;margin-right: 20px;}
form{background-color:whitesmoke;border:2px red solid;margin-left:230px;margin-right:230px; }
h1{text-align: center;color: black;}
h3{text-align: center;color: black;font-size: 14px;}
div{text-align: center;}
button{text-align: center;background-color: white;color: black;size: 10px;}
h2{color: red;text-align: right;}
@media(min-width:1024px){
body{width:80%;margin:0 auto;}
@media(max-width:767px){
body{width: 100%;}
</style>
</head>
<body>
<nav>
<label class="logo">Navbar </label>
<ul>
<li><a href="#"> Home</a></li>
<li><a href="#"> About us</a></li>
<li><a href="#"> FAQ</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
<br><br>
<form>
<h1>Login</h1>
<br>
<div>
username :<input type="text" name="">
</div>
<br>
<div>
Password :<input type="text" name="">
</div>
<br>
<h3>Forgotten Password</h3>
<div>
<button>Login</button>
</div>
<h2>Go to website......</h2>
</form>
</body>
</html>
.Output of Coding :
.Coding of leap year :
<!DOCTYPE html>
<html>
<head>
<title>Leap Year Checker</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/css">```
body {
font-family: Arial, sans-serif;
#yearInput {
width: 200px;
height: 30px;
font-size: 18px;
padding: 10px;
#checkButton {
width: 100px;
height: 40px;
font-size: 18px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
#checkButton:hover {
background-color: #3e8e41;
#result {
font-size: 24px;
font-weight: bold;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>Leap Year Checker</h1>
<input type="number" id="yearInput" placeholder="Enter a year">
<button id="checkButton">Check</button>
<p id="result"></p>
<script src="script.js">
document.getElementById('checkButton').addEventListener('click', function() {
var year = document.getElementById('yearInput').value;
var result = document.getElementById('result');
if (year % 4 === 0) {result.innerHTML = year + ' is a leap year.';}
else if
(year % 100 === 0) {
result.innerHTML = year + ' is not a leap year.';}else
if (year % 400 === 0) {
result.innerHTML = year + ' is not a leap year.';
});
</script>
</body>
</html>
.Out Put of Coding :
.Coding Of TODO List: <!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TO do list</title>
<style type="text/css">
*{
box-sizing: border-box;
/* Remove margins and padding from the list */
ul {
margin: 0;
padding: 0;
/* Style the list items */
ul li {
cursor: pointer;
position: relative;
padding: 12px 8px 12px 40px;
background: #eee;
font-size: 18px;
transition: 0.2s;
/* make the list items unselectable */
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
/* Set all odd list items to a different color (zebra-stripes) */
ul li:nth-child(odd) {
background: #f9f9f9;
/* Darker background-color on hover */
ul li:hover {
background: #ddd;
/* When clicked on, add a background color and strike out text */
ul li.checked {
background: #888;
color: #fff;
text-decoration: line-through;
}
/* Add a "checked" mark when clicked on */
ul li.checked::before {
content: '';
position: absolute;
border-color: #fff;
border-style: solid;
border-width: 0 2px 2px 0;
top: 10px;
left: 16px;
transform: rotate(45deg);
height: 15px;
width: 7px;
/* Style the close button */
.close {
position: absolute;
right: 0;
top: 0;
padding: 12px 16px 12px 16px;
.close:hover {
background-color: #f44336;
color: white;
/* Style the header */
.header {
background-color: #f44336;
padding: 30px 40px;
color: white;
text-align: center;
/* Clear floats after the header */
.header:after {
content: "";
display: table;
clear: both;
/* Style the input */
input {
margin: 0;
border: none;
border-radius: 0;
width: 75%;
padding: 10px;
float: left;
font-size: 16px;
/* Style the "Add" button */
.addBtn {
padding: 10px;
width: 25%;
background: #d9d9d9;
color: #555;
float: left;
text-align: center;
font-size: 16px;
cursor: pointer;
transition: 0.3s;
border-radius: 0;
.addBtn:hover {
background-color: #bbb;
</style>
</head>
<body>
<div id="myDIV" class="header">
<h2>My To Do List</h2>
<input type="text" id="myInput" placeholder="Title...">
<span onclick="newElement()" class="addBtn">Add</span>
</div>
<ul id="myUL">
<li>Morning walk</li>
<li class="checked">Pay bills</li>
<li>play Cricket</li>
<li>Buy eggs</li>
<li>Read a book</li>
<li>going to college</li>
</ul>
<script type="text/javascript">
var myNodelist = document.getElementsByTagName("LI");
var i;
for (i = 0; i < myNodelist.length; i++) {
var span = document.createElement("SPAN");
var txt = document.createTextNode("\u00D7");
span.className = "close";
span.appendChild(txt);
myNodelist[i].appendChild(span);
}
// Click on a close button to hide the current list item
var close = document.getElementsByClassName("close");
var i;
for (i = 0; i < close.length; i++) {
close[i].onclick = function() {
var div = this.parentElement;
div.style.display = "none";
// Add a "checked" symbol when clicking on a list item
var list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
if (ev.target.tagName === 'LI') {
ev.target.classList.toggle('checked');
}, false);
// Create a new list item when clicking on the "Add" button
function newElement() {
var li = document.createElement("li");
var inputValue = document.getElementById("myInput").value;
var t = document.createTextNode(inputValue);
li.appendChild(t);
if (inputValue === '') {
alert("You must write something!");
} else {
document.getElementById("myUL").appendChild(li);
document.getElementById("myInput").value = "";
var span = document.createElement("SPAN");
var txt = document.createTextNode("\u00D7");
span.className = "close";
span.appendChild(txt);
li.appendChild(span);
for (i = 0; i < close.length; i++) {
close[i].onclick = function() {
var div = this.parentElement;
div.style.display = "none";
</script>
</body>
</html>
.Out Put of coding:
.Coding of Stope watch :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Stopwatch Timer Application</title>
<link rel="stylesheet" href="stopwatch.css" />
<style type="text/css">
body{
background-color:#64cdac;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
font-family: sans-serif;
.container{
background-color: #eee9e9;
border-radius: 16px;
padding: 20px;
box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
align-items: center;
.title{
font-size: 30px;
margin-bottom: 1.5rem;
.stopwatch{
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
.timer{
font-size: 40px;
background-color: #ffffff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
animation: pulse 1.5s infinite alternate;
@keyframes pulse {
from{
transform: scale(1);
to{
transform: scale(1.05);
.timer span{
width: 110px;
display: inline-block;
text-align: center;
.contorls{
display: flex;
gap: 1rem;
button{
padding: 0.75rem 1.5rem;
font-size: 1rem;
background-color: #64cdac;
color: #ffffff;
border: none;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.3s ease-in-out;
button:hover{
background-color: #0c4b37;
.lap-title{
font-size: 1.5rem;
}
.laps{
width: 100%;
ul{
list-style-type: none;
padding: 0;
margin: 0;
overflow-y: auto;
max-height: 200px;
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
li{
padding: 1rem;
border-bottom: 1px solid #e0e0e0;
li:last-child{
border-bottom: none;
}
li span{
font-weight: 700;
</style>
</head>
<body>
<div class="container">
<h1 class="title">Stopwatch Timer</h1>
<div class="stopwatch">
<div class="timer">
<span id="minutes">00</span>: <span id="seconds">00</span>:
<span id="milliseconds">00</span>
</div>
<div class="contorls">
<button id="startBtn">Start</button>
<button id="stopBtn">Stop</button>
<button id="pauseBtn">Pause</button>
<button id="resetBtn">Reset</button>
</div>
<div class="laps">
<h2 class="lap-title">Lap Timer</h2>
<ul id="laplist"></ul>
</div>
</div>
</div>
<script src="stopwatch.js">
const minutesLabel = document.getElementById('minutes');
const secondsLabel = document.getElementById('seconds');
const millisecondsLabel = document.getElementById('milliseconds');
const startButton = document.getElementById('startBtn');
const stopButton = document.getElementById('stopBtn');
const pauseButton = document.getElementById('pauseBtn');
const resetButton = document.getElementById('resetBtn');
const lapList = document.getElementById('laplist');
let minutes = 0;
let seconds = 0;
let milliseconds = 0;
let interval;
</script>
</body>
</html>
.OutPut of coding :
.Coding of Dark mood button :
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>darkmood</title>
<style type="text/css">
body {
padding: 25px;
background-color: white;
color: black;
font-size: 25px;
.dark-mode {
background-color: black;
color: white;
</style>
</head>
<body>
<h2>Wellcome to my website</h2>
<p>Click the button for dark mood.</p>
<button onclick="myFunction()">dark mode</button>
<script type="text/javascript">
function myFunction() {
var element = document.body;
element.classList.toggle("dark-mode");
</script>
</body>
</html>
.OutPut of coding :
