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

PROJECT 8


              Simple to-do list app using HTML, CSS and JavaScript.























              File1: Index.html

                   <html>
                  <head>
                      <title>To-Do List</title>

                      <link rel=”stylesheet” href=”styles.css”>
                  </head>
                  <body>

                      <div class=”container”>
                      <img src=”Image1.jpg” alt=”Image” class=”top-image” height=50%>
                          <h1>To-Do List</h1>
                          <div class=”input-container”>

                              <input type=”text” id=”task” placeholder=”Add a new task...”>
                              <button id=”add-task”>Add</button>
                          </div>

                          <ul id=”task-list”>
                              <!-- Tasks will be added here -->
                          </ul>
                      </div>

                      <script src=”Pscript.js”></script>
                  </body>
                  </html>
              File2: styles.css

                   body {
                      font-family: Garamond, sans-serif;

                      background-color: #CBC3E3;


                312   Touchpad Web Applications-XII
   309   310   311   312   313   314   315   316   317   318   319