Font Awesome icons don't align

Font Awesome icons don't align - javascript

Hey I have a problem with aligning my FA icons to buttons. I don't know why this happens I've been roughly following a tutorial and doing some stuff that I'm capable of figuring out on my own but I can't seem to find a solution for my problem.
This is what it does
Here is my HTML
<!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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" integrity="sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=" crossorigin="anonymous" />
<link href="./style.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap" rel="stylesheet">
<title>To Do List</title>
</head>
<body>
<head>
<h1>To Do List</h1>
</head>
<form>
<input type="text" class="todo-input">
<button class="todo-button">
<i class="fas fa-plus-square"></i>
</button>
</form>
<div class="todo-container">
<ul class="todo-list"></ul>
</div>
<script src="./app.js"></script>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
/*background-image: linear-gradient(120deg, #f6d365, #fda08f);*/
background-color: #5cdb95;
color: #0b0c0b;
font-family: "Bree Serif";
min-height: 100vh;
}
h1{
font-size: 2rem;
display: flex;
justify-content: center;
align-content: center;
}
form{
padding-top: 2rem;
display: flex;
justify-content: center;
align-content: center;
}
form input, form button{
padding: 0.5rem;
font-size: 2rem;
border: none;
background: #edf5e1;
}
form button{
color: #5cdb95;
background: #edf5e1;
cursor: pointer;
transition: all 0.3s ease;
}
form button :hover{
color: #46a771;
}
.todo-container {
display: flex;
justify-content: center;
align-items: center;
}
.todo-list {
min-width: 50%;
list-style: none;
}
.todo {
margin: 0.5rem;
background: #379683;
border-radius: 10px;
text-align: left;
padding-left: 10px;
font-size: 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.todo li{
flex: 10%;
}
.trash-btn, .complete-btn {
background: #5cdb95;
color: #edf5e1;
font-size: 1rem;
padding: 20px;
margin: 4px 2px;
height: 8px;
width: 8px;
border-radius: 50%;
border: none;
cursor: pointer;
}
.trash-btn{
color: rgb(233, 47, 78);
font-size: 2rem;
}
.trash-btn i{
vertical-align: middle;
display: inline-block;
margin-right: 15px;
}
.complete-btn{
color: steelblue;
font-size: 2rem;
}
/*
.trash-btn, .complete-btn {
background-color: #4CAF50;
border: none;
color: white;
padding: 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
border-radius: 50%;
}
.trash-btn, .complete-btn :hover{
cursor: pointer;
}
.fas fa-fa-check :hover{
cursor: pointer;
}
*/
And JS
//selectors
const todoInput = document.querySelector(".todo-input");
const todoButton = document.querySelector(".todo-button");
const todoList = document.querySelector(".todo-list");
//event listeners
todoButton.addEventListener('click', addTodo);
//functions
function addTodo(event){
//prevent form from submitting
event.preventDefault();
//todo div
const todoDiv = document.createElement("div");
todoDiv.classList.add("todo");
//create li
const newTodo = document.createElement("li");
newTodo.innerText = "hey";
newTodo.classList.add("todo-item");
todoDiv.appendChild(newTodo);
//completed button
const completedButton = document.createElement("button");
completedButton.innerHTML = '<i class="fa fa-check"></i>';
completedButton.classList.add("complete-btn");
todoDiv.appendChild(completedButton);
//trash button
const trashButton = document.createElement("button");
trashButton.innerHTML = '<i class="fa fa-minus-circle"></i>';
trashButton.classList.add("trash-btn");
todoDiv.appendChild(trashButton);
//append to list
todoList.appendChild(todoDiv);
}
It's not finished but I can't stand the way it displays the buttons.

You can you pattern position relative/absolute by
.fa-check, .fa-minus-circle{
position: absolute;
top: 5px;
left: 5px;
}
.trash-btn, .complete-btn {
background: #5cdb95;
color: #edf5e1;
font-size: 1rem;
padding: 20px;
margin: 4px 2px;
height: 8px;
width: 8px;
border-radius: 50%;
border: none;
cursor: pointer;
position: relative;
}
JSFiddle https://jsfiddle.net/viethien/zp5bv0sn/16/

Try this CSS:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
/*background-image: linear-gradient(120deg, #f6d365, #fda08f);*/
background-color: #5cdb95;
color: #0b0c0b;
font-family: "Bree Serif";
min-height: 100vh;
}
.fa {
margin-left: -16px;
margin-top: -16px;
position: absolute;
}
h1{
font-size: 2rem;
display: flex;
justify-content: center;
align-content: center;
}
form{
padding-top: 2rem;
display: flex;
justify-content: center;
align-content: center;
}
form input, form button{
padding: 0.5rem;
font-size: 2rem;
border: none;
background: #edf5e1;
}
form button{
color: #5cdb95;
background: #edf5e1;
cursor: pointer;
transition: all 0.3s ease;
}
form button :hover{
color: #46a771;
}
.todo-container {
display: flex;
justify-content: center;
align-items: center;
}
.todo-list {
min-width: 50%;
list-style: none;
}
.todo {
margin: 0.5rem;
background: #379683;
border-radius: 10px;
text-align: left;
padding-left: 10px;
font-size: 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.todo li{
flex: 10%;
}
.trash-btn, .complete-btn {
background: #5cdb95;
color: #edf5e1;
font-size: 1rem;
padding: 20px;
margin: 4px 2px;
height: 8px;
width: 8px;
border-radius: 50%;
border: none;
cursor: pointer;
}
.trash-btn{
color: rgb(233, 47, 78);
font-size: 2rem;
}
.trash-btn i{
vertical-align: middle;
display: inline-block;
margin-right: 15px;
}
.complete-btn{
color: steelblue;
font-size: 2rem;
}
/*
.trash-btn, .complete-btn {
background-color: #4CAF50;
border: none;
color: white;
padding: 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
border-radius: 50%;
}
.trash-btn, .complete-btn :hover{
cursor: pointer;
}
.fas fa-fa-check :hover{
cursor: pointer;
}
*/

The problem is with your style
.trash-btn i
And the style you added to the buttons. Find the refactored style below
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
/*background-image: linear-gradient(120deg, #f6d365, #fda08f);*/
background-color: #5cdb95;
color: #0b0c0b;
font-family: "Bree Serif";
min-height: 100vh;
}
h1 {
font-size: 2rem;
display: flex;
justify-content: center;
align-content: center;
}
form {
padding-top: 2rem;
display: flex;
justify-content: center;
align-content: center;
}
form input,
form button {
padding: 0.5rem;
font-size: 2rem;
border: none;
background: #edf5e1;
}
form button {
color: #5cdb95;
background: #edf5e1;
cursor: pointer;
transition: all 0.3s ease;
}
form button :hover {
color: #46a771;
}
.todo-container {
display: flex;
justify-content: center;
align-items: center;
}
.todo-list {
min-width: 50%;
list-style: none;
}
.todo {
margin: 0.5rem;
background: #379683;
border-radius: 10px;
text-align: left;
padding-left: 10px;
font-size: 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.todo li {
flex: 10%;
}
.trash-btn,
.complete-btn {
background: #5cdb95;
color: #edf5e1;
font-size: 1rem;
margin: 4px 2px;
height: 40px;
width: 40px;
border-radius: 50%;
border: none;
cursor: pointer;
}
.trash-btn {
color: rgb(233, 47, 78);
font-size: 2rem;
}
.complete-btn {
color: steelblue;
font-size: 2rem;
}
/*
.trash-btn, .complete-btn {
background-color: #4CAF50;
border: none;
color: white;
padding: 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
border-radius: 50%;
}
.trash-btn, .complete-btn :hover{
cursor: pointer;
}
.fas fa-fa-check :hover{
cursor: pointer;
}
*/

Related

How to encapsulate javascript with repetitive functions into reusable components?

I'm a javascript novice, and I have a problem that bothers me~
I often need to write a function to click a button to pop up a modal. The interaction logic of this function is repeated, but sometimes the UI or copywriting needs to be adjusted~
So I want to know How can such a repetitive function be packaged into a component, and other pages need to use modal-like functions in the future, which can be directly referenced and only need to change the copy without rewriting CSS / HTML / JavaScript?
// 匯出 excel 彈窗 JS
$("*[data-modal]").on("click", Modeal);
function Modeal() {
$(".excel_popup").css("display", "flex");
$("body").css("overflow", "hidden");
// 關閉彈窗
$(document).on("click", function(e) {
if (
e.target.className == "close" ||
e.target.className == "excel_popup" ||
e.target.className == "btn_confirm" ||
e.target.className == "btn_consider"
) {
$("#js-job_excel_popup").css("display", "none");
$("body").css("overflow", "auto");
}
});
}
.excel_popup {
position: fixed;
z-index: 999999999;
width: 100%;
height: 100vh;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
background-color: rgba(0, 0, 0, 0.3);
justify-content: center;
align-items: center;
display: none;
}
.excel_popup .excel_close_wrap {
width: 360px;
background-color: #fff;
padding: 16px 24px;
border-radius: 8px;
margin: 0 8px;
}
.excel_popup .excel_close_wrap header {
position: relative;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
border-bottom: 1px solid #222;
padding-bottom: 16px;
}
.excel_popup .excel_close_wrap header h2 {
font-size: 18px;
line-height: 1.5;
font-weight: 500;
text-align: center;
}
.excel_popup .excel_close_wrap header .close {
position: absolute;
right: 0;
display: inline-block;
width: 20px;
height: 20px;
background-repeat: no-repeat;
background-size: contain;
cursor: pointer;
}
.excel_popup .excel_close_wrap .txt {
font-size: 16px;
font-weight: 400;
line-height: 1.5;
text-align: center;
padding: 32px 0px;
color: #222;
}
.excel_popup .excel_close_wrap .btn_group {
display: flex;
justify-content: space-between;
font-size: 14px;
line-height: 1.5;
letter-spacing: 0.15px;
}
.excel_popup .excel_close_wrap .btn_group .btn_consider {
width: 132px;
text-align: center;
padding: 8px;
border-radius: 4px;
border: 1px solid #222;
margin-right: 4px;
cursor: pointer;
}
.excel_popup .excel_close_wrap .btn_group .btn_consider:hover {
border: 1px solid #222;
}
.excel_popup .excel_close_wrap .btn_group .btn_confirm {
width: 132px;
text-align: center;
padding: 8px;
border-radius: 4px;
border: 1px solid #222;
background-color: #222;
margin-left: 4px;
cursor: pointer;
color: #fff;
}
.excel_popup .excel_close_wrap .btn_group .btn_confirm:hover {
background-color: yellow;
border: 1px solid #222;
color: #222;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="excel_export" id="js-excel_export" href="javascript:;" data-modal="js-job_excel_popup">
<figure></figure>
<p>Click the popup</p>
</a>
<div class="excel_popup" id="js-job_excel_popup">
<div class="excel_close_wrap">
<header>
<h2>TITLE</h2>
<div class="close" id="js-close"></div>
</header>
<p class="txt">Hello World!!!</p>
<div class="btn_group">
<a class="btn_consider">Cancel</a>
<a class="btn_confirm">Send</a>
</div>
</div>
</div>

Simple editor able to replace special caracters

I've been working in a small text editor. Every content I typed on my id=content with any ^ should be replaced for nothing (^ for ''). Let's say I'm typed good ^night when I clicked on the ^ button at the top left of my editor should return just good night. I tried to organize it as best as possible to make my question clear. I'm just starting to code and I'm recently starting to browse and participate in forums. I added my stylesheet along with my code. Thanks for all the help in advance.
<!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>AT - Text Editor</title>
</head>
<body>
<div class="container">
<div class="toolbar">
<div class="btn-toolbar">
<button onclick = "escapeRegExp">^</button>
</div>
</div>
<div id="content" contenteditable="true" spellcheck="false">
</div>
</div>
</body>
</html>
My function
<script>
function escapeRegExp() {
return content.replace(^, '');
}
</script>
My style.css
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300;400;500;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background: #ddd;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
li {
margin-left: 16px;
}
a {
cursor: pointer;
}
.container {
max-width: 991px;
width: 100%;
background: #fff;
border-radius: 8px;
overflow: hidden;
}
.toolbar {
padding: 16px;
background: #eee;
}
.toolbar .head {
display: flex;
grid-gap: 10px;
margin-bottom: 16px;
flex-wrap: wrap;
}
.toolbar .head > input {
max-width: 100px;
padding: 6px 10px;
border-radius: 6px;
border: 2px solid #ddd;
outline: none;
}
.toolbar .head select {
background: #fff;
border: 2px solid #ddd;
border-radius: 6px;
outline: none;
cursor: pointer;
}
.toolbar .head .color {
background: #fff;
border: 2px solid #ddd;
border-radius: 6px;
outline: none;
cursor: pointer;
display: flex;
align-items: center;
grid-gap: 6px;
padding: 0 10px;
}
.toolbar .head .color span {
font-size: 14px;
}
.toolbar .head .color input {
border: none;
padding: 0;
width: 26px;
height: 26px;
background: #fff;
cursor: pointer;
}
.toolbar .head .color input::-moz-color-swatch {
width: 20px;
height: 20px;
border: none;
border-radius: 50%;
}
.toolbar .btn-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
grid-gap: 10px;
}
.toolbar .btn-toolbar button {
background: #fff;
border: 2px solid #ddd;
border-radius: 6px;
cursor: pointer;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
.toolbar .btn-toolbar button:hover {
background: #f3f3f3;
}
#content {
padding: 16px;
outline: none;
max-height: 50vh;
overflow: auto;
}
#show-code[data-active="true"] {
background: #eee;
}

It seems this is only for "^" which would mean you could use
content.replaceAll('^', '');
Unless I misunderstood the question.

Why are my results displaying the way they are after I delete my typed input

I am trying to figure out why my list of results is looking the way it does after I clear my input field, It seems an extra list item with a comma as its value is being to my list of search results. When I clear my input field, I would like My search results to display the way they do when the user first opens the modal
let results = document.querySelector(".result-list")
let listItems = results.getElementsByTagName('li')
$('button').click(function() {
$('#school-popup-modal').attr('style', 'display:flex')
$('#select-buttons').attr('style', 'display:none')
})
$('#cancel-btn').click(function(e) {
$('#school-popup-modal').attr('style', 'display:none')
$('#select-buttons').attr('style', 'display:flex')
$('li').attr('style', 'display:flex')
$("#search-input").val("")
$("#undo").attr('style', 'display:none')
})
let dummyData = [{
name: 'gables',
id: 111
}, {
name: 'palmetto',
id: 222
}, {
name: 'southwest',
id: 333
}, {
name: 'killian',
id: 444
}]
dummyData.forEach((school) => {
let schoolName = school.name
$('.result-list').append(`
<ul><li id="list-item">${schoolName}</li><ul>
`)
})
$('li').click(function(e) {
let elem = e.target
$("#undo").attr('style', 'display:inline')
$("#search-input").val($(elem).text())
$('li').attr('style', 'display:none')
$('#school-popup-content').attr('style', 'padding-bottom:20px')
})
// $('#search-input').keyup(function(){
// let schoolsArr = []
// const searchString = $("#search-input").val().toLowerCase()
// dummyData.forEach((school)=>{
// schoolsArr.push(school.name)
// })
// for(let school of schoolsArr){
// if(school.includes(searchString)){
// results.innerHTML = `<ul><li>${school}</li></ul>`
// }
// else if(searchString === "") {
// console.log('empty')
// }
// }
// })
document.querySelector("#search-input").addEventListener("keyup", (e) => {
const searchString = e.target.value.toLowerCase()
const filteredSchools = dummyData.filter((school) => {
return school.name.toLowerCase().includes(searchString)
})
console.log(filteredSchools)
let filtered = filteredSchools.map((school) => {
return `
<ul>
<li>${school.name}</li>
</ul>
`
})
results.innerHTML = filtered
})
body {
margin: 0;
padding: 0;
font-family: 'itc-avant-garde-gothic-pro', sans-serif;
}
p {
font-size: 15px;
margin-right: 230px;
margin-top: 20px;
margin-bottom: 0px;
}
button {
text-align: center;
margin-bottom: 30px;
padding: 30px;
display: flex;
text-transform: uppercase;
letter-spacing: 4px;
padding: 16px 50px 14px;
border-radius: 2px;
min-width: 297px;
font-size: 14px;
text-align: center;
background: #000;
color: #fff;
line-height: normal;
border: 1px solid #000;
transition: all ease-in-out .3s;
-webkit-transition: all ease-in-out .3s;
-ms-transition: all ease-in-out .3s;
-o-transition: all ease-in-out .qs;
}
#popup-buttons {
margin-top: 70px;
margin-right: 30px;
display: flex;
padding-bottom: 5px;
}
#cancel-btn {
min-width: 217px;
font-size: 10px;
background-color: #ffffff;
color: #000000;
border: red;
}
a {
text-decoration: none;
color: #000000;
}
#cancel-btn: hover {
color: #000;
}
#popup-btn {
font-size: 10px;
min-width: 67px;
padding-top: 5px;
width: 180px;
}
#popup-btn a {
display: flex;
justify-content: space-between;
color: white;
}
button:hover {
color: #000;
background: transparent;
}
#school-popup-modal {
position: fixed;
z-index: 100000;
top: 0;
display: none;
justify-content: center;
background-color: rgba(0, 0, 0, 0.4);
width: 100vw;
height: 100vh;
}
#school-popup-content {
background-color: #ffffff;
border: 1px solid black;
border-radius: 16px;
display: flex;
flex-direction: column;
align-items: center;
max-width: 440px;
height: 400px;
padding: 14px;
width: 400px;
margin-top: 30px;
margin-bottom: 10px;
padding-bottom: 80px;
}
input {
width: 250px;
padding: 10px;
margin-top: 4px;
margin-left: 5px;
margin-bottom: 0px;
}
ul {
margin-left: 0px;
display: flex;
padding-left: 0px;
flex-direction: column;
justify-content: flex-start;
padding-right: 50px;
}
li {
display: flex;
justify-content: flex-start;
align-items: left;
margin-right: 20px;
font-size: 10px;
margin-top: 0px;
padding-top: 15px;
border-bottom: 1px solid #e8e8e8;
padding-right: 10px;
width: 253px;
padding-left: 10px;
padding-bottom: 10px;
}
li:hover {
background-color: #e8e8e8;
}
#search-results {
border: 1px solid #e1e1e1;
border-radius: 4px;
position: relative;
width: 272px;
margin-left: 5px;
}
input span {}
input[value=undo] {
color: grey;
text-align: right;
}
#undo {
position: absolute;
display: none;
top: 10;
color: grey;
font-size: 12px;
margin-top: 18px;
right: 25px;
}
.fas fa-check {
height: 5%;
}
#undo:hover {
color: black;
border-bottom: 1px solid black;
transition: .2s
}
#span-container {
position: relative;
overflow: hidden;
display: inline-block;
}
.popup-header {
font-family: 'itc-avant-garde-gothic-pro', sans-serif;
font-style: normal;
font-weight: bold;
font-size: 20px;
line-height: 28px;
align-items: left;
color: #000000;
margin-right: 120px;
}
#select-buttons {
display: flex;
flex-direction: column;
width: 5%;
}
#select-buttons button {}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="school-popup-modal">
<div id="school-popup-content">
<div class="popup-header">
<span>Find your School</span>
</div>
<p>School</p>
<form>
<div id="span-container">
<input autocomplete="off" id="search-input" placeholder='Start typing...' type="text">
<span id="undo">undo
<span style="font-size: 10px; color: green;">
<i class="fas fa-check"></i>
</span>
</span>
</div>
<div id="#search-results">
<div class="result-list">
</div>
</div>
</form>
<div id="popup-buttons">
<button id="cancel-btn">Cancel</button>
<button id="popup-btn">Start Testing</button>
</div>
</div>
</div>
<div id="select-buttons">
<button>Test for School</button>
<button>Test for work</button>
</div>

Your are putting an array in your HTML.
Try delete the line results.innerHTML = filtered from your JavaScript, and add:
// clear the results
results.innerHTML = '';
// insert the filtered results
filtered.forEach((filteredSchool) => {
results.innerHTML += filteredSchool;
});

Javascript code popup doesn't stay active after onclick event

JavaScript Noob
On the footer of the site I'm trying to display the contact info with a popup like form
whenever I copied the code to new page or new device the button clicked opens the form
but then the form closes immediately
Is there a way to fix this?
<button class="open-button" onclick="openForm()">
Contact Us</button>
<div class="form-popup">
<form class="form-container" id="myForm">
<h1>info#indiepump.com</h1>
<button type="button" class="btn-cancel" onclick="closeForm()">×</button>
</form>
</div>
<script>
function openForm() {
//openForm().stopPropagation();
document.getElementById("myForm").style.display = "flex";
}
function closeForm() {
document.getElementById("myForm").style.display = "none";
}
</script>
And the CSS part:
.open-button {
background-image: url(/usr/fsociety/indiepump_test/test_4/social_icons/email.png);
background-repeat: no-repeat;
background-color: transparent;
padding: 17px 21px;
border: none;
cursor: pointer;
position: fixed;
justify-content: space-between;
align-items: center;
vertical-align: middle;
text-align: right;
text-decoration: none;
font-size: 0.9rem;
margin-left: 1rem;
height: 27px;
width: 121px;
padding: 3px 3px;
padding-left: 3px;
color: red;
}
.form-popup {
display: none;
position: fixed;
align-items: center;
justify-content: space-between;
vertical-align: middle;
bottom: 2.5rem;
left: 2rem;
border: 1px solid red;
border-radius: 10px;
color: red;
font-size: 0.7rem;
z-index: 10000;
}
.form-container {
display: flex;
max-width: 300px;
width: 300px;
height: 50px;
align-items: center;
justify-content: space-between;
vertical-align: middle;
text-align: center;
padding: 10px;
background-color: #f9e3d5;
z-index: 100000;
}
.btn-cancel {
display: flex;
align-items: center;
margin-bottom: 1rem;
vertical-align: middle;
text-align: center;
width: 25px;
height: 25px;
border: none;
background-color: transparent;
color: red;
font-size: 1.9rem;
cursor: pointer;
}
I've already tried Google search solutions to no avail.
Also different methods from other helpful sites but every time I change something the button doesn't work at all.

After click on button the element with .form-popup class does not show because in your CSS you have set display:none:
.form-popup {
display: none;
....
}
So you need to set display:flex or block for .form-popup too.
Here is working sample:
function openForm() {
document.getElementById("myForm").parentElement.style.display = "flex";
document.getElementById("myForm").style.display = "flex";
}
function closeForm() {
document.getElementById("myForm").style.display = "none";
document.getElementById("myForm").parentElement.style.display = "none";
}
.open-button {
background-image: url(/usr/fsociety/indiepump_test/test_4/social_icons/email.png);
background-repeat: no-repeat;
background-color: transparent;
padding: 17px 21px;
border: none;
cursor: pointer;
position: fixed;
justify-content: space-between;
align-items: center;
vertical-align: middle;
text-align: right;
text-decoration: none;
font-size: 0.9rem;
margin-left: 1rem;
height: 27px;
width: 121px;
padding: 3px 3px;
padding-left: 3px;
color: red;
}
.form-popup {
display: none;
position: fixed;
align-items: center;
justify-content: space-between;
vertical-align: middle;
bottom: 2.5rem;
left: 2rem;
border: 1px solid red;
border-radius: 10px;
color: red;
font-size: 0.7rem;
z-index: 10000;
}
.form-container {
display: flex;
max-width: 300px;
width: 300px;
height: 50px;
align-items: center;
justify-content: space-between;
vertical-align: middle;
text-align: center;
padding: 10px;
background-color: #f9e3d5;
z-index: 100000;
}
.btn-cancel {
display: flex;
align-items: center;
margin-bottom: 1rem;
vertical-align: middle;
text-align: center;
width: 25px;
height: 25px;
border: none;
background-color: transparent;
color: red;
font-size: 1.9rem;
cursor: pointer;
}
<button class="open-button" onclick="openForm()">
Contact Us
</button>
<div class="form-popup">
<form class="form-container" id="myForm">
<h1>info#indiepump.com</h1>
<button type="button" class="btn-cancel" onclick="closeForm()">×</button>
</form>
</div>

#Alireza Ahmadi
Reposting the new code...
function openForm() {
document.getElementById("myForm").parentElement.style.display = "flex";
document.getElementById("myForm").style.display = "flex";
}
function closeForm() {
document.getElementById("myForm").style.display = "none";
document.getElementById("myForm").parentElement.style.display = "none";
}
.open-button {
background-image: url(/usr/fsociety/indiepump_test/test_4/social_icons/email.png);
background-repeat: no-repeat;
background-color: transparent;
padding: 17px 21px;
border: none;
cursor: pointer;
position: fixed;
justify-content: space-between;
align-items: center;
vertical-align: middle;
text-align: right;
text-decoration: none;
font-size: 0.9rem;
margin-left: 1rem;
height: 27px;
width: 121px;
padding: 3px 3px;
padding-left: 3px;
color: red;
}
.form-popup {
display: none;
position: fixed;
align-items: center;
justify-content: space-between;
vertical-align: middle;
bottom: 2.5rem;
left: 2rem;
border: 1px solid red;
border-radius: 10px;
color: red;
font-size: 0.7rem;
z-index: 10000;
}
.div-form {
display: flex;
max-width: 300px;
width: 300px;
height: 50px;
align-items: center;
justify-content: space-between;
vertical-align: middle;
text-align: center;
padding: 10px;
background-color: #f9e3d5;
z-index: 100000;
}
.btn-cancel {
display: flex;
align-items: center;
margin-bottom: 1rem;
vertical-align: middle;
text-align: center;
width: 25px;
height: 25px;
border: none;
background-color: transparent;
color: red;
font-size: 1.9rem;
cursor: pointer;
}
<button class="open-button" onclick="openForm()">
Contact Us</button>
<div class="form-popup">
<div class="div-form" id="myForm">
<form class="form-container">
<h1>info#indiepump.com</h1>
<button type="button" class="btn-cancel" onclick="closeForm()">×</button>
</form>
</div>
</div>
Right now the button doesn't do anything the page only shows that is refreshing

HTML Template not rendering on screen

I'm currently building a Twitter clone for my portfolio using Web Component's template feature. However, my template isn't rendering on screen when the tweet button is clicked. I'm currently getting an error 'Uncaught TypeError: Cannot set property 'innerHTML' of null at HTMLButtonElement.postTweetButton.onclick'.
I have attempted moving the 'tweetText.innerHTML = tweetBoxInput;' line around to no avail. My tweetText variable's value is correct so I'm not sure why the property cannot set. I suspect it's to do with the template not importing correctly.
JS FIDDLE: https://jsfiddle.net/manoj1234/mty68qng/13/
Help greatly appreciated. Thanks.
JS:
window.onload = () => {
const createTweetContainer = document.getElementById("createTweetContainer");
const createTweetButton = document.getElementById("createTweetButton");
const backArrow = document.getElementById("backArrow");
const tweetBox = document.getElementById("tweetBox");
let tweetBoxInput;
const pinnedTweet = document.getElementById("pinnedTweet");
const tweetContainer = document.getElementById("tweetContainer");
const tweetSentContainer = document.getElementById("tweetSentContainer");
createTweetButton.onclick = () => {
createTweetContainer.style.display = "block";
tweetBox.value = "";
}
backArrow.onclick = () => {
createTweetContainer.style.display = "none";
}
postTweetButton.onclick = () => {
var tweetText = document.getElementById("tweetText");
console.log(tweetBox.value);
tweetBoxInput = tweetBox.value;
if (tweetBoxInput == "") {
console.log("please write tweet");
} else {
createTweetContainer.style.display = "none";
tweetSentContainer.style.display = "flex";
var tweetTemplate = document.getElementById("tweet-template");
var tweetInstance = document.importNode(tweetTemplate.content, true);
tweetText.innerHTML = tweetBoxInput;
pinnedTweet.after(tweetInstance);
/* Show Tweet Sent container*/
setTimeout(() => {
tweetSentContainer.style.height = "30px";
}, 1000);
setTimeout(() => {
tweetSentContainer.style.opacity = "1";
}, 1300);
/* End of Show Tweet Sent container */
/* Hide Tweet Sent container */
setTimeout(() => {
tweetSentContainer.style.opacity = "0";
}, 5000);
setTimeout(() => {
tweetSentContainer.style.height = "0";
tweetSentContainer.style.marginBottom = "0";
}, 5300);
setTimeout(() => {
tweetSentContainer.style.display = "none";
tweetSentContainer.style.marginBottom = "12px";
}, 8000);
/*End of Hide Tweet Sent container */
}
}
}
CSS:
* {
margin: 0;
padding: 0;
transition: ease 0.2s;
box-sizing: border-box;
-webkit-user-drag: none;
appearance: none;
outline: none;
font-family: 'Roboto';
}
body {
display: flex;
justify-content: center;
align-items: center;
}
body main {
width: 480px;
/*background-color: $blueBackground;
*/
}
.globalWrap {
padding-left: 25px;
padding-right: 25px;
}
.greyText {
color: #8997a2;
font-weight: normal;
}
.bodyText {
font-size: 15px;
}
#bottomFixed {
width: 100%;
position: fixed;
bottom: 0;
z-index: 4;
display: flex;
align-items: flex-end;
flex-direction: column;
}
#bottomFixed #createTweetButton {
width: 65px;
height: 65px;
font-size: 1.2em;
display: flex;
justify-content: center;
align-items: center;
color: white;
border-radius: 360px;
background-color: #1da1f2;
margin-bottom: 12px;
margin-right: 10px;
}
#bottomFixed #navBar {
height: 50px;
width: 100%;
background-color: #15202b;
border-top: solid 1px #38444d;
}
#bottomFixed #tweetSentContainer {
height: 30px;
height: 0px;
bottom: 20;
z-index: 6;
background-color: #1da1f2;
width: 80%;
display: flex;
align-self: center;
display: none;
opacity: 0;
justify-content: space-between;
align-items: center;
padding-left: 25px;
padding-right: 25px;
margin-bottom: 12px;
border-radius: 5px;
transition: ease-in-out 0.3s;
}
#coverImgContainer {
height: 125px;
width: 100%;
}
#coverImgContainer img {
height: 100%;
width: 100%;
position: relative;
object-fit: cover;
}
#userProfile {
width: 100%;
background-color: #15202b;
color: white;
}
#userProfile #userImgContainer {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
#userProfile #userImgContainer button {
margin-top: 12px;
background-color: transparent;
border: solid 1px #1da1f2;
padding-left: 12px;
padding-right: 12px;
padding-top: 6px;
padding-bottom: 6px;
border-radius: 25px;
color: #1da1f2;
font-size: 0.8em;
}
#userProfile #userImgContainer h2 {
font-size: 1em;
}
#userProfile #userImgContainer #profileImgName {
position: relative;
bottom: 25;
}
#userProfile #profilePicContainer {
height: 80px;
width: 80px;
}
#userProfile #profilePicContainer img {
width: 100%;
border-radius: 100%;
border: solid 4px #15202b;
}
#userProfile #profileNav {
display: flex;
justify-content: space-between;
margin-top: 16px;
}
#userProfile #profileNav h4 {
padding-left: 10px;
padding-right: 10px;
padding-bottom: 12px;
font-size: 16px;
color: #8997a2;
}
#userProfile #profileNav h4:nth-child(1) {
color: #1da1f2;
border-bottom: solid 2px #1da1f2;
padding-left: 25px;
padding-right: 25px;
}
#userProfile #profileNav h4:nth-child(4) {
padding-right: 25px;
}
#userProfile #userInfo p:nth-child(1) {
position: relative;
bottom: 12.5;
}
#userProfile #userInfo p:nth-child(2) {
position: relative;
bottom: 6.25;
display: flex;
}
#userProfile #userInfo p:nth-child(3) {
font-weight: bold;
margin-top: 4px;
font-size: 14px;
}
#userProfile #userInfo span {
font-weight: normal;
}
#userProfile #userInfo span:nth-child(1) {
margin-right: 6px;
}
#userProfile #userInfo svg {
width: 5%;
color: #8997a2;
fill: #8997a2;
margin-right: 5px;
display: none;
}
#timelineContainer {
background-color: #12161e;
height: 100vh;
width: 100%;
}
.tweetContainer {
display: flex;
padding-top: 12px;
padding-bottom: 12px;
padding-left: 25px;
padding-right: 25px;
width: 100%;
background-color: #15202b;
border-top: solid 1px #38444d;
transition: ease-in-out 0.3s;
}
.tweetContainer .tweetName {
color: white;
}
.tweetContainer .tweetText {
color: white;
margin-bottom: 12px;
}
.tweetContainer #tweetText {
color: white;
margin-bottom: 12px;
}
.tweetContainer .tweetImgContainer {
width: 100%;
height: 200px;
display: flex;
border-radius: 12px;
overflow: hidden;
/*Add this to main container so the Border-Radius also rounds child elements*/
border: solid 1px #38444d;
}
.tweetContainer .tweetImgContainer #col-1ImgContainer {
width: 100%;
overflow: hidden;
}
.tweetContainer .tweetImgContainer #col-1ImgContainer img {
height: 100%;
width: 100%;
object-fit: cover;
border-right: solid 5px #12161e;
}
.tweetContainer .tweetImgContainer .col-2ImgContainer {
height: 50%;
overflow: hidden;
}
.tweetContainer .tweetImgContainer .col-2ImgContainer:nth-child(1) {
border-bottom: solid 5px #12161e;
}
.tweetContainer .tweetImgContainer .col-2ImgContainer img {
transform: scale(1.5, 1.5);
height: 100%;
width: 100%;
object-fit: cover;
}
.tweetProfileImgContainer {
min-width: 55px;
min-height: 55px;
max-width: 55px;
max-height: 55px;
padding-right: 12px;
}
.tweetProfileImgContainer .tweetProfileImg {
width: 100%;
border-radius: 100%;
}
/* Create Tweet Page */
#createTweetContainer {
height: 100vh;
width: 100%;
background-color: #15202b;
position: fixed;
z-index: 5;
display: none;
}
#createTweetContainer img {
margin-right: 12px;
margin-left: 25px;
}
#createTweetContainer #createTweetHeader {
height: 45px;
border-bottom: solid 1px #38444d;
color: white;
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 25px;
padding-right: 25px;
}
#createTweetContainer #createTweetHeader i {
color: #1da1f2;
}
#createTweetContainer #createTweetHeader button {
background-color: #1da1f2;
border: solid 1px #1da1f2;
padding-left: 24px;
padding-right: 24px;
padding-top: 6px;
padding-bottom: 6px;
border-radius: 25px;
color: white;
font-size: 0.8em;
font-weight: bold;
opacity: 0.5;
}
#profileTweetBoxContainer {
display: flex;
justify-content: space-between;
padding-top: 12px;
}
textarea {
margin-left: 25px;
width: 100%;
resize: none;
background-color: #15202b;
border: 0;
color: white;
outline: none;
padding-right: 25px;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
position: relative;
top: 10;
caret-color: #1da1f2;
}
HTML:
<script src="https://kit.fontawesome.com/cd801faa65.js" crossorigin="anonymous"></script>
<div id="bottomFixed">
<div id="createTweetButton">
<i class="fas fa-feather"></i>
</div>
<div id="tweetSentContainer">
<p><i class="fas fa-check-circle"></i>Your Tweet was sent.</p>
<p>View</p>
</div>
<div id="navBar">
</div>
</div>
<section id="createTweetContainer">
<div id="createTweetHeader">
<i id="backArrow" class="fas fa-arrow-left"></i>
<button id="postTweetButton">Tweet</button>
</div>
<div id="profileTweetBoxContainer">
<figure class="tweetProfileImgContainer">
<img class="tweetProfileImg" src="https://cdn.pixabay.com/photo/2016/11/08/15/21/user-1808597_1280.png">
</figure>
<textarea id="tweetBox" cols="500" rows="10" placeholder="What's Happening?"></textarea>
</div>
</section>
<section id="timelineContainer">
<div id="pinnedTweet" class="tweetContainer">
<figure class="tweetProfileImgContainer">
<img class="tweetProfileImg" src="https://cdn.pixabay.com/photo/2016/11/08/15/21/user-1808597_1280.png">
</figure>
<div>
<h4 class="tweetName bodyText">Name <span class="greyText">#username</span></h4>
<p class="tweetText bodyText">Tweet Text Here</p>
<div class="tweetImgContainer">
<div id="col-1ImgContainer">
<img src="https://cdn.getyourguide.com/img/tour/5ac513c518061.jpeg/146.jpg">
</div>
</div>
</div>
</div>
<template id="tweet-template">
<div id="tweetContainer" class="tweetContainer">
<figure class="tweetProfileImgContainer">
<img class="tweetProfileImg" src="images/profilepicture.jpg">
</figure>
<div>
<h4 class="tweetName">Emmanuel</h4>
<p id="tweetText"></p>
</div>
</div>
</template>
</section>

I realised I was attempting to change the original template's p tag rather than the imported node. I added tweetInstance.querySelectorAll(‘p’)[0].innerHTML = tweetBoxInput; which changes the text of the new node.

We Keep Coding

JavaScript is the programming language of the Web.

Font Awesome icons don't align - javascript

Related

How to encapsulate javascript with repetitive functions into reusable components?

Simple editor able to replace special caracters

Why are my results displaying the way they are after I delete my typed input

Javascript code popup doesn't stay active after onclick event

HTML Template not rendering on screen

Categories

Resources