HTML CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="calculator">
<input type="text" id="display" readonly>
<div class="buttons">
<button class="btn" onclick="clearDisplay()">C</button>
<button class="btn" onclick="appendCharacter('/')">/</button>
<button class="btn" onclick="appendCharacter('*')">*</button>
<button class="btn" onclick="appendCharacter('-')">-</button>
<button class="btn" onclick="appendCharacter('7')">7</button>
<button class="btn" onclick="appendCharacter('8')">8</button>
<button class="btn" onclick="appendCharacter('9')">9</button>
<button class="btn" onclick="appendCharacter('+')">+</button>
<button class="btn" onclick="appendCharacter('4')">4</button>
<button class="btn" onclick="appendCharacter('5')">5</button>
<button class="btn" onclick="appendCharacter('6')">6</button>
<button class="btn" onclick="calculateResult()">=</button>
<button class="btn" onclick="appendCharacter('1')">1</button>
<button class="btn" onclick="appendCharacter('2')">2</button>
<button class="btn" onclick="appendCharacter('3')">3</button>
<button class="btn" onclick="appendCharacter('0')">0</button>
<button class="btn" onclick="appendCharacter('.')">.</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS CODE
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
margin: 0;
}
.calculator {
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
#display {
width: 100%;
height: 50px;
font-size: 24px;
text-align: right;
border: none;
padding: 10px;
box-sizing: border-box;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.btn {
border: 1px solid #ccc;
background-color: #fff;
font-size: 18px;
padding: 20px;
cursor: pointer;
transition: background-color 0.3s;
}
.btn:hover {
background-color: #f1f1f1;
}
.btn:active {
background-color: #ddd;
}
JAVA SCRIPT CODE
function clearDisplay() {
document.getElementById('display').value = '';
}
function appendCharacter(character) {
document.getElementById('display').value += character;
}
function calculateResult() {
const display = document.getElementById('display');
try {
display.value = eval(display.value);
} catch (e) {
display.value = 'Error';
}
}
COMBINED CODE WITH LIVE PREVIEW
STEPS TO BE FOLLOWED
Creating a digital clock involves a few straightforward steps. Here’s a simple guide to help you through the process:
1. Plan the Design
- Decide how you want your digital clock to look. Think about the size, colors, and what features you want to include (like displaying hours, minutes, and seconds).
2. Set Up Your HTML
- Create a basic HTML file to hold your clock. Use an HTML tag like
<div>to create a space where your clock will be displayed.
3. Style Your Clock with CSS
- Use CSS to style your clock. This can include setting the font size, color, background, and positioning of your clock on the page.
4. Add JavaScript for Functionality
- Write JavaScript to update the clock every second. JavaScript will get the current time and update the display.
5. Combine Everything
- Put your HTML, CSS, and JavaScript code together in one file, or link them properly if you use separate files.
6. Test Your Clock
- Open your HTML file in a web browser to see if your clock is working as expected. Make sure it updates the time correctly.
7. Make Improvements
- If needed, tweak the design and functionality. You might want to add features like an alarm or different time zones.
CODE BOX: TECHY LEAF