Я пытаюсь создать веб-сайт управления временем, и я изо всех сил. Я хочу, чтобы, когда вы добавляете задачу на вход и нажимаете кнопку «Добавить задачу», она добавляет ее к p2 над ней и делает так, чтобы пользователь мог добавить более одной задачи. Я также пытаюсь сделать его приоритетным. Таким образом, вы можете нажать кнопку рядом с добавленной задачей и изменить цвет: красный, зеленый и оранжевый. Если бы вы также могли добавить это, было бы здорово, однако, если вы не хотите, я полностью понимаю. Буду очень признателен за помощь :)
<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">
<p id= "p1"> </p>
<p id= "p2"> </p>
<p id= "p3"> </p>
<p id= "p4"> </p>
</div>
<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>
</div>
<div>
</div>
</div>
</div>
</div>
</div>
<style>
.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;
opacity: 0.50;
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;
}
.june14 {
font-family: "Times New Roman", Times, serif;
font-size: 14px;
color: #989da5;
margin: 0px;
padding: 0px;
}
.line2 {
width: 100%;
height: 2px;
background-color: #666;
opacity: 10.300;
margin-bottom: 10px;
}
.tom {
color: #111111;
}
</style>
</div>
<script>
function addtask() {
var first = document.getElementById("first").value;
document.getElementById("p1").innerHTML = first;
}
function addtask1() {
var first = document.getElementById("first").value;
document.getElementById("p2").innerHTML = first;
}
</script>
</body>
</html>
Как вы можете видеть, когда вы добавляете вторую задачу, она меняет первую. Это не то, что я хочу. Я просто хочу добавить еще один под первым. Я также столкнулся с проблемой, когда текст с надписью «завтра» и «14 июня» имеет меньшую непрозрачность. Однако я не могу понять, почему они отличаются по цвету от верхних. Я просто не знаю.
спасибо за любую помощь Я новичок в кодировании:)