WACHEMO UNIVERSITY
COLLEGE OF ENGINEERING AND TECHNOLOGY
DEPARTMENT OF ELECTRICAL AND COMPUTER
ENGINEERING
COURSE TITLE:- DATA STRUCTURE
STREAM:- COMPUTER ENGINEERING
Name Id
1. Addisu Adune WCU1402680
2. Addam Hamba WCU1402674
3. Amin Mohamed WCU1402810
Submission to:- [Link]
Submitted to: 06/01/2026
Infix to postfix conversion
Postfix expression evaluation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Infix to Postfix & Evaluation</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
h1 { font-size: 22px; }
label { font-weight: bold; }
input[type="text"] { width: 400px; padding: 5px; }
button { padding: 5px 10px; margin-top: 5px; }
.box { margin-top: 15px; padding: 10px; border: 1px solid #ccc; }
.result { color: darkblue; font-weight: bold; }
</style>
</head>
<body>
<h1>Infix to Postfix Conversion and Postfix Evaluation</h1>
<div class="box">
<label for="infix">Enter Infix Expression:</label><br>
<input type="text" id="infix" placeholder="e.g. (3+4)*5-6/2">
<br>
<button onclick="convertAndEvaluate()">Convert & Evaluate</button>
</div>
<div class="box">
<p>Postfix Expression: <span id="postfix" class="result"></span></p>
<p>Evaluation Result: <span id="value" class="result"></span></p>
</div>
<script>
// Helper: precedence of operators
function precedence(op) {
if (op === '+' || op === '-') return 1;
if (op === '*' || op === '/') return 2;
if (op === '^') return 3;
return 0;
}
// Helper: check if character is operator
function isOperator(c) {
return ['+','-','*','/','^'].includes(c);
}
// Infix to Postfix using stack
function infixToPostfix(expr) {
let output = [];
let stack = [];
// remove spaces
expr = [Link](/\s+/g, '');
for (let i = 0; i < [Link]; i++) {
let c = expr[i];
// If operand (number, allow multi-digit)
if (/\d/.test(c)) {
let num = c;
// read full number
while (i + 1 < [Link] && /\d/.test(expr[i + 1])) {
num += expr[++i];
}
[Link](num);
}
// If '(' push to stack
else if (c === '(') {
[Link](c);
}
// If ')' pop until '('
else if (c === ')') {
while ([Link] && stack[[Link] - 1] !== '(') {
[Link]([Link]());
}
[Link](); // remove '('
}
// Operator
else if (isOperator(c)) {
while (
[Link] &&
isOperator(stack[[Link] - 1]) &&
precedence(stack[[Link] - 1]) >= precedence(c)
){
[Link]([Link]());
}
[Link](c);
}
}
// Pop remaining operators
while ([Link]) {
[Link]([Link]());
}
return [Link](' ');
}
// Evaluate postfix expression using stack
function evaluatePostfix(postfix) {
let stack = [];
let tokens = [Link]().split(/\s+/);
for (let token of tokens) {
if (token === '') continue;
if (!isNaN(token)) {
// operand
[Link](parseFloat(token));
} else if (isOperator(token)) {
// operator: pop two operands
let b = [Link]();
let a = [Link]();
let res;
switch (token) {
case '+': res = a + b; break;
case '-': res = a - b; break;
case '*': res = a * b; break;
case '/': res = a / b; break;
case '^': res = [Link](a, b); break;
}
[Link](res);
}
}
return [Link]();
}
// Main function for button
function convertAndEvaluate() {
let infix = [Link]('infix').value;
if (!infix) {
alert("Please enter an infix expression.");
return;
}
let postfix = infixToPostfix(infix);
let value = evaluatePostfix(postfix);
[Link]('postfix').textContent = postfix;
[Link]('value').textContent = value;
}
</script>
</body>
</html>
Example and output
From queue
Implementation of an array using circular array
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Circular Queue Implementation</title>
<style>
body { font-family: 'Segoe UI', sans-serif; display: flex; flex-direction:
column; align-items: center; background-color: #f0f2f5; }
.card { background: white; padding: 25px; border-radius: 12px; box-
shadow: 0 4px 10px rgba(0,0,0,0.1); margin-top: 50px; width: 450px; text-align:
center; }
/* Queue Array Visuals */
.queue-container { display: flex; justify-content: center; gap: 5px; margin:
30px 0; }
.slot { width: 60px; height: 60px; border: 2px solid #ccc; display: flex; flex-
direction: column; align-items: center; justify-content: center; background:
#fafafa; position: relative; font-weight: bold; border-radius: 4px; }
.[Link] { border-color: #007bff; background: #e7f1ff; }
/* Pointers (Front/Rear) */
.pointer { position: absolute; font-size: 11px; font-weight: bold; bottom: -
22px; }
.f-ptr { color: #dc3545; left: 5px; }
.r-ptr { color: #28a745; right: 5px; }
.idx-label { position: absolute; top: -18px; font-size: 10px; color: #888; }
.controls { margin-bottom: 15px; }
input { padding: 8px; width: 80px; border: 1px solid #ddd; border-radius:
4px; }
button { padding: 8px 15px; border: none; border-radius: 4px; cursor:
pointer; color: white; transition: 0.2s; }
.btn-enq { background: #28a745; }
.btn-deq { background: #dc3545; }
button:hover { opacity: 0.8; }
.status { color: #555; font-size: 14px; margin-top: 10px; height: 20px; }
</style>
</head>
<body>
<div class="card">
<h2>Circular Queue (Array)</h2>
<div class="controls">
<input type="number" id="inputValue" placeholder="Value">
<button class="btn-enq" onclick="enqueue()">Enqueue</button>
<button class="btn-deq" onclick="dequeue()">Dequeue</button>
</div>
<div id="statusMessage" class="status"></div>
<div class="queue-container" id="visualizer">
</div>
<div style="font-size: 14px; border-top: 1px solid #eee; padding-top:
10px;">
<strong>Front:</strong> <span id="frontVal">-1</span> |
<strong>Rear:</strong> <span id="rearVal">-1</span>
</div>
</div>
<script>
const MAX_SIZE = 5;
let queue = new Array(MAX_SIZE).fill(null);
let front = -1;
let rear = -1;
function renderQueue() {
const container = [Link]('visualizer');
[Link] = '';
for (let i = 0; i < MAX_SIZE; i++) {
const isActive = (queue[i] !== null);
let pointers = '';
if (i === front) pointers += `<span class="pointer f-
ptr">Front</span>`;
if (i === rear) pointers += `<span class="pointer r-ptr">Rear</span>`;
[Link] += `
<div class="slot ${isActive ? 'active' : ''}">
<span class="idx-label">idx: ${i}</span>
${queue[i] !== null ? queue[i] : ''}
${pointers}
</div>
`;
}
[Link]('frontVal').innerText = front;
[Link]('rearVal').innerText = rear;
}
function enqueue() {
const val = [Link]('inputValue').value;
const msg = [Link]('statusMessage');
[Link] = "red";
if (val === "") return;
// Condition for Full: (rear + 1) % size == front
if ((rear + 1) % MAX_SIZE === front) {
[Link] = "Queue Overflow! (Array is Full)";
return;
}
if (front === -1) front = 0;
rear = (rear + 1) % MAX_SIZE; // Circular Increment
queue[rear] = val;
[Link] = "green";
[Link] = `Enqueued: ${val}`;
[Link]('inputValue').value = '';
renderQueue();
}
function dequeue() {
const msg = [Link]('statusMessage');
[Link] = "red";
if (front === -1) {
[Link] = "Queue Underflow! (Array is Empty)";
return;
}
let removed = queue[front];
queue[front] = null;
if (front === rear) {
// Only one element was present
front = rear = -1;
} else {
front = (front + 1) % MAX_SIZE; // Circular Increment
}
[Link] = "blue";
[Link] = `Dequeued: ${removed}`;
renderQueue();
}
// Initial Load
renderQueue();
</script>
</body>
</html>
Output of enqueue (array)
Output of dequeue (array)