When I try to add more content to my page, it doesn't extend beyond a single page and instead gets compacted together

Question

When I try to add more content to my page, it doesn't extend beyond a single page and instead gets compacted together

As a beginner in the world of coding, my goal is to create a time management website specifically tailored for school use. Despite copying this code multiple times, I have encountered an issue where it does not continue down the page, and I am unsure of the reason behind this sudden halt.

<html>
<style>
     
.title {
    text-align: center;
    font-size: 45px;
    color: #b72121;
}
     
    </style>
<header>
<title>ManageMe</title>
</header>
<body>
<div>
<h1 class= "title"> ManageMe </h1>
    <font face = "Times New Roman" size = "7">Next 7 Day Outlook</font><br />
    <div> 
        <h2> Today <span class= "june13">June 13</span></h2> 
        <div class="line1">
            <div> 
    <br />
                <div id= "bonus" />
                <input id= "first" type="text" name="firstname" value="Enter Task Here">
                <br />  
                <div>
                    <button class="button" onclick ="addtask()"> Add Task </button>
                    <div id="div">
                        <div> 
                            <h2 class= "tom"> Tomorrow <span class= "june14">June 14</span></h2> 
                            <div class="line2"> 
                                <div>
               
                                    <div>
                                        <br /> 
                                        <div id= "bonus1" />
                                        <input id= "first1" type="text" name="firstname" value="Enter Task Here">
                                    </div>
                                    <button class="button1" onclick ="addtask1()"> Add Task </button>
                                </div>
                                <div> 
                                    <h2> Satuday <span class= "june14">June 15</span></h2> 
                                    <div class="line3"> 
                                        <div>
                                            <div>
                                                <br /> 
                                                <div id= "bonus2" />
                                                <input id= "first2" type="text" name="firstname" value="Enter Task Here">
                                            </div>
                                            <button class="button2" onclick ="addtask2()"> Add Task </button>
                                            <div>
                                            <div> 
                                                <h2> Sunday <span class= "june16">June 16</span></h2> 
                                                <div class="line4"> 
                                                    <div>
                                                        <div>
                                                            <br /> 
...

Identifying the problematic part within the code snippet:

<div>
    <div> 
        <h2>Sunday <span class= "june16">June 16</span></h2> 
        <div class="line4"> 
            <div>
                <div>
                    <br/> 
                    <div id= "bonus3" />
                    <input id= "first3" type="text" name="firstname" value="Enter Task Here">
                </div>
                <button class="button3" onclick ="addtask3()">Add Task</button>
            </div>
        </div>
    </div>                      
</div>

Seeking assistance with the functionality that allows for adding tasks on a given day. Additionally, I aim to implement priority levels using colors but lack the know-how. Any guidance or support is greatly appreciated as I embrace learning the basics of coding. Thank you!

javascript html css button input

Answer 1

Answer №1

To start, it's important to tidy up your code. Class names should be used to group elements that have the same appearance. For example, in your case, instead of using line1, line2, etc., they should all be named line. If you need to access elements separately, use IDs (for example, buttons).

The issue with the appearance is that the height of the line class is set to 2px, and since it wraps the entire section, the whole section ends up with a height of 2px. I've cleaned up your code and provided an example of how it could look (note that the class name june13 should also be renamed to something like date). To add more dates, simply copy the section and adjust the values for the input id and button function.

function addtask() {
    var first = document.getElementById("first").value;
    document.getElementById("bonus").innerHTML += "<p>" + first + "</p>";
}

function addtask1() {
    var first = document.getElementById("first1").value;
    document.getElementById("bonus1").innerHTML += "<p>" + first + "</p>";
}

function addtask2() {
    var first = document.getElementById("first2").value;
    document.getElementById("bonus2").innerHTML += "<p>" + first + "</p>";
}

function addtask3() {
    var first = document.getElementById("first3").value;
    document.getElementById("bonus3").innerHTML += "<p>" + first + "</p>";
}

.title {
text-align: center;
font-size: 45px;
color: #b72121;
}

.june13 {
font-family: "Times New Roman", Times, serif;
font-size: 14px;
color: #989da5;
margin: 0px;
padding: 0px;
}

.line1 {
width: 30%;
height: 2px;
background-color: #666;
margin-bottom: 10px;
}

.button {
font-size: 10px;
cursor: pointer;
outline: none;
color: #fff;
background-color: #4CAF50;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
height: 25px;
width: 70px;
}

.button:hover {
background-color: #3e8e41
}

.button:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}

input {
margin-bottom: 10px;
}

<html>
  <header>
    <title>ManageMe</title>
  </header>
  <body>
    <h1 class= "title"> ManageMe </h1>
    <font face = "Times New Roman" size = "7">Next 7 Day Outlook</font>
    <br />
    <!--DAY SECTION START-->
    <h2> Today 
      <span class= "june13">June 13</span>
    </h2>
    <div class="line1"></div>
    <div>
      <div id="bonus"></div>
      <br>
      <input id= "first" type="text" name="firstname" value="Enter Task Here">
      <br>
      <button class="button" onclick ="addtask()"> Add Task </button>
    </div>
    <!--DAY SECTION END-->
    <!--DAY SECTION START-->
    <h2> Tomorrow 
      <span class= "june13">June 14</span>
    </h2>
    <div class="line1"></div>
    <div>
      <div id="bonus1"></div>
      <br>
      <input id= "first1" type="text" name="firstname" value="Enter Task Here">
      <br>
      <button class="button" onclick ="addtask1()"> Add Task </button>
    </div>
    <!--DAY SECTION END-->
  </body>
</html>

Answer 2

To start, it's important to tidy up your code. Class names should be used to group elements that have the same appearance. For example, in your case, instead of using line1, line2, etc., they should all be named line. If you need to access elements separately, use IDs (for example, buttons).

The issue with the appearance is that the height of the line class is set to 2px, and since it wraps the entire section, the whole section ends up with a height of 2px. I've cleaned up your code and provided an example of how it could look (note that the class name june13 should also be renamed to something like date). To add more dates, simply copy the section and adjust the values for the input id and button function.

function addtask() {
    var first = document.getElementById("first").value;
    document.getElementById("bonus").innerHTML += "<p>" + first + "</p>";
}

function addtask1() {
    var first = document.getElementById("first1").value;
    document.getElementById("bonus1").innerHTML += "<p>" + first + "</p>";
}

function addtask2() {
    var first = document.getElementById("first2").value;
    document.getElementById("bonus2").innerHTML += "<p>" + first + "</p>";
}

function addtask3() {
    var first = document.getElementById("first3").value;
    document.getElementById("bonus3").innerHTML += "<p>" + first + "</p>";
}

.title {
text-align: center;
font-size: 45px;
color: #b72121;
}

.june13 {
font-family: "Times New Roman", Times, serif;
font-size: 14px;
color: #989da5;
margin: 0px;
padding: 0px;
}

.line1 {
width: 30%;
height: 2px;
background-color: #666;
margin-bottom: 10px;
}

.button {
font-size: 10px;
cursor: pointer;
outline: none;
color: #fff;
background-color: #4CAF50;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
height: 25px;
width: 70px;
}

.button:hover {
background-color: #3e8e41
}

.button:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}

input {
margin-bottom: 10px;
}

<html>
  <header>
    <title>ManageMe</title>
  </header>
  <body>
    <h1 class= "title"> ManageMe </h1>
    <font face = "Times New Roman" size = "7">Next 7 Day Outlook</font>
    <br />
    <!--DAY SECTION START-->
    <h2> Today 
      <span class= "june13">June 13</span>
    </h2>
    <div class="line1"></div>
    <div>
      <div id="bonus"></div>
      <br>
      <input id= "first" type="text" name="firstname" value="Enter Task Here">
      <br>
      <button class="button" onclick ="addtask()"> Add Task </button>
    </div>
    <!--DAY SECTION END-->
    <!--DAY SECTION START-->
    <h2> Tomorrow 
      <span class= "june13">June 14</span>
    </h2>
    <div class="line1"></div>
    <div>
      <div id="bonus1"></div>
      <br>
      <input id= "first1" type="text" name="firstname" value="Enter Task Here">
      <br>
      <button class="button" onclick ="addtask1()"> Add Task </button>
    </div>
    <!--DAY SECTION END-->
  </body>
</html>

Answer 3

Answer №2

Looks like those nested divs are reminiscent of the old Dreamweaver days! Here's a method to streamline and eliminate many of those divs. The initial wrapper div is retained with an added id of "container" for some additional padding. The h2 tags are styled with margins to prevent them from merging together.

     
     function addtask() {
        
       var first = document.getElementById("first").value;
       document.getElementById("bonus").innerHTML += "<p>"+first+"</p>";
         
      
         }
        
         function addtask1() {
        
       var first = document.getElementById("first1").value;
       document.getElementById("bonus1").innerHTML += "<p>"+first+"</p>";
         
      
         }
                 function addtask2() {
        
       var first = document.getElementById("first2").value;
       document.getElementById("bonus2").innerHTML += "<p>"+first+"</p>";
         
      
         }
        function addtask3() {
        
       var first = document.getElementById("first3").value;
       document.getElementById("bonus3").innerHTML += "<p>"+first+"</p>";
         
      
         }
        
// CSS Snippet
.line1 {
    width: 30%;
    height: 2px;
    background-color: #666;
    margin-bottom: 10px;
}

.button {
    font-size: 10px;
    cursor: pointer;
    outline: none; 
    color: #fff;
    background-color: #4CAF50;
    border: none;
    border-radius: 15px;
    box-shadow: 0 9px #999;
    height: 25px;
    width: 70px;
}

Answer 4

Looks like those nested divs are reminiscent of the old Dreamweaver days! Here's a method to streamline and eliminate many of those divs. The initial wrapper div is retained with an added id of "container" for some additional padding. The h2 tags are styled with margins to prevent them from merging together.

     
     function addtask() {
        
       var first = document.getElementById("first").value;
       document.getElementById("bonus").innerHTML += "<p>"+first+"</p>";
         
      
         }
        
         function addtask1() {
        
       var first = document.getElementById("first1").value;
       document.getElementById("bonus1").innerHTML += "<p>"+first+"</p>";
         
      
         }
                 function addtask2() {
        
       var first = document.getElementById("first2").value;
       document.getElementById("bonus2").innerHTML += "<p>"+first+"</p>";
         
      
         }
        function addtask3() {
        
       var first = document.getElementById("first3").value;
       document.getElementById("bonus3").innerHTML += "<p>"+first+"</p>";
         
      
         }
        
// CSS Snippet
.line1 {
    width: 30%;
    height: 2px;
    background-color: #666;
    margin-bottom: 10px;
}

.button {
    font-size: 10px;
    cursor: pointer;
    outline: none; 
    color: #fff;
    background-color: #4CAF50;
    border: none;
    border-radius: 15px;
    box-shadow: 0 9px #999;
    height: 25px;
    width: 70px;
}

When I try to add more content to my page, it doesn't extend beyond a single page and instead gets compacted together

Answer №1

Answer №2

Similar questions

Mastering Tooltip Placement Using CSS or JavaScript

Submitting dataURL via Ajax using multipart/form-data

Is it possible to use velocity js to add a gradient color effect to text content?

show numerical values as images in sql

Managing content in two separate divs at the same time using AJAX

Creating Diverse Pages with Unique Variables on Identical Layouts in Jekyll

webpack - compile one TypeScript file separately (2 actions)

Utilizing the power of THREE.ShaderLib.phong while integrating subsurface scattering within ThreeJS

Incorrect pathing in express.js

The controller in ng-controller returns an undefined error when loaded using RequireJs

Integrating data between Java and JavaScript within the Wikitude platform is essential for leveraging AR.RelativeLocation

Text box content does not refresh unless the page is reloaded

Duplicate entries being saved in the database due to Ajax calls

The jQuery carousel script is not functioning

Send a vanilla JavaScript ajaxForm submission by completing the form

Angular UI-Select's issue with duplicating tags while adding objects for tagging functionality

Toggling markers according to form selections is not functioning

Including JavaScript in HTML Error 404

centering pictures vertically on my webpage

Steps for implementing an onclick action in Angular 4 from infowindow content