Page 310 - Web Applications (803) Class 12
P. 310

File1: Index.html

                  <html>
                  <head>

                      <title>Digital Clock</title>
                      <link rel=”stylesheet” href=”styles.css”>
                  </head>

                  <body>
                      <div class=”clock”>
                          <h1>Welcome to the Digital Clock</h1>

                          <div class=”time” id=”time”></div>
                      </div>
                      <script src=”Pscript.js”></script>

                  </body>
                  </html>
              File2: styles.css

                  body {
                      font-family: sans-serif;
                      background-color: pink;

                      color: #fff;
                      display: flex;

                      justify-content: center;
                      align-items: center;
                      height: 100vh;
                      margin: 0;

                  .clock {
                      background-color: blue;

                      padding: 20px;
                      border-radius: 10px;
                      text-align: center;

                  }
                  .time {
                      font-size: 2rem;

                  }
              File3: Pscript.js
                   function updateTime() {

                      const timeElement = document.getElementById(‘time’);
                      const now = new Date();


                308   Touchpad Web Applications-XII
   305   306   307   308   309   310   311   312   313   314   315