appendChild does not work on shop website - javascript

i was making a website with a function to add products on the homepage. The user entered the name, price and description of the product. but when publishing this product on the homepage, he does not appear. All the code works, except for appendChild()
first html file:
<!DOCTYPE html>
<html lang="pt-br">
<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>Loja</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/f2a567fbc9.js" crossorigin="anonymous"></script>
<script src="scripts.js"defer ></script>
</head>
<body>
<header>
<h1>Loja TemDeTudo</h1>
<ul class="list">
<li><i class="fa-solid fa-plus"></i></li>
<!--<i class="fa-solid fa-xmark"></i>-->
</ul>
</header>
<main class="posts">
<ul class="produtos">
</ul>
</main>
</body>
</html>
second html file:
<!DOCTYPE html>
<html lang="pt-br">
<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>Loja</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/f2a567fbc9.js" crossorigin="anonymous"></script>
<script src="scripts.js" defer></script>
</head>
<body>
<header>
<h1>Loja TemDeTudo</h1>
<ul class="list">
<li><i class="fa-solid fa-xmark"></i></li>
</ul>
</header>
<main class="criaposts">
<input id="nome" type="text" name="" id="" placeholder="nome do produto"><br>
<input id="price" type="number" name="" id="" placeholder="preço em R$"><br>
<textarea name="" id="descrição" cols="30" rows="10" placeholder="descrição do produto"></textarea><br>
<button class="cancel">cancelar</button>
<button class="confirm" id="add">confirmar</button>
</main>
</body>
</html>
css file:
* {
padding:0;
margin: 0;
font-family: sans-serif;
}
header {
display: flex;
padding: 30px;
background-color: purple;
color: whitesmoke;
}
.list {
margin-left: 60%;
font-size: 40px;
list-style-type: none;
color: rgb(255, 255, 177);
transition-duration: .6s;
cursor: pointer;
}
.list:hover {
color:purple;
background-color: rgb(255, 255, 177);
padding: 1rem;
border-radius: 20px;
}
a {
color: inherit;
}
textarea {
resize: none;
margin-top: 1.3rem;
font-size: 20px;
padding: 1rem;
outline: none;
border-radius: 1rem;
border-color: black;
}
.criaposts {
margin-top: 50px;
text-align: center;
position: absolute;
width:100%;
}
input {
font-size: 22px;
border: none;
margin-top: 1.1em;
width: 25%;
outline: none;
padding: .3em;
}
textarea:focus {
border-color: black;
}
button {
margin-top: 20px;
margin: 20px;
font-size: 1.4em;
padding: 1rem;
border-radius: 1rem;
border: none;
cursor: pointer;
color: whitesmoke;
transition-duration: .3s;
}
.confirm {
background-color: rgb(9, 255, 0);
}
.cancel {
background-color: crimson;
}
.cancel:hover , .confirm:hover {
opacity: .8;
font-size: 1.3em;
}
.posts {
margin-top: 3em;
margin-left: 8rem;
}
.produtos {
display: flex;
list-style: none;
}
.detalhes {
margin-top: 5em;
}
p {
margin-top: 1em;
color: rgb(31, 31, 31);
opacity: .95;
}
.produtosPub {
transition-duration: .2s;
padding: 1rem;
width: 15%;
}
.produtosPub:hover {
opacity: .8;
cursor: pointer;
}
js file:
const add = document.querySelector("#add");
const posts = document.querySelector(".posts");
const ancora = document.querySelector("#ancora");
const produtos = document.querySelector(".produtos")
add.addEventListener("click" , () => {
const nomeProdu = document.querySelector("#nome").value;
const price = document.querySelector("#price").value;
const descriçao = document.querySelector("#descrição").value;
if(nomeProdu.length > 25) {
alert("o nome está muito grande");
ancora.removeAttribute("href");
nomeProdu = "";
}
else if(!nomeProdu || !price || !descriçao) {
ancora.removeAttribute("href");
alert("Esta faltando informações do produto");
nomeProdu = "";
price = "";
descriçao = "";
}
else {
ancora.setAttribute("href","index.html");
const lista = document.createElement("li");
lista.classList.add("produtosPub");
lista.innerHTML = `<h2>${nomeProdu}</h2>
<div class="detalhes">
<h2>
R$: ${price}
</h2>
<p>
${descriçao}
</p>
</div>`
produtos.appendChild(lista)
}
})
i don't know why this is happening.
I've already tried changing the appendChild() to the innerHTML and it keep going wrong

Based on your JS code, you don't wait for the page to load fully before running querySelector queries. This could lead to produtos equal to undefined.
Please check the browser's console for errors to check this theory.
Ideally, you should run any JS code after this event is triggered
window.addEventListener('DOMContentLoaded', (event) => {
// your JS initialization code here
});
This will ensure that all the components on the page are created and ready to be accessed via querySelector.
Please let me know if this helps.

Related

Displaying Text When Clicked

In this project, my aim is to change emoji when I click and also I want "it wasn't funny bro" text to show up when I click to the emoji. When I click to the emoji it changes, but the text does not show up. I followed the same steps, it works for emojis but doesn't work for text. I could not figure out why it's not working.
My code looks like this:
const beginningFace = document.querySelector(".beginning");
const reactionFace = document.querySelector(".reaction");
const beginningText = document.querySelector(".beginningT");
const reactionTextFirst = document.querySelector(".reactionT-first");
const reactionTextSecond = document.querySelector(".reactionT-second");
beginningFace.addEventListener('click',()=>{
if(reactionFace.classList.contains('reaction')){
reactionFace.classList.add('active');
beginningFace.classList.remove('active');
}
});
beginningText.addEventListener('click',()=>{
if(reactionTextFirst.classList.contains('reactionT-first') && reactionTextSecond.classList.contains('reactionT-second')){
reactionTextFirst.classList.add('active');
reactionTextSecond.classList.add('active');
beginningFace.classList.remove('active');
}
});
#import url('https://fonts.googleapis.com/css2?family=Mr+Dafoe&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Exo:wght#900&display=swap');
body, html {
width: 100%;
height: 100%;
margin: 0;
overflow: hidden;
background-color: #202076;
}
body {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
perspective: 700px;
}
.beginningT {
display: none;
}
.reactionT-first {
display:none;
position: relative;
font-family: 'Exo';
font-size: 5em;
margin: 0;
transform: skew(-15deg);
letter-spacing: 0.03em;
}
.reactionT-second{
display: none;
font-family: 'Mr Dafoe';
margin: 0;
font-size: 5.5em;
margin-top: -0.6em;
color: white;
text-shadow: 0 0 0.05em #fff, 0 0 0.2em #fe05e1, 0 0 0.3em #fe05e1;
transform: rotate(-7deg);
}
.emoji{
font-size: 18rem;
cursor: pointer;
user-select: none;
}
.beginning{
display: none;
}
.reaction{
display: none;
}
.active{
display: block;
}
<!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>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="emoji beginning active">😃</div>
<div class="emoji reaction">😐</div>
<div class ="text beginningT active" style="font-size: 2rem; font-style: italic; font-family: Verdana, Geneva, Tahoma, sans-serif; color: #F98299;">My reaction after your joke↑ (click to see it!)</div>
<div class="text reactionT-first">IT WASN'T</div>
<div class="text reactionT-second">FUNNY BRO</div>
<script src="app.js"></script>
</body>
</html>
If you want your other text to show up when you click on the emoji, you have to do all the logic inside beginningFace.addEventListener, instead of using two diffent event listeners. I moved the logic, and removed the second click listener.
These lines were missing in the first click listener
reactionTextFirst.classList.add('active');
reactionTextSecond.classList.add('active');
beginningText.classList.remove('active');
const beginningFace = document.querySelector(".beginning");
const reactionFace = document.querySelector(".reaction");
const beginningText = document.querySelector(".beginningT");
const reactionTextFirst = document.querySelector(".reactionT-first");
const reactionTextSecond = document.querySelector(".reactionT-second");
beginningFace.addEventListener('click',()=>{
if(reactionFace.classList.contains('reaction')){
reactionFace.classList.add('active');
beginningFace.classList.remove('active');
reactionTextFirst.classList.add('active');
reactionTextSecond.classList.add('active');
beginningText.classList.remove('active');
}
});
#import url('https://fonts.googleapis.com/css2?family=Mr+Dafoe&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Exo:wght#900&display=swap');
body, html {
width: 100%;
height: 100%;
margin: 0;
overflow: hidden;
background-color: #202076;
}
body {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
perspective: 700px;
}
.beginningT {
display: none;
}
.reactionT-first {
display:none;
position: relative;
font-family: 'Exo';
font-size: 5em;
margin: 0;
transform: skew(-15deg);
letter-spacing: 0.03em;
}
.reactionT-second{
display: none;
font-family: 'Mr Dafoe';
margin: 0;
font-size: 5.5em;
margin-top: -0.6em;
color: white;
text-shadow: 0 0 0.05em #fff, 0 0 0.2em #fe05e1, 0 0 0.3em #fe05e1;
transform: rotate(-7deg);
}
.emoji{
font-size: 18rem;
cursor: pointer;
user-select: none;
}
.beginning{
display: none;
}
.reaction{
display: none;
}
.active{
display: block;
}
<!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>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="emoji beginning active">😃</div>
<div class="emoji reaction">😐</div>
<div class ="text beginningT active" style="font-size: 2rem; font-style: italic; font-family: Verdana, Geneva, Tahoma, sans-serif; color: #F98299;">My reaction after your joke↑ (click to see it!)</div>
<div class="text reactionT-first">IT WASN'T</div>
<div class="text reactionT-second">FUNNY BRO</div>
<script src="app.js"></script>
</body>
</html>

Make Selected part of text Bold/Unbold with JavaScript

When writing something in “input” it’s real-time visible in div. It’s necessary that when B button is pressed the selected text in div turns bold and then it becomes unbold when pressed again. But I don't need any library or framework. I need to use only JavaScript. I tried getSelection methods and execCommand but they did not help․
const textArea = document.getElementById("textArea");
const input = document.getElementById("input");
const bold = document.getElementById("bold");
let span = document.createElement("span");
input.addEventListener("input", e => {
span.textContent = e.target.value;
textArea.appendChild(span);
});
#textArea {
width: 360px;
height: 350px;
padding: 5px;
font-size: 15pt;
word-wrap: break-word;
overflow: scroll;
border: 2px solid #ccc;
}
button {
width: 150px;
height: 50px;
border: none;
cursor: pointer;
}
.inputDiv {
margin-top: 5px;
}
#input {
width: 370px;
height: 50px;
border: none;
outline: none;
background-color: #ccc;
font-size: 15pt;
}
#workspace button {
width: 50px;
margin: 5px auto;
background-color: #d9d9d9;
}
#workspace button:hover {
width: 50px;
margin: 5px auto;
background-color: #999999;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="myDiv">
<div id="workspace">
<button id="bold">B</button>
<div id="textArea"></div>
</div>
<div class="inputDiv">
<input type="text" name="text" id="input" placeholder="type something...">
</div>
</div>
<script src="script.js"></script>
</body>
</html>

How can I get this scroll Event working? JavaScript with no framework

I`m trying to add an scroll event listener in JavaScript based on this: https://github.com/Godsont/Animated-Sticky-Header.
But for some reason it isn´t working, when I scroll nothing happens. Can anyone help me pls? I´m new to JavaScript so I want to keep things as simple as possible.
I´m using Google Chrome btw.
I want to add an event on the id = "mainHeader" from Header. When the user scrolls down I want the background to change color, the logo img and the itens from the ul to get a little bit smaller. I also want the height from the header to get a little smaller. (the changes that I want are in the css and have ".is-crolling").
Thanks!
window.addEventListener("scroll", scrollHeader() );
function scrollHeader() {
var mainHeader = document.getElementByID("mainHeader");
if (window.pageYOffset > 0) {
mainHeader.classList.add("is-scrolling");
} else {
mainHeader.classList.remove("is-scrolling");
}
};
#mainHeader {
background-color: white;
position: fixed;
width: 100%;
height: 80px;
z-index: 3;
transition: background 0.4s;
}
#mainHeader.is-scrolling {
background: #333;
}
#mainHeader.is-scrolling a {
color: #eee;
font-size: 13px;
}
#mainHeader.is-scrolling .header-logo img {
width: 60px;
height: 40px;
border-radius: 5px;
}
.page-logo-nav {
margin: 15px 115px 15px 115px;
}
.header-logo img {
float: left;
width: 70px;
height: 50px;
transition: height 0.4s;
}
.header-nav {
float: right;
height: 50px;
display: flex;
align-items: center;
}
.header-nav li {
display: inline;
}
.header-nav .list-1:after {
content: "★";
}
.header-nav a {
color: black;
padding: 20px;
text-decoration: none;
font-weight: 900;
font-size: 15px;
transition: font-size 0.4s;
}
.header-nav a:hover {
color: #6ebbd3;
border-top: 1px solid #266a7e;
border-bottom: 1px solid #266a7e;
transition: 0.3s;
}
<!DOCTYPE html>
<html>
<head>
<title>Stuff</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Anton%7CMontserrat%7COpen+Sans%3A300%2C300i%2C400%2C400i%2C600%2C600i%2C700%2C700i%2C800%2C800i%7CPT+Sans%3A400%2C700&ver=4.0.31" type="text/css" media="all">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script src="JS/main.js"></script>
</head>
<body>
<header id="mainHeader">
<div class="page-logo-nav">
<div class="header-logo">
<a href="index.html">
<img src="img/logo.jpg">
</a>
</div>
<div class="header-nav">
<nav>
<ul>
<li class="list-1">SOBRE</li>
<li class="list-2">CONTACTOS</li>
</ul>
</nav>
</div>
</div>
</header>
</body>
</html>

CSS styling space between tags

I want to make input tag(currently height=0) popup when I press the plus button,and remove it when I press it again.
How can I remove the gap between the "to do list" div and "dfsdfs" li without removing any html tags?
If I remove the input tag id = "searchBox" (currently height = 0) the problem get solved, but I need the input tag.
Just cant find the problem why I cant fit them whithout any space.
$("ul").on("click","span",function (){
$(this).parent().fadeOut(500,function () {
$(this).remove();
});
})
$("ul").on("click","li",function (){
$(this).toggleClass("lineThrough");
})
$("#plusBtn").on("click",function(){
})
$("#searchBox").on("keypress",function(k){
if(k.which == 13){
var newTodo = $("#searchBox").val();
var newTodo = "<li><span><i class='far fa-trash-alt'></i></span>"+newTodo+"</li>"
if($("#searchBox").val() != ""){
$("#toDos").append(newTodo);
$(this).val("");
}
}
})
body{
background-image:linear-gradient(to right, #076585 ,#fff); ;
}
#table{
width: 350px;
margin: 100px auto;
box-shadow: 5px 5px 20px #79777767;
}
#todoTitle{
background: rgb(88, 88, 214);
height: 45px;
line-height: 50px;
padding-left: 10px;
color: whitesmoke;
font-size: 25px;
}
#plusBtn{
background: transparent;
border: 0;
color: white;
font-weight: bold;
font-size: 45px;
float: right;
line-height: 45px;
outline: none;
}
#searchBox{
width: 100%;
border: 0;
padding: 0;
height: 0;
font-size: 20px;
padding-left: 10px;
color: gray;
box-sizing: border-box;
}
#toDos{
list-style-type: none;
padding: 0;
margin: 0;
}
li{
padding: 0;
width: 100%;
background: rgb(240, 240, 240);
box-sizing: border-box;
height: 45px;
line-height: 45px;
font-size: 25px;
color: gray;
}
li:nth-child(2n){
background: white;
}
.lineThrough{
text-decoration: line-through;
color: rgb(182, 179, 179);
}
span{
text-align: center;
color: white;
width: 0;
height: 45px;
display: inline-block;
background: rgb(248, 46, 46);
margin-right:12px;
border: 0;
opacity: 0;
}
li:hover span{
width: 45px;
transition:.2s linear ;
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>TO DO LIST</title>
<link rel="stylesheet" type="text/css" href="tdl_css.css">
<script type = "text/javascript" src="jquery-3.4.1.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Gupter&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300i&display=swap" rel="stylesheet">
<link rel = "stylesheet" type ="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">
</head>
<body>
<div id = "table">
<div id = "todoTitle">TO-DO LIST
<button id= "plusBtn">+</button>
</div>
<input type="text" id = "searchBox" placeholder="Add New Todo"></input>
<ul id="toDos">
<li>dsfsdfs</li>
</ul>
</div>
<script type = "text/javascript" src="tdl_js.js"></script>
</body>
</html>
Instead of setting the input's width or height to 0, use display: none to remove it from the layout flow entirely.
Have you tried executing a script to manipulate the display:
if( element.style.display === 'block') {
document.getElementById("searchBox").style.display = 'none';
}
else {
document.getElementById("searchBox").style.display = 'block';
}

How do I make my text input start at the top of the laptop-image screen

This is a 'To-Do List' project that I want to include in my portfolio. The text typed into the box starts at the bottom and keeps putting every additional 'to-do' text under the last one so it isn't legible. I'd like for the text to start at the top of the laptop screen that is on the page. Please click the link and enter any text twice and you will see my error.
https://nicoleirene.github.io/js-exercise-2/
My code is below.
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
<title>JS Exercise 2</title>
</head>
<body>
<h1>Lets Do This</h1>
<form>
<label for="user-input" >Type your to do:</label>
<div class="wrapper">
<input type="text" name="user-input" id="user-input" placeholder="Enter To Do!">
<button type="submit" id="user-submit">Add To Do!</button>
</div>
</form>
<ul id="to-do-list" class="to-do-list">
</ul>
<!-- Make sure script is loaded at the bottom-->
<script src="js/app.js"></script>
</body>
</html>
JS
var userSubmit = document.querySelector('#user-submit');
var toDoList = document.querySelector('#to-do-list');
function addToDo(event){
event.preventDefault();
var userInput = document.querySelector('#user-input');
if(userInput.value === ''){
return false;
}
toDoList.innerHTML = '<li><i class="fa fa-window-close close-to-do" aria-hidden="true"></i>' + userInput.value + '</li>' + toDoList.innerHTML;
userInput.value = '';
}
function removeToDo(event){
if(event.target.classList.contains('close-to-do')) {
var li = event.target.parentElement;
toDoList.removeChild(li);
}
}
toDoList.addEventListener('click', removeToDo, false);
userSubmit.addEventListener('click', addToDo, false);
CSS
#import url('https://fonts.googleapis.com/css?family=Raleway');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body{
font-family: 'Raleway', sans-serif;
background-color: #FFF;
background-image: url("../images/pixel-open-front.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
color: #000;
}
h1{
text-align: center;
padding:;
background-color: blue;
color:#FFF;
}
label{
display: block;
margin:right;
text-align: center;
background-color: red;
color:white;
}
input{
/*display:block;
margin:auto;*/
}
.wrapper{
text-align: center;
}
button{
color:white;
background-color:red;
border:none;
padding: 5px;
margin-top: 5px;
}
ul{
text-align: center;
padding: 300px;
list-style: none;
color:red;
}
.close-to-do{
display: inline-block;
margin-right: 10px;
}
I would set it up differently. Padding may cause problems with different screen sizes. Below I put the laptop as the background for the list.
var userSubmit = document.querySelector('#user-submit');
var toDoList = document.querySelector('#to-do-list');
function addToDo(event) {
event.preventDefault();
var userInput = document.querySelector('#user-input');
if (userInput.value === '') {
return false;
}
toDoList.innerHTML = '<li><i class="fa fa-window-close close-to-do" aria-hidden="true"></i>' + userInput.value + '</li>' + toDoList.innerHTML;
userInput.value = '';
}
function removeToDo(event) {
if (event.target.classList.contains('close-to-do')) {
var li = event.target.parentElement;
toDoList.removeChild(li);
}
}
toDoList.addEventListener('click', removeToDo, false);
userSubmit.addEventListener('click', addToDo, false);
#import url('https://fonts.googleapis.com/css?family=Raleway');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Raleway', sans-serif;
background-color: #FFF;
color: #000;
}
h1 {
text-align: center;
padding: ;
background-color: blue;
color: #FFF;
}
label {
display: block;
margin: right;
text-align: center;
background-color: red;
color: white;
}
input {
/*display:block;
margin:auto;*/
}
.wrapper {
text-align: center;
}
button {
color: white;
background-color: red;
border: none;
padding: 5px;
margin-top: 5px;
}
ul {
text-align: center;
padding-top: 100px; /* same as top background */
list-style: none;
color: red;
}
ul:before {
content: url(https://nicoleirene.github.io/js-exercise-2/images/pixel-open-front.png);
position: absolute;
top: 100px; /* same as padding top */
left: 80px;
}
.close-to-do {
display: inline-block;
margin-right: 10px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<h1>Lets Do This</h1>
<form>
<label for="user-input">Type your to do:</label>
<div class="wrapper">
<input type="text" name="user-input" id="user-input" placeholder="Enter To Do!">
<button type="submit" id="user-submit">Add To Do!</button>
</div>
</form>
<ul id="to-do-list" class="to-do-list"></ul>
As mentioned in my comments, padding on Ul element is causing it to display at the middle of the screen.
Adjust padding to fix your issue.
For responsive design , please use media queries to display text properly

Categories

Resources