This simple calculator provides basic arithmetic operations (addition, subtraction, multiplication, and division) and includes a clear button ('C') to reset the input and an equal button ('=') to calculate the result.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Calculator</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.calculator {
border: 1px solid #ccc;
border-radius: 8px;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
input[type="button"] {
width: 50px;
height: 50px;
margin: 5px;
font-size: 1.2em;
border: none;
cursor: pointer;
}
input[type="text"] {
width: 100%;
margin: 10px 0;
padding: 10px;
font-size: 1.5em;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="calculator">
<input type="text" id="result" readonly>
<input type="button" value="7" onclick="appendToResult('7')">
<input type="button" value="8" onclick="appendToResult('8')">
<input type="button" value="9" onclick="appendToResult('9')">
<input type="button" value="+" onclick="appendToResult('+')">
<br>
<input type="button" value="4" onclick="appendToResult('4')">
<input type="button" value="5" onclick="appendToResult('5')">
<input type="button" value="6" onclick="appendToResult('6')">
<input type="button" value="-" onclick="appendToResult('-')">
<br>
<input type="button" value="1" onclick="appendToResult('1')">
<input type="button" value="2" onclick="appendToResult('2')">
<input type="button" value="3" onclick="appendToResult('3')">
<input type="button" value="*" onclick="appendToResult('*')">
<br>
<input type="button" value="C" onclick="clearResult()">
<input type="button" value="0" onclick="appendToResult('0')">
<input type="button" value="=" onclick="calculate()">
<input type="button" value="/" onclick="appendToResult('/')">
</div>
<script>
function appendToResult(value) {
document.getElementById('result').value += value;
}
function clearResult() {
document.getElementById('result').value = '';
}
function calculate() {
try {
const result = eval(document.getElementById('result').value);
document.getElementById('result').value = result;
} catch (error) {
document.getElementById('result').value = 'Error';
}
}
</script>
</body>
</html>
The Grade Calculator project is a simple web application built using HTML, CSS, and JavaScript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grade Calculator</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.container {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 300px;
}
h1 {
text-align: center;
}
input, button {
width: calc(100% - 20px);
margin: 10px 0;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
background-color: #007bff;
color: white;
border: none;
}
button:hover {
background-color: #0056b3;
}
.result {
text-align: center;
margin-top: 20px;
}
.grade-category {
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<h1>Grade Calculator</h1>
<input type="number" id="math" placeholder="Math grade" min="0" max="100">
<input type="number" id="science" placeholder="Science grade" min="0" max="100">
<input type="number" id="history" placeholder="History grade" min="0" max="100">
<input type="number" id="english" placeholder="English grade" min="0" max="100">
<button onclick="calculateGrades()">Calculate Grades</button>
<div id="result" class="result"></div>
</div>
<script>
function calculateGrades() {
// Variables and Data Types
let mathGrade = parseFloat(document.getElementById('math').value);
let scienceGrade = parseFloat(document.getElementById('science').value);
let historyGrade = parseFloat(document.getElementById('history').value);
let englishGrade = parseFloat(document.getElementById('english').value);
// Validating input
if (isNaN(mathGrade) || isNaN(scienceGrade) || isNaN(historyGrade) || isNaN(englishGrade)) {
alert('Please enter valid grades for all subjects.');
return;
}
// Arithmetic Operators
let total = mathGrade + scienceGrade + historyGrade + englishGrade;
let average = total / 4;
// Determine grade category
let gradeCategory;
if (average >= 90) {
gradeCategory = 'A';
} else if (average >= 80) {
gradeCategory = 'B';
} else if (average >= 70) {
gradeCategory = 'C';
} else if (average >= 60) {
gradeCategory = 'D';
} else {
gradeCategory = 'F';
}
// Display the result
const resultDiv = document.getElementById('result');
resultDiv.innerHTML = `
<p>Total: ${total}</p>
<p>Average: ${average.toFixed(2)}</p>
<p class="grade-category">Grade Category: ${gradeCategory}</p>
`;
}
</script>
</body>
</html>
Create a program that calculates the tip amount and total bill based on the bill amount and desired tip percentage.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tip Calculator</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.container {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 300px;
}
h1 {
text-align: center;
}
input, button {
width: calc(100% - 20px);
margin: 10px 0;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
background-color: #007bff;
color: white;
border: none;
}
button:hover {
background-color: #0056b3;
}
.result {
text-align: center;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1>Tip Calculator</h1>
<input type="number" id="billAmount" placeholder="Bill Amount" min="0" step="0.01">
<input type="number" id="tipPercentage" placeholder="Tip Percentage" min="0" max="100" step="0.1">
<button onclick="calculateTip()">Calculate Tip</button>
<div id="result" class="result"></div>
</div>
<script>
function calculateTip() {
// Variables and Data Types
let billAmount = parseFloat(document.getElementById('billAmount').value);
let tipPercentage = parseFloat(document.getElementById('tipPercentage').value);
// Validating input
if (isNaN(billAmount) || isNaN(tipPercentage) || billAmount < 0 || tipPercentage < 0) {
alert('Please enter valid bill amount and tip percentage.');
return;
}
// Arithmetic Operators
let tipAmount = (billAmount * tipPercentage) / 100;
let totalAmount = billAmount + tipAmount;
// Display the result
const resultDiv = document.getElementById('result');
resultDiv.innerHTML = `
<p>Tip Amount: $${tipAmount.toFixed(2)}</p>
<p>Total Amount: $${totalAmount.toFixed(2)}</p>
`;
}
</script>
</body>
</html>
Create a program that calculates the tip amount and total bill based on the bill amount and desired tip percentage.
# Currency Converter
# User inputs
amount = float(input("Enter the amount in your currency: "))
conversion_rate = float(input("Enter the conversion rate to the target currency: "))
# Convert amount
converted_amount = amount * conversion_rate
# Display result
print(f"The converted amount is: {converted_amount}")
Create a program that converts temperature from Celsius to Fahrenheit and vice versa
# Temperature Converter
# User input
choice = input("Type 'C' to convert Celsius to Fahrenheit or 'F' to convert Fahrenheit to Celsius: ").upper()
if choice == 'C':
celsius = float(input("Enter temperature in Celsius: "))
fahrenheit = (celsius * 9/5) + 32
print(f"{celsius}°C is equal to {fahrenheit}°F")
elif choice == 'F':
fahrenheit = float(input("Enter temperature in Fahrenheit: "))
celsius = (fahrenheit - 32) * 5/9
print(f"{fahrenheit}°F is equal to {celsius}°C")
else:
print("Invalid choice!")
Simple Leap Year Checker project using HTML, CSS, and JavaScript. The project will allow users to input a year and determine whether it is a leap year or not.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Leap Year Checker</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.container {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 300px;
text-align: center;
}
input, button {
width: calc(100% - 20px);
margin: 10px 0;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
background-color: #007bff;
color: white;
border: none;
}
button:hover {
background-color: #0056b3;
}
.result {
margin-top: 20px;
font-size: 1.2em;
}
.success {
color: green;
}
.failure {
color: red;
}
</style>
</head>
<body>
<div class="container">
<h1>Leap Year Checker</h1>
<input type="number" id="yearInput" placeholder="Enter a year" min="0">
<button onclick="checkLeapYear()">Check Leap Year</button>
<div id="result" class="result"></div>
</div>
<script>
function checkLeapYear() {
const year = parseInt(document.getElementById('yearInput').value);
const messageDiv = document.getElementById('result');
if (isNaN(year) || year < 0) {
messageDiv.textContent = 'Please enter a valid year.';
messageDiv.className = 'result failure';
return;
}
let isLeap = false;
if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {
isLeap = true;
}
if (isLeap) {
messageDiv.textContent = `${year} is a leap year.`;
messageDiv.className = 'result success';
} else {
messageDiv.textContent = `${year} is not a leap year.`;
messageDiv.className = 'result failure';
}
}
</script>
</body>
</html>
The Speed Limit Checker is a simple web application that allows users to input their current speed and verifies if they are within a specified speed limit. Using JavaScript for logic and HTML/CSS for the interface, it provides immediate feedback on whether the user is driving safely within the legal speed limit.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Speed Limit Checker</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.container {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 300px;
text-align: center;
}
input, button {
width: calc(100% - 20px);
margin: 10px 0;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
background-color: #007bff;
color: white;
border: none;
}
button:hover {
background-color: #0056b3;
}
.result {
margin-top: 20px;
font-size: 1.2em;
}
.success {
color: green;
}
.failure {
color: red;
}
</style>
</head>
<body>
<div class="container">
<h1>Speed Limit Checker</h1>
<input type="number" id="speedInput" placeholder="Enter your speed (km/h)" min="0">
<button onclick="checkSpeed()">Check Speed</button>
<div id="result" class="result"></div>
</div>
<script>
function checkSpeed() {
// Get the speed input value
const speed = parseFloat(document.getElementById('speedInput').value);
const speedLimit = 60; // Speed limit in km/h
const messageDiv = document.getElementById('result');
// Check if the speed is a valid number
if (isNaN(speed) || speed < 0) {
messageDiv.textContent = 'Please enter a valid speed.';
messageDiv.className = 'result failure';
return;
}
// Determine the message based on speed
if (speed <= speedLimit) {
messageDiv.textContent = 'You are within the speed limit.';
messageDiv.className = 'result success';
} else {
messageDiv.textContent = 'You are over the speed limit!';
messageDiv.className = 'result failure';
}
}
</script>
</body>
</html>
Display the day of the week based on a numerical input (1 for Monday, 2 for Tuesday, etc.).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Day of the Week Finder</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.container {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 300px;
text-align: center;
}
input, button {
width: calc(100% - 20px);
margin: 10px 0;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
background-color: #007bff;
color: white;
border: none;
}
button:hover {
background-color: #0056b3;
}
.result {
margin-top: 20px;
font-size: 1.2em;
}
</style>
</head>
<body>
<div class="container">
<h1>Day of the Week Finder</h1>
<input type="date" id="dateInput">
<button onclick="findDayOfWeek()">Find Day</button>
<div id="result" class="result"></div>
</div>
<script>
function findDayOfWeek() {
// Get the date input value
const dateInput = document.getElementById('dateInput').value;
const date = new Date(dateInput);
const daysOfWeek = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
// Validate the date input
if (isNaN(date.getTime())) {
document.getElementById('result').textContent = 'Please enter a valid date.';
return;
}
// Get the day of the week
const dayOfWeek = daysOfWeek[date.getDay()];
// Display the result
document.getElementById('result').textContent = `The day of the week is: ${dayOfWeek}`;
}
</script>
</body>
</html>
The Age Verifier project is a simple web application that demonstrates the use of HTML, CSS, and JavaScript to create an interactive user interface.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Age Verifier</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.container {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 300px;
text-align: center;
}
input, button {
width: calc(100% - 20px);
margin: 10px 0;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
background-color: #007bff;
color: white;
border: none;
}
button:hover {
background-color: #0056b3;
}
.message {
margin-top: 20px;
font-size: 1.2em;
}
.success {
color: green;
}
.failure {
color: red;
}
</style>
</head>
<body>
<div class="container">
<h1>Age Verifier</h1>
<input type="number" id="ageInput" placeholder="Enter your age" min="0">
<button onclick="verifyAge()">Verify Age</button>
<div id="message" class="message"></div>
</div>
<script>
function verifyAge() {
// Get the age input value
let age = parseInt(document.getElementById('ageInput').value);
const messageDiv = document.getElementById('message');
// Check if the age is a valid number
if (isNaN(age) || age < 0) {
messageDiv.textContent = 'Please enter a valid age.';
messageDiv.className = 'message failure';
return;
}
// Determine the message based on age
if (age >= 18) {
messageDiv.textContent = 'You are old enough to access this site.';
messageDiv.className = 'message success';
} else {
messageDiv.textContent = 'You are not old enough to access this site.';
messageDiv.className = 'message failure';
}
}
</script>
</body>
</html>
The BMI (Body Mass Index) Calculator is a simple web application designed to help users determine their BMI based on their weight and height.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BMI Calculator</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.container {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 300px;
}
h1 {
text-align: center;
}
input, button {
width: calc(100% - 20px);
margin: 10px 0;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
background-color: #007bff;
color: white;
border: none;
}
button:hover {
background-color: #0056b3;
}
.result {
text-align: center;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1>BMI Calculator</h1>
<input type="number" id="weight" placeholder="Weight (kg)" min="0" step="0.1">
<input type="number" id="height" placeholder="Height (m)" min="0" step="0.01">
<button onclick="calculateBMI()">Calculate BMI</button>
<div id="result" class="result"></div>
</div>
<script>
function calculateBMI() {
// Variables and Data Types
let weight = parseFloat(document.getElementById('weight').value);
let height = parseFloat(document.getElementById('height').value);
// Validating input
if (isNaN(weight) || isNaN(height) || weight <= 0 || height <= 0) {
alert('Please enter valid weight and height.');
return;
}
// Arithmetic Operators
let bmi = weight / (height * height);
// Classification based on BMI
let classification;
if (bmi < 18.5) {
classification = 'Underweight';
} else if (bmi < 24.9) {
classification = 'Normal weight';
} else if (bmi < 29.9) {
classification = 'Overweight';
} else {
classification = 'Obesity';
}
// Display the result
const resultDiv = document.getElementById('result');
resultDiv.innerHTML = `
<p>BMI: ${bmi.toFixed(2)}</p>
<p>Classification: ${classification}</p>
`;
}
</script>
</body>
</html>
FizzBuzz is a classic programming exercise often used in coding interviews. The task is simple: write a program that prints the numbers from 1 to 100.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FizzBuzz</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
text-align: center;
}
.output {
margin-top: 20px;
font-size: 1.2em;
}
</style>
</head>
<body>
<div class="container">
<h1>FizzBuzz</h1>
<button onclick="runFizzBuzz()">Run FizzBuzz</button>
<div id="output" class="output"></div>
</div>
<script>
function runFizzBuzz() {
var outputDiv = document.getElementById("output");
outputDiv.innerHTML = ""; // Clear previous output
for (var i = 1; i <= 100; i++) {
if (i % 3 === 0 && i % 5 === 0) {
outputDiv.innerHTML += "FizzBuzz ";
} else if (i % 3 === 0) {
outputDiv.innerHTML += "Fizz ";
} else if (i % 5 === 0) {
outputDiv.innerHTML += "Buzz ";
} else {
outputDiv.innerHTML += i + " ";
}
}
}
</script>
</body>
</html>
Create a program that generates the Fibonacci sequence up to a user-inputted number. Use a while loop to generate the sequence.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fibonacci Sequence</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.container {
text-align: center;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
input, button {
margin: 10px;
padding: 10px;
}
.result {
margin-top: 20px;
font-size: 1.2em;
}
</style>
</head>
<body>
<div class="container">
<h1>Fibonacci Sequence</h1>
<input type="number" id="numTerms" placeholder="Number of Terms">
<button onclick="generateFibonacci()">Generate Sequence</button>
<div id="output" class="result"></div>
</div>
<script>
function generateFibonacci() {
var numTerms = parseInt(document.getElementById("numTerms").value);
var outputDiv = document.getElementById("output");
if (isNaN(numTerms) || numTerms <= 0) {
outputDiv.textContent = "Please enter a valid number of terms.";
return;
}
var sequence = [0, 1];
for (var i = 2; i < numTerms; i++) {
sequence.push(sequence[i - 1] + sequence[i - 2]);
}
outputDiv.textContent = "Fibonacci Sequence: " + sequence.join(", ");
}
</script>
</body>
</html>
The Multiplication Table Generator is a simple tool that allows users to generate multiplication tables for a given number. Users input a number, and the tool generates a table displaying the multiplication results from 1 to 10 for that number. It's helpful for students learning multiplication and for quick reference.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiplication Table Generator</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
text-align: center;
}
input, button {
margin: 10px;
padding: 10px;
}
table {
border-collapse: collapse;
margin-top: 20px;
}
th, td {
border: 1px solid black;
padding: 8px;
}
</style>
</head>
<body>
<div class="container">
<h1>Multiplication Table Generator</h1>
<input type="number" id="numberInput" placeholder="Enter a number">
<button onclick="generateTable()">Generate Table</button>
<div id="tableContainer"></div>
</div>
<script>
function generateTable() {
var number = parseInt(document.getElementById("numberInput").value);
var tableContainer = document.getElementById("tableContainer");
tableContainer.innerHTML = ""; // Clear previous table
if (isNaN(number) || number <= 0) {
tableContainer.innerHTML = "<p>Please enter a valid positive number.</p>";
return;
}
var table = document.createElement("table");
var caption = document.createElement("caption");
caption.textContent = "Multiplication Table for " + number;
table.appendChild(caption);
for (var i = 1; i <= 10; i++) {
var row = document.createElement("tr");
var cell1 = document.createElement("td");
var cell2 = document.createElement("td");
cell1.textContent = i;
cell2.textContent = i * number;
row.appendChild(cell1);
row.appendChild(cell2);
table.appendChild(row);
}
tableContainer.appendChild(table);
}
</script>
</body>
</html>
Calendar Generator is a project that dynamically generates a calendar for a given month and year. It allows users to select a month and year, and then generates a calendar displaying the days of that month.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calendar Generator</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.container {
text-align: center;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
select, button {
margin: 10px;
padding: 10px;
}
table {
margin-top: 20px;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
}
</style>
</head>
<body>
<div class="container">
<h1>Calendar Generator</h1>
<select id="month">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<input type="number" id="year" placeholder="Year">
<button onclick="generateCalendar()">Generate Calendar</button>
<div id="calendarContainer"></div>
</div>
<script>
function generateCalendar() {
var month = document.getElementById("month").value;
var year = document.getElementById("year").value;
var calendarContainer = document.getElementById("calendarContainer");
calendarContainer.innerHTML = ""; // Clear previous calendar
if (isNaN(year) || year < 0) {
calendarContainer.innerHTML = "<p>Please enter a valid year.</p>";
return;
}
var daysInMonth = new Date(year, month, 0).getDate();
var firstDayOfMonth = new Date(year, month - 1, 1).getDay(); // 0 for Sunday, 1 for Monday, etc.
var table = document.createElement("table");
var caption = document.createElement("caption");
caption.textContent = "Calendar for " + month + "/" + year;
table.appendChild(caption);
var headerRow = document.createElement("tr");
var daysOfWeek = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
for (var i = 0; i < daysOfWeek.length; i++) {
var th = document.createElement("th");
th.textContent = daysOfWeek[i];
headerRow.appendChild(th);
}
table.appendChild(headerRow);
var date = 1;
for (var i = 0; i < 6; i++) { // Maximum 6 rows in a month
var row = document.createElement("tr");
for (var j = 0; j < 7; j++) { // 7 columns for each day of the week
var cell = document.createElement("td");
if (i === 0 && j < firstDayOfMonth) { // Empty cells before the first day of the month
cell.textContent = "";
} else if (date > daysInMonth) { // Stop adding cells when all days of the month have been added
break;
} else {
cell.textContent = date++;
}
row.appendChild(cell);
}
table.appendChild(row);
if (date > daysInMonth) { // Stop adding rows when all days of the month have been added
break;
}
}
calendarContainer.appendChild(table);
}
</script>
</body>
</html>
Reverse a String" is a simple project that takes a string input from the user and then reverses it. It's a basic exercise commonly used to practice string manipulation in programming. This project demonstrates how to take user input, manipulate strings, and display the result back to the user.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reverse String</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.container {
text-align: center;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
input, button {
margin: 10px;
padding: 10px;
}
.result {
margin-top: 20px;
font-size: 1.2em;
}
</style>
</head>
<body>
<div class="container">
<h1>Reverse String</h1>
<input type="text" id="inputString" placeholder="Enter a string">
<button onclick="reverseString()">Reverse</button>
<div id="output" class="result"></div>
</div>
<script>
function reverseString() {
var input = document.getElementById("inputString").value;
var outputDiv = document.getElementById("output");
var reversedString = input.split('').reverse().join('');
outputDiv.textContent = "Reversed string: " + reversedString;
}
</script>
</body>
</html>
The CSV File Reader project allows users to upload a CSV (Comma Separated Values) file, read its content, and display it in a table format on a webpage. Users can select a CSV file using the provided file input, and the JavaScript code parses the file content and generates a table dynamically, showing each row and column of the CSV data.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSV File Reader</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.container {
text-align: center;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
input[type="file"] {
margin: 10px;
}
table {
margin-top: 20px;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
}
</style>
</head>
<body>
<div class="container">
<h1>CSV File Reader</h1>
<input type="file" id="csvFileInput" accept=".csv">
<div id="tableContainer"></div>
</div>
<script>
document.getElementById('csvFileInput').addEventListener('change', function() {
var file = this.files[0];
var tableContainer = document.getElementById("tableContainer");
tableContainer.innerHTML = ""; // Clear previous table
if (file) {
var reader = new FileReader();
reader.readAsText(file);
reader.onload = function(event) {
var csv = event.target.result;
var rows = csv.split('\n');
var table = document.createElement("table");
for (var i = 0; i < rows.length; i++) {
var row = document.createElement("tr");
var columns = rows[i].split(',');
for (var j = 0; j < columns.length; j++) {
var cell = document.createElement("td");
cell.textContent = columns[j];
row.appendChild(cell);
}
table.appendChild(row);
}
tableContainer.appendChild(table);
};
}
});
</script>
</body>
</html>
The Text File Reader is a simple web application that allows users to read the content of text files directly in their web browser. Users can select a text file from their local system using the file input field provided. Once the file is selected, the application reads the content of the file and displays it on the webpage.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text File Reader</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.container {
text-align: center;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
input[type="file"] {
margin: 10px;
}
pre {
margin-top: 20px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
white-space: pre-wrap;
word-wrap: break-word;
}
</style>
</head>
<body>
<div class="container">
<h1>Text File Reader</h1>
<input type="file" id="textFileInput" accept=".txt">
<pre id="textOutput"></pre>
</div>
<script>
document.getElementById('textFileInput').addEventListener('change', function() {
var file = this.files[0];
var textOutput = document.getElementById('textOutput');
textOutput.textContent = ""; // Clear previous content
if (file) {
var reader = new FileReader();
reader.readAsText(file);
reader.onload = function(event) {
textOutput.textContent = event.target.result;
};
}
});
</script>
</body>
</html>
JSON Reader allows you to upload and read JSON files directly in your web browser. With this tool, you can easily view the contents of JSON files in a readable format. Just select a JSON file, and the tool will display its contents in a structured and organized manner, making it convenient to inspect and analyze JSON data.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSON File Reader</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.container {
text-align: center;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
input[type="file"] {
margin: 10px;
}
pre {
margin-top: 20px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
white-space: pre-wrap;
word-wrap: break-word;
}
</style>
</head>
<body>
<div class="container">
<h1>JSON File Reader</h1>
<input type="file" id="jsonFileInput" accept=".json">
<pre id="jsonOutput"></pre>
</div>
<script>
document.getElementById('jsonFileInput').addEventListener('change', function() {
var file = this.files[0];
var jsonOutput = document.getElementById('jsonOutput');
jsonOutput.textContent = ""; // Clear previous content
if (file) {
var reader = new FileReader();
reader.readAsText(file);
reader.onload = function(event) {
var jsonData = JSON.parse(event.target.result);
jsonOutput.textContent = JSON.stringify(jsonData, null, 4);
};
}
});
</script>
</body>
</html>
Simple implementation using HTML, CSS, and JavaScript to allow users to upload an image file (such as PNG or JPEG) and display it..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image File Converter</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.container {
text-align: center;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
input[type="file"] {
margin: 10px;
}
img {
margin-top: 20px;
max-width: 100%;
}
</style>
</head>
<body>
<div class="container">
<h1>Image File Converter</h1>
<input type="file" id="imageFileInput" accept=".jpg, .jpeg, .png">
<img id="previewImage" src="" alt="Preview Image">
</div>
<script>
document.getElementById('imageFileInput').addEventListener('change', function() {
var file = this.files[0];
var previewImage = document.getElementById('previewImage');
if (file) {
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(event) {
previewImage.src = event.target.result;
};
} else {
previewImage.src = '';
}
});
</script>
</body>
</html>
The Image Reader is a tool created using HTML, CSS, and JavaScript that allows you to upload an image file and preview it. It enables you to select an image file and displays the selected image as a preview. No additional software is required for this tool; it runs directly in a web browser. It's simple and user-friendly, both in terms of coding and design.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Reader</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.container {
text-align: center;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
input[type="file"] {
margin: 10px;
}
img {
margin-top: 20px;
max-width: 100%;
}
</style>
</head>
<body>
<div class="container">
<h1>Image Reader</h1>
<input type="file" id="imageFileInput" accept=".jpg, .jpeg, .png">
<img id="previewImage" src="" alt="Preview Image">
</div>
<script>
document.getElementById('imageFileInput').addEventListener('change', function() {
var file = this.files[0];
var previewImage = document.getElementById('previewImage');
if (file) {
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(event) {
previewImage.src = event.target.result;
};
} else {
previewImage.src = '';
}
});
</script>
</body>
</html>
Create a program that calculates the simple interest given the principal amount, rate of interest, and time period.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Budget Tracker</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.container {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 300px;
}
h1 {
text-align: center;
}
input, button {
width: calc(100% - 20px);
margin: 10px 0;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
background-color: #28a745;
color: white;
border: none;
}
button:hover {
background-color: #218838;
}
.transaction-list {
list-style: none;
padding: 0;
}
.transaction {
display: flex;
justify-content: space-between;
margin: 10px 0;
}
.transaction.expense {
color: red;
}
.transaction.income {
color: green;
}
.total {
font-size: 1.2em;
text-align: center;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1>Budget Tracker</h1>
<input type="text" id="description" placeholder="Description">
<input type="number" id="amount" placeholder="Amount">
<button onclick="addTransaction()">Add Transaction</button>
<ul id="transaction-list" class="transaction-list"></ul>
<div id="total" class="total">Total: $0.00</div>
</div>
<script>
let transactions = [];
const transactionList = document.getElementById('transaction-list');
const totalDisplay = document.getElementById('total');
function addTransaction() {
const description = document.getElementById('description').value;
const amount = parseFloat(document.getElementById('amount').value);
if (description === '' || isNaN(amount)) {
alert('Please enter a valid description and amount.');
return;
}
const transaction = {
description: description,
amount: amount
};
transactions.push(transaction);
updateTransactions();
}
function updateTransactions() {
transactionList.innerHTML = '';
let total = 0;
transactions.forEach(transaction => {
const transactionItem = document.createElement('li');
transactionItem.classList.add('transaction');
transactionItem.classList.add(transaction.amount < 0 ? 'expense' : 'income');
transactionItem.innerHTML = `
${transaction.description}
<span>${transaction.amount < 0 ? '-' : '+'}$${Math.abs(transaction.amount).toFixed(2)}</span>
`;
transactionList.appendChild(transactionItem);
total += transaction.amount;
});
totalDisplay.textContent = `Total: $${total.toFixed(2)}`;
}
</script>
</body>
</html>
Develop a weather application that fetches data from a weather API and displays current weather information for a specified location.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather App</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.container {
text-align: center;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
input[type="text"], button {
margin: 10px;
padding: 10px;
}
#weatherInfo {
margin-top: 20px;
font-size: 1.2em;
}
</style>
</head>
<body>
<div class="container">
<h1>Weather App</h1>
<input type="text" id="cityInput" placeholder="Enter city name">
<button onclick="getWeather()">Get Weather</button>
<div id="weatherInfo"></div>
</div>
<script>
function getWeather() {
const apiKey = 'YOUR_API_KEY'; // Replace with your OpenWeatherMap API key
const city = document.getElementById('cityInput').value;
const weatherInfo = document.getElementById('weatherInfo');
fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`)
.then(response => response.json())
.then(data => {
const { name, weather, main } = data;
const weatherDescription = weather[0].description;
const temperature = main.temp;
weatherInfo.innerHTML = `
<h2>${name}</h2>
<p>${weatherDescription}</p>
<p>Temperature: ${temperature}°C</p>
`;
})
.catch(error => {
console.error('Error fetching weather data:', error);
weatherInfo.textContent = 'Error fetching weather data. Please try again.';
});
}
</script>
</body>
</html>
Javascript code for a number guessing game with some improvements:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Guessing Game</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.container {
text-align: center;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
input[type="number"], button {
margin: 10px;
padding: 10px;
}
#result {
margin-top: 20px;
font-size: 1.2em;
}
</style>
</head>
<body>
<div class="container">
<h1>Guessing Game</h1>
<p>Guess a number between 1 and 100:</p>
<input type="number" id="guessInput" min="1" max="100">
<button onclick="checkGuess()">Check Guess</button>
<div id="result"></div>
</div>
<script>
function checkGuess() {
var randomNumber = Math.floor(Math.random() * 100) + 1;
var guess = parseInt(document.getElementById('guessInput').value);
var resultDiv = document.getElementById('result');
if (isNaN(guess) || guess < 1 || guess > 100) {
resultDiv.textContent = 'Please enter a valid number between 1 and 100.';
} else if (guess === randomNumber) {
resultDiv.textContent = 'Congratulations! You guessed the correct number.';
} else {
resultDiv.textContent = 'Sorry, the correct number was ' + randomNumber + '. Try again!';
}
}
</script>
</body>
</html>
The Random Quote Generator is a simple web application that fetches a random quote from an external API and displays it on the screen when a button is clicked. It provides users with inspirational or thought-provoking quotes to uplift their mood or spark creativity.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Random Quote Generator</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.container {
text-align: center;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
#quote {
margin: 20px 0;
font-size: 1.2em;
}
button {
margin: 10px;
padding: 10px 20px;
font-size: 1em;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="container">
<h1>Random Quote Generator</h1>
<div id="quote"></div>
<button onclick="getQuote()">Generate Quote</button>
</div>
<script>
function getQuote() {
fetch('https://api.quotable.io/random')
.then(response => response.json())
.then(data => {
document.getElementById('quote').textContent = `"${data.content}" —${data.author}`;
})
.catch(error => {
console.error('Error fetching quote:', error);
document.getElementById('quote').textContent = 'Error fetching quote. Please try again later.';
});
}
</script>
</body>
</html>
he OTP (One-Time Password) Generator is a simple web application that generates a random 6-digit code each time the "Generate OTP" button is clicked. This code can be used for various authentication purposes, such as logging in to a website, confirming transactions, or verifying identity.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OTP Generator</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.container {
text-align: center;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
#otpDisplay {
font-size: 2em;
margin-bottom: 20px;
}
button {
padding: 10px 20px;
font-size: 1em;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="container">
<h1>OTP Generator</h1>
<div id="otpDisplay"></div>
<button onclick="generateOTP()">Generate OTP</button>
</div>
<script>
function generateOTP() {
const length = 6; // Length of the OTP
const characters = '0123456789'; // Characters to use for generating OTP
let otp = '';
for (let i = 0; i < length; i++) {
const index = Math.floor(Math.random() * characters.length);
otp += characters[index];
}
document.getElementById('otpDisplay').textContent = otp;
}
</script>
</body>
</html>
Create a program that simulates a bank account system using OOP concepts. The system should allow users to create accounts, deposit and withdraw funds, and check their account balances.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Banking System</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.container {
text-align: center;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
input[type="text"], input[type="number"], input[type="password"], button {
margin: 10px;
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>Banking System</h1>
<div id="loginForm">
<label for="username">Username:</label>
<input type="text" id="username" placeholder="Enter your username">
<br>
<label for="password">Password:</label>
<input type="password" id="password" placeholder="Enter your password">
<br>
<button onclick="login()">Login</button>
</div>
<div id="dashboard" style="display: none;">
<h2>Welcome, <span id="user"></span>!</h2>
<p>Your current balance: $<span id="balance"></span></p>
<label for="amount">Enter amount:</label>
<input type="number" id="amount" placeholder="Enter amount">
<br>
<button onclick="deposit()">Deposit</button>
<button onclick="withdraw()">Withdraw</button>
<button onclick="logout()">Logout</button>
</div>
</div>
<script>
class Transaction {
constructor(type, amount) {
this.type = type; // 'deposit' or 'withdraw'
this.amount = amount;
this.timestamp = new Date().toLocaleString();
}
}
class Account {
constructor(username, password) {
this.username = username;
this.password = password;
this.balance = 0;
this.transactions = [];
}
deposit(amount) {
this.balance += amount;
this.transactions.push(new Transaction('deposit', amount));
}
withdraw(amount) {
if (amount > this.balance) {
console.log("Insufficient funds");
return;
}
this.balance -= amount;
this.transactions.push(new Transaction('withdraw', amount));
}
}
class Bank {
constructor() {
this.accounts = [];
}
createAccount(username, password) {
const account = new Account(username, password);
this.accounts.push(account);
return account;
}
findAccount(username, password) {
return this.accounts.find(account => account.username === username && account.password === password);
}
}
const bank = new Bank();
function login() {
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
const account = bank.findAccount(username, password);
if (account) {
document.getElementById('loginForm').style.display = 'none';
document.getElementById('dashboard').style.display = 'block';
document.getElementById('user').textContent = username;
document.getElementById('balance').textContent = account.balance;
} else {
alert('Invalid username or password');
}
}
function deposit() {
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
const amount = parseInt(document.getElementById('amount').value);
const account = bank.findAccount(username, password);
if (account) {
account.deposit(amount);
document.getElementById('balance').textContent = account.balance;
} else {
alert('Invalid username or password');
}
}
function withdraw() {
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
const amount = parseInt(document.getElementById('amount').value);
const account = bank.findAccount(username, password);
if (account) {
account.withdraw(amount);
document.getElementById('balance').textContent = account.balance;
} else {
alert('Invalid username or password');
}
}
function logout() {
document.getElementById('loginForm').style.display = 'block';
document.getElementById('dashboard').style.display = 'none';
document.getElementById('username').value = '';
document.getElementById('password').value = '';
document.getElementById('amount').value = '';
}
</script>
</body>
</html>
Create a program that simulates a shopping cart system using OOP concepts. The system should allow users to add and remove items from their cart, update quantities, and calculate the total cost.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shopping Cart</title>
<style>
.container {
max-width: 800px;
margin: 20px auto;
text-align: center;
}
.cart {
border: 1px solid #ccc;
padding: 10px;
}
.cart h2 {
margin-top: 0;
}
.cart ul {
list-style: none;
padding: 0;
}
.cart li {
margin-bottom: 5px;
}
button {
padding: 10px 20px;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="container">
<h1>Shopping Cart</h1>
<div id="items"></div>
<div class="cart">
<h2>Cart</h2>
<ul id="cart-items"></ul>
<p id="total">Total: $0</p>
<button onclick="checkout()">Checkout</button>
</div>
</div>
<script>
class Product {
constructor(name, price) {
this.name = name;
this.price = price;
}
}
class ShoppingCart {
constructor() {
this.items = [];
}
addItem(product) {
this.items.push(product);
}
removeItem(index) {
this.items.splice(index, 1);
}
getTotal() {
return this.items.reduce((total, item) => total + item.price, 0);
}
}
const cart = new ShoppingCart();
function displayItems() {
const itemsDiv = document.getElementById("items");
itemsDiv.innerHTML = "";
products.forEach((product, index) => {
const button = `<button onclick="addToCart(${index})">Add to Cart</button>`;
itemsDiv.innerHTML += `<div>${product.name} - $${product.price} ${button}</div>`;
});
}
function addToCart(index) {
const product = products[index];
cart.addItem(product);
displayCart();
}
function removeFromCart(index) {
cart.removeItem(index);
displayCart();
}
function displayCart() {
const cartItemsUl = document.getElementById("cart-items");
const totalPara = document.getElementById("total");
cartItemsUl.innerHTML = "";
cart.items.forEach((item, index) => {
cartItemsUl.innerHTML += `<li>${item.name} - $${item.price} <button onclick="removeFromCart(${index})">Remove</button></li>`;
});
totalPara.textContent = `Total: $${cart.getTotal()}`;
}
function checkout() {
alert(`Thank you for shopping! Your total is: $${cart.getTotal()}`);
}
const products = [
new Product("Product 1", 10),
new Product("Product 2", 20),
new Product("Product 3", 30)
];
displayItems();
</script>
</body>
</html>
Create a program that simulates an employee management system using OOP concepts. The system should allow users to create employees, update employee information, and calculate employee salaries.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Employee Management System</title>
<style>
.container {
max-width: 600px;
margin: 20px auto;
text-align: center;
}
input, button {
margin: 5px;
padding: 10px;
}
button {
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="container">
<h1>Employee Management System</h1>
<form id="employeeForm">
<input type="text" id="name" placeholder="Enter name" required>
<input type="number" id="age" placeholder="Enter age" required>
<input type="text" id="position" placeholder="Enter position" required>
<button type="submit">Add Employee</button>
</form>
<ul id="employeeList"></ul>
</div>
<script>
class Employee {
constructor(name, age, position) {
this.name = name;
this.age = age;
this.position = position;
}
}
const employeeForm = document.getElementById("employeeForm");
const employeeList = document.getElementById("employeeList");
employeeForm.addEventListener("submit", function(event) {
event.preventDefault();
const name = document.getElementById("name").value;
const age = document.getElementById("age").value;
const position = document.getElementById("position").value;
const employee = new Employee(name, age, position);
addEmployeeToList(employee);
employeeForm.reset();
});
function addEmployeeToList(employee) {
const listItem = document.createElement("li");
listItem.innerHTML = `
<strong>${employee.name}</strong> - Age: ${employee.age}, Position: ${employee.position}
`;
employeeList.appendChild(listItem);
}
</script>
</body>
</html>
Create a program that simulates a traffic simulator using OOP concepts. The system should allow users to create vehicles, update vehicle speeds, and simulate traffic flow.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Traffic Simulator</title>
<style>
body {
font-family: Arial, sans-serif;
}
.road {
width: 100%;
height: 200px;
background-color: #666;
position: relative;
overflow: hidden;
}
.car {
width: 50px;
height: 30px;
background-color: #f00;
position: absolute;
bottom: 0;
transition: left 1s linear;
}
</style>
</head>
<body>
<div class="road">
<div class="car" id="car1"></div>
<div class="car" id="car2"></div>
</div>
<script>
const car1 = document.getElementById("car1");
const car2 = document.getElementById("car2");
let position1 = 0;
let position2 = 0;
function moveCar1() {
position1 += 10;
car1.style.left = position1 + "px";
if (position1 > window.innerWidth) {
position1 = -50;
}
requestAnimationFrame(moveCar1);
}
function moveCar2() {
position2 += 15;
car2.style.left = position2 + "px";
if (position2 > window.innerWidth) {
position2 = -50;
}
requestAnimationFrame(moveCar2);
}
moveCar1();
moveCar2();
</script>
</body>
</html>
The Library Management System (LMS) presented here is a simple web-based application designed to manage books in a library. It allows users to add new books to the library's collection and view the list of available books.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Library Management System</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.container {
text-align: center;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
input[type="text"], input[type="number"], button {
margin: 10px;
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>Library Management System</h1>
<div id="addBookForm">
<h2>Add Book</h2>
<label for="title">Title:</label>
<input type="text" id="title" placeholder="Enter book title">
<br>
<label for="author">Author:</label>
<input type="text" id="author" placeholder="Enter book author">
<br>
<button onclick="addBook()">Add Book</button>
</div>
<hr>
<div id="booksList">
<h2>Available Books</h2>
<ul id="books"></ul>
</div>
</div>
<script>
class Book {
constructor(title, author) {
this.title = title;
this.author = author;
}
}
class Library {
constructor() {
this.books = [];
}
addBook(title, author) {
const book = new Book(title, author);
this.books.push(book);
}
listBooks() {
const booksList = document.getElementById('books');
booksList.innerHTML = '';
this.books.forEach(book => {
const li = document.createElement('li');
li.textContent = `${book.title} by ${book.author}`;
booksList.appendChild(li);
});
}
}
const library = new Library();
function addBook() {
const title = document.getElementById('title').value;
const author = document.getElementById('author').value;
library.addBook(title, author);
library.listBooks();
// Clear input fields
document.getElementById('title').value = '';
document.getElementById('author').value = '';
}
// Initial list of books
library.addBook('The Great Gatsby', 'F. Scott Fitzgerald');
library.addBook('To Kill a Mockingbird', 'Harper Lee');
library.listBooks();
</script>
</body>
</html>