I'm currently creating a website. The main function is a button which creates per click one rectangle. Now, I want to implement a new function to close the rectangle whenever the closebutton of the rectangle I want to delete is clicked. But here is my problem. I can't get the specific rectangle to clear. For me, the last rectangle created is always deleted. No matter on which close-button I press. I know it's not the best spelling but I'm very new to JavaScript. I hope you can help me.
function init() {
let loginButton = document.querySelector(".open-button");
let closeButton = document.querySelector(".close-button");
let container = document.querySelector(".login-field");
loginButton.addEventListener("click", openLogin);
closeButton.addEventListener("click", closeLogin);
let button = document.getElementById("myButton");
button.addEventListener("click", createRectangle);
function openLogin() {
container.style.display = "inline";
}
function closeLogin() {
container.style.display = "none";
}
}
var activeRectangle;
// Funktion zum Erstellen eines neuen Rechtecks
function createRectangle() {
var rectangle = document.createElement("div");
rectangle.className = "inactive";
rectangle.addEventListener("click", function() {
if (activeRectangle) {
activeRectangle.classList.remove("active");
activeRectangle.closeRectangle.classList.remove("closeRectangleActive");
activeRectangle.closeRectangle.classList.add("closeRectangleInactive");
activeRectangle.classList.add("inactive");
}
rectangle.classList.remove("inactive");
rectangle.closeRectangle.classList.remove("closeRectangleInactive");
rectangle.classList.add("active");
rectangle.closeRectangle.classList.add("closeRectangleActive");
activeRectangle = rectangle;
});
document.body.appendChild(rectangle);
var icon = '<i class="fa-solid fa-xmark"></i>';
rectangle.closeRectangle = document.createElement("div");
rectangle.closeRectangle.className = "closeRectangleInactive";
rectangle.closeRectangle.innerHTML = icon;
rectangle.closeRectangle.addEventListener("click", function() {
rectangle.parentNode.removeChild(rectangle);
});
rectangle.appendChild(rectangle.closeRectangle);
// Create a div element to serve as the drag-and-drop field
const field = document.createElement("div");
field.style.width = "120px";
field.style.height = "120px";
field.style.top = "40px";
field.style.left = "340px";
field.style.border = "1px solid black";
field.style.marginRight = "3%";
field.style.marginTop = "1.5%";
field.style.marginBottom = "1.5%";
rectangle.appendChild(field);
document.body.appendChild(rectangle);
// Add event listeners to change the border color when a file is dragged over or out of the field
field.addEventListener("dragover", event => {
event.preventDefault();
field.style.border = "2px solid rgba(0, 0, 0, 0.5)";
field.style.backgroundColor = "rgba(255, 255, 255, 0.5)";
});
field.addEventListener("dragleave", event => {
event.preventDefault();
field.style.border = "1px solid black";
});
// Add event listener to handle file drops and check file type
field.addEventListener("drop", event => {
event.preventDefault();
const file = event.dataTransfer.files[0];
const fileType = file.type.split("/")[1];
if (fileType === "png" || fileType === "jpg" || fileType === "jpeg") {
// Create an image element
const img = new Image();
// Set the image source to the file data
img.src = URL.createObjectURL(file);
// Set the width and height of the image to match the field
img.style.width = "100%";
img.style.height = "100%";
// Remove any existing image from the field
while (field.firstChild) {
field.removeChild(field.firstChild);
}
// Append the new image to the field
field.appendChild(img);
field.style.border = "none";
console.log("File uploaded");
} else {
field.style.border = "1px solid red";
field.style.backgroundColor = "rgba(255, 0, 0, 0.3)";
console.log("Wrong file format");
}
});
// Add event listener to open file explorer when field is clicked
field.addEventListener("click", event => {
const input = document.createElement("input");
input.type = "file";
input.addEventListener("change", event => {
const file = input.files[0];
const fileType = file.type.split("/")[1];
if (fileType === "png" || fileType === "jpg" || fileType === "jpeg") {
// Create an image element
const img = new Image();
// Set the image source to the file data
img.src = URL.createObjectURL(file);
// Set the width and height of the image to match the field
img.style.width = "100%";
img.style.height = "100%";
// Remove any existing image from the field
while (field.firstChild) {
field.removeChild(field.firstChild);
}
// Append the new image to the field
field.appendChild(img);
field.style.border = "1px solid green";
field.style.backgroundColor = "green";
console.log("File uploaded");
} else {
field.style.border = "1px solid red";
field.style.backgroundColor = "red";
console.log("Wrong file format");
}
});
input.click();
});
}
init();
h1{
color: white !important;
font-size: 50px;
}
.login button{
background-color: transparent;
border: none;
color: white;
font-size: 15px;
}
.placeholder{
font-size: 15px !important;
visibility: hidden !important;
}
body{
background-color: rgb(39, 39, 44) !important;
--color-primary: #009579;
--color-primary-dark: #007f67;
--color-secondary: #252c6a;
--color-error: #cc3333;
--color-success: #4bb544;
}
.login-field{
text-align: center;
height: 400px;
max-width: 400px;
width: 400px;
margin: 1rem;
padding: 2rem;
box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.3);
border-radius: 20px;
position: absolute;
transform: translateY(50%);
display: none;
background-color: rgb(39, 39, 44);
}
.close-button{
position: absolute;
background-color: transparent;
outline: none;
border: none;
color: white;
font-size: 30px;
right:3%;
top: 3%;
}
.close-button:active{
color: var(--color-error);
transform: scale(0.90);
}
.container{
position: relative;
justify-content: center;
display: flex;
}
.form__input-group{
margin-bottom: 1rem;
}
.form__input{
width: 100%;
display: block;
box-sizing: border-box;
padding: 0.75rem;
border-radius: 5px;
outline: none;
border: 4px solid #eeeeee;
transition: border-color 0.2s, background 0.2s;
background-color: #eeeeee;
}
.form__input:focus{
border-color: var(--color-primary);
background: #ffffff;
}
.form__button{
width: 100%;
padding: 1rem 2rem;
margin-top: 1.5rem;
border-radius: 5px;
background-color: var(--color-primary);
color: white;
outline: none;
border: none;
transition: background 0.2s;
}
.form__button:hover{
background-color: var(--color-primary-dark);
}
.form__message{
text-align: center;
margin-bottom: 1rem;
}
.form__message_error{
color: var(--color-error);
font-family:monospace;
visibility: hidden;
}
.form__message_success {
color: var(--color-success);
}
.form__input-error-message,
.form__input--error {
color: var(--color-error);
border-color: var(--color-error);
}
.form__button:active {
transform: scale(0.98);
}
#myButton {
position: absolute;
bottom: 3%;
right: 3%;
outline: none;
border: none;
font-size: 30px;
border-radius: 500px;
width: 100px;
height: 100px;
}
.hover{
color: rgb(255, 255, 255) !important;
border: 1px dashed #fff !important;
}
.valid{
color: #fff;
background-color: #4bb544;
border: 1px solid green;
}
.invalid{
color: #fff;
background-color: red;
border: 1px solid red;
}
.inactive,
.active {
width: 60% !important;
border-radius: 20px;
background-color: rgb(226, 226, 226);
margin: 0 auto;
margin-bottom: 1rem;
margin-top: 1rem;
height: 150px !important;
display: flex;
justify-content: space-between;
align-items: center;
transition: height ease-in-out 0.5s, width ease-in-out 0.5s, border-radius ease-in-out 0.5s;
}
.active {
width: 70% !important;
border-radius: 40px;
height: 400px !important;
}
.closeRectangleInactive,
.closeRectangleActive {
position: relative;
align-self: flex-start;
margin-left: 10px;
font-size: 30px;
transition: margin-left ease-in-out 0.5s, margin-top ease-in-out 0.5s, font-size ease-in-out 0.5s;
}
.closeRectangleActive{
margin-left: 15px;
margin-top: 0px;
font-size:50px;
}
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-thumb {
background-color: #888;
}
<!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">
<title>Cop Or Drop</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" href="img/miniLogo.svg">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css">
</head>
<body>
<header>
<div class="justify-content-space-between navbar bg-dark">
<div class="placeholder ms-5">
<p>Log-In</p>
</div>
<div class="navbar-brand">
<img src="img/navLogo.svg" width="150px" alt="">
</div>
<div class="login me-5">
<button class="open-button">Log-In</button>
</div>
</div>
</div>
</header>
<div class="container">
<div id="login-field" class="login-field">
<button class="close-button"><i class="fa-solid fa-xmark"></i></button>
<form class="form" id="login">
<h1 class="form__title">Log-In</h1>
<div id="errormsg" class="form__message form__message_error">Incorrect Password!</div>
<div class="form__input-group">
<input id="email" type="text" class="form__input" autofocus placeholder="E-Mail">
</div>
<div class="form__input-group">
<input id="password" type="text" class="form__input" autofocus placeholder="Password">
<div class="form__input-error-message"></div>
</div>
<button id="submit-button" class="form__button" type="submit">Continue</button>
</form>
</div>
</div>
<button id="myButton"><i class="fa-solid fa-plus"></i></button>
<script src="script.js"></script>
<script src="https://kit.fontawesome.com/ca61e08eab.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Related
I have this star rate form and wanted you to start typing in the text area and it will show you the star rate form right away, but if the text area is empty, it will hide.
I discovered the following code:
<HTML>
<input placeholder="Enter some text" name="name" />
<p id="values"></p>
<JS>
const input = document.querySelector('input');
const log = document.getElementById('values');
input.addEventListener('input', updateValue);
function updateValue(e) {
log.textContent = e.target.value;
}
How can I combine this code into mine? Because it only does that now when I click outside of the text area and then show the stars. Please advise me on this!
#import url(https://fonts.googleapis.com/css?family=Roboto:500,100,300,700,400);
* {
margin: 0;
padding: 0;
font-family: roboto;
}
body {
background: #000;
}
.cont {
width: 93%;
max-width: 350px;
text-align: center;
margin: 4% auto;
padding: 30px 0;
background: #111;
color: #EEE;
border-radius: 5px;
border: thin solid #444;
}
hr {
margin: 20px;
border: none;
border-bottom: thin solid rgba(255, 255, 255, .1);
}
div.title {
font-size: 2em;
}
h1 span {
font-weight: 300;
color: #Fd4;
}
div.stars {
width: 270px;
display: inline-block;
}
input.star {
display: none;
}
label.star {
float: right;
padding: 10px;
font-size: 36px;
color: #444;
transition: all .2s;
}
input.star:checked~label.star:before {
content: '\f005';
color: #FD4;
transition: all .25s;
}
input.star-5:checked~label.star:before {
color: #FE7;
text-shadow: 0 0 20px #952;
}
input.star-1:checked~label.star:before {
color: #F62;
}
label.star:hover {
transform: rotate(-15deg) scale(1.3);
}
label.star:before {
content: '\f006';
font-family: FontAwesome;
}
.rev-box {
height: 0;
width: 100%;
transition: all .25s;
}
textarea.review {
background: #222;
border: none;
width: 50%;
max-width: 100%;
height: 50px;
padding: 10px;
box-sizing: border-box;
color: #EEE;
}
label.review {
display: block;
transition: opacity .25s;
}
input.star:checked~.rev-box {
height: 125px;
overflow: visible;
}
<html>
<head>
<link rel="stylesheet" href="startratecss.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.2.0/jquery.rateyo.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.2.0/jquery.rateyo.min.js"></script>
</head>
<body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css" />
<div class="cont">
<div class="stars">
<form>
<div class="rev-box">
<textarea class="review" id="review" cols="2" rows="2" name="review" onchange="asd(this)"></textarea>
</div>
<div id="rateYo" style="visibility: hidden;"></div>
<input type="hidden" name="rating" id="rating_input" />
</form>
</div>
</div>
<script>
function asd(txt) {
var something = txt.value;
var star = document.getElementById("rateYo");
star.style.visibility = "visible";
}
$(function MyFunction() {
$("#rateYo").rateYo({
onSet: function(rating, rateYoInstance) {
rating = Math.ceil(rating);
$('#rating_input').val(rating); //setting up rating value to hidden field
var bod = document.getElementById("review").value;
window.location.href = 'mailto:your#gmail.com?subject=' + rating + ' of 5' + '&body=' + bod;
}
});
});
</script>
</body>
</html>
I have taken the liberty of rewriting your code to accomplish what you are trying to do.
Two tips I want to give you:
Decouple the data layer with the presentation layer. You are mixing CSS styles in stylesheets, HTML and JavaScript. You are also having JavaScript as strings in your HTML attributes. This gets confusing quite rapidly! We have gone a long way since HTML4 and the 90's!
If you use a library, then use it. For example, you are using jQuery, then use it as it should instead of adding event handlers directly to the HTML attributes; jQuery has $(element).on(event, handler), don't do <div onclick="something(this)"></div>.
$(function MyFunction() {
const textInput = $("#review").on('input', function () {
if (textInput.val().length) {
rateStar.show();
} else {
rateStar.hide();
}
});
const ratingInput = $('#rating_input');
const rateStar = $("#rateYo").rateYo({
onSet: function(rating, rateYoInstance) {
let inputValue = textInput.val();
ratingInput.val(Math.ceil(rating)); //setting up rating value to hidden field
console.log( rating, inputValue );
// window.location.href = 'mailto:your#gmail.com?subject=' + rating + ' of 5' + '&body=' + bod;
}
}).hide();
});
#import url(https://fonts.googleapis.com/css?family=Roboto:500,100,300,700,400);
* {
margin: 0;
padding: 0;
font-family: roboto;
}
body {
background: #000;
}
.cont {
width: 93%;
max-width: 350px;
text-align: center;
margin: 4% auto;
padding: 30px 0;
background: #111;
color: #EEE;
border-radius: 5px;
border: thin solid #444;
}
hr {
margin: 20px;
border: none;
border-bottom: thin solid rgba(255, 255, 255, .1);
}
div.title {
font-size: 2em;
}
h1 span {
font-weight: 300;
color: #Fd4;
}
div.stars {
width: 270px;
display: inline-block;
}
label.star {
float: right;
padding: 10px;
font-size: 36px;
color: #444;
transition: all .2s;
}
input.star:checked~label.star:before {
content: '\f005';
color: #FD4;
transition: all .25s;
}
input.star-5:checked~label.star:before {
color: #FE7;
text-shadow: 0 0 20px #952;
}
input.star-1:checked~label.star:before {
color: #F62;
}
label.star:hover {
transform: rotate(-15deg) scale(1.3);
}
label.star:before {
content: '\f006';
font-family: FontAwesome;
}
.rev-box {
/* height: 0; */
width: 100%;
transition: all .25s;
}
textarea.review {
background: #222;
border: none;
width: 50%;
max-width: 100%;
height: 50px;
padding: 10px;
box-sizing: border-box;
color: #EEE;
}
label.review {
display: block;
transition: opacity .25s;
}
input.star:checked~.rev-box {
height: 125px;
overflow: visible;
}
<html>
<head>
<link rel="stylesheet" href="startratecss.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.2.0/jquery.rateyo.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.2.0/jquery.rateyo.min.js"></script>
</head>
<body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css" />
<div class="cont">
<div class="stars">
<form>
<div class="rev-box">
<textarea class="review" id="review" cols="2" rows="2" name="review"></textarea>
</div>
<div id="rateYo"></div>
<input type="hidden" name="rating" id="rating_input" />
</form>
</div>
</div>
</body>
</html>
I am creating a settings portion on a website. I want the features chosen to be "saved" and kept when the page refreshes. I attempted this but it seems to just reset the form when I refresh the page. Another issue is when I click on the cancel button, the toggle buttons reset but the dropdown comes back blank instead of going back to the placeholder "select timezone". The issue most likely lies in my javascript code below. It's also throwing an error in stack overflow but works properly on my website (minus the issues described above). Any suggestions would be much appreciated!
// ---------- TOGGLE BTN ----------
const toggle = document.getElementsByClassName("toggle");
const labels = document.getElementsByClassName("labels");
for(let i=0; i < 2; i++) {
labels[i].innerHTML = "OFF";
toggle[i].addEventListener( "click", () => {
if(labels[i].innerHTML == "OFF") {
// console.log("button toggled");
labels[i].classList.add("on");
labels[i].innerHTML= "ON";
} else {
labels[i].classList.remove("on");
labels[i].innerHTML = "OFF";
}
});
}
// ---------- LOCAL STORAGE DATA ----------
const save = document.getElementById("save");
const cancel = document.getElementById("cancel");
const emailBtn = document.getElementById("togBtn");
const publicBtn = document.getElementById("togBtn2");
const zone = document.getElementById("timezone");
// emailBtn.value = data;
// publicBtn.value = data;
// zone.value = data;
const data = {
email: emailBtn.value,
privacy: publicBtn.value,
timezone: zone.value
}
var emailVal = localStorage.getItem("email");
var privacyVal = localStorage.getItem("privacy");
var zoneVal = localStorage.getItem("timezone");
save.addEventListener('click', () => {
localStorage.setItem("email", emailBtn.value);
localStorage.setItem("privacy", publicBtn.value);
localStorage.setItem("timezone", zone.value);
});
cancel.addEventListener('click', () => {
localStorage.clear();
for(let i=0; i < 2; i++) {
labels[i].innerHTML = "OFF";
labels[i].classList.remove("on");
}
emailBtn.checked = false;
publicBtn.checked =false;
zone.value = 'Select Timezone';
});
.settings {
padding-left: 15px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.settings h3 {
flex-basis: 100%;
}
.button1,
.button2 {
flex-basis: 100%;
display: flex;
align-items:center;
}
label {
flex-basis: 90%;
}
input {
flex-basis: 10%;
}
.form-field {
flex-basis: 100%;
background-color: rgb(241, 240, 240);
border: 1px solid lightgrey;
color: grey;
border-radius: 5px;
padding: 10px;
margin: 0 15px 10px 0;
}
.settings-button {
display: flex;
justify-content: center;
}
button {
margin: 10px 15px 10px 0;
padding: 10px;
border: 1px solid lightgrey;
border-radius: 5px;
}
#save,
#cancel {
flex-basis: 50%;
}
#save {
background-color: #7477BF;
color: white;
}
#cancel {
background-color: darkgray;
color: white;
}
#timezone {
margin-top:25px;
}
/* toggle button */
.toggle {
-webkit-appearance: none;
-webkit-tap-highlight-color: transparent;
position: relative;
outline: 0;
cursor: pointer;
margin: 10px 15px;
}
.toggle:after {
content: '';
width: 80px;
height: 28px;
display: inline-block;
background: rgba(196, 195, 195, 0.55);
border: 2px solid rgba(196, 195, 195, 0.55);
border-radius: 18px;
clear: both;
}
.toggle:before {
content: '';
width: 20px;
height: 20px;
display: block;
position: absolute;
top: 3px;
/* left: 0;
top: -3px; */
border: 2px solid rgba(196, 195, 195, 0.55);
border-radius: 50%;
background: rgb(255, 255, 255);
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
}
.toggle:checked:before {
left: 54px;
box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.6);
}
.toggle:checked:after {
background: #7477BF;
}
.toggle,
.toggle:before,
.toggle:after,
.toggle:checked:before,
.toggle:checked:after {
transition: ease .4s;
-webkit-transition: ease .4s;
-moz-transition: ease .4s;
-o-transition: ease .4s;
}
.labels {
color: gray;
position: relative;
font-size: 15px;
transform: translate(-48px, -3px);
}
.on {
color: white;
transform: translate(-90px, -3px);
}
<section class="settings" id="settings">
<h3>Settings</h3>
<!-- custom CSS toggle code-->
<div class="button1">
<label for="togBtn">Send Email Notfications </label>
<input type="checkbox" class="toggle" id="togBtn">
<span class="labels"></span>
</div>
<div class="button2">
<label for="togBtn2">Set Profile to Public </label>
<input type="checkbox" class="toggle" id="togBtn2">
<span class="labels"></span>
</div>
<select class="form-field" id="timezone">
<option disabled selected>Select a Timezone</option>
<option>Eastern</option>
<option>Western</option>
<!-- more options -->
</select>
<div class="settings-button" >
<button class="button-primary" id="save">Save</button>
<button class="button-disabled" id="cancel">Cancel</button>
</div>
</section>
here a working example.
The problems with your code were that you were using emailBtn.value and publicBtn.value instead of emailBtn.checked and publicBtn.checked (they are checkbox so in order to get the correct value you have to read che checked property) and you were not loading the saved values on document load (the function inside window.addEventListener("load", ...) in my example.
Hope this helps you.
I'm new to Stack Overflow. I hope that I'm doing this correctly. ❤
I'm working on an old Etch-a-Sketch JavaScript project from months ago and decided to rework the 'mobile' form of the project because I hadn't bothered to do so at the time. At first, I tried just moving the buttons to the top horizontally, but I didn't like any of the variations I tried. So I decided I'd be better off with a dropdown menu instead that would appear when the screen is 500px or smaller, replacing the buttons.
The dropdown menu is supposed to do exactly what the buttons do - when a certain mode is selected, that's the mode that the program is supposed to switch to. For example, when the "Party mode" button is clicked, the program switches to "party mode". I want the dropdown menu to behave similarly - when the "party mode" option is selected, the program should switch to "party mode".
My logic was that I needed a function that grabbed the value of the dropdown menu, and then an "if" condition would run that pretty much says "If the value is x, x mode should run; else if the value is y, y mode should run", and so on. I added the function to the existing window.onload function so it would run upon the window loading. This didn't work.
Note that the dropdown menu will, in the future, only appear when the screen size is 500px or less. In addition, I still have the buttons on the screen for all sizes, just for testing/debugging purposes. When I'm done and have this figured out, the buttons will have "display = 'none'" and be hidden for the "mobile size".
Anyway, so yeah, the program is still just listening to the buttons, and not the dropdown menu. That leads me to believe that I need to somehow turn "off" the button mode? If that's the case, how do I do that? If that's not the case, what am I supposed to do here? Any help or insight would be greatly appreciated. Thanks!
const defaultMode = 'default';
const defaultSize = 30;
const defaultColor = '#0b478b';
let currentMode = defaultMode;
let currentSize = defaultSize;
let currentColor = defaultColor;
// Sets the program's current mode
function setCurrentMode(newMode) {
activeButton(newMode);
currentMode = newMode;
}
// Sets the grid's size
function setCurrentSize(newSize) {
currentSize = newSize;
}
// Sets the color of the square (if in default mode)
function setCurrentColor(newColor) {
currentColor = newColor;
}
// Links the various HTML elements to this script
const sizeValue = document.querySelector('#sizevalue');
const sizeSlider = document.querySelector('#sizeslider');
const colorPicker = document.querySelector('#colorpicker');
const defaultBtn = document.querySelector('#default');
const partyBtn = document.querySelector('#party');
const grayBtn = document.querySelector('#grayscale');
const eraserBtn = document.querySelector('#eraser');
const clearBtn = document.querySelector('#clear');
const grid = document.querySelector('#maincontainer');
// DOM manipulations for buttons, color picker, and size slider
colorPicker.onchange = (e) => setCurrentColor(e.target.value);
defaultBtn.onclick = () => setCurrentMode('default');
partyBtn.onclick = () => setCurrentMode('party');
grayBtn.onclick = () => setCurrentMode('gray');
eraserBtn.onclick = () => setCurrentMode('eraser');
clearBtn.onclick = () => reloadGrid();
sizeSlider.onmousemove = (e) => updateSizeValue(e.target.value);
sizeSlider.onchange = (e) => changeSize(e.target.value);
// When the size is changed, we set the grid size, update the size value (text), and reload the grid.
function changeSize(num) {
setCurrentSize(num);
updateSizeValue(num);
reloadGrid();
}
// When we update the size value, the text changes to reflect the value. (It's a square, so the value is always the same for length and width).
function updateSizeValue(num) {
sizeValue.innerHTML = `${num} x ${num}`;
}
// When we reload the grid (which happens when "Clear grid" is pressed), we ensure that we clear the grid and that the size is still the current size.
function reloadGrid() {
clearGrid()
makeGrid(currentSize)
}
// When we clear the grid, it clears the grid.
function clearGrid() {
grid.innerHTML = ''
}
// Creates the base grid and includes the code that says "when the mouse goes over the squares, draw."
function makeGrid(size) {
grid.style.gridTemplateColumns = `repeat(${size}, 1fr)`;
grid.style.gridTemplateRows = `repeat(${size}, 1fr)`;
for (i = 0; i < size * size; i++) {
let square = document.createElement('div');
square.addEventListener('mouseover', changeColor);
grid.appendChild(square);
}
}
// These are the conditions to set the color of the "pen" (squares)
function changeColor(e) {
if (currentMode === 'party') {
const randomR = Math.floor(Math.random() * 256);
const randomG = Math.floor(Math.random() * 256);
const randomB = Math.floor(Math.random() * 256);
e.target.style.backgroundColor = `rgb(${randomR}, ${randomG}, ${randomB})`;
} else if (currentMode === 'default') {
e.target.style.backgroundColor = currentColor;
} else if (currentMode === 'gray') {
e.target.style.backgroundColor = calculateGray(e);
} else if (currentMode === 'eraser') {
e.target.style.backgroundColor = 'white';
}
}
// Shading mode code
function calculateGray(e) {
let clr = returnRGB(e.target.style.backgroundColor);
if (!clr || clr[1] !== clr[2] || clr[1] !== clr[3]) {
return `rgb(255, 255, 255)`;
}
return clr[1] <= 0 ? `rgb(255, 255, 255)` : `rgb(${clr[1]-25}, ${clr[1]-25}, ${clr[1]-25})`;
}
function returnRGB(num) {
return num.match(/rgb\(([0-9]*), ([0-9]*), ([0-9]*)\)/);
}
// Changes the button styling to indicate which mode is the active mode
function activeButton(newMode) {
if (currentMode === 'party') {
partyBtn.classList.remove('active');
} else if (currentMode === 'default') {
defaultBtn.classList.remove('active');
} else if (currentMode === 'gray') {
grayBtn.classList.remove('active');
} else if (currentMode === 'eraser') {
eraserBtn.classList.remove('active');
}
if (newMode === 'party') {
partyBtn.classList.add('active');
} else if (newMode === 'default') {
defaultBtn.classList.add('active');
} else if (newMode === 'gray') {
grayBtn.classList.add('active');
} else if (newMode === 'eraser') {
eraserBtn.classList.add('active');
}
}
// Ensures that, when we load the page, we make the grid and activate the correct mode (default).
window.onload = () => {
makeGrid(defaultSize);
activeButton(defaultMode);
dropdownModeThing(document.getElementById('dropdown-mode').value);
}
// Code for the dropdown menu
function dropdownModeThing(val) {
if (val === 'default') {
setCurrentMode('default');
} else if (val === 'party') {
setCurrentMode('party');
} else if (val === 'shading') {
setCurrentMode('gray');
} else if (val === 'eraser') {
setCurrentMode('eraser');
} else if (val === 'clear') {
reloadGrid();
}
}
body,
html {
min-height: 100vh;
height: 100%;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
margin: 0;
padding: 0;
background-color: white;
overflow-x: hidden;
}
header {
text-align: center;
margin: 0;
border-bottom: 1px solid black;
background-color: #0b478b;
color: white;
padding: 10px;
box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 3px 0px;
}
p {
margin: 0;
}
h1 {
text-align: center;
margin: 0;
font-size: 2.5rem;
padding: 0;
}
#maincontainer {
background-color: white;
margin: 20px auto 10px auto;
display: grid;
border: 1px solid black;
width: 45vw;
height: 45vw;
min-height: 300px;
min-width: 300px;
box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 3px 0px;
}
.testing {
padding-top: 100%;
color: hsla(0, 0%, 68%, 0.596);
}
#btncontainer {
padding-top: 20px;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
a {
color: #2aa5a1;
text-decoration: none;
}
a:hover {
color: white;
}
button {
background-color: #2aa5a1;
color: white;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
border: 1px solid black;
margin: 10px 15px;
padding: 8px 10px;
font-size: .9em;
transition: 0.3s;
box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 3px 0px;
}
button:active {
background-color: #3F86D8;
color: white;
border: 1px solid black;
}
.active {
background-color: #3F86D8;
transition: 0.3s;
color: white;
border: 1px solid black;
}
button:hover {
background-color: #0b478b;
color: white;
border: 1px solid black;
opacity: 1;
}
#rightside {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
text-align: center;
min-height: 500px;
padding: 0;
margin: 0;
}
#sizevalue {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
margin-bottom: 0;
}
input[type=range] {
background-color: white;
height: 28px;
-webkit-appearance: none;
margin: 0;
margin-bottom: 35px;
width: 250px;
padding: 0;
}
input[type=range]:focus {}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 11px;
cursor: pointer;
animate: 0.2s;
box-shadow: 1px 1px 1px #000000;
background: #3F86D8;
border-radius: 13px;
border: 0px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 1px 1px 2px #000031;
border: 1px solid #00001E;
height: 20px;
width: 20px;
border-radius: 15px;
background: #FFFFFF;
cursor: pointer;
-webkit-appearance: none;
margin-top: -5px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #3F86D8;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 11px;
cursor: pointer;
animate: 0.2s;
box-shadow: 1px 1px 1px #000000;
background: #3F86D8;
border-radius: 13px;
border: 0px solid #010101;
}
input[type=range]::-moz-range-thumb {
box-shadow: 1px 1px 2px #000031;
border: 1px solid #00001E;
height: 20px;
width: 20px;
border-radius: 15px;
background: #F3EEED;
cursor: pointer;
}
input[type=range]::-ms-track {
width: 100%;
height: 11px;
cursor: pointer;
animate: 0.2s;
background: transparent;
border-color: transparent;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #3F86D8;
border: 0px solid #010101;
border-radius: 26px;
box-shadow: 1px 1px 1px #000000;
}
input[type=range]::-ms-fill-upper {
background: #3F86D8;
border: 0px solid #010101;
border-radius: 26px;
box-shadow: 1px 1px 1px #000000;
}
input[type=range]::-ms-thumb {
margin-top: 1px;
box-shadow: 1px 1px 2px #000031;
border: 1px solid #00001E;
height: 20px;
width: 20px;
border-radius: 15px;
background: #F3EEED;
cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
background: #3F86D8;
}
input[type=range]:focus::-ms-fill-upper {
background: #3F86D8;
}
main {
display: flex;
justify-content: center;
margin: 0;
margin-bottom: 20px;
padding: 0;
}
#colorpicker {
-webkit-appearance: none;
border-radius: 100vw;
width: 50px;
height: 50px;
padding: 0;
margin: 0 auto 10px auto;
overflow: hidden;
border: 1px solid black;
box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 3px 0px;
}
input[type='color']:hover {
transform: scale(1.05);
}
input[type='color']::-webkit-color-swatch-wrapper {
padding: 0;
}
input[type='color']::-webkit-color-swatch {
border: none;
border-radius: 50px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
/* If you want dots under the hoverable text */
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 1;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
}
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
right: 100%;
/* To the left of the tooltip */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}
footer {
color: white;
text-align: center;
background-color: #0b478b;
position: fixed;
bottom: 0;
width: 100%;
margin: 0;
padding-top: 10px;
padding-bottom: 15px;
}
#media (max-width: 500px) {
main {
flex-direction: column;
}
#btncontainer {
margin: 0 auto;
padding: 20px 10px 5px 10px;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
}
#btncontainer button {
margin: 0 3px;
height: 35px;
}
#colorpicker {
-webkit-appearance: none;
border-radius: 100px;
width: 35px;
height: 35px;
padding: 0;
margin: 0 auto 10px auto;
overflow: hidden;
border: 1px solid black;
box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 3px 0px;
}
}
<!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">
<!-- CSS spreadsheet -->
<link href="styles.css" rel="stylesheet">
<title>Etch-a-Sketch</title>
</head>
<body>
<!-- Note that this is set up in various divs so
that we can use Flex to create our wanted layout. -->
<div id="entirepage">
<header>
<h1>Etch-a-Sketch</h1>
<p title="Testing">Select a color or a different mode, then select your size, and get drawing!</p>
</header>
<main>
<div id="btncontainer">
<select id="dropdown-mode">
<option value="default">Default mode</option>
<option value="party">Party mode</option>
<option value="shading">Shading</option>
<option value="eraser">Eraser mode</option>
<option value="clear">Clear grid</option>
</select>
<input type="color" id="colorpicker" value="#0b478b">
<button id="default">Default mode</button>
<button id="party">Party mode</button>
<button id="grayscale">Shading</button>
<button id="eraser">Eraser mode</button>
<button id="clear">Clear grid</button>
</div>
<div id="rightside">
<div id="maincontainer">
</div>
<label for="sizeslider" id="sizevalue">30 x 30</label>
<input type="range" min="1" max="100" value="30" id="sizeslider">
</div>
</main>
<footer>
<p>Created by Sara Dunlop (RiscloverYT)</p>
</footer>
</div>
<!-- JavaScript script -->
<script src="script.js"></script>
</body>
</html>
Luckily, there's an easy way to do that. Add this piece of code into your javascript file and see the magic.
const dropdown = document.getElementById('dropdown-mode');
dropdown.addEventListener('change', (e) => {
setCurrentMode(e.target.value);
});
Read more about change event here.
I began to change the copied code, so that instead of it being a "to-do" list that shoots out one statement at a time, I wanted to change it to shoot out 3 statements at a time and log them in a row.
I was able to add 2 more boxes, but when I press the purple button to have it run, it logs only one of the boxes and it leaves writing in the other 2 (new boxes I made) and it ends up looking like this before pressing the purple button:
enter image description here
and this logs out as a result :
enter image description here
just the name, but email does not and it leaves an imprint of the email and date (unlike the 'user name box')
Tried tinkering with eth code but don't understand how to manipulate it to make it show what I want and log the three things. Can you please help show me how to do this. Below are 3 files for HTML, CSS, and JS.
// getting all required elements
const inputBox = document.querySelector(".inputField input");
const addBtn = document.querySelector(".inputField button");
const todoList = document.querySelector(".todoList");
const deleteAllBtn = document.querySelector(".footer button");
// onkeyup event
inputBox.onkeyup = ()=>{
let userEnteredValue = inputBox.value; //getting user entered value
if(userEnteredValue.trim() != 0){ //if the user value isn't only spaces
addBtn.classList.add("active"); //active the add button
}else{
addBtn.classList.remove("active"); //unactive the add button
}
}
showTasks(); //calling showTask function
addBtn.onclick = ()=>{ //when user click on plus icon button
let userEnteredValue = inputBox.value; //getting input field value
let getLocalStorageData = localStorage.getItem("New Todo"); //getting localstorage
if(getLocalStorageData == null){ //if localstorage has no data
listArray = []; //create a blank array
}else{
listArray = JSON.parse(getLocalStorageData); //transforming json string into a js object
}
listArray.push(userEnteredValue); //pushing or adding new value in array
localStorage.setItem("New Todo", JSON.stringify(listArray)); //transforming js object into a json string
showTasks(); //calling showTask function
addBtn.classList.remove("active"); //unactive the add button once the task added
}
function showTasks(){
let getLocalStorageData = localStorage.getItem("New Todo");
if(getLocalStorageData == null){
listArray = [];
}else{
listArray = JSON.parse(getLocalStorageData);
}
const pendingTasksNumb = document.querySelector(".pendingTasks");
pendingTasksNumb.textContent = listArray.length; //passing the array length in pendingtask
if(listArray.length > 0){ //if array length is greater than 0
deleteAllBtn.classList.add("active"); //active the delete button
}else{
deleteAllBtn.classList.remove("active"); //unactive the delete button
}
let newLiTag = "";
listArray.forEach((element, index) => {
newLiTag += `<li>${element}<span class="icon" onclick="deleteTask(${index})"><i class="fas fa-trash"></i></span></li>`;
});
todoList.innerHTML = newLiTag; //adding new li tag inside ul tag
inputBox.value = ""; //once task added leave the input field blank
}
// delete task function
function deleteTask(index){
let getLocalStorageData = localStorage.getItem("New Todo");
listArray = JSON.parse(getLocalStorageData);
listArray.splice(index, 1); //delete or remove the li
localStorage.setItem("New Todo", JSON.stringify(listArray));
showTasks(); //call the showTasks function
}
// delete all tasks function
deleteAllBtn.onclick = ()=>{
listArray = []; //empty the array
localStorage.setItem("New Todo", JSON.stringify(listArray)); //set the item in localstorage
showTasks(); //call the showTasks function
}
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
::selection{
color: #ffff;
background: rgb(142, 73, 232);
}
body{
width: 100%;
height: 100vh;
/* overflow: hidden; */
padding: 10px;
background: linear-gradient(to bottom, #68EACC 0%, #497BE8 100%);
}
.wrapper{
background: #fff;
max-width: 1200px;
width: 100%;
margin: 120px auto;
padding: 25px;
border-radius: 5px;
box-shadow: 0px 10px 15px rgba(0,0,0,0.1);
}
.wrapper header{
font-size: 30px;
font-weight: 600;
}
.wrapper .inputField{
margin: 20px 0;
width: 100%;
display: flex;
height: 45px;
}
.inputField input{
width: 85%;
height: 100%;
outline: none;
border-radius: 3px;
border: 1px solid #ccc;
font-size: 17px;
padding-left: 15px;
transition: all 0.3s ease;
}
.inputField input:focus{
border-color: #8E49E8;
}
.inputField button{
width: 100px;
height: 100%;
border: none;
color: #fff;
margin-left: 5px;
font-size: 21px;
outline: none;
background: #8E49E8;
cursor: pointer;
border-radius: 3px;
opacity: 0.6;
pointer-events: none;
transition: all 0.3s ease;
}
.inputField button:hover,
.footer button:hover{
background: #721ce3;
}
.inputField button.active{
opacity: 1;
pointer-events: auto;
}
.wrapper .todoList{
max-height: 250px;
overflow-y: auto;
}
.todoList li{
position: relative;
list-style: none;
height: 45px;
line-height: 45px;
margin-bottom: 8px;
background: #f2f2f2;
border-radius: 3px;
padding: 0 15px;
cursor: default;
overflow: hidden;
}
.todoList li .icon{
position: absolute;
right: -45px;
background: #e74c3c;
width: 45px;
text-align: center;
color: #fff;
border-radius: 0 3px 3px 0;
cursor: pointer;
transition: all 0.2s ease;
}
.todoList li:hover .icon{
right: 0px;
}
.wrapper .footer{
display: flex;
width: 100%;
margin-top: 20px;
align-items: center;
justify-content: space-between;
}
.footer button{
padding: 6px 10px;
border-radius: 3px;
border: none;
outline: none;
color: #fff;
font-weight: 400;
font-size: 16px;
margin-left: 5px;
background: #8E49E8;
cursor: pointer;
user-select: none;
opacity: 0.6;
pointer-events: none;
transition: all 0.3s ease;
}
.footer button.active{
opacity: 1;
pointer-events: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To Do App</title>
<link rel="stylesheet" href="todo.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
<div class="wrapper">
<header>Support Tickets</header>
<div class="inputField" >
<input type="text" placeholder="Users Name" required>
<input type="email" placeholder="Users Email" required>
<input type="text" placeholder="Date" required>
<button><i class="fas fa-plus"></i></button>
</div>
<ul class="todoList">
<!-- data are comes from local storage -->
</ul>
<div class="footer">
<span>You have <span class="pendingTasks"></span> pending tasks</span>
<button>Clear All</button>
</div>
</div>
<script src="todo.js"></script>
</body>
</html>
First of all you never used the value of email and date and hence only the name was being displayed.
I made a few changes to your listArray structure and made it an object, something like this
let userEnteredValue = {
name: inputBox.value,
email: email.value,
date: date.value
};
for better understanding and code readability.
Then I made a few changes to your css to to display it in a line.
Also i added a button in place of trash can icon because, I don't have bootstrap but you can replace the button with the icon again
const inputBox = document.querySelector(".inputField input");
const email = document.querySelector("#email");
const date = document.querySelector("#date");
const addBtn = document.querySelector(".inputField button");
const todoList = document.querySelector(".todoList");
const deleteAllBtn = document.querySelector(".footer button");
// onkeyup event
inputBox.onkeyup = () => {
let userEnteredValue = inputBox.value; //getting user entered value
if (userEnteredValue.trim() != 0) {
//if the user value isn't only spaces
addBtn.classList.add("active"); //active the add button
} else {
addBtn.classList.remove("active"); //unactive the add button
}
};
showTasks(); //calling showTask function
addBtn.onclick = () => {
//when user click on plus icon button
let userEnteredValue = {
name: inputBox.value,
email: email.value,
date: date.value,
}; //getting input field value
console.log(userEnteredValue);
let getLocalStorageData = localStorage.getItem("New Todo"); //getting localstorage
if (getLocalStorageData == null) {
//if localstorage has no data
listArray = []; //create a blank array
} else {
listArray = JSON.parse(getLocalStorageData); //transforming json string into a js object
}
listArray.push(userEnteredValue); //pushing or adding new value in array
localStorage.setItem("New Todo", JSON.stringify(listArray)); //transforming js object into a json string
showTasks(); //calling showTask function
addBtn.classList.remove("active"); //unactive the add button once the task added
};
function showTasks() {
todoList.innerHTML = "";
let getLocalStorageData = localStorage.getItem("New Todo");
if (getLocalStorageData == null) {
listArray = [];
} else {
listArray = JSON.parse(getLocalStorageData);
}
const pendingTasksNumb = document.querySelector(".pendingTasks");
pendingTasksNumb.textContent = listArray.length; //passing the array length in pendingtask
if (listArray.length > 0) {
//if array length is greater than 0
deleteAllBtn.classList.add("active"); //active the delete button
} else {
deleteAllBtn.classList.remove("active"); //unactive the delete button
}
// console.log(listArray);
listArray.forEach((element, index) => {
let newLiTag = "";
newLiTag = `<li>${element.name} ${element.email} ${element.date}<span class="icon" onclick="deleteTask(${index})"><button>Delete</button></span></li><br>`;
todoList.insertAdjacentHTML("afterbegin", newLiTag); //adding new li tag inside ul tag
});
// console.log(newLiTag);
inputBox.value = "";
email.value = "";
date.value = ""; //once task added leave the input field blank
}
// delete task function
function deleteTask(index) {
let getLocalStorageData = localStorage.getItem("New Todo");
listArray = JSON.parse(getLocalStorageData);
console.log(listArray);
listArray.splice(index, 1); //delete or remove the li
localStorage.setItem("New Todo", JSON.stringify(listArray));
showTasks(); //call the showTasks function
}
// delete all tasks function
deleteAllBtn.onclick = () => {
todoList.innerHTML = "";
listArray = []; //empty the array
localStorage.setItem("New Todo", JSON.stringify(listArray)); //set the item in localstorage
showTasks(); //call the showTasks function
};
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
::selection {
color: #ffff;
background: rgb(142, 73, 232);
}
body {
width: 100%;
height: 100vh;
/* overflow: hidden; */
padding: 10px;
background: linear-gradient(to bottom, #68eacc 0%, #497be8 100%);
}
.wrapper {
background: #fff;
max-width: 1200px;
width: 100%;
margin: 120px auto;
padding: 25px;
border-radius: 5px;
box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.1);
}
.wrapper header {
font-size: 30px;
font-weight: 600;
}
.wrapper .inputField {
margin: 20px 0;
width: 100%;
display: flex;
height: 45px;
}
.inputField input {
width: 85%;
height: 100%;
outline: none;
border-radius: 3px;
border: 1px solid #ccc;
font-size: 17px;
padding-left: 15px;
transition: all 0.3s ease;
}
.inputField input:focus {
border-color: #8e49e8;
}
.inputField button {
width: 100px;
height: 100%;
border: none;
color: #fff;
margin-left: 5px;
font-size: 21px;
outline: none;
background: #8e49e8;
cursor: pointer;
border-radius: 3px;
opacity: 0.6;
pointer-events: none;
transition: all 0.3s ease;
}
.inputField button:hover,
.footer button:hover {
background: #721ce3;
}
.inputField button.active {
opacity: 1;
pointer-events: auto;
}
.wrapper .todoList {
max-height: 250px;
overflow-y: auto;
}
.todoList li {
position: relative;
list-style: none;
height: 45px;
line-height: 45px;
margin-bottom: 8px;
background: #f2f2f2;
border-radius: 3px;
padding: 0 15px;
cursor: default;
overflow: hidden;
}
.todoList li .icon {
position: absolute;
right: -45px;
background: #e74c3c;
width: 45px;
text-align: center;
color: #fff;
border-radius: 0 3px 3px 0;
cursor: pointer;
transition: all 0.2s ease;
}
.todoList li:hover .icon {
right: 20px;
}
.wrapper .footer {
display: flex;
width: 100%;
margin-top: 20px;
align-items: center;
justify-content: space-between;
}
.footer button {
padding: 6px 10px;
border-radius: 3px;
border: none;
outline: none;
color: #fff;
font-weight: 400;
font-size: 16px;
margin-left: 5px;
background: #8e49e8;
cursor: pointer;
user-select: none;
opacity: 0.6;
pointer-events: none;
transition: all 0.3s ease;
}
.footer button.active {
opacity: 1;
pointer-events: auto;
}
.todoList li {
font-size: 25px;
width: 100%;
display: block;
word-spacing: 250px;
}
<div class="wrapper">
<header>Support Tickets</header>
<div class="inputField">
<input type="text" id="name" placeholder="Users Name" required />
<input type="email" id="email" placeholder="Users Email" required />
<input type="text" id="date" placeholder="Date" required />
<button><i class="fas fa-plus"></i></button>
</div>
<ul class="todoList">
<!-- data are comes from local storage -->
</ul>
<div class="footer">
<span>You have <span class="pendingTasks"></span> pending tasks</span>
<button>Clear All</button>
</div>
</div>
Since localStorage won't run in this snippet below is a output screenshot
Now,everyting works just as you want them to!!
Also your code, which I edited needs a lot of refactoring for better readability and efficiency.....
I've just started doing some web dev on my own and trying to experiment with the basic HTML,CSS and JS. I'm trying to make search bar with changes color on hovering but after one click it does not changes its color. I have uploaded my code on CodePen. Need some guidance, thank you!
https://codepen.io/Usmaneeyy/pen/PoPwqgm
This is my HTML code for the SearchBar i want to create:
<body>
<div class="topBar">
<div id="logo">
<img src="images/logo.png" style="height: 40px;">
</div>
<div id="searchBar">
<input id="textBar" placeholder="Search.." onclick="expand();" type="text" name="searchedItem" onblur="reset();">
</div>
</div>
This is the CSS Code:
body {
margin: 0;
padding: 0;
background-color: white;
font-family: "Poppins", sans-serif;
}
body::-webkit-scrollbar {
width: 0.25rem;
}
body::-webkit-scrollbar-track {
background: white;
}
body::-webkit-scrollbar-thumb {
background: rgb(100, 100, 100);
}
.topBar {
background-color: black;
height: 41px;
width: auto;
text-align: center;
}
#logo {
float: left;
padding-left: 5px;
}
#searchBar input {
padding: 6px;
margin-top: 2px;
margin-right: 140px;
background-color: black;
font-size: 18px;
color: black;
/*border: none;*/
cursor: pointer;
border-radius: 10px;
border: 2px solid white;
width: 150px;
transition: width 0.5s;
}
#searchBar input:hover {
background-color: white;
}
And this is my JS code:
function expand() {
var x = document.getElementById("textBar");
x.style.backgroundColor = "white";
x.style.width = "300px";
x.style.borderRadius = "10px";
x.style.outline = "none";
}
function reset() {
var x = document.getElementById("textBar");
x.value = "";
x.style.width = "150px";
x.style.backgroundColor = "black";
x.style.borderRadius = "10px";
x.style.outline = "none";
}