Program to display any digit from 0–9 using “7 segment display”
7 min readDec 2, 2024
Hello, friends thank you for your support. After a long time writing this article to which display a given digit using 7 segment display.
Before we begin how to achieve this let’s take a look at what is Seven Segment Display.
Seven Segment Display
Seven segment displays are used to display numerical information. It is an electronic display device which is used to show decimal numbers, letters and symbols.
These are widely used in calculators, clocks, home appliances, digital meters, etc.
The structure of Seven Segment Display is shown below
It consists of seven LED segments arranged in a rectangular fashion to form the numeral “8.” These segments are labeled as a, b, c, d, e, f, and g, usually starting from the top and proceeding clockwise with the middle segment as “g.”
Each segment in the display is essentially an LED.
Some of LED segments will be off depending on the digit.
For example, we have to display the decimal 1 then “b” and “c” segments will be ON and other segment (c, d, e, f, g) will be OFF.
Here is the representation of Seven Segment Display from digit 0 to digit 9.
Following table gives you the better idea how we can achieve the same.
Let’s start
First we will create a Seven segment display user interface for that we make use of CSS.
As you see in structure we need create two CSS elements one for horizontal segment and other for vertical segment code is given as below. Add below code in between <style></style> tags.
.display-grid {
border: 20px solid rgb(225, 222, 222);
position: absolute;
top: 150;
left:150;
padding: 50px;
}
.horizontal-segment {
border: 1px solid #9f9e9e;
width: 150;
height: 20;
margin: 10px;
display: inline-block;
text-align: center;
align-content: center;
}
.vertical-segment {
border: 1px solid #9f9e9e;
width: 20;
height: 100;
margin: 10px;
display: inline-block;
text-align: center;
align-content: center;
}Add the below code in HTML <body></body> tags.
<div class="display-grid">
<!-- Adding 15 px space to left -->
<span style="padding-right: 15;"></span>
<!-- Segment a -->
<div id="a" class="horizontal-segment">a</div><br>
<!-- Segment f -->
<div id="f" class="vertical-segment">f</div>
<!-- Adding 110 px space between f and b -->
<span style="padding-right: 110;"></span>
<div id="b" class="vertical-segment">b</div><br>
<!-- Adding 15 px space to left -->
<span style="padding-right: 15;"></span>
<div id="g" class="horizontal-segment">g</div><br>
<!-- Segment e -->
<div id="e" class="vertical-segment">e</div>
<!-- Adding 110 px space between e and c -->
<span style="padding-right: 110;"></span>
<!-- Segment c -->
<div id="c" class="vertical-segment">c</div><br>
<!-- Adding 15 px space to left -->
<span style="padding-right: 15;"></span>
<!-- Segment d -->
<div id="d" class="horizontal-segment">d</div>
</div>After adding above code the output will be as below:
We are done with the user interface now next step is to handle the event.
For that we will create a drop down list containing digits from 0 to 9. Add this code in HTML <body></body> tags.
<span><b>Select digit</b> </span>
<select name="sevenSegment" onchange="updateDisplay(this.value)">
<option value=0>Digit 0</option>
<option value=1>Digit 1</option>
<option value=2>Digit 2</option>
<option value=3>Digit 3</option>
<option value=4>Digit 4</option>
<option value=5>Digit 5</option>
<option value=6>Digit 6</option>
<option value=7>Digit 7</option>
<option value=8>Digit 8</option>
<option value=9>Digit 9</option>
</select>
In the above code “updateDisplay(this.value)” is the function called when we select the other digit from drop down list. Here “onchange” is the event fired when drop down list item gets changes.
Now for adding JavaScript in our program add the below code in <head></head> section.
<script>
function updateDisplay(val) {
let selectedDigit = Number(val);
switch(selectedDigit) {
case 0: // Display digit 0
updateSegments(['a', 'b', 'c', 'd', 'e', 'f']);
break;
case 1: // Display digit 1
updateSegments(['b', 'c']);
break;
case 2: // Display digit 2
updateSegments(['a', 'b', 'd', 'e', 'g']);
break;
case 3: // Display digit 3
updateSegments(['a', 'b', 'c', 'd', 'g']);
break;
case 4: // Display digit 4
updateSegments(['b', 'c', 'f', 'g']);
break;
case 5: // Display digit 5
updateSegments(['a', 'c', 'd', 'f', 'g']);
break;
case 6: // Display digit 6
updateSegments(['a', 'c', 'd', 'e', 'f', 'g']);
break;
case 7: // Display digit 7
updateSegments(['a', 'b', 'c']);
break;
case 8: // Display digit 8
updateSegments(['a', 'b', 'c', 'd', 'e', 'f', 'g']);
break;
case 9: // Display digit 9
updateSegments(['a', 'b', 'c', 'd', 'f', 'g']);
break;
}
}
function updateSegments(arr) {
resetSegments();
for(var i = 0; i < arr.length; i++ ) {
document.getElementById(arr[i]).style.backgroundColor = 'red';
document.getElementById(arr[i]).style.color = '#FFFFFF';
}
}
function resetSegments() {
document.getElementById('a').style.backgroundColor = 'white';
document.getElementById('a').style.color = '#000000';
document.getElementById('b').style.backgroundColor = 'white';
document.getElementById('b').style.color = '#000000';
document.getElementById('c').style.backgroundColor = 'white';
document.getElementById('c').style.color = '#000000';
document.getElementById('d').style.backgroundColor = 'white';
document.getElementById('d').style.color = '#000000';
document.getElementById('e').style.backgroundColor = 'white';
document.getElementById('e').style.color = '#000000';
document.getElementById('f').style.backgroundColor = 'white';
document.getElementById('f').style.color = '#000000';
document.getElementById('g').style.backgroundColor = 'white';
document.getElementById('g').style.color = '#000000';
}
</script>The above JavaScript has three functions
- resetSegments: The function will reset the segments to default state.
- updateDisplay: This function will be called when we change the option from drop down list. Depending on the digit selection it will call updateSegments() function by passing the segments names in array.
- updateSegments: It is used to update the segments. It accepts the values in an array. This will first call to resetSegments() function to clear the segments. After that it will update the selected segments by changing the background and foreground color.
That’s all we are done.
The complete code is given below:
<html>
<head>
<title>Seven Segment Display</title>
<style>
.display-grid {
border: 20px solid rgb(225, 222, 222);
position: absolute;
top: 150;
left:150;
padding: 50px;
}
.horizontal-segment {
border: 1px solid #9f9e9e;
width: 150;
height: 20;
margin: 10px;
display: inline-block;
text-align: center;
align-content: center;
}
.vertical-segment {
border: 1px solid #9f9e9e;
width: 20;
height: 100;
margin: 10px;
display: inline-block;
text-align: center;
align-content: center;
}
</style>
<script>
function updateDisplay(val) {
let selectedDigit = Number(val);
switch(selectedDigit) {
case 0: // Display digit 0
updateSegments(['a', 'b', 'c', 'd', 'e', 'f']);
break;
case 1: // Display digit 1
updateSegments(['b', 'c']);
break;
case 2: // Display digit 2
updateSegments(['a', 'b', 'd', 'e', 'g']);
break;
case 3: // Display digit 3
updateSegments(['a', 'b', 'c', 'd', 'g']);
break;
case 4: // Display digit 4
updateSegments(['b', 'c', 'f', 'g']);
break;
case 5: // Display digit 5
updateSegments(['a', 'c', 'd', 'f', 'g']);
break;
case 6: // Display digit 6
updateSegments(['a', 'c', 'd', 'e', 'f', 'g']);
break;
case 7: // Display digit 7
updateSegments(['a', 'b', 'c']);
break;
case 8: // Display digit 8
updateSegments(['a', 'b', 'c', 'd', 'e', 'f', 'g']);
break;
case 9: // Display digit 9
updateSegments(['a', 'b', 'c', 'd', 'f', 'g']);
break;
}
}
function updateSegments(arr) {
resetSegments();
for(var i = 0; i < arr.length; i++ ) {
document.getElementById(arr[i]).style.backgroundColor = 'red';
document.getElementById(arr[i]).style.color = '#FFFFFF';
}
}
function resetSegments() {
document.getElementById('a').style.backgroundColor = 'white';
document.getElementById('a').style.color = '#000000';
document.getElementById('b').style.backgroundColor = 'white';
document.getElementById('b').style.color = '#000000';
document.getElementById('c').style.backgroundColor = 'white';
document.getElementById('c').style.color = '#000000';
document.getElementById('d').style.backgroundColor = 'white';
document.getElementById('d').style.color = '#000000';
document.getElementById('e').style.backgroundColor = 'white';
document.getElementById('e').style.color = '#000000';
document.getElementById('f').style.backgroundColor = 'white';
document.getElementById('f').style.color = '#000000';
document.getElementById('g').style.backgroundColor = 'white';
document.getElementById('g').style.color = '#000000';
}
</script>
</head>
<body>
<h1>Seven Segment Display Simulation</h1>
<p>Please select the digit from drop down list then it will be updated in the display.</p>
<span><b>Select digit</b> </span>
<select name="sevenSegment" onchange="updateDisplay(this.value)">
<option value=0>Digit 0</option>
<option value=1>Digit 1</option>
<option value=2>Digit 2</option>
<option value=3>Digit 3</option>
<option value=4>Digit 4</option>
<option value=5>Digit 5</option>
<option value=6>Digit 6</option>
<option value=7>Digit 7</option>
<option value=8>Digit 8</option>
<option value=9>Digit 9</option>
</select>
<span style="padding-right: 50px;"></span>
<input type="button" value="Reset" onclick="location.reload();"/>
<br><br>
<div class="display-grid">
<!-- Adding 15 px space to left -->
<span style="padding-right: 15;"></span>
<!-- Segment a -->
<div id="a" class="horizontal-segment">a</div><br>
<!-- Segment f -->
<div id="f" class="vertical-segment">f</div>
<!-- Adding 110 px space between f and b -->
<span style="padding-right: 110;"></span>
<div id="b" class="vertical-segment">b</div><br>
<!-- Adding 15 px space to left -->
<span style="padding-right: 15;"></span>
<div id="g" class="horizontal-segment">g</div><br>
<!-- Segment e -->
<div id="e" class="vertical-segment">e</div>
<!-- Adding 110 px space between e and c -->
<span style="padding-right: 110;"></span>
<!-- Segment c -->
<div id="c" class="vertical-segment">c</div><br>
<!-- Adding 15 px space to left -->
<span style="padding-right: 15;"></span>
<!-- Segment d -->
<div id="d" class="horizontal-segment">d</div>
</div>
</body>
</html>Final output
Thank you.