DEV Community: Keshav Kumar Hembram

How to create Calculator using HTML, CSS and Javascript?

Keshav Kumar Hembram — Mon, 24 Jul 2023 11:05:23 +0000

How to build a Calculator using HTML, CSS, and Javascript?

How to build a Calculator using HTML, CSS, and Javascript?
- Table of Contents
- Introduction
- Final Result
- Let's start building Calculator
- Creating an HTML document
- Adding CSS
- Now we will add Javascript
  - Now, we have to deal with calculations
  - Thing to keep in mind while using eval
  - Improving User Interface
- Conclusion

Introduction

In this article, we will learn about building a Calculator using HTML, CSS, and Javascript. By building the calculator we will learn to use CSS grid and javascript function eval(). We will build Simple Calculator with some simple operators like +, -, *, and /.

Final Result

Live Site

Github Repo

Let's start building Calculator

Creating an HTML document

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style/style.css" />
    <title>Calculator using HTML, CSS and Javascript</title>
</head>
<body>
    <h1>Calculator</h1>
    <div class="calc-container">
      <div class="screen"><p></p></div>
      <input type="button" value="+" class="keys operators" />
      <input type="button" value="-" class="keys operators" />
      <input type="button" value="x" class="keys operators" />
      <input type="button" value="/" class="keys operators" />
      <input type="button" value="7" class="keys" />
      <input type="button" value="8" class="keys" />
      <input type="button" value="9" class="keys" />
      <input type="button" value="=" class="keys equal" />
      <input type="button" value="4" class="keys" />
      <input type="button" value="5" class="keys" />
      <input type="button" value="6" class="keys" />
      <input type="button" value="1" class="keys" />
      <input type="button" value="2" class="keys" />
      <input type="button" value="3" class="keys" />
      <input type="button" value="0" class="keys" />
      <input type="button" value="." class="keys" />
      <input type="button" value="C" class="keys clear" />
    </div>
    <script src="./script/index.js"></script>
</body>
</html>

I have added style and script in HTML but both files are empty so the current result looks like this.

Adding CSS

We will be adding CSS first so that we can work with a more convenient calculator layout

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: sans-serif;
    font-size: 20px;
    font-weight: 700;
    background-color: rgb(116, 230, 230);
}

h1 {
  color: white;
}


.calc-container {
  width: 400px;
    display: grid;
    grid-template-columns: 100px 100px 100px 100px;
    grid-template-rows: 100px 70px 70px 70px 70px 70px;
    font-family: sans-serif;
    font-size: 20px;
    font-weight: 700;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0px 2px 12px 0px rgb(122, 122, 122);
    background-color: black;
  }

  input {
    background-color: white;
    border: 1px solid rgb(185, 185, 185);
    font-size: inherit;
  }

  input:hover {
    background-color: rgb(237, 237, 238);
  }

  .operators {
    background-color: rgb(223, 222, 222);
  }

  .screen {
    display: flex;
    align-items: center;
    justify-content: end;

    grid-column: 1/5;
    height: 100px;
    font-size: 35px;
    padding: 0px 20px;

    color: white;
    background-color: rgb(0, 31, 39);
  }

  .equal {
    grid-column: 4/5;
    grid-row: 3/7;
    background: rgb(226, 110, 74);
  }

  .equal:hover {
    background-color: rgb(224, 90, 49);
  }

  .clear {
    font-weight: 700;
    color:rgb(226, 110, 74);
  }

  .clear:hover {
    background-color: rgb(231, 229, 229);
    color: black;
  }

Now we will add Javascript

First let's get elements from DOM which will change or from where we get input.

// SELECTING ELEMENTS FROM DOM
const keys = document.querySelectorAll(`.keys`);
let output = document.querySelector(".screen").children[0];

Now we have to listen to all keys for all click events for input.
currently keys is an object with a list of nodes having class .keys
we will change that to Array using Array.from(keys). This will return an Array of this keys object.
Then we will run forEach() loop for this array and for each key we listen to the key and log in to the console to see the output.

Array.from(keys).forEach((keys) => {
  keys.addEventListener("click", (event) => {
    console.log(event.target.value);
  });
});

We are getting all the events

Now, we have to deal with calculations

I have used eval in-built function. Which will evaluate the string
There are a few cases which we have to handle with if-else statements.
1. C - for clearing the screen.
2. x - that needs to be converted to * first
3. = - for evaluating
4. else we have to add input to the expression string

// VARIABLE FOR CALCULATOR
let expString = "";
let outputStr = "";

// SELECTING ELEMENTS FROM DOM
const keys = document.querySelectorAll(`.keys`);
let output = document.querySelector(".screen").children[0];

// HANDLING KEYS CLICK EVENT USING ARRAY METHOD
Array.from(keys).forEach((key) => {
  key.addEventListener("click", (event) => {
    if (event.target.value == "C") {
      // CLEAR STRING AND SCREEN
      expString = "";
      outputStr = "";
    } else if (event.target.value == "x") {
      // HANDLING x CASE
      expString = expString + "*";
      outputStr = outputStr + "x";
    } else if (event.target.value == "=") {
      // EVALUATION OF EXPRESSION STRING
      try {
        expString = eval(expString);
      } catch (err) {
        // handling errors
        expString = "invalid input";
      }
      outputStr = expString;
    } else {
      // GENERATING EXPRESSION STRING AND SCREEN OUTPUT
      expString = expString + event.target.value;
      outputStr = outputStr + event.target.value;
    }

    // OUTPUT TO THE SCREEN
    output.innerHTML = outputStr;
  });
});

After adding this calculator should work fine.

Thing to keep in mind while using eval

We need to validate the string before evaluation.
Why we should validate?
- It is always a good practice to add validation before using eval() function. If we don't add validation it can result in security issues.
- Reason for security issues is that evaluate not only evaluates mathematical expressions but it can also run code or commands.
- For more details use this reference: JavaScript eval security best practices
Let's add validation
- For that, we will use regular expression and test() function
Since this is just a front-end project and we restrict input using predefined values. So, it can't cause any issues but still, we should use that.

const validInputStr = /^[0-9+\-*/. ]*$/;
if(!validInputStr.test(expString)) {
  throw new Error("invalid input");
}

Improving User Interface

If we click equal without any string, it will give undefined output, which must be handled.
For handling that we will throw an error in the try block so that the catch block will catch error that error.
We will throw that error if we get undefined after evaluation.

// handling undefined case
if (expString === undefined) {
throw new Error("invalid input");
}

If we click equal with an invalid string like +.It will give output as invalid input.Then click new input it will be added to that invalid input.

This is not good for our users we have to handle this. We will do that using a flag. We will clear the string before adding a new character to the string if that flag is false.
I have the variable validInput for that.

Final JS Code

// VARIABLE FOR CALCULATOR
let expString = "";
let outputStr = "";
let validInput = true;

// SELECTING ELEMENTS FROM DOM
const keys = document.querySelectorAll(`.keys`);
let output = document.querySelector(".screen").children[0];

// HANDLING KEYS CLICK EVENT USING ARRAY METHOD
Array.from(keys).forEach((key) => {
  key.addEventListener("click", (event) => {
    // HANDLING INVALID INPUT
    if (validInput === false) {
      expString = "";
      outputStr = "";
      validInput = true;
    }

    if (event.target.value == "C") {
      // CLEAR STRING AND SCREEN
      expString = "";
      outputStr = "";
    } else if (event.target.value == "x") {
      // HANDLING x CASE
      expString = expString + "*";
      outputStr = outputStr + "x";
    } else if (event.target.value == "=") {
      // EVALUATION OF EXPRESSION STRING
      try {
        const validInputStr = /^[0-9+\-*/. ]*$/;
        if (!validInputStr.test(expString)) {
          throw new Error("invalid input");
        }
        expString = eval(expString);

        // handling undefined case
        if (expString === undefined) {
          throw new Error("invalid input");
        }
      } catch (err) {
        // handling errors
        expString = "invalid input";
        validInput = false;
      }
      outputStr = expString;
    } else {
      // GENERATING EXPRESSION STRING AND SCREEN OUTPUT
      expString = expString + event.target.value;
      outputStr = outputStr + event.target.value;
    }

    // OUTPUT TO THE SCREEN
    output.innerHTML = outputStr;
  });
});

Conclusion

It's a great project to learn javascript, eval() function, and handling error. It is also good for learning grid.

There are some suggestions that I want to recommend for your project that you can do in your project. You can also change that in my repository. I will be happy to merge those changes.

adding the backspace key
instead of creating your own error message use the error provided by try block.

If you enjoyed it reading. If any changes you want. Please comment on this blog.

How to create a digital Clock using HTML, CSS and Javascript?

Keshav Kumar Hembram — Sat, 08 Jul 2023 07:23:04 +0000

Introduction
Final Result
Let's start building Clock
- Creating HTML document
- Using Date object for getting time
- We have a date now but we have to show it to the normal user using DOM
- Final Javascript Code
- Styling clock
Conclusion

Introduction

In this article, we will learn about building a Clock using HTML, CSS, and Javascript. By building the clock we learn about javascript Date object. We will build 12 hours Clock and we will be working with time in the Date object.

Final Result

Live Site

Github Repo

Let's start building Clock

Creating an HTML document

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="shortcut icon"
      href="./assets/images/favicon.ico"
      type="image/x-icon"
    />
    <link rel="stylesheet" href="./styles/style.css" />
    <title>digital clock stopwatch & timer</title>
  </head>
  <body>
    <main>
      <div class="clock">
        <p class="value" id="hours"></p>
        <p class="value" id="minutes"></p>
        <div class="value seconds">
          <p id="suffix"></p>
          <p id="seconds"></p>
        </div>
      </div>
    </main>
    <script src="./scripts/index.js"></script>
  </body>
</html>

I have added style and script in HTML.

Using Date object for getting time

Creating date object

const date = new Date();
console.log(date);

How the date object looks

Getting hours, minutes, seconds

const date = new Date();
let hours = date.getHours();
let minutes = date.getMinutes();
let seconds = date.getSeconds();
console.log(`${hours}:${minutes}:${seconds}`);

But this time is staying constant and it is not updating. To update this we use setInterval

setInterval(() => {
  const date = new Date();
  let hours = date.getHours();
  let minutes = date.getMinutes();
  let seconds = date.getSeconds();
  console.log(`${hours}:${minutes}:${seconds}`);
}, 1000);

We have the date now but we have to show it to normal users using DOM

We to get elements from this HTML document

<main>
  <div class="clock">
    <p class="value" id="hours"></p>
    <p class="value" id="minutes"></p>
    <div class="value seconds">
      <p id="suffix"></p>
      <p id="seconds"></p>
    </div>
  </div>
</main>

javascript code for getting each element

const hoursDisplay = document.getElementById('hours');
const minutesDisplay = document.getElementById('minutes');
const secondsDisplay = document.getElementById('seconds');
const suffix = document.getElementById('suffix');

Now, we can make changes to each element. Then let's add hours, minutes, seconds
- we should keep that in mind it should be within setInterval so that it keeps on updating

hoursDisplay.innerText = hours;
minutesDisplay.innerText = minutes;
secondsDisplay.innerText = seconds;

We will make sure that always two digital are visible. We will add leading zeros to single digits
- we create a function for that

function leadingZeros(num) {
  if (num < 10) {
    return '0' + num;
  }
  return num;
}

use that function to modify our variables

hours = leadingZeros(hours);
minutes = leadingZeros(minutes);
seconds = leadingZeros(seconds);

We will make it a twelve it a twelve hours clock using two functions. One for converting 24-hour format to 12 hours format. One for setting suffixes like 'AM' or 'PM'.
- for deciding on suffix

function timeSuffix(hours) {
  if (hours < 12) {
    return 'AM';
  }
  return 'PM';
}

for converting the format

function twelveHour(hours) {
  if (hours % 12 === 0) {
    return 12;
  }
  return hours % 12;
}

Final Javascript Code

const hoursDisplay = document.getElementById('hours');
const minutesDisplay = document.getElementById('minutes');
const secondsDisplay = document.getElementById('seconds');
const suffix = document.getElementById('suffix');

setInterval(() => {
  const date = new Date();
  let hours = date.getHours();
  let minutes = date.getMinutes();
  let seconds = date.getSeconds();

  suffix.innerText = timeSuffix(hours);

  hours = twelveHour(hours);

  hours = leadingZeros(hours);
  minutes = leadingZeros(minutes);
  seconds = leadingZeros(seconds);

  hoursDisplay.innerText = hours;
  minutesDisplay.innerText = minutes;
  secondsDisplay.innerText = seconds;
}, 1000);

function leadingZeros(num) {
  if (num < 10) {
    return '0' + num;
  }
  return num;
}

function timeSuffix(hours) {
  if (hours < 12) {
    return 'AM';
  }
  return 'PM';
}

function twelveHour(hours) {
  if (hours % 12 === 0) {
    return 12;
  }
  return hours % 12;
}

NOTE: order of using timeSuffix and twelveHour should be correct.

Styling clock

I have kept styling simple and easy.
Yet there are some things that should be kept in mind that we should fix element size because it will change the shape constantly while updating time.

/* GLOBALS */
* {
  padding: 0;
  margin: 0;
}

/* FONTS */
@font-face {
  font-family: 'Orbitron';
  src: url('./../assets/fonts/Orbitron-Regular.ttf');
  font-weight: 400;
}

body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Orbitron', sans-serif;
  color: black;
  background-color: rgb(235, 235, 235);
}

main {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.clock {
  width: 450px;
  display: flex;
  justify-content: space-between;
  font-size: 5rem;
}

.value {
  padding: 10px;
  width: 140px;
  text-align: end;
  border-radius: 5px;
  box-shadow: 0px 2px 4px black;
  background-color: rgb(252, 251, 251);
}

.seconds {
  width: 70px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}

.seconds p {
  font-size: 2rem;
}

Conclusion

It's a great project to learn how to handle time from a Date object in javascript. You can still refactor the code to make it look nice in javascript code. That I will do in the next blog where I make a stopwatch.

If you enjoyed it reading. If any changes you want comment. Please comment on this blog.

How to create good looking card component?

Keshav Kumar Hembram — Wed, 05 Jul 2023 04:21:59 +0000

Introduction
Final Result
- Final Code and Starter File
Creating Profile Card Component
- What are profile card?
- Let's start building
Conclusion

Introduction

Card components are very common in modern user interface designs and they are visible everywhere. It is a versatile and indispensable tool for presenting information and content in an engaging and visually appealing manner. In this article, we get familier with card components and learn how we can build a good looking card components by building a profile card component.

Final Result

This is how It looks in the end If you want to try. You can get starter file and final code in this

Final Code and Starter File

Code and Starter file: GitHub Repo
Live Site: Site Link

Creating Profile Card Component

What are profile card?

Profile cards are UI components used to display information about about an individual in a concise and visually appealing manner. Generally, a profile card includes a profile picture, a name, job title, location, contact information, skills. There may also be a brief bio. Keeping all this in mind we will build our profile card.

Let's start building

First step, let's create a html document containing above mentioned details



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/x-icon" href="./assets/images/favicon.ico"/>
    <link rel="stylesheet" href="./style/style.css">
    <title>profile-card</title>
</head>
<body>
    <main class="profile-card">
        <img class="profile-pic" src="./assets/images/profile-pic.png">
        <div class="details">
        <h1 class="name">
            Whiskers Whiskerton
        </h1>

        <div class="location"><img src="./assets/images/location-dot-solid.svg"/><span >NEW YORK</span></div>
        <p class="description">
            UI/UX designer and front-end developer
        </p>
        <div class="button">
            <button class="message-button">Message</button>
            <button class="follow-button following">Follow</button>
        </div>
        <div class="skills">
            <h2>SKILLS</h2>
            <ul class="skills-list">
            <li>UI/UX</li>
            <li>Front End Development</li>
            <li>HTML</li>
            <li>CSS</li>
            <li>Javascript</li>
            <li>React</li>
            <li>Bootstap</li>
        </ul>
        </div>
    </div>
    </main>
</body>
</html>

<main> contains all the details and this will be our card.
I have already added css file in <head>.
I have also defined class name for styling.

Now we deal with styling which is the most important part in this

Removing default styles: ```css

/* GLOBAL */

{ margin: 0; padding: 0; }

- **Choosing a appropriate color scheme:**
  - This will depends on brand color. Then you can choose complementing colors. 
  - Brand colour is your primary colour, this will be morw visible color. That does not mean it will be used more in design but it means it will be used where you want your user to focus on.
  - Here that will be our card component and buttons.
```css


/* COLORS */
:root {
    /* primary */
    --brand-color: rgb(42, 38, 95);
    --button: rgb(29, 24, 107);
    /* neutral */
    --dark: rgb(20, 16, 68);
    --light: rgb(238, 237, 253);
    --light-grey: rgb(211, 211, 245);
    --background-blue: rgb(113, 117, 218);
}

Defining the Stucture and Layout:
- Card should have a rectangular shape.
- Generally, it has fixed width and height.
- Defining the position of the card. Here since there is only on card it should be place at center.



body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-card {
    width: 350px;
    padding: 3rem 0rem 0rem 0rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    border-radius: 14px;
    background-color: var(--light);
}

Use compelling typograpy:
- we use font-face to add that, ```css

/* FONTS */

@font-face {
font-family: 'Roboto';
src: url(../assets/fonts/Roboto-Regular.ttf);
font-weight: 400;
}

@font-face {
font-family: 'Roboto';
src: url(../assets/fonts/Roboto-Bold.ttf);
font-weight: 700;
}
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Roboto';
font-weight: 400;
font-size: 0.9rem;
color: var(--light-grey);
background-color: var(--background-blue);
}


- **Styling all other element, while styling keep these points in mind**
  - keep corner round, roundness may vary, it make it look soft(use border-radius).
  - vary `font-size` and `font-weight` such that it make hierarchy visible.
```css


.profile-pic {
    padding: 5px;
    width: 160px;
    border-radius: 90px;
    filter: brightness(70%);
    border: 3px solid var(--brand-color)
}


.details {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    background-color: var(--brand-color);
    border-radius: 0px 0px 14px 14px;
}

.name {
    font-size: 1.3rem;
    font-weight: 700;
    color: white;
    margin-bottom: 20px;
}

.location {
    display: flex;
    align-items: center;
    gap: 10px;
}

.location img {
    height: 1rem;
    filter: invert();
}

.button {
    width: 70%;
    display: flex;
    justify-content: space-around;
}

.button button {
    width: 100px;
    padding: 0.8rem 1.2rem;
    border: none;
    background-color: var(--dark);
    color: var(--light);
    border-radius: 5px;
}


.skills {
    margin-top: 30px 0px;
    padding: 1rem 0rem;
    border-top: 2px solid var(--dark);
}

.skills h2 {
    padding: 0.3rem 1rem;
    font-size: 1rem;
    font-weight: 700;
    color: white;
}

.skills-list {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

.skills-list li {
    cursor: pointer;
    padding: 0.1rem 1rem;
    margin: 2px 0px;
    font-size: 0.8rem;
    border-radius: .4rem;
    display: inline-block;
    color: var(--light);
}

Adding shadow:
- adding shadow using box-shadow add 3d effect, it give depth to element. It create huge difference.
Interation and responsive:
- adding effects on hover for interaction
- for responsiveness there is not much to do in this project



.skills-list li:hover {
    transform: translateY(-5px);
    color: var(--dark);
    background-color: var(--background-blue);
}

.button button:hover {
    transform: translateY(-3px);
    color: white;
    background-color: var(--button);
}
.profile-pic:hover {
    transform: translateY(-5px);
    filter: brightness(100%);
}

Final CSS code



/* GLOBAL */

* {
    margin: 0;
    padding: 0;
}


/* FONTS */

@font-face {
    font-family: 'Roboto';
    src: url(../assets/fonts/Roboto-Regular.ttf);
    font-weight: 400;
}

@font-face {
    font-family: 'Roboto';
    src: url(../assets/fonts/Roboto-Bold.ttf);
    font-weight: 700;
}

/* COLORS */
:root {
    /* primary */
    --brand-color: rgb(42, 38, 95);
    --button: rgb(29, 24, 107);
    /* neutral */
    --dark: rgb(20, 16, 68);
    --light: rgb(238, 237, 253);
    --light-grey: rgb(211, 211, 245);
    --background-blue: rgb(113, 117, 218);
}


body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Roboto';
    font-weight: 400;
    font-size: 0.9rem;
    color: var(--light-grey);
    background-color: var(--background-blue);
}

.profile-card {
    width: 350px;
    padding: 3rem 0rem 0rem 0rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    border-radius: 14px;
    background-color: var(--light);
    box-shadow: 0px 3px 8px var(--dark);
}

.profile-pic {
    padding: 5px;
    width: 160px;
    border-radius: 90px;
    filter: brightness(70%);
    border: 3px solid var(--brand-color)
}

.profile-pic:hover {
    transform: translateY(-5px);
    filter: brightness(100%);
}

.details {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    background-color: var(--brand-color);
    border-radius: 0px 0px 14px 14px;
}

.name {
    font-size: 1.3rem;
    font-weight: 700;
    color: white;
    margin-bottom: 20px;
}

.location {
    display: flex;
    align-items: center;
    gap: 10px;
}

.location img {
    height: 1rem;
    filter: invert();
}

.button {
    width: 70%;
    display: flex;
    justify-content: space-around;
}

.button button {
    width: 100px;
    padding: 0.8rem 1.2rem;
    border: none;
    background-color: var(--dark);
    color: var(--light);
    border-radius: 5px;
    box-shadow: 0px 1px 3px 0px black;
}

.button button:hover {
    transform: translateY(-3px);
    color: white;
    background-color: var(--button);
}

.skills {
    margin-top: 30px 0px;
    padding: 1rem 0rem;
    border-top: 2px solid var(--dark);
}

.skills h2 {
    padding: 0.3rem 1rem;
    font-size: 1rem;
    font-weight: 700;
    color: white;
}

.skills-list {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

.skills-list li {
    cursor: pointer;
    padding: 0.1rem 1rem;
    margin: 2px 0px;
    font-size: 0.8rem;
    border-radius: .4rem;
    display: inline-block;
    color: var(--light);
}

.skills-list li:hover {
    transform: translateY(-5px);
    color: var(--dark);
    background-color: var(--background-blue);
}

Final Card Component

Conclusion

This the process I follow while building most the components. If you keep all the points in article you are good to go. Try building more and more projects. Practice is only way to get these right.

I practice from fontendmentor. You can give it a try.

For any suggestion comment below. Thank you for reading

DEV Community: Keshav Kumar Hembram

How to create Calculator using HTML, CSS and Javascript?

How to build a Calculator using HTML, CSS, and Javascript?

Table of Contents

Introduction

Final Result

Let's start building Calculator

Creating an HTML document

Adding CSS

Now we will add Javascript

Now, we have to deal with calculations

Thing to keep in mind while using eval

Improving User Interface

Final JS Code

Conclusion

How to create a digital Clock using HTML, CSS and Javascript?

Table of Contents

Introduction

Final Result

Let's start building Clock

Creating an HTML document

Using Date object for getting time

We have the date now but we have to show it to normal users using DOM

Final Javascript Code

Styling clock

Conclusion

How to create good looking card component?

Table of contents

Introduction

Final Result

Final Code and Starter File

Creating Profile Card Component

What are profile card?

Let's start building

First step, let's create a html document containing above mentioned details

Now we deal with styling which is the most important part in this

Conclusion