We Keep Coding

Creating a mutli-step form

I'm trying to figure out a good approach for the multi-step form I am doing but I can't really figure out a good solution for it. I have each class as sections identified as name-section and I have the classes stored in a array for the sections to add with the prefix -section as shown in html <div class="rules-section">. I'm trying to have it remove the current step and show the next step proceeding after clicking continue. If someone is able to give me some tips or examples on how I would do this it would be much appreciated.
function initalizeCreate() {
//loadPalletes();
sectionLoad();
$(".rules-section").show();
$(".btn").on("click", function() {
$(".rules-section").remove();
$(".color-section").fadeIn();
});
$(".username").keyup(function() {
if (this.value == "") {
$(".penguinName").text("Penguin Name");
} else {
$(".penguinName").text(this.value);
}
});
}
function sectionLoad() {
for(let section in sections) {
// console.log(sections[section])
// $(sections[section] + "-section").show();
}
}
function gotoSection(index) {
$(sections[index] + "-section").show();
}
let sections = [".rules", ".color", ".info"];
window.onload = function() {
initalizeCreate();
};
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<div class="rules-section">
<div class="grid-rules">
<div class="item">
<div>
<div id="rule-title">Respect other penguins</div>
CP does not tolerate any swearing, bullying or mean behavior toward other penguins. Disciplinary action will be taken should any one of these occur while playing.
</div>
<img id="rule-image" src="images/respect.png" />
</div>
<div class="item">
<div>
<div id="rule-title">No inappropriate talk</div>
References to drugs and alcohol related activities, and sexual, racial or otherwise inappropriate talk are not permitted.
</div>
<img id="rule-image" src="images/inapp.png" />
</div>
<div class="item">
<div>
<div id="rule-title">Never reveal personal information</div>
The best way to stay safe online is to NEVER share your real name, phone number, address, email or passwords.
</div>
<img id="rule-image" src="images/personal.png" />
</div>
<div class="item">
<div>
<div id="rule-title">No cheating</div>
Use of third party programs to cheat is prohibited. Players who use any third party programs while playing risk being permanently banned.
</div>
<img id="rule-image" src="images/cheating.png" />
</div>
</div>
<hr />
<div id="agree"> <span class="toggle">
<input type="checkbox" name="agree" /><label>I agree to the CP Rules.</label>
</span>
</div>
<div id="terms"> <span class="toggle">
<input type="checkbox" name="terms" /><label>I agree to the <a id="hyper" href="#">Terms of Use</a></label>
</span>
</div>
<button class="btn" name="submit">Continue</button>
</div>
<div class="color-section" style="display: none;">
<div id="color-form">
<p id="epname">Enter Your Penguin Name:</p>
<input type="text" class="username" id="inputaligncenter" />
<div id="cpsmall">Minimum 4 characters: use only numbers, letters and spaces.</div>
<p id="cpname">Click on a Color:</p>
<div id="palletes"></div>
<img id="paintbucket" src="images/paintbucket.png" />
</div>
<div class="doll-container"> <img id="doll" src="images/doll.png" /> <span class="penguinName">Penguin Name</span> </div>
<button class="btn" name="submit">Continue</button>
</div>
<div class="info-section" style="display: none;">
<div id="info-form">
<div id="ppname-wrapper">
Penguin Password:
<div id="ppsmall">This is the password you will use to login to CP. </div>
<input type="password" name="password" placeholder="Password">
<input type="password" name="cpassword" placeholder="Confirm Password">
<p id="activatedTxt">your penguin must be activated before you will be able to play at CP</p>
Parent's Email Address:
<div id="ppsmall">Please enter your parent's valid email address. CP will send your parent an e-mail with an activation code.</div>
<div class="env"> <img src="images/envelope.png">
<input type="email" name="email">
</div>
</div>
<div class="doll-container fixed"> <img id="doll" src="images/doll.png" /> <span class="penguinName">Penguin Name</span> </div>
</div>
<button class="btn" name="submit">Continue</button>
</div>

Removing readonly attribute inside 3 divs

i am creating a to-do list, i want the user to be able to edit and delete the added tasks, this will be possible by removing readonlyattribute from HTML. but i am struggling doing the edit function.
Here is my code:
const formulario=document.getElementById("new-task-form");
const lista=document.getElementById("list");
const input=document.querySelector("#new-task-input");
let id=0;
formulario.addEventListener('submit', (e)=>{
//console.log("activado");
e.preventDefault();
addTask();
});
let addTask=()=>{
id++;
let task=input.value;
lista.innerHTML+=`<div id="tasks">
<div class="task" id="taskin">
<div class="content" id="${id}">
<input
id="${id}"
type="text"
class="text"
value=${task}
readonly
/>
</div>
<div class="actions">
<button class="edit">Edit</button>
<button class="delete">Delete</button>
</div>
</div>
</div> `
input.value='';
}
lista.addEventListener('click', (evento)=>{
console.log(evento);
if(evento.target.className=="edit"){
console.log("Editar");
}else if(evento.target.className=="delete"){
console.log("Borrar");
}
})
<body>
<header>
<h1>Task List</h1>
<form action="#" id="new-task-form"> <!--Formulario para poner tareas-->
<input type="text" id="new-task-input" placeholder="Que vas a hacer" />
<input type="submit" id="new-task-submit" value="Add Task" />
</form>
</header>
<main>
<div id="list" class="task-list">
<h2>Tasks</h2>
<div id="tasks">
<!-- <div class="task">
<div class="content">
<input type="text"
class="text"
value="My Task"
readonly
/>
</div>
<div class="actions">
<button class="edit">Edit</button>
<button class="delete">Delete</button>
</div>
</div> -->
</div>
</div>
</main>
<script src="app.js"></script>.
</body>
</html>
Thanks in advance :D

I have added some lines to your JS code. Please check.
lista.addEventListener('click', (evento)=>{
let parentEl = evento.target.parentNode.parentNode;
let input = parentEl.getElementsByTagName('input');
if(evento.target.className=="edit"){
console.log("Editar");
input[0].removeAttribute('readonly');
}else if(evento.target.className=="delete"){
console.log("Borrar");
}
})
Test it in the Snippet below:
const formulario=document.getElementById("new-task-form");
const lista=document.getElementById("list");
const input=document.querySelector("#new-task-input");
let id=0;
formulario.addEventListener('submit', (e)=>{
//console.log("activado");
e.preventDefault();
addTask();
});
let addTask=()=>{
id++;
let task=input.value;
lista.innerHTML+=`<div id="tasks">
<div class="task" id="taskin">
<div class="content" id="${id}">
<input
id="${id}"
type="text"
class="text"
value=${task}
readonly
/>
</div>
<div class="actions">
<button class="edit">Edit</button>
<button class="delete">Delete</button>
</div>
</div>
</div> `
input.value='';
}
lista.addEventListener('click', (evento)=>{
let parentEl = evento.target.parentNode.parentNode;
let input = parentEl.getElementsByTagName('input');
console.log(input[0]);
if(evento.target.className=="edit"){
input[0].removeAttribute('readonly');
console.log("Editar");
}else if(evento.target.className=="delete"){
console.log("Borrar");
}
})
<body>
<header>
<h1>Task List</h1>
<form action="#" id="new-task-form"> <!--Formulario para poner tareas-->
<input type="text" id="new-task-input" placeholder="Que vas a hacer" />
<input type="submit" id="new-task-submit" value="Add Task" />
</form>
</header>
<main>
<div id="list" class="task-list">
<h2>Tasks</h2>
<div id="tasks">
<!-- <div class="task">
<div class="content">
<input type="text"
class="text"
value="My Task"
readonly
/>
</div>
<div class="actions">
<button class="edit">Edit</button>
<button class="delete">Delete</button>
</div>
</div> -->
</div>
</div>
</main>
<script src="app.js"></script>.
</body>
</html>
Hope it helps.

First, 2 elements have the same id 's value :
<div class="content" id="${id}"> and <input id="${id}">
You can change same as :
const formulario=document.getElementById("new-task-form");
const lista=document.getElementById("list");
const input=document.querySelector("#new-task-input");
let id=0;
formulario.addEventListener('submit', (e)=>{
//console.log("activado");
e.preventDefault();
addTask();
});
let addTask=()=>{
id++;
let task=input.value;
lista.innerHTML+=`<div id="tasks">
<div class="task" id="taskin">
<div class="content" id="${id}">
<input
id="input-${id}"
type="text"
class="text"
value=${task}
readonly
/>
</div>
<div class="actions">
<button class="edit" data-task_id="input-${id}">Edit</button>
<button class="delete" data-task_id="input-${id}">Delete</button>
</div>
</div>
</div> `
input.value='';
}
lista.addEventListener('click', (evento)=>{
if(evento.target.className=="edit"){
document.getElementById(evento.target.dataset.task_id).removeAttribute('readonly');
}else if(evento.target.className=="delete"){
document.getElementById(evento.target.dataset.task_id).remove();
}
})
<body>
<header>
<h1>Task List</h1>
<form action="#" id="new-task-form"> <!--Formulario para poner tareas-->
<input type="text" id="new-task-input" placeholder="Que vas a hacer" />
<input type="submit" id="new-task-submit" value="Add Task" />
</form>
</header>
<main>
<div id="list" class="task-list">
<h2>Tasks</h2>
<div id="tasks">
<!-- <div class="task">
<div class="content">
<input type="text"
class="text"
value="My Task"
readonly
/>
</div>
<div class="actions">
<button class="edit">Edit</button>
<button class="delete">Delete</button>
</div>
</div> -->
</div>
</div>
</main>
<script src="app.js"></script>.
</body>
</html>

Maybe you mean remove the readonly attribute on textbox inside the three divs?
$('.edit').click(function(){
$('.first_div input, .second_div input, .third_div input').removeAttr('readonly');
});
$('.edit_first').click(function(){
$('#first_textbox').removeAttr('readonly');
});
$('.edit_second').click(function(){
$('#second_textbox').removeAttr('readonly');
});
$('.edit_third').click(function(){
$('#third_textbox').removeAttr('readonly');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="first_div">
<input readonly id="first_textbox">
</div>
<div class="second_div">
<input readonly id="second_textbox">
</div>
<div class="third_div">
<input readonly id="third_textbox">
</div>
<button class="edit">Edit All</button>
<button class="edit_first">Edit first textbox</button>
<button class="edit_second">Edit second textbox</button>
<button class="edit_third">Edit third textbox</button>

Adding new element to page

So, I'm pretty new to react so I'm still not quite sure what I'm doing. I had a project that used purely HTML, JQuery, and CSS but I'm trying to convert it to react. I have a page with checkboxes and when they are clicked a div is added with links inside of it and if unchecked the div is removed:
if(element.checked != false) {
$('.links').append('<div id="social">\
<p>\
Instagram\n\
<button type="button" id="instagram" onclick="removeInstagram()">-</button>\
</p>\
<p>\
Facebook\n\
<button type="button" id="facebook" onclick="removeFacebook()">-</button>\
</p>\
<p>\
Twitter\n\
<button type="button" id="twitter" onclick="removeTwitter()">-</button>\
</p>\
<p>\
Youtube\n\
<button type="button" id="youtube" onclick="removeYoutube()">-</button>\
</p>\
</div>');
}
else if(element.checked != true) {
$("#social").remove();
}
I'm trying to turn this into React inside a component but I'm not sure if I'm doing it right. I have the function linked to my checkbox but I don't know how to add/remove the links when clicked:
import React, { Component } from "react";
import ReactDOM from "react-dom";
import { findDOMNode } from "react-dom";
import $ from "jquery";
export default class LoginPage extends Component {
render() {
return (
<div id="container">
<section className="presets">
<div>
<label for="item1">Social Media:</label>
<input
type="checkbox"
name="item1"
id="item1"
onChange={this.socialMedia.bind(this)}
/>
</div>
<div>
<label for="item2">Tech:</label>
<input
type="checkbox"
name="item2"
id="item2"
onChange="toggleTech(this)"
/>
</div>
<div>
<label for="item3">Sports:</label>
<input
type="checkbox"
name="item3"
id="item3"
onChange="toggleSports(this)"
/>
</div>
<div>
<label for="item4">News:</label>
<input
type="checkbox"
name="item4"
id="item4"
onChange="toggleNews(this)"
/>
</div>
<div>
<label for="item5">Games:</label>
<input
type="checkbox"
name="item5"
id="item5"
onChange="toggleGames(this)"
/>
</div>
<div>
<label for="item3">School:</label>
<input
type="checkbox"
name="item6"
id="item6"
onChange="toggleSchool(this)"
/>
</div>
<div>
<button
type="button"
id="custom"
onClick="customHandler(this)"
>
Add Custom Site
</button>
</div>
</section>
<section className="links"></section>
</div>
);
}
// Social(element) {
// if (element.checked != false) {
// $(".links").append(
// '<div id="social">\
// <p>\
// Instagram\n\
// <button type="button" id="instagram" onclick="removeInstagram()">-</button>\
// </p>\
// <p>\
// Facebook\n\
// <button type="button" id="facebook" onclick="removeFacebook()">-</button>\
// </p>\
// <p>\
// Twitter\n\
// <button type="button" id="twitter" onclick="removeTwitter()">-</button>\
// </p>\
// <p>\
// Youtube\n\
// <button type="button" id="youtube" onclick="removeYoutube()">-</button>\
// </p>\
// </div>'
// );
// } else if (element.checked != true) {
// $("#social").remove();
// }
// }
}
Any help with this would be appreciated, I am using the MERN stack for this.

Try this with func comp and useState
export const LoginPage = () => {
const [isChecked, setIsChecked] = useState(false);
return (
<div id="container">
<section className="presets">
<div>
<label for="item1">Social Media:</label>
<input
type="checkbox"
name="item1"
id="item1"
onChange={() => setIsChecked(!isChecked)}
/>
</div>
<div>
<label for="item2">Tech:</label>
<input
type="checkbox"
name="item2"
id="item2"
onChange="toggleTech(this)"
/>
</div>
<div>
<label for="item3">Sports:</label>
<input
type="checkbox"
name="item3"
id="item3"
onChange="toggleSports(this)"
/>
</div>
<div>
<label for="item4">News:</label>
<input
type="checkbox"
name="item4"
id="item4"
onChange="toggleNews(this)"
/>
</div>
<div>
<label for="item5">Games:</label>
<input
type="checkbox"
name="item5"
id="item5"
onChange="toggleGames(this)"
/>
</div>
<div>
<label for="item3">School:</label>
<input
type="checkbox"
name="item6"
id="item6"
onChange="toggleSchool(this)"
/>
</div>
<div>
<button
type="button"
id="custom"
onClick="customHandler(this)"
>
Add Custom Site
</button>
</div>
</section>
<section className="links">
{isChecked ? <div id="social">
<p>
Instagram
<button type="button" id="instagram" onclick="removeInstagram()">-</button>\
</p>
<p>
Facebook
<button type="button" id="facebook" onclick="removeFacebook()">-</button>\
</p>
<p>
Twitter
<button type="button" id="twitter" onclick="removeTwitter()">-</button>\
</p>
<p>
Youtube
<button type="button" id="youtube" onclick="removeYoutube()">-</button>\
</p>
</div> : null }
</section>
</div>
);
}

You should use state and ternary expression. should be something like this:
And you should not change the DOM with jquery while you are working with react.
import React, { Component } from "react";
export default class LoginPage extends Component {
constructor(){
super();
this.state ={
isElementChecked: false
}
}
render() {
return (
<div id="container">
<section className="presets">
<div>
<label for="item1">Social Media:</label>
<input
type="checkbox"
name="item1"
id="item1"
checked={this.state.isElementChecked}
onChange={this.setState({isElementChecked: !this.state.isElementChecked})}
/>
</div>
<div>
<label for="item2">Tech:</label>
<input
type="checkbox"
name="item2"
id="item2"
onChange="toggleTech(this)"
/>
</div>
<div>
<label for="item3">Sports:</label>
<input
type="checkbox"
name="item3"
id="item3"
onChange="toggleSports(this)"
/>
</div>
<div>
<label for="item4">News:</label>
<input
type="checkbox"
name="item4"
id="item4"
onChange="toggleNews(this)"
/>
</div>
<div>
<label for="item5">Games:</label>
<input
type="checkbox"
name="item5"
id="item5"
onChange="toggleGames(this)"
/>
</div>
<div>
<label for="item3">School:</label>
<input
type="checkbox"
name="item6"
id="item6"
onChange="toggleSchool(this)"
/>
</div>
<div>
<button
type="button"
id="custom"
onClick="customHandler(this)"
>
Add Custom Site
</button>
</div>
</section>
<section className="links">
{this.state.isElementChecked? <div id="social">
<p>
Instagram
<button type="button" id="instagram" onclick="removeInstagram()">-</button>\
</p>
<p>
Facebook
<button type="button" id="facebook" onclick="removeFacebook()">-</button>\
</p>
<p>
Twitter
<button type="button" id="twitter" onclick="removeTwitter()">-</button>\
</p>
<p>
Youtube
<button type="button" id="youtube" onclick="removeYoutube()">-</button>\
</p>
</div> : null}
</section>
</div>
);
}
}

show/hide a div based on click in another div

I have a chatbubble that when clicked, I want it to disappear and a chat window should come up.
The chat window is the wrapper div. I set it display = 'none' in the html code below. Then in the onclick of chatBubble I show the wrapper div using jQuery
So initially I shouldn't see the chat window. But I see it. Also when I click on the chatbubble, I get error Uncaught TypeError: "#wrapper".show is not a function. What am I missing?
<div id = "chatBubble" class="talk-bubble tri-right btm-right round">
<div class="talktext">
<p>Hi, can I help?</p>
</div>
</div>
<div id="wrapper" display = 'none'>
<div id="menu">
<p class="welcome">Welcome<b></b></p>
<p class="logout"><a id="exit" href="#">Exit</a></p>
<div style="clear:both"></div>
</div>
<div id="chatbox"></div>
<form name="message" action="">
<input name="usermsg" type="text" id="usermsg" size="63" />
<input name="submitmsg" type="submit" id="submitmsg" value="Send" />
</form>
</div>
Relevant portion of javascript
$(document).ready(function() {
$("#chatBubble").click(function(){
//console.log("clicked")
('#wrapper').show();
})
});
Please suggest.

You are setting the style property in the wrong way. You have to set it through style attribute. show() is a jQuery function and you are missing that just before ('#wrapper').show(); which leads to the error.
Try the following:
$(document).ready(function() {
$("#chatBubble").click(function(){
//console.log("clicked")
$('#wrapper').show();
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "chatBubble" class="talk-bubble tri-right btm-right round">
<div class="talktext">
<p>Hi, can I help?</p>
</div>
</div>
<div id="wrapper" style='display:none'>
<div id="menu">
<p class="welcome">Welcome<b></b></p>
<p class="logout"><a id="exit" href="#">Exit</a></p>
<div style="clear:both"></div>
</div>
<div id="chatbox"></div>
<form name="message" action="">
<input name="usermsg" type="text" id="usermsg" size="63" />
<input name="submitmsg" type="submit" id="submitmsg" value="Send" />
</form>
</div>

Displaying elements in three arrays for React

So I am trying to display the contents of three arrays in React in this fashion:
array[one,two]
array2[1,2]
array3[hi, bye]
what I want:
one
1
hi
two
2
bye
But I am ending up with
one
two
1
2
hi
bye
Here is the code and I am usnig paint info to map through and display. I tried nesting the ul's and the li's but not seeming to work... any advice would be greatly appreciated.
this.state = {
paintBrand: ['Sherwin-Williams'],
paintColor: ['Blue'],
paintSheen: ['Satin']
};
this.handleSubmit = this.handleSubmit.bind(this);
//Brads cool
}
handleSubmit(e) {
e.preventDefault();
var updateBrand = this.state.paintBrand;
updateBrand.push(this.refs.brand.value);
var updateColor = this.state.paintColor;
updateColor.push(this.refs.color.value);
var updateSheen = this.state.paintSheen;
updateSheen.push(this.refs.sheen.value);
this.setState({
paintBrand: updateBrand,
paintColor: updateColor,
paintSheen: updateSheen
});
}
render() {
var paintBrandArr = this.state.paintBrand;
paintBrandArr = paintBrandArr.map(brand =>
<li key={brand}>
{brand}
</li>
);
var paintColorArr = this.state.paintColor;
paintColorArr = paintColorArr.map(paint =>
<li key={paint}>
{paint}
</li>
);
var paintSheenArr = this.state.paintSheen;
paintSheenArr = paintSheenArr.map(sheen =>
<li key={sheen}>
{sheen}
</li>
);
return (
<div>
<form className="form" onSubmit={this.handleSubmit}>
<div className="row">
<div className="col-xs-4" />
<div className="col-xs-4">
<label htmlFor="brand">Paint Brand</label>
<div className="field">
<input
type="text"
name="brand"
className="form-control"
placeholder="Brand/Company"
ref="brand"
value={this.props.value}
onChange={this.props.onChange}
/>
</div>
</div>
</div>
<div className="row">
<div className="col-xs-4" />
<div className="col-xs-4">
<label htmlFor="color">Color</label>
<div className="field">
<input
type="text"
name="brand"
className="form-control"
placeholder="Color"
ref="color"
value={this.props.value}
onChange={this.props.onChange}
/>
</div>
</div>
</div>
<div className="row">
<div className="col-xs-4" />
<div className="col-xs-4">
<label htmlFor="brand">Sheen</label>
<div className="field">
<input
type="text"
name="brand"
className="form-control"
placeholder="Sheen"
ref="sheen"
value={this.props.value}
onChange={this.props.onChange}
/>
</div>
</div>
</div>
<div className="row">
<div className="col-xs-12"> </div>
<input
className="btn btn-primary btn-lg"
type="submit"
value="Input"
/>
</div>
</form>
<div>
<div>
<ul>
{paintBrandArr}
{paintColorArr}
{paintSheenArr}
</ul>
</div>
</div>
</div>
);
}
}

What you could do is map over one array and get info from all the three arrays through index like
var paintBrandArr = this.state.paintBrand;
paintBrandArr = paintBrandArr.map((brand, index) =>
<li key={brand}>
{brand}
{paintColorArr[index]}
{paintSheenArr[index]}
</li>
);
and then in render
<ul>
{paintBrandArr}
</ul>