I am trying to make a to-do list with html/css/js for my first coding project. I used js to create a
html:
<body>
<h1> What will you do today? </h1>
<div class="container">
<input class="inputBox" id="textbox" type="text" onkeypress="enter()" placeholder="Bake a cake">
<input onclick="printInput()" class="inputBox" id="enterButton" type="button" value="Enter" id="enterButton">
<ul id=paragraph></ul>
</div>
</body>
</html>
<script src="index.js"> </script>
css:
.container {
border-style: dashed;
border-width: 4px;
display: flex;
flex-flow: column wrap;
align-items: center;
justify-content: center;
margin: auto;
width: 40%;
padding-bottom: 20%; }
li {
list-style-type: none;
}
#paragraph{
width: 100%;
clear: both;
margin: 0;
padding: 8px 0 8px 10px;
}
.container {
width: 500px;
clear: both;
display: table;
}
li {
display: flex;
border-bottom: 1px solid #cfcbcc;
}
h1 {
text-align: center;
}
javascript:
function printInput (){
var toDoInput = document.getElementById("textbox").value;
var para = document.createElement("li");
para.innerText = toDoInput;
var checkBox = document.createElement("input");
checkBox.type = "checkbox";
checkBox.className = "cb ";
para.appendChild(checkBox);
document.getElementById("paragraph").appendChild(para);
}
function enter(){
if (event.keyCode === 13) {
document.getElementById("enterButton").click();
}
}
Aucun commentaire:
Enregistrer un commentaire