i have a problem.I don't understand why my checkbox in CSS in not getting styled with the code provided in CSS.My code is provided bellow.I tried to make it round but it doesn't seem to work properly and i don't understand why.If you take the time to answer thank you and have a great day! StackOverflow said i need more details but i don't know what else to tell you.
HTML
<!DOCTYPE html>
<html>
<head>
<title>To Do List</title>
<link rel = "stylesheet" type = "text/css" href = "style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
</head>
<body>
<div class="container">
<div>
<h1 class="header">TO DO'S</h1>
<div id="toDoForm">
<input id="toDoInput" placeholder="What would you like to do?">
<button id="dinamicButton" type="button">Add</button>
</div>
<ol id="toDoList">
</ol>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script type="text/javascript" src="notify.min.js"></script>
<script type = "text/javascript" src = "script.js"></script>
</body>
</html>
CSS
.container {
display: flex;
justify-content: center;
align-items: center;
}
.deleteButton {
font-style: normal;
color: red;
font-size: 25px;
overflow: hidden;
/*display: none !important;*/
}
.deleteButton:hover {
cursor: pointer;
font-size: 27px;
}
.editButton {
display: inline-block;
margin-left: 5px;
}
.editButton:hover {
cursor: pointer;
font-size: 27px;
}
#dinamicButton {
height: 35px;
float: left;
width: 70px;
}
.buttonGroupAll {
display: flex;
}
li{
margin: 10px 0px;
font-size: 25px;
float: left;
clear: both;
padding: 5px 0px;
width: 500px;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
}
#toDoList{
counter-reset: section;
}
li:before {
counter-increment: section;
content: counter(section) ".";
position: absolute;
margin-left: -20px;
}
li:hover .deleteButton {
/*display: inline-block !important;*/
}
#toDoInput {
font-size: 15px;
float: left;
width: 290px;
height: 35px;
display: block;
box-sizing: border-box;
outline: none;
}
.header {
display: flex;
justify-content: center;
}
.hidden {
display: none !important;
}
#toDoForm {
display: block;
margin:0 auto;
width: 400px;
}
.buttonsContainer {
display: flex;
}
.doneEdit {
color: lightgreen;
margin-left: 5px;
}
.doneEdit:hover {
cursor: pointer;
font-size: 27px;
}
.inputDiv {
font-size: 25px;
height: 100%;
box-sizing: border-box;
background-color: transparent;
border: 0px solid;
border-width: 0 0 2px;
border-bottom-style: dotted;
}
/*styling the checkbox*/
.check {
position: absolute;
left: -42px;
transform: scale(1.5);
}
.checked-off {
text-decoration: line-through;
}
label {
display: inline;
}
.check + label {
background-color: #fafafa;
border: 1px solid #cacece;
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
padding: 9px;
border-radius: 3px;
display: inline-block;
position: relative;
}
Java Script
//fire add Element Function when addButton is pressed
let addButton = document.getElementById("dinamicButton");
addButton.addEventListener('click',function(){
addElement();
});
//add Element to OL
function addElement() {
let text = $("#toDoInput").val();
if(!text){
$.notify("Text is required!",{
position:"top-left",
className:"warn"
});
return;
}
//Create li
let newItem = document.createElement("li");
//making a check box
let checkBox = document.createElement('INPUT');
checkBox.className = 'check';
checkBox.setAttribute("type", "checkbox");
newItem.appendChild(checkBox);
//create a label
let label = document.createElement("LABEL");
newItem.appendChild(label);
//create div for text
let textDiv = document.createElement("div");
textDiv.innerHTML = text;
textDiv.className = 'textDiv';
newItem.appendChild(textDiv);
//create input
let input = document.createElement("INPUT");
input.value = text;
input.className = 'hidden inputDiv';
newItem.appendChild(input);
//making the input dissapear
input.addEventListener('keyup', function(event){
if (event.keyCode === 13) {
event.preventDefault();
editFunction();
}
});
//create edit button
let editButton = document.createElement('i');
editButton.className = "fab fa-stumbleupon-circle editButton";
//create edit function
function editFunction() {
if(!input.value){
$.notify("Text is required!",{
position:"top-left",
className:"warn"
});
return;
};
textDiv.innerHTML = input.value;
textDiv.classList.remove('hidden');
input.classList.add('hidden');
editButton.classList.remove('hidden');
greenButton.classList.add('hidden');
};
//making the edit button edit the text
editButton.addEventListener('click', function(){
textDiv.className = 'hidden';
input.classList.remove('hidden');
editButton.className = 'fab fa-stumbleupon-circle editButton hidden';
greenButton.classList.remove('hidden');
});
//Create del button
let i = document.createElement("i");
i.className = "fas fa-times-circle deleteButton";
//create done edit button
let greenButton = document.createElement('i');
greenButton.className = "fas fa-check-circle doneEdit hidden";
//put buttons in one div
let buttonsContainer = document.createElement("div");
buttonsContainer.className = 'buttonsContainer';
buttonsContainer.appendChild(i);
buttonsContainer.appendChild(editButton);
buttonsContainer.appendChild(greenButton);
newItem.appendChild(buttonsContainer);
//append li to ol
document.getElementById("toDoList").appendChild(newItem);
//clear input value
document.getElementById("toDoInput").value = "";
//making the doneEdit button work
greenButton.addEventListener('click', function(){
editFunction();
});
//making the check box cut text
checkBox.addEventListener('click', function(){
if (checkBox.checked === true) {
textDiv.classList.add('checked-off')
} else {
textDiv.classList.remove('checked-off')
}
});
}
let deleteButton = document.getElementsByClassName("deleteButton");
let toDoList = document.getElementById("toDoList");
//delete the item from the list
document.addEventListener('click',function(e){
if(e.target && e.target.className.includes('deleteButton')){
console.log(e.target);
toDoList.removeChild(e.target.parentNode.parentNode);
}
});
//making the enter button work
var input = document.getElementById("toDoInput");
input.addEventListener("keyup", function(event) {
console.log(event);
if (event.keyCode === 13) {
event.preventDefault();
addElement();
}
});
Aucun commentaire:
Enregistrer un commentaire