Connect divs with a dynamic line

Connect divs with a dynamic line - javascript

I have a button that generates a big box that is resizable and draggable. Inside of that div is another button to generate another smaller div. I want the smaller divs to be connected the bigger divs by a line. I tried leaderline, but that did not work. I want the big div to connect to each of its "child" divs. If there are 2 big divs, I dont want the big divs to be connected to each other, but instead be their own div with their own "network" of lines.
var generatedCode = "";
var classNameCode = {};
var classVariables = {};
var structNameCode = {};
var javaNameCode = {};
var variableName = "";
var amtVars = 0;
// Checking selected language
var dropDown = document.getElementById('language');
console.log(dropDown.value);
document.getElementById("create-box").addEventListener("click", function() {
amtVars = 0;
var methodCount = 0;
let box = document.createElement("div");
box.classList.add("box");
let title = document.createElement("h2");
title.innerHTML = "Class";
box.appendChild(title);
let classTitle = document.createElement('input');
classTitle.classList.add('class-name-form');
let classTitleBtn = document.createElement('button');
classTitleBtn.innerText = "Set Class Name";
classTitleBtn.classList.add('class-name-btn');
box.appendChild(classTitle);
box.appendChild(classTitleBtn);
document.getElementById("box-container").appendChild(box);
let createSubclassButton = document.createElement("button");
createSubclassButton.innerHTML = "Add Method";
box.appendChild(createSubclassButton);
let createInstanceVariable = document.createElement('button');
createInstanceVariable.classList.add('add-variable');
createInstanceVariable.innerHTML = "Add instance variable";
box.appendChild(createInstanceVariable);
box.addEventListener("mousedown", startDrag);
box.addEventListener("mousemove", drag);
box.addEventListener("mouseup", endDrag);
box.addEventListener("mouseleave", endDrag);
let offset = [0, 0];
let isDown = false;
function startDrag(e) {
isDown = true;
offset = [
this.offsetLeft - e.clientX,
this.offsetTop - e.clientY
];
}
function drag(e) {
if (!isDown) return;
e.preventDefault();
this.style.left = (e.clientX + offset[0]) + 'px';
this.style.top = (e.clientY + offset[1]) + 'px';
}
function endDrag(e) {
isDown = false;
}
createInstanceVariable.addEventListener('click', function() {
methodCount = 0;
let instanceVar = document.createElement('div');
instanceVar.classList.add('instance-var');
let instanceTitle = document.createElement('h2');
instanceTitle.innerText = `Variable`;
instanceVar.append(instanceTitle);
let varName = document.createElement('input');
varName.classList.add('varName-form');
varName.placeholder = "Set variable name";
instanceVar.append(varName);
let varNameBtn = document.createElement('button');
varNameBtn.innerText = "Set Variable Name";
varNameBtn.classList.add('var-name-btn');
instanceVar.append(varNameBtn);
let varType = document.createElement('input');
varType.placeholder = 'Specify variable type';
varType.classList.add('variable-type-form');
let varTypeBtn = document.createElement('button');
varTypeBtn.innerText = "Set variable type";
varTypeBtn.classList.add('method-type-btn');
instanceVar.appendChild(varType);
instanceVar.appendChild(varTypeBtn);
document.getElementById("box-container").appendChild(instanceVar);
instanceVar.style.left = box.offsetLeft + box.offsetWidth + 10 + 'px';
instanceVar.style.top = box.offsetTop + 'px';
instanceVar.addEventListener("mousedown", startDrag);
instanceVar.addEventListener("mousemove", drag);
instanceVar.addEventListener("mouseup", endDrag);
instanceVar.addEventListener("mouseleave", endDrag);
varNameBtn.addEventListener('click', function() {
variableName = varName.value;
instanceTitle.innerText = `Variable ${variableName}`;
});
varTypeBtn.addEventListener('click', function() {
if (amtVars === 0) {
classNameCode[classTitle.value] += `\n\tprivate: \n\t\t${varType.value} ${variableName};\n`;
javaNameCode[classTitle.value] += `\n private ${varType.value} ${variableName};`;
console.log(javaNameCode[classTitle.value]);
amtVars++;
} else {
classNameCode[classTitle.value] += `\n\t\t${varType.value} ${variableName};\n`;
javaNameCode[classTitle.value] += `\n private ${varType.value} ${variableName};`;
}
});
});
createSubclassButton.addEventListener("click", function() {
let subBox = document.createElement("div");
subBox.classList.add("subbox");
let subTitle = document.createElement("h2");
subTitle.innerText = `Method`;
subBox.append(subTitle);
let methodTitle = document.createElement('input');
methodTitle.classList.add('method-name-form');
methodTitle.placeholder = 'Set method name'
let methodTitleBtn = document.createElement('button');
methodTitleBtn.innerText = "Set Method Name";
methodTitleBtn.classList.add('method-name-btn');
subBox.appendChild(methodTitle);
subBox.appendChild(methodTitleBtn);
let returnType = document.createElement('input');
returnType.placeholder = 'Specify return type';
returnType.classList.add('method-return-type-form');
let returnTypeBtn = document.createElement('button');
returnTypeBtn.innerText = "Set return type";
returnTypeBtn.classList.add('method-return-type-btn');
subBox.appendChild(returnType);
subBox.appendChild(returnTypeBtn);
document.getElementById("box-container").appendChild(subBox);
subBox.style.left = box.offsetLeft + box.offsetWidth + 10 + 'px';
subBox.style.top = box.offsetTop + 'px';
subBox.addEventListener("mousedown", startDrag);
subBox.addEventListener("mousemove", drag);
subBox.addEventListener("mouseup", endDrag);
subBox.addEventListener("mouseleave", endDrag);
methodTitleBtn.addEventListener('click', function() {
console.log(methodTitle.value);
if (methodTitle.value === classTitle.value) {
subTitle.innerText = `Constructor for class ${classTitle.value}`;
} else {
subTitle.innerText = `Method ${methodTitle.value}`;
}
});
returnTypeBtn.addEventListener('click', function() {
console.log(returnType.value);
if (methodCount === 0) {
classNameCode[classTitle.value] += `\tpublic:\n\t\t${returnType.value} ${methodTitle.value}() {\n\n\t\t}`;
javaNameCode[classTitle.value] += `\n public ${returnType.value} ${methodTitle.value}(){\n\n}`;
console.log(javaNameCode[classTitle.value]);
methodCount++;
amtVars = 0;
} else {
classNameCode[classTitle.value] += `\n\t\t${returnType.value} ${methodTitle.value}() {\n\n\t\t}`;
javaNameCode[classTitle.value] += `\n public ${returnType.value} ${methodTitle.value}(){\n\n }`;
console.log(javaNameCode[classTitle.value]);
amtVars = 0;
}
});
});
classTitleBtn.addEventListener("click", function() {
console.log(classTitle.value);
// generatedCode = `class ${classTitle.value} {\n\t`
title.innerHTML = `Class ${classTitle.value}`;
classNameCode[classTitle.value] = `\nclass ${classTitle.value} {\n`
javaNameCode[classTitle.value] = `\n public class ${classTitle.value} {\n`;
});
});
var createStructBtn = document.getElementById('create-struct');
createStructBtn.addEventListener('click', () => {
var nameCount = 0;
var dTypeCount = 0;
var amtStructMembers = 0;
let structBox = document.createElement('div');
structBox.classList.add('structBox');
let structBoxTitle = document.createElement('h2');
structBoxTitle.classList.add('structBoxTitle');
structBoxTitle.innerText = 'Struct';
structBox.appendChild(structBoxTitle);
let structNameForm = document.createElement('input');
structNameForm.classList.add('structNameForm');
structBox.appendChild(structNameForm);
document.getElementById('box-container').appendChild(structBox);
let structNameBtn = document.createElement('button');
structNameBtn.innerText = "Set struct name";
structNameBtn.classList.add('structNameBtn');
structBox.appendChild(structNameBtn);
// Create the attribute div for each var attr of the struct
let structAtrBtn = document.createElement('button');
structAtrBtn.innerText = "Add a struct member";
structBox.appendChild(structAtrBtn);
structNameBtn.addEventListener('click', () => {
structBoxTitle.innerText = `Struct ${structNameForm.value}`;
});
// When they create a new instance variable div
structAtrBtn.addEventListener('click', () => {
nameCount = 0;
let structAtrBox = document.createElement('div');
structAtrBox.classList.add('structAtrBox');
let structAtrBoxTitle = document.createElement('h2');
structAtrBoxTitle.innerText = "Member";
structAtrBox.appendChild(structAtrBoxTitle);
// Data Type
let memberDType = document.createElement('input');
memberDType.placeholder = 'Set member data type';
structAtrBox.appendChild(memberDType);
let memberDTypeSubmit = document.createElement('button');
memberDTypeSubmit.innerText = 'Set datatype';
structAtrBox.appendChild(memberDTypeSubmit);
// Name
let memberName = document.createElement('input');
memberName.placeholder = 'Set member name';
structAtrBox.appendChild(memberName);
let memberNameSubmit = document.createElement('button');
memberNameSubmit.innerText = 'Set name';
structAtrBox.appendChild(memberNameSubmit);
document.getElementById("box-container").appendChild(structAtrBox);
structAtrBox.style.left = structBox.offsetLeft + structBox.offsetWidth + 10 + 'px';
structAtrBox.style.top = structBox.offsetTop + 'px';
structAtrBox.addEventListener("mousedown", startDrag);
structAtrBox.addEventListener("mousemove", drag);
structAtrBox.addEventListener("mouseup", endDrag);
structAtrBox.addEventListener("mouseleave", endDrag);
let offset = [0, 0];
let isDown = false;
function startDrag(e) {
isDown = true;
offset = [
this.offsetLeft - e.clientX,
this.offsetTop - e.clientY
];
}
function drag(e) {
if (!isDown) return;
e.preventDefault();
this.style.left = (e.clientX + offset[0]) + 'px';
this.style.top = (e.clientY + offset[1]) + 'px';
}
function endDrag(e) {
isDown = false;
}
// TODO: Add event handlers for both btn clicks
memberDTypeSubmit.addEventListener('click', () => {
console.log(`Data type: ${memberDType.value}`);
});
memberNameSubmit.addEventListener('click', () => {
if (nameCount === 0){
console.log(`Member ${memberName.value}`);
structAtrBoxTitle.innerText = `Member ${memberName.value}`;
nameCount++;
}
if (amtStructMembers === 0){
structNameCode[structNameForm.value] = `\nstruct {\n ${memberDType.value} ${memberName.value};\n`;
amtStructMembers++;
} else {
structNameCode[structNameForm.value] += `
${memberDType.value} ${memberName.value};\n`;
}
});
});
structBox.addEventListener("mousedown", startDrag);
structBox.addEventListener("mousemove", drag);
structBox.addEventListener("mouseup", endDrag);
structBox.addEventListener("mouseleave", endDrag);
let offset = [0, 0];
let isDown = false;
function startDrag(e) {
isDown = true;
offset = [
this.offsetLeft - e.clientX,
this.offsetTop - e.clientY
];
}
function drag(e) {
if (!isDown) return;
e.preventDefault();
this.style.left = (e.clientX + offset[0]) + 'px';
this.style.top = (e.clientY + offset[1]) + 'px';
}
function endDrag(e) {
isDown = false;
}
});
// MODAL FOR CODE GENERATION
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var modalContent = document.querySelector('.modal-content');
btn.onclick = function() {
modal.style.display = "block";
modalContent.innerText = "";
console.log(classNameCode);
if (dropDown.value == "c++") {
if (Object.keys(classNameCode).length === 0 && Object.keys(structNameCode).length === 0) {
modalContent.innerText = "No Code Yet";
}
for (var i in structNameCode){
var codeForAppending = `${structNameCode[i]} \n}, ${i};\n`;
console.log(codeForAppending);
modalContent.innerText += codeForAppending;
}
for (var key in classNameCode) {
var codeToAppend = `${classNameCode[key]} \n}`;
console.log(codeToAppend);
modalContent.innerText += codeToAppend;
}
} else {
if (Object.keys(javaNameCode).length === 0) {
modalContent.innerText = "No Code Yet";
}
for (var key in javaNameCode) {
var code = `${javaNameCode[key]} \n}`;
modalContent.innerText += code;
}
}
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
body {
background-size: 40px 40px;
background-image: radial-gradient(circle, #000000 1px, rgba(0, 0, 0, 0) 1px);
background-color: darkgray;
}
#create-box {
padding: 10px 20px;
background-color: #4CAF50;
border-radius: 5px;
border: none;
color: white;
}
#create-box:hover{
background-color: #5dc861;
cursor: pointer;
}
#create-box:active{
cursor:pointer
}
#create-struct {
padding: 10px 20px;
background-color: #4CAF50;
border-radius: 5px;
border: none;
color: white;
}
#create-struct:hover{
background-color: #5dc861;
cursor: pointer;
}
#create-struct:active{
cursor:pointer
}
.box {
position: absolute;
width: 250px;
height: 250px;
background-color: #f1f1f1;
border: 1px solid #d3d3d3;
border-radius: 5px;
resize: both;
overflow: auto;
z-index: 1;
text-align: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.box h2 {
margin: 0;
padding: 10px;
}
.subbox {
width: 200px;
height: 200px;
background-color: #f1f1f1;
border: 1px solid #d3d3d3;
position: absolute;
z-index: 1;
border-radius: 5px;
text-align: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
white-space: pre;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
#myBtn{
padding: 10px 20px;
background-color: #4CAF50;
border-radius: 5px;
border: none;
color: white;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
#myBtn:hover{
background-color: #5dc861;
cursor: pointer;
}
#myBtn:active{
cursor:pointer
}
#buttons{
text-align: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.class-name-form{
border-radius: 5px;
border: 1px solid black;
}
button{
border-radius: 5px;
border: none;
background-color: rgb(170, 207, 207);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
button:hover{
cursor: pointer;
background-color: rgb(198, 224, 224);
}
button:active{
cursor: pointer;
}
.instance-var{
width: 200px;
height: 200px;
background-color: #f1f1f1;
border: 1px solid #d3d3d3;
position: absolute;
z-index: 1;
border-radius: 5px;
text-align: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.structBox {
position: absolute;
width: 250px;
height: 250px;
background-color: #f1f1f1;
border: 1px solid #d3d3d3;
border-radius: 5px;
resize: both;
overflow: auto;
z-index: 1;
text-align: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.structAtrBox {
width: 200px;
height: 200px;
background-color: #f1f1f1;
border: 1px solid #d3d3d3;
position: absolute;
z-index: 1;
border-radius: 5px;
text-align: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
#language {
padding: 10px 20px;
background-color: #4CAF50;
border-radius: 5px;
border: none;
color: white;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./static/styles.css">
<title>Program Visualizer And Generator</title>
</head>
<body>
<div id="buttons">
<button id="create-box">Create Class</button>
<button id="create-struct">Create Struct</button>
<button id="myBtn">View Code</button>
<select name="language" id="language">
<option value="c++" id="OptionC">C++</option>
<option value="java">Java</option>
</select>
</div>
<div id="box-container"></div>
<div id="struct-container"></div>
<div id="myModal" class="modal">
<div class="modal-content">
<code></code>
</div>
</div>
<script src="./functionality/main.js"></script>
</body>
</html>

Related

Connect generated divs in JS

I am have a button that generates a div and button inside that div that generates another div. Whenever one of those superdivs generated by the main button, I want to connect each of those subdivs with a line. They are draggable, so the line should also be draggable. I saw LeaderLineJS, but then I try what it says in the docs after a div was created, it doesn't work.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./static/styles.css">
<title>Program Visualizer And Generator</title>
</head>
<body>
<div id="buttons">
<button id="create-box">Create Class</button>
<button id="myBtn">View Code (C++)</button>
</div>
<div id="box-container"></div>
<div id="myModal" class="modal">
<div class="modal-content">
<code></code>
</div>
</div>
<script src="./functionality/main.js"></script>
</body>
</html>
javascript:
var generatedCode = "";
var classNameCode = {};
var classVariables = {};
var variableName = "";
var amtVars = 0;
document.getElementById("create-box").addEventListener("click", function() {
amtVars = 0;
var methodCount = 0;
let box = document.createElement("div");
box.classList.add("box");
let title = document.createElement("h2");
title.innerHTML = "Class";
box.appendChild(title);
let classTitle = document.createElement('input');
classTitle.classList.add('class-name-form');
let classTitleBtn = document.createElement('button');
classTitleBtn.innerText = "Set Class Name";
classTitleBtn.classList.add('class-name-btn');
box.appendChild(classTitle);
box.appendChild(classTitleBtn);
document.getElementById("box-container").appendChild(box);
let createSubclassButton = document.createElement("button");
createSubclassButton.innerHTML = "Add Method";
box.appendChild(createSubclassButton);
let createInstanceVariable = document.createElement('button');
createInstanceVariable.classList.add('add-variable');
createInstanceVariable.innerHTML = "Add instance variable";
box.appendChild(createInstanceVariable);
// Enable resizing and dragging
box.addEventListener("mousedown", startDrag);
box.addEventListener("mousemove", drag);
box.addEventListener("mouseup", endDrag);
box.addEventListener("mouseleave", endDrag);
let offset = [0, 0];
let isDown = false;
function startDrag(e) {
isDown = true;
offset = [
this.offsetLeft - e.clientX,
this.offsetTop - e.clientY
];
}
function drag(e) {
if (!isDown) return;
e.preventDefault();
this.style.left = (e.clientX + offset[0]) + 'px';
this.style.top = (e.clientY + offset[1]) + 'px';
}
function endDrag(e) {
isDown = false;
}
createInstanceVariable.addEventListener('click', function() {
let instanceVar = document.createElement('div');
instanceVar.classList.add('instance-var');
let instanceTitle = document.createElement('h2');
instanceTitle.innerText = `Variable`;
instanceVar.append(instanceTitle);
let varName = document.createElement('input');
varName.classList.add('varName-form');
varName.placeholder = "Set variable name";
instanceVar.append(varName);
let varNameBtn = document.createElement('button');
varNameBtn.innerText = "Set Variable Name";
varNameBtn.classList.add('var-name-btn');
instanceVar.append(varNameBtn);
let varType = document.createElement('input');
varType.placeholder = 'Specify variable type';
varType.classList.add('variable-type-form');
let varTypeBtn = document.createElement('button');
varTypeBtn.innerText = "Set variable type";
varTypeBtn.classList.add('method-type-btn');
instanceVar.appendChild(varType);
instanceVar.appendChild(varTypeBtn);
document.getElementById("box-container").appendChild(instanceVar);
instanceVar.style.left = box.offsetLeft + box.offsetWidth + 10 + 'px';
instanceVar.style.top = box.offsetTop + 'px';
instanceVar.addEventListener("mousedown", startDrag);
instanceVar.addEventListener("mousemove", drag);
instanceVar.addEventListener("mouseup", endDrag);
instanceVar.addEventListener("mouseleave", endDrag);
varNameBtn.addEventListener('click', function() {
variableName = varName.value;
instanceTitle.innerText = `Variable ${variableName}`;
});
varTypeBtn.addEventListener('click', function() {
if(amtVars === 0){
classNameCode[classTitle.value] += `\n\tprivate: \n\t\t${varType.value} ${variableName};\n`;
amtVars++;
} else{
classNameCode[classTitle.value] += `\n\t\t${varType.value} ${variableName};\n`;
}
});
});
createSubclassButton.addEventListener("click", function() {
let subBox = document.createElement("div");
subBox.classList.add("subbox");
let subTitle = document.createElement("h2");
subTitle.innerText = `Method`;
subBox.append(subTitle);
let methodTitle = document.createElement('input');
methodTitle.classList.add('method-name-form');
methodTitle.placeholder = 'Set method name'
let methodTitleBtn = document.createElement('button');
methodTitleBtn.innerText = "Set Method Name";
methodTitleBtn.classList.add('method-name-btn');
subBox.appendChild(methodTitle);
subBox.appendChild(methodTitleBtn);
let returnType = document.createElement('input');
returnType.placeholder = 'Specify return type';
returnType.classList.add('method-return-type-form');
let returnTypeBtn = document.createElement('button');
returnTypeBtn.innerText = "Set return type";
returnTypeBtn.classList.add('method-return-type-btn');
subBox.appendChild(returnType);
subBox.appendChild(returnTypeBtn);
document.getElementById("box-container").appendChild(subBox);
subBox.style.left = box.offsetLeft + box.offsetWidth + 10 + 'px';
subBox.style.top = box.offsetTop + 'px';
subBox.addEventListener("mousedown", startDrag);
subBox.addEventListener("mousemove", drag);
subBox.addEventListener("mouseup", endDrag);
subBox.addEventListener("mouseleave", endDrag);
methodTitleBtn.addEventListener('click', function() {
console.log(methodTitle.value);
subTitle.innerText = `Method ${methodTitle.value}`;
});
returnTypeBtn.addEventListener('click', function() {
console.log(returnType.value);
if (methodCount === 0) {
classNameCode[classTitle.value] += `\tpublic:\n\t\t${returnType.value} ${methodTitle.value}() {\n\n\t\t}`;
methodCount++;
amtVars = 0;
} else {
classNameCode[classTitle.value] += `\n\t\t${returnType.value} ${methodTitle.value}() {\n\n\t\t}`;
amtVars = 0;
}
});
});
classTitleBtn.addEventListener("click", function() {
console.log(classTitle.value);
// generatedCode = `class ${classTitle.value} {\n\t`
title.innerHTML = `Class ${classTitle.value}`;
classNameCode[classTitle.value] = `\nclass ${classTitle.value} {\n`
});
});
// MODAL FOR CODE GENERATION
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var modalContent = document.querySelector('.modal-content');
btn.onclick = function() {
modal.style.display = "block";
modalContent.innerText = "";
console.log(classNameCode);
if (Object.keys(classNameCode).length === 0) {
modalContent.innerText = "No Code Yet";
}
for (var key in classNameCode) {
var codeToAppend = `${classNameCode[key]} \n}`;
console.log(codeToAppend);
modalContent.innerText += codeToAppend;
}
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
Css:
body {
background-size: 40px 40px;
background-image: radial-gradient(circle, #000000 1px, rgba(0, 0, 0, 0) 1px);
background-color: darkgray;
}
#create-box {
padding: 10px 20px;
background-color: #4CAF50;
border-radius: 5px;
border: none;
color: white;
}
#create-box:hover{
background-color: #5dc861;
cursor: pointer;
}
#create-box:active{
cursor:pointer
}
.box {
position: absolute;
width: 250px;
height: 250px;
background-color: #f1f1f1;
border: 1px solid #d3d3d3;
border-radius: 5px;
resize: both;
overflow: auto;
z-index: 1;
text-align: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.box h2 {
margin: 0;
padding: 10px;
}
.subbox {
width: 200px;
height: 200px;
background-color: #f1f1f1;
border: 1px solid #d3d3d3;
position: absolute;
z-index: 1;
border-radius: 5px;
text-align: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
white-space: pre;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
#myBtn{
padding: 10px 20px;
background-color: #4CAF50;
border-radius: 5px;
border: none;
color: white;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
#myBtn:hover{
background-color: #5dc861;
cursor: pointer;
}
#myBtn:active{
cursor:pointer
}
#buttons{
text-align: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.class-name-form{
border-radius: 5px;
border: 1px solid black;
}
button{
border-radius: 5px;
border: none;
background-color: rgb(170, 207, 207);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
button:hover{
cursor: pointer;
background-color: rgb(198, 224, 224);
}
button:active{
cursor: pointer;
}
.instance-var{
width: 200px;
height: 200px;
background-color: #f1f1f1;
border: 1px solid #d3d3d3;
position: absolute;
z-index: 1;
border-radius: 5px;
text-align: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

Unable to edit the label text

I have tried to insert the data into the ToDo List and it is working but i am unable to edit the name and number field in the edit box of ToDo list.
And also the list is showing is not properly having padding and i tried to put padding in the list but whole list is shifting towards the left.
Also I tried with table concept in JavaScript but for that i need the loop and the database but i dont want to use the database or any other storage
var taskInput = document.getElementById("new-task");
var nameInput = document.getElementById("new-name");
var numberInput = document.getElementById("new-number");
var addButton = document.getElementsByTagName("button")[0];
var incompleteTask = document.getElementById("incomplete-tasks");
var completedTask = document.getElementById("completed-tasks");
var createNewTaskElement = function (taskString, nameString, numberString) {
var listItem = document.createElement("li");
var checkBox = document.createElement("input");
var label = document.createElement("label");
var label1 = document.createElement("label1");
var label2 = document.createElement("label2");
var editInput = document.createElement("input");
var editInput1 = document.createElement("input");
var editInput2 = document.createElement("input");
var editButton = document.createElement("button");
var deleteButton = document.createElement("button");
label.innerText = taskString;
label1.innerText = nameString;
label2.innerText = numberString;
checkBox.type = "checkbox";
editInput.type = "text";
editInput1.type = "text";
editInput2.type = "text";
editButton.innerText = "Edit";
editButton.className = "edit";
deleteButton.innerText = "Delete";
deleteButton.className = "delete";
listItem.appendChild(checkBox);
listItem.appendChild(label);
listItem.appendChild(editInput);
listItem.appendChild(label1);
listItem.appendChild(editInput1);
listItem.appendChild(label2);
listItem.appendChild(editInput2);
listItem.appendChild(editButton);
listItem.appendChild(deleteButton);
alert("You added '" + label.innerText + "' to the ToDO list");
return listItem;
}
var addTask = function () {
var listItem = createNewTaskElement(taskInput.value,nameInput.value,numberInput.value);
if (taskInput.value == "") {
alert("You must enter a task");
}
else if (nameInput.value == "") {
alert("You must enter a Name");
}
else if (numberInput.value == "") {
alert("You must enter a Phone Number");
} else {
incompleteTask.appendChild(listItem);
}
bindTaskEvents(listItem, taskCompleted);
taskInput.value = "";
nameInput.value = "";
numberInput.value = "";
}
var editTask = function () {
var listItem = this.parentNode;
var editInput = listItem.querySelector('input[type=text]');
var label = listItem.querySelector("label");
var containsClass = listItem.classList.contains("editMode");
if (containsClass) {
label.innerText = editInput.value;
alert("You edited " + label.innerText);
} else {
editInput.value = label.innerText;
}
listItem.classList.toggle("editMode");
}
var deleteTask = function () {
var listItem = this.parentNode;
var ul = listItem.parentNode;
alert("You deleted " + listItem.querySelector("label").innerText);
ul.removeChild(listItem);
}
var taskCompleted = function () {
var listItem = this.parentNode;
completedTask.appendChild(listItem);
bindTaskEvents(listItem, taskIncomplete);
alert("You completed " + listItem.querySelector("label").innerText);
}
var taskIncomplete = function () {
var listItem = this.parentNode;
incompleteTask.appendChild(listItem);
bindTaskEvents(listItem, taskCompleted);
}
var bindTaskEvents = function (taskListItem, checkBoxEventHandler) {
var checkBox = taskListItem.querySelector("input[type=checkbox]");
var editButton = taskListItem.querySelector("button.edit");
var deleteButton = taskListItem.querySelector("button.delete");
editButton.onclick = editTask;
deleteButton.onclick = deleteTask;
checkBox.onchange = checkBoxEventHandler;
}
for (var i = 0; i < incompleteTask.children.length; i++) {
bindTaskEvents(incompleteTask.children[i], taskCompleted);
}
for (var i = 0; i < completedTask.children.length; i++) {
bindTaskEvents(completedTask.children[i], taskIncomplete);
}
var input = document.getElementById("new-number");
input.addEventListener("keypress", function (event) {
if (event.key === "Enter") {
addTask();
}
});
.container {
height: 525px;
width: 450px;
margin: 100px auto;
}
ul {
margin: 0;
padding: 0;
}
li * {
float: left;
}
li,
h3 {
clear: both;
list-style: none;
font-family: Arial, Helvetica, sans-serif;
}
input,button {
outline: none;
}
button {
background: none;
border: 0px;
color: #888;
font-size: 15px;
width: 60px;
margin: 10px 0 0;
font-family: Lato, sans-serif;
cursor: pointer;
}
button:hover {
color: #333;
}
h3, label[for='new-task'] {
color: #333;
font-weight: 700;
font-size: 15px;
border-bottom: 2px solid #333;
padding: 30px 0 10px;
margin: 0;
text-transform: uppercase;
}
input[type="text"] {
margin: 0;
font-size: 18px;
line-height: 18px;
height: 18px;
padding: 10px;
border: 1px solid #ddd;
background: #fff;
border-radius: 8px;
font-family: Lato, sans-serif;
color: #888;
margin-left: 50px;
}
input[type="text"]:focus {
color: #333;
}
label[for='new-task'] {
display: block;
margin: 0 0 20px;
}
input#new-task,#new-name,#new-number {
width: 260px;
margin-bottom: 10px;
}
input:focus{
outline: none;
box-shadow: 0px 0px 5px #61C5FA;
border-color: #5AB0DB;
}
input:hover {
border: 1px solid #999;
border-radius: 5px;
}
p>button:hover {
color: #0FC57C;
}
li {
overflow: hidden;
padding: 20px 0;
border-bottom: 1px solid #eee;
}
li>input[type="checkbox"] {
margin: 0 10px;
position: relative;
top: 15px;
}
li>label {
font-size: 18px;
line-height: 40px;
width: 190px;
padding: 0 0 0 11px;
}
li>input[type="text"] {
width: 180px;
}
#completed-tasks label {
text-decoration: line-through;
color: #888;
}
ul li input[type=text] {
display: none;
}
ul li.editMode input[type=text] {
display: block;
}
ul li.editMode label {
display: none;
}
th{
padding-right: 70px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css" type="text/css">
<title>To DO List</title>
</head>
<body style="background-color: #ebeff0">
<div class="container">
<h3 style="text-align: center;">Add Task</h3>
<br>
<label>Add Task</label>
<input id="new-task" type="text" required><br>
<label>Name</label>
<input id="new-name" type="text" required><br>
<label>Phone Number</label>
<input id="new-number" type="text" required><br>
<h3 style="text-align: center;">Todo</h3>
<ul id="incomplete-tasks">
</ul>
<h3 style="text-align: center;">Completed Tasks</h3>
<ul id="completed-tasks">
</ul>
</div>
</body>
<script type="text/javascript" src="main.js"></script>
</html>

I have created the class and then edited the inputs
var taskInput = document.getElementById("new-task");
var nameInput = document.getElementById("new-name");
var numberInput = document.getElementById("new-number");
var addButton = document.getElementsByTagName("button")[0];
var incompleteTask = document.getElementById("incomplete-tasks");
var completedTask = document.getElementById("completed-tasks");
var createNewTaskElement = function (taskString, nameString, numberString) {
var listItem = document.createElement("li");
var checkBox = document.createElement("input");
var label = document.createElement("label");
var label1 = document.createElement("label");
var label2 = document.createElement("label");
var editInput = document.createElement("input");
var editInput1 = document.createElement("input");
var editInput2 = document.createElement("input");
var editButton = document.createElement("button");
var deleteButton = document.createElement("button");
label.innerText = taskString;
label1.innerText = nameString;
label2.innerText = numberString;
label.className = "task";
label1.className = "name";
label2.className = "number";
checkBox.type = "checkbox";
editInput.type = "text";
editInput1.type = "text";
editInput2.type = "text";
editInput.className = "edit";
editInput1.className = "edit1";
editInput2.className = "edit2";
editButton.innerText = "Edit";
editButton.className = "edit";
deleteButton.innerText = "Delete";
deleteButton.className = "delete";
listItem.appendChild(checkBox);
listItem.appendChild(label);
listItem.appendChild(editInput);
listItem.appendChild(label1);
listItem.appendChild(editInput1);
listItem.appendChild(label2);
listItem.appendChild(editInput2);
listItem.appendChild(editButton);
listItem.appendChild(deleteButton);
alert("You added '" + label.innerText + "' to the ToDO list");
return listItem;
}
var addTask = function () {
var listItem = createNewTaskElement(taskInput.value, nameInput.value, numberInput.value);
if (taskInput.value == "") {
alert("You must enter a task");
} else if (nameInput.value == "") {
alert("You must enter a Name");
} else if (numberInput.value == "") {
alert("You must enter a Phone Number");
} else {
incompleteTask.appendChild(listItem);
}
bindTaskEvents(listItem, taskCompleted);
taskInput.value = "";
nameInput.value = "";
numberInput.value = "";
}
var editTask = function () {
var listItem = this.parentNode;
var editInput = listItem.querySelector('.edit');
var editInput1 = listItem.querySelector('.edit1');
var editInput2 = listItem.querySelector('.edit2');
var label = listItem.querySelector(".task");
var label1 = listItem.querySelector(".name");
var label2 = listItem.querySelector(".number");
var containsClass = listItem.classList.contains("editMode");
if (containsClass) {
label.innerText = editInput.value;
label1.innerText = editInput1.value;
label2.innerText = editInput2.value;
alert("You edited " + label.innerText);
} else {
editInput.value = label.innerText;
editInput1.value = label1.innerText;
editInput2.value = label2.innerText;
}
listItem.classList.toggle("editMode");
}
var deleteTask = function () {
if (confirm("Are you sure you want to delete this task?") == true) {
var listItem = this.parentNode;
var ul = listItem.parentNode;
alert("You deleted " + listItem.querySelector("label").innerText);
} else {
alert("You cancelled the task");
}
ul.removeChild(listItem);
}
var taskCompleted = function () {
var listItem = this.parentNode;
if (confirm("Are you sure you want to mark this task as complete?") == true) {
completedTask.appendChild(listItem);
bindTaskEvents(listItem, taskIncomplete);
alert("You completed " + listItem.querySelector("label").innerText);
} else {
alert("You cancelled the task");
}
}
var taskIncomplete = function () {
var listItem = this.parentNode;
incompleteTask.appendChild(listItem);
bindTaskEvents(listItem, taskCompleted);
}
var bindTaskEvents = function (taskListItem, checkBoxEventHandler) {
var checkBox = taskListItem.querySelector("input[type=checkbox]");
var editButton = taskListItem.querySelector("button.edit");
var deleteButton = taskListItem.querySelector("button.delete");
editButton.onclick = editTask;
deleteButton.onclick = deleteTask;
checkBox.onchange = checkBoxEventHandler;
}
for (var i = 0; i < incompleteTask.children.length; i++) {
bindTaskEvents(incompleteTask.children[i], taskCompleted);
}
for (var i = 0; i < completedTask.children.length; i++) {
bindTaskEvents(completedTask.children[i], taskIncomplete);
}
var input = document.getElementById("new-number");
.container {
height: 525px;
width: 700px;
margin: 100px auto;
}
ul {
margin: 0;
padding: 0;
}
li * {
float: left;
}
li,
h3 {
clear: both;
list-style: none;
font-family: Arial, Helvetica, sans-serif;
}
input,button {
outline: none;
}
button {
background: none;
border: 0px;
color: #888;
font-size: 15px;
width: 60px;
margin: 10px 0 0;
font-family: Lato, sans-serif;
cursor: pointer;
}
button:hover {
color: #333;
}
h3, label[for='new-task'] {
color: #333;
font-weight: 700;
font-size: 15px;
border-bottom: 2px solid #333;
padding: 30px 0 10px;
margin: 0;
text-transform: uppercase;
}
input[type="text"] {
margin: 0;
font-size: 18px;
line-height: 18px;
height: 18px;
padding: 10px;
border: 1px solid #ddd;
background: #fff;
border-radius: 8px;
font-family: Lato, sans-serif;
color: #888;
margin-left: 50px;
}
input[type="text"]:focus {
color: #333;
}
label[for='new-task'] {
display: block;
margin: 0 0 20px;
}
input#new-task,#new-name,#new-number {
width: 260px;
margin-bottom: 10px;
}
input:focus{
outline: none;
box-shadow: 0px 0px 5px #61C5FA;
border-color: #5AB0DB;
}
input:hover {
border: 1px solid #999;
border-radius: 5px;
}
p>button:hover {
color: #0FC57C;
}
li {
overflow: hidden;
padding: 20px 0;
border-bottom: 1px solid #eee;
}
li>input[type="checkbox"] {
margin: 0 10px;
position: relative;
top: 15px;
}
li>label {
font-size: 18px;
line-height: 40px;
width: 100px;
padding: 0 0 0 11px;
}
li>input[type="text"] {
width: 100px;
}
li>button{
padding-left: 3px;
}
li>button:hover{
border: 1px solid black;
color: #c54f0f;
}
#completed-tasks label {
text-decoration: line-through;
color: #888;
}
ul li input[type=text] {
display: none;
}
ul li.editMode input[type=text] {
display: block;
}
ul li.editMode label {
display: none;
}
#AddBtn{
align-items: center;
border: 1px solid black !important;
background-color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css" type="text/css">
<title>To DO List</title>
</head>
<body style="background-color: #ebeff0">
<div class="container">
<h3 style="text-align: center;">Add Task</h3>
<br>
<label>Add Task</label>
<input id="new-task" type="text" required><br>
<label style="padding-right: 05px;">Name</label>
<input id="new-name" type="text" required><br>
<label>Phone Number</label>
<input id="new-number" type="text" required><br>
<button id="AddBtn" onclick="addTask()">Add</button>
<h3 style="text-align: center;">Todo</h3>
<ul id="incomplete-tasks">
</ul>
<h3 style="text-align: center;">Completed Tasks</h3>
<ul id="completed-tasks">
</ul>
</div>
</body>
<script type="text/javascript" src="main.js"></script>
</html>

Adding a square root function to a calc using js

So, I made a calculator, and I want to add a square root function, but I know there is no already made function that finds the square root of numbers. So what elements can I combine to find the square root of a number?
const screen = document.querySelector("#screen");
const clearButton = document.querySelector("#clear");
const equalsButton = document.querySelector("#equals");
const decimalButton = document.querySelector("#decimal");
let isFloat = false;
let signOn = false;
let firstNumber = "";
let operator = "";
let secondNumber = "";
let result = "";
const allClear = () => {
isFloat = false;
signOn = false;
firstNumber = "";
operator = "";
secondNumber = "";
result = "";
screen.value = "0";
};
const calculate = () => {
if (operator && result === "" && ![" ", "+", "-", "."].includes(screen.value[screen.value.length - 1])) {
secondNumber = screen.value.substring(firstNumber.length + 3);
switch (operator) {
case "+":
result = Number((Number(firstNumber) + Number(secondNumber)).toFixed(3));
break;
case "-":
result = Number((Number(firstNumber) - Number(secondNumber)).toFixed(3));
break;
case "*":
result = Number((Number(firstNumber) * Number(secondNumber)).toFixed(3));
break;
case "/":
result = Number((Number(firstNumber) / Number(secondNumber)).toFixed(3));
break;
default:
}
screen.value = result;
}
};
clear.addEventListener("click", allClear);
document.querySelectorAll(".number").forEach((numberButton) => {
numberButton.addEventListener("click", () => {
if (screen.value === "0") {
screen.value = numberButton.textContent;
} else if ([" 0", "+0", "-0"].includes(screen.value.substring(screen.value.length - 2))
&& numberButton.textContent === "0") {
} else if ([" 0", "+0", "-0"].includes(screen.value.substring(screen.value.length - 2))
&& numberButton.textContent !== "0") {
screen.value = screen.value.substring(0, screen.value.length - 1) + numberButton.textContent;
} else if (result || result === 0) {
allClear();
screen.value = numberButton.textContent;
} else {
screen.value += numberButton.textContent;
}
});
});
decimalButton.addEventListener("click", () => {
if (result || result === 0) {
allClear();
isFloat = true;
screen.value += ".";
} else if (!isFloat) {
isFloat = true;
if ([" ", "+", "-"].includes(screen.value[screen.value.length - 1])) {
screen.value += "0.";
} else {
screen.value += ".";
}
}
});
document.querySelectorAll(".operator").forEach((operatorButton) => {
operatorButton.addEventListener("click", () => {
if (result || result === 0) {
isFloat = false;
signOn = false;
firstNumber = String(result);
operator = operatorButton.dataset.operator;
result = "";
screen.value = `${firstNumber} ${operatorButton.textContent} `;
} else if (operator && ![" ", "+", "-", "."].includes(screen.value[screen.value.length - 1])) {
calculate();
isFloat = false;
signOn = false;
firstNumber = String(result);
operator = operatorButton.dataset.operator;
result = "";
screen.value = `${firstNumber} ${operatorButton.textContent} `;
} else if (!operator) {
isFloat = false;
firstNumber = screen.value;
operator = operatorButton.dataset.operator;
screen.value += ` ${operatorButton.textContent} `;
} else if (!signOn
&& !["*", "/"].includes(operatorButton.dataset.operator)
&& screen.value[screen.value.length - 1] === " ") {
signOn = true;
screen.value += operatorButton.textContent;
}
});
});
equalsButton.addEventListener("click", calculate);
* {
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
font-weight: 300;
margin: 0;
padding: 0;
}
body {
background-color: #222;
height: 100vh;
}
header {
background-color: #333;
padding: 40px 0;
}
header h1 {
-webkit-background-clip: text;
background-clip: text;
background-image: linear-gradient(to right bottom, #fff, #777);
color: transparent;
font-size: 40px;
letter-spacing: 2px;
text-align: center;
text-transform: uppercase;
}
main {
background-color: #222;
display: flex;
justify-content: center;
padding: 60px 0;
}
main #container {
background-color: #333;
box-shadow: 0 5px 5px #111;
padding: 20px;
}
.clearfix:after {
clear: both;
content: " ";
display: block;
font-size: 0;
height: 0;
visibility: hidden;
}
#container .row:not(:last-child) {
margin-bottom: 9px;
}
#container input,
#container button {
float: left;
}
#container input:focus,
#container button:focus {
outline: none;
}
#container input {
background-color: #222;
border: 1px solid #999;
border-right-width: 0;
color: #999;
font-size: 22px;
font-weight: 300;
height: 80px;
padding-right: 14px;
text-align: right;
width: 261px;
}
#container button {
background-color: #222;
border: none;
box-shadow: 0 3px 0 #111;
color: #999;
font-size: 20px;
height: 80px;
margin-right: 7px;
width: 80px;
}
#container button:active {
box-shadow: 0 2px 0 #111;
transform: translateY(1px);
}
#container #clear,
#container .operator,
#container #equals {
color: #111;
}
#container #clear,
#container .operator {
margin-right: 0;
}
#container #clear {
background-color: #e95a4b;
border: 1px solid #999;
border-left-width: 0;
box-shadow: none;
cursor: pointer;
}
#container #clear:active {
box-shadow: none;
transform: none;
}
#container .operator {
background-color: #999;
box-shadow: 0 3px 0 #555;
}
#container .operator:active {
box-shadow: 0 2px 0 #555;
}
#container #equals {
background-color: #2ecc71;
box-shadow: 0 3px 0 #155d34;
}
#container #equals:active {
box-shadow: 0 2px 0 #155d34;
}
#media only screen and (max-width: 400px) {
header {
padding: 28px 0;
}
header h1 {
font-size: 36px;
}
main {
padding: 40px 0;
}
main #container {
padding: 16px;
}
#container .row:not(:last-child) {
margin-bottom: 7px;
}
#container input {
font-size: 18px;
height: 60px;
padding-right: 10px;
width: 195px;
}
#container button {
font-size: 16px;
height: 60px;
margin-right: 5px;
width: 60px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Calculator</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet">
<link href="Project 1.css" rel="stylesheet">
</head>
<body>
<header>
<h1>Calculator</h1>
</header>
<main>
<div id="container">
<div class="row clearfix">
<input id="screen" value="0" disabled type="text">
<button id="clear">AC</button>
</div>
<div class="row clearfix">
<button class="number">1</button>
<button class="number">2</button>
<button class="number">3</button>
<button data-operator="+" class="operator">+</button>
</div>
<div class="row clearfix">
<button class="number">4</button>
<button class="number">5</button>
<button class="number">6</button>
<button data-operator="-" class="operator">-</button>
</div>
<div class="row clearfix">
<button class="number">7</button>
<button class="number">8</button>
<button class="number">9</button>
<button data-operator="*" class="operator">×</button>
</div>
<div class="row clearfix">
<button id="decimal">.</button>
<button class="number">0</button>
<button id="equals">=</button>
<button data-operator="/" class="operator">÷</button>
</div>
</div>
</main>
<script src="Project 1.js"></script>
</body>
</html>
This is the code for the calc.. Feel free to edit it and explain to me what you did.

There is already one.
The Math.sqrt() function returns the square root of a number, that is, ∀x≥0,Math.sqrt(x)=x
=the uniquey≥0such thaty2=x
MDN Docs

You can use javascript built in
Math.sqrt(number)

How to Create Image-Video Thumbnail Slider With Previous and Next Button dynamically using Javascript only?

I want to make Thumbnail Image-Video Slider dynamic using javascript only, here i created a container in which i added some images through javascript, but now i want to slide this images with Next and Previous Buttons and also on swipe mouse slider should slide.
This is the Latest Code whatever i did now i am getting problem in NEXT & PREVIOUS Buttons. i want onclick of NEXT & PREVIOUS image slider should slide Backward and Forward
This is the Output what i am getting from this code
and images should come in only one Row
Please Help me !!
$(document).ready(function ()
{
function PhotoGallery()
{
this.index = 0;
this.holder = [];
var container = document.getElementById('thumbs_container');
var nextButton = document.createElement('button');
nextButton.className = 'next';
nextButton.innerHTML = '❯';
container.appendChild(nextButton);
var prevButton = document.createElement('button');
prevButton.className = 'previous';
prevButton.innerHTML = '❮';
container.appendChild(prevButton);
container = $(window).width();
nextButton.addEventListener('click', this.next);
prevButton.addEventListener('click', this.previous);
this.create = function (name, src) {
var container = document.getElementById('thumbs_container');
var img = document.createElement('img');
img.src = src;
img.alt = name;
img.className = 'thumb';
img.style.width = '300px';
img.style.height = '150px;';
container.appendChild(img);
this.holder.push({
index: ++this.index,
ele: img
})
}
this.next = function () {
this.holder[this.index].ele.style.display = 'none';
this.holder[++this.index].ele.style.display = block;
}
this.previous = function () {
this.holder[this.index].ele.style.display = 'none';
this.holder[--this.index].ele.style.display = 'block';
}
}
var photoGallery = new PhotoGallery();
photoGallery.create('1', 'img/1.jpg');
photoGallery.create('2', 'img/2.jpg');
photoGallery.create('3', 'img/3.jpg');
photoGallery.create('4', 'img/4.jpg');
photoGallery.create('5', 'img/5.jpg');
photoGallery.create('6', 'img/6.jpg');
photoGallery.create('7', 'img/7.jpg');
photoGallery.create('8', 'img/8.jpg');
photoGallery.create('9', 'img/9.jpg');
photoGallery.create('10','img/10.jpg');
#thumbs_container {
margin: 400px auto; /*center-aligned*/
width: 100%; /*width:400px;*/
padding: 4px 40px; /*Gives room for arrow buttons*/
box-sizing: border-box;
position: relative;
background-color: red;
-webkit-user-select: none;
user-select: none;
/*max-width: 1600px;
max-height: 600px;*/
overflow:hidden;
}
.thumb{
margin-right: 1px;
}
.previous {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
position: absolute;
margin-left: -33px;
margin-top: 63px;
}
.next {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
position: absolute;
margin-left: 1822px;
margin-top: 63px;
}
<div id='thumbs_container'></div>

This is not a comprehensive answer but it should point you in the right direction.
(function() {
function PhotoGallery() {
this.index = 0;
this.holder = [];
this.setIndexVisible = true;
// When next funtion is called swap the display properties accordingly
this.next = function() {
console.log(this.index);
this.holder[this.index].ele.style.display = 'none';
this.holder[this.index+1].ele.style.display = 'block';
this.index+=1;
}
// Ditto as above according the requirement
this.previous = function() {
this.holder[this.index].ele.style.display = 'none';
this.holder[this.index-1].ele.style.display = 'block';
this.index-=1;
}
//create a button each for previous and next
var container = document.getElementById('thumbs_container');
let nextButton = document.createElement('button');
nextButton.className="next";
nextButton.id = "next";
container.appendChild(nextButton);
//style the button
// Listen to the click event and call the corresponsing function
nextButton.addEventListener('click', this.next.bind(this));
this.create = function(name, src) {
var container = document.getElementById('thumbs_container');
var img = document.createElement('img');
img.src = src;
img.alt = name;
img.className = 'thumb';
img.style.width = '200px';
if(this.setIndexVisible && this.index===0)
img.style.display = 'block';
else
img.style.display = 'none';
container.appendChild(img);
this.holder.push({
index: this.holder.length,
ele: img
})
}
}
var photoGallery = new PhotoGallery();
photoGallery.create('RED SQUARE', 'https://upload.wikimedia.org/wikipedia/commons/thumb/2/25/Red.svg/2000px-Red.svg.png');
photoGallery.create('BLUE SQUARE', 'https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/000080_Navy_Blue_Square.svg/600px-000080_Navy_Blue_Square.svg.png')
})();
UPDATE : Please try and understand the code and modify it to fulfill your requirements. You might have to update the next and previous functions and also some of the logic to make it a]usable. This is just a blueprint of how to do it.
Here is a jsbin link : https://jsbin.com/ginuvonusi/edit?html,css,js,console,output

var leftFrom = 10;
var scrollPosition = 0;
var scrollOffSet = 400;
$(document).ready(function () {
function PhotoGallery() {
$('#thumbs_container').css('width', '100%');
$('#thumbs_container').css('position', 'absolute');
$('#thumbs_container').css('overflow-y', 'hidden');
//$('#thumbs_container').css('left', '1.9%')
$('#thumbs_container').css('float', 'left');
$('#thumbs_container').css('height', '215px')
var container = document.getElementById('thumbs_container');
var nextButton = document.createElement('button');
nextButton.className = 'next';
nextButton.innerHTML = '❯';
container.appendChild(nextButton);
var next = function () {
console.log("Next Clicked" + " " + $('#thumbs_container').width());
if ((scrollPosition + scrollOffSet) < $('#thumbs_container').width()) {
scrollPosition = scrollPosition + scrollOffSet;
$('#thumbs_container').animate({ scrollLeft: scrollPosition }, 750);
}
else {
if ((scrollPosition + scrollOffSet) > $('#thumbs_container').width())
scrollPosition = scrollPosition + scrollOffSet;
$('#thumbs_container').animate({ scrollLeft: scrollPosition }, 750);
}
}
var prevButton = document.createElement('button');
prevButton.className = 'previous';
prevButton.innerHTML = '❮';
container.appendChild(prevButton);
var previous = function ()
{
console.log('Clicked Left');
var leftOffSet = $('#thumbs_container').scrollLeft();
console.log("leftOffset" + " " + leftOffSet);
if ((leftOffSet - scrollOffSet) > 0) {
scrollPosition = scrollPosition - scrollOffSet;
$('#thumbs_container').animate({ scrollLeft: scrollPosition }, 750);
} else {
if (leftOffSet > 0)
$('#thumbs_container').animate({ scrollLeft: 0 }, 750);
}
}
this.imagecreate = function (name, src) {
var container = document.getElementById('thumbs_container');
var img = document.createElement('img');
img.src = src;
img.alt = name;
img.className = 'thumb';
img.style.width = '300px';
img.style.height = '150px';
img.style.position = 'absolute';
img.style.left = leftFrom + 'px';
leftFrom = leftFrom + 310;
container.appendChild(img);
}
this.videocreate = function (src, type) {
var container = document.getElementById('thumbs_container');
var video = document.createElement('video');
var source = document.createElement('source');
source.src = src;
source.type = type;
video.autoplay = true;
video.loop = true;
video.controls = false;
video.style.display = 'inline-block';
video.style.width = '260px';
video.style.height = '260px';
video.style.position = 'absolute';
video.style.top = '-41px';
video.style.left = leftFrom + 'px';
leftFrom = leftFrom + 270;
video.appendChild(source);
container.appendChild(video);
}
nextButton.addEventListener('click', next);
prevButton.addEventListener('click', previous);
}
var photoGallery = new PhotoGallery();
photoGallery.imagecreate('1', 'img/1.jpg');
photoGallery.imagecreate('2', 'img/2.jpg');
photoGallery.imagecreate('3', 'img/3.jpg');
photoGallery.imagecreate('4', 'img/4.jpg');
photoGallery.videocreate('img/mcvideo.mp4', 'video/mp4');
photoGallery.imagecreate('5', 'img/5.jpg');
photoGallery.imagecreate('6', 'img/6.jpg');
photoGallery.imagecreate('7', 'img/7.jpg');
photoGallery.imagecreate('8', 'img/8.jpg');
photoGallery.videocreate('img/SampleVideo_640x360_1mb.mp4', 'video/mp4');
photoGallery.imagecreate('9', 'img/9.jpg');
photoGallery.imagecreate('10', 'img/10.jpg');
photoGallery.imagecreate('11', 'img/006.jpg');
photoGallery.videocreate('img/small.mp4', 'video/mp4');
photoGallery.imagecreate('12', 'img/007.jpg');
});
#thumbs_container {
width: 100%; /*width:400px;*/
padding: 14px 40px; /*Gives room for arrow buttons*/
box-sizing: border-box;
position: relative;
background-color: red;
-webkit-user-select: none;
user-select: none;
/*max-width: 1600px;
max-height: 600px;*/
overflow:hidden;
}
.thumb{
margin-right: 1px;
}
button{position: fixed;
top: 40%;
z-index: 99999;
left: 50%;
background-color: #4CAF50;
color: #fff;
border: none;
height: 30px;
width: 30px;
line-height: 30px;}
.previous {
background-color: #4CAF50;
border: none;
color: white;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
position: fixed;
margin-left: -33px;
top: 7%;
left: 2%;
}
.next {
background-color: #4CAF50;
border: none;
color: white;
padding: 2px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
position: fixed;
left: 98%;
top: 7%;
}
.round {
border-radius: 50%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>DynamicSlider</title>
<!--<link href="css/thumbs2.css" rel="stylesheet" />
<link href="css/thumbnail-slider.css" rel="stylesheet" />
<script src="js/thumbnail-slider.js" type="text/javascript"></script>
<script src="js/readImages.js"></script>-->
<!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>-->
<script src="js/jquery1.6.2.js"></script>
<script src="js/jquery-1.7.1.min.js"></script>
<link href="css/DynamicSlider.css" rel="stylesheet" />
<script src="js/DynamicSlider.js"></script>
</head>
<body>
<div id='thumbs_container'>
</div>
</body>
</html>

Custom popup with .onclick is not working

So I am working on creating a custom alert box. I've got most of the code the way I want it.
What I Want:
What I would like is to click the minus to fade the alert box so you can view the html behind it.
What is Wrong:
My issue is the min.onclick code does not click (clicking the minus sign does nothing).
See Below:
var b = document.getElementById('button-container');
var bg = document.createElement('div');
bg.setAttribute('id', 'alert-box');
bg.setAttribute('class','alert');
b.appendChild(bg);
var box = document.createElement('div');
box.setAttribute('id', 'alert-text');
box.setAttribute('class','alert-content');
box.setAttribute('display', 'block');
box.innerHTML = 'Fancy stuff happens here!<br>Look chess pieces';
bg.appendChild(box);
var min = document.createElement('span');
min.setAttribute('id','alert-min');
min.setAttribute('class','alert-min');
min.innerHTML = '−';
var s = true;
min.onclick = function() {
console.log('pressed!');
if(s) {
box.style.opacity = '.25';
s = false;
}
else{
box.style.opacity = '1';
s = true;
}
};
box.appendChild(min);
box.innerHTML += '<br><br>';
var images = ['q', 'n', 'r', 'b'];
var t = ['1/15', '7/70', '7/72', 'b/b1'];
for(var i = 0; i < images.length; i++) (function(i){
var btn = document.createElement('button');
btn.setAttribute('class','alert-button');
btn.setAttribute('id',images[i]+'btn');
btn.onclick = function () {
console.log('You clicked: ', images[i]);
};
box.appendChild(btn);
var img = document.createElement('img');
img.setAttribute('id',images[i]+'img');
img.setAttribute('src','https://upload.wikimedia.org/wikipedia/commons/thumb/'+t[i]+'/Chess_'+images[i]+'lt45.svg/45px-Chess_'+images[i]+'lt45.svg.png');
img.setAttribute('class','alert-image');
btn.appendChild(img);
})(i);
.alert {
display: block;
position: fixed;
z-index: 1;
padding-top: 10px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.alert-content {
background-color: #daac27;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
.alert-min {
color: #fff;
float: right;
font-size: 28px;
font-weight: bold;
}
.alert-min:hover,
.alert-min:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
<br><br><br>
O no! You can't see me!
<div id="button-container">
</div>

To be honest I have no idea why your script does not work. I did nothing but appending the close "button" after that loop. Now the click handler is working.
edit:
i also edited the other console.log due to it printed undefined
var b = document.getElementById('button-container');
var bg = document.createElement('div');
bg.setAttribute('id', 'alert-box');
bg.setAttribute('class','alert');
b.appendChild(bg);
var box = document.createElement('div');
box.setAttribute('id', 'alert-text');
box.setAttribute('class','alert-content');
box.setAttribute('display', 'block');
box.innerHTML = 'Fancy stuff happens here!<br>Look chess pieces';
bg.appendChild(box);
box.innerHTML += '<br><br>';
var images = ['q', 'n', 'r', 'b'];
var t = ['1/15', '7/70', '7/72', 'b/b1'];
for(var i = 0; i < images.length; i++) {
var btn = document.createElement('button');
btn.setAttribute('class','alert-button');
btn.setAttribute('id',images[i]+'btn');
let tmp = images[i]
btn.onclick = function () {
console.log('You clicked: ', tmp);
};
box.appendChild(btn);
var img = document.createElement('img');
img.setAttribute('id',images[i]+'img');
img.setAttribute('src','https://upload.wikimedia.org/wikipedia/commons/thumb/'+t[i]+'/Chess_'+images[i]+'lt45.svg/45px-Chess_'+images[i]+'lt45.svg.png');
img.setAttribute('class','alert-image');
btn.appendChild(img);
}
var min = document.createElement('span');
min.setAttribute('id','alert-min');
min.setAttribute('class','alert-min');
min.innerHTML = '−';
var s = true;
min.onclick = function() {
console.log('pressed!');
if(s) {
box.style.opacity = '.25';
s = false;
}
else{
box.style.opacity = '1';
s = true;
}
};
box.appendChild(min);
.alert {
display: block;
position: fixed;
z-index: 1;
padding-top: 10px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.alert-content {
background-color: #daac27;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
.alert-min {
color: #fff;
float: right;
font-size: 28px;
font-weight: bold;
}
.alert-min:hover,
.alert-min:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
<br><br><br>
O no! You can't see me!
<div id="button-container">
</div>

We Keep Coding

JavaScript is the programming language of the Web.

Connect divs with a dynamic line - javascript

Related

Connect generated divs in JS

Unable to edit the label text

Adding a square root function to a calc using js

How to Create Image-Video Thumbnail Slider With Previous and Next Button dynamically using Javascript only?

Custom popup with .onclick is not working

Categories

Resources