THE FEDERAL POLYTECHNIC NASARAWA ,NASARAWA STATE.
SCHOOL OF INFORMATION TECHNOLOGY
DEPARTMENT OF SOFTWARE ENGINEERING AND WEB DEVELOPMENT.
Course Code:SWD323
Course Title: Front-End Development.
Assignment Questons:
Question 1:
With the use of HTML, CSS and JavaScript codes, develop a Web based ordinary Calculator
Application that can handle; Addition, Subtraction, Multiplication and Division of numbers
respectively. Buttons should be used to represent each of the operations above.
Question 2:
Using HTML, CSS and JavaScript, develop a Web based Recipe Book Application for a
particular restaurant of your choice. Your Application should feature a variety of recipes for at
least 4 types of Nigerian food known to you.
SUBMITTED BY: MAYAKI SUNDAY ASUKU
REG N□: 0138
HND1, SOFTWARE ENGINEERING AND WEB DEVELOPMENT STUDENT.
SUBMITTED TO: MALLAM ALHASSAN.
1
Question 1.
BUILDING A CALCULATOR USING HTML, CSS / JAVASCRIPT
As depicted below the codes at the upper side of source code and the output picture at downside
side immediately after code:
SOURCE CODE:
<!DOCTYPE html>
<html>
<head>
<title>Simple Calculator</title>
<style>
.calculator {
width: 300px;
margin: 50px auto;
padding: 20px;
background: #f0f0f0;
border-radius: 10px;
}
#display {
width: 100%;
height: 40px;
margin-bottom: 10px;
text-align: right;
padding: 5px;
font-size: 20px;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 5px;
}
button {
padding: 15px;
font-size: 18px;
border: none;
background: #fff;
cursor: pointer;
}
2
.operator { background: #ff9500; color: white; }
</style>
</head>
<body>
<div class="calculator">
<input type="text" id="display" readonly>
<div class="buttons">
<button onclick="appendNumber('7')">7</button>
<button onclick="appendNumber('8')">8</button>
<button onclick="appendNumber('9')">9</button>
<button class="operator" onclick="setOperator('+')">+</button>
<button onclick="appendNumber('4')">4</button>
<button onclick="appendNumber('5')">5</button>
<button onclick="appendNumber('6')">6</button>
<button class="operator" onclick="setOperator('-')">-</button>
<button onclick="appendNumber('1')">1</button>
<button onclick="appendNumber('2')">2</button>
<button onclick="appendNumber('3')">3</button>
<button class="operator" onclick="setOperator('*')">×</button>
<button onclick="appendNumber('0')">0</button>
<button onclick="clearDisplay()">C</button>
<button onclick="calculate()">=</button>
<button class="operator" onclick="setOperator('/')">÷</button>
</div>
</div>
<script>
let display = document.getElementById('display');
let firstNumber = null;
let operator = null;
function appendNumber(num) {
display.value += num;
}
function setOperator(op) {
firstNumber = parseFloat(display.value);
operator = op;
display.value = '';
}
function calculate() {
let secondNumber = parseFloat(display.value);
switch(operator) {
3
case '+': display.value = firstNumber + secondNumber; break;
case '-': display.value = firstNumber - secondNumber; break;
case '*': display.value = firstNumber * secondNumber; break;
case '/': display.value = firstNumber / secondNumber; break;
}
}
function clearDisplay() {
display.value = '';
firstNumber = null;
operator = null;
}
</script>
</body>
</html>
OUTPUT IMAGE OR DISPLAY:
4
The calculator is displayed to carry out the function listed at the start, which is:
Addition,Subtraction , Multiplication and Division.
Questio.2 (Two).
Building a web based reciepe book with famous Nigereian food e.g,.
• Suya
• Jolley rice.
• Egusi soup / Akara.
The below is the depict of the codes including each image of food selected to show there
reciepes:
Source Code:
<!DOCTYPE html>
<html>
<head>
<title>Nigerian Recipe Book</title>
<style>
body { font-family: Arial; background: #ffe4c4; }
.container { display: flex; padding: 20px; }
.sidebar { width: 200px; margin-right: 20px; }
.recipe-btn {
width: 100%; padding: 15px; margin: 5px 0;
background: #8b0000; color: white; border: none; cursor: pointer;
}
.recipe-content { flex: 1; background: white; padding: 20px; }
h2 { color: #8b0000; }
ul { list-style-type: square; }
</style>
</head>
<body>
<h1 style="text-align: center;">Nigerian Recipe Book</h1>
<div class="container">
<div class="sidebar">
<button class="recipe-btn" onclick="showRecipe('jollof')">Jollof Rice</button>
<button class="recipe-btn" onclick="showRecipe('egusi')">Egusi Soup</button>
<button class="recipe-btn" onclick="showRecipe('suya')">Suya</button>
5
<button class="recipe-btn" onclick="showRecipe('akara')">Akara</button>
</div>
<div class="recipe-content" id="recipe-content"></div>
</div>
<script>
const recipes = {
jollof: {
name: "Jollof Rice",
ingredients: ["Rice", "Tomatoes", "Pepper", "Onions", "Vegetable Oil"],
instructions: "Cook rice with tomato stew and spices."
},
egusi: {
name: "Egusi Soup",
ingredients: ["Melon Seeds", "Leafy Vegetables", "Palm Oil", "Fish"],
instructions: "Boil egusi with vegetables and protein."
},
suya: {
name: "Suya",
ingredients: ["Beef", "Peanut Powder", "Spices", "Oil"],
instructions: "Marinate meat in spices, grill, and serve with onions."
},
akara: {
name: "Akara",
ingredients: ["Bean Paste", "Pepper", "Onions", "Oil"],
instructions: "Fry bean paste mixture in hot oil."
}
};
function showRecipe(recipeId) {
const recipe = recipes[recipeId];
const contentDiv = document.getElementById('recipe-content');
contentDiv.innerHTML = `
<h2>${recipe.name}</h2>
<h3>Ingredients:</h3>
<ul>${recipe.ingredients.map(i => `<li>${i}</li>`).join('')}</ul>
<h3>Instructions:</h3>
<p>${recipe.instructions}</p>
`;
}
</script>
</body>
</html>
6
Display or Outputs images:
This images belongs to the set of the food inactive with there recipes for example, let’s say the
food is the object and the recipes are the classes of each object, were sub classes are involved
within.
Editors used / Application involved
I used VS-Studio code editor in writing the codes and test running for bugs .
7
I used the chrome application browser in opening my code for testing and display.
//All the images are subjected to the code written, and is validation has been tested before I
proceed here unto submitting this assignment.
