Reverse() is not working and so does unshift() in vanilla javascript

Reverse() is not working and so does unshift() in vanilla javascript - javascript

The issue is only there when I'm trying to reverse the user input, reverse() is returning the string as it is and so does the unshift().
what I'm looking for is if the user enters input - 1234 the output should be 4,3,2,1, but I'm getting is output - 1,2,3,4.
const pahere = [];
const revephare = [];
let donereve = [];
let dff = document.getElementById("Udt1");
function tex(){
if(dff. value == "") {
console.log("enter text")
}
else {
pahere.push(dff.value);
console.log(dff.value);
console.log(pahere);
console.log(pahere.length);
for(let i = 0; i < pahere.length; i++){
revephare.push(pahere[i].split(""));
pahere.pop();
}
}
console.log("I should be splited",revephare);
donereve = revephare.reverse();
console.log("I should be reversed",donereve);
}
* {
box-sizing: border-box;
}
body{
background: #333;
margin: 0;
}
h1{
margin: 15px;
color: white;
}
.holder{
margin-left: 12px;
width: 34em;
height: 37em;
border: 2px solid rgba(255, 51, 153,1);
display: flex;
}
#Udt1 {
width: 56%;
height: 2em!important;
text-align: center;
}
span {
color: white;
margin-top: 5px;
}
.anshold {
width: 154px;
height: 34px;
margin-left: 43em;
position: relative;
top: -592px !important;
border: 2px solid rgba(255, 51, 153,1);
text-align: center;
}
#udans{
color: white;
text-align: center;
margin: 0;
padding: 4px;
}
.btn {
width: 16%;
height: 2em!important;
text-align: center;
margin-left: 14px;
}
<body>
<h1>Palidrom Checker</h1>
<div class="holder">
<span>Word goes here-</span>
<input type="text" name="textin" label ="textin" id="Udt1" placeholder="Eg-Racecar">
<button class="btn" onclick="tex()"> Check</button>
</div>
<div class="anshold"><p id="udans"> </p>
</div>
</body>

Your trying to spliting Array pahere[i].split("")
const pahere = [];
const revephare = [];
let donereve = [];
let dff = document.getElementById("Udt1");
function tex(){
if(dff. value == "") {
console.log("enter text")
}
else {
pahere.push(dff.value);
console.log(dff.value);
console.log(pahere);
console.log(pahere.length);
for(let i = 0; i <dff.value.length; i++){
revephare.push(dff.value[i]);
pahere.pop();
}
}
console.log("I should be splited",revephare);
donereve = revephare.reverse();
console.log("I should be reversed",donereve);
}
* {
box-sizing: border-box;
}
body{
background: #333;
margin: 0;
}
h1{
margin: 15px;
color: white;
}
.holder{
margin-left: 12px;
width: 34em;
height: 37em;
border: 2px solid rgba(255, 51, 153,1);
display: flex;
}
#Udt1 {
width: 56%;
height: 2em!important;
text-align: center;
}
span {
color: white;
margin-top: 5px;
}
.anshold {
width: 154px;
height: 34px;
margin-left: 43em;
position: relative;
top: -592px !important;
border: 2px solid rgba(255, 51, 153,1);
text-align: center;
}
#udans{
color: white;
text-align: center;
margin: 0;
padding: 4px;
}
.btn {
width: 16%;
height: 2em!important;
text-align: center;
margin-left: 14px;
}
<body>
<h1>Palidrom Checker</h1>
<div class="holder">
<span>Word goes here-</span>
<input type="text" name="textin" label ="textin" id="Udt1" placeholder="Eg-Racecar">
<button class="btn" onclick="tex()"> Check</button>
</div>
<div class="anshold"><p id="udans"> </p>
</div>
</body>

This is because you're using Array.prototype.push incorrectly which gives you an array of arrays as a result
revephare.push(pahere[i].split("")); // this line is incorrect
Replace it by the following to make it work
// use spread operator to pass each element as a separate argument
revephare.push(...pahere[i].split(""));

Hi i know you fixed the issue, you can achieve your output by this single line code, just try if you can
let reversed=(pahere.toString()).split("").map(Number).reverse();

Related

Get substring from url and copy to clip board?

Hey i am trying some thing for my school project, i hope you can help me in it.
I want to copy the substring from url, like
Url = https://www.example.com/blah/blah&code=12432
substring = 12432
Also i want to print the substring in Copy Box .
Please Help Me with this issue. It is required for my project to copy some text from string.
(function() {
var copyButton = document.querySelector('.copy button');
var copyInput = document.querySelector('.copy input');
copyButton.addEventListener('click', function(e) {
e.preventDefault();
var text = copyInput.select();
document.execCommand('copy');
});
copyInput.addEventListener('click', function() {
this.select();
});
})();
html, body {
height: 100%;
}
body {
font-size: 16px;
background: #FFD1DD;
display: flex;
align-items: center;
justify-content: center;
}
* {
box-sizing: border-box;
}
.wrapper {
padding: 0 5px;
}
h1 {
text-align: center;
font-size: 40px;
margin-bottom: 1.2em;
text-decoration: underline;
text-transform: uppercase;
}
p {
font-family: 'VT323', monospace;
font-size: 20px;
}
.container {
display: flex;
background: #FFA3BB;
border-radius: 7px;
padding: 10px;
margin: 0 auto;
}
h3 {
font-size: 28px;
text-transform: uppercase;
text-align: center;
span {
display: inline-block;
position: relative;
}
}
.copy, .paste {
flex-grow: 1;
width: 50%;
}
.copy {
border-right: 2px solid;
padding-right: 10px;
h3 {
span {
background: #76ECFF;
}
}
input {
padding-right: 90px;
}
}
.paste {
padding-left: 10px;
h3 {
span {
background: #FAE916;
}
}
}
form {
position: relative;
width: 100%;
input {
display: block;
width: 100%;
border: 3px solid;
outline: 0;
background: #FFF;
font-size: 25px;
padding: 5px 4px;
margin-bottom: 20px;
}
button {
display: block;
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
border: 0;
outline: 0;
color: #FFF;
background: #000;
font-family: 'VT323', monospace;
font-size: 25px;
text-transform: uppercase;
padding: 0.08em 0.8em;
cursor: pointer;
}
}
<div class="wrapper">
<h1>Link Copy</h1>
<p>Select the link text by clicking within the input then copy yourself or just click the copy button. Paste into the paste side to see that it works!</p>
<div class="container">
<div class="copy">
<h3>Copy <span><i class="fa fa-hand-peace-o"></i></span></h3>
<form>
<input type="text" value="https://codepen.io/she_codes/pen/OgrJJe/">
<button type="button">Copy</button>
</form>
</div>
<div class="paste">
<h3>Paste <span><i class="fa fa-smile-o"></i></span></h3>
<form>
<input type="text">
</form>
</div>
</div><!-- end .container -->
</div><!-- end .wrapper -->

Use this it will work
const params = new Proxy(new URLSearchParams(window.location.search), {
get: (searchParams, prop) => searchParams.get(prop),
});
// Get the value of "some_key" in eg "https://example.com/?some_key=some_value"
let value = params.some_key; // "some_value"

try this, assuming nothing is ever after "code="
var url = window.location.href;
var index = url.indexOf("code=");
var substring = url.substring(index + 5);
copyInput.setAttribute('value', substring);

How to get console messages in iframe with javascript?

I've gone through all the other asked questions but none of them work. I'm trying to do it on the code block below. How can I get console messages from within an iframe? I can get it from outside the iframe, but I can't add console messages inside the iframe to the html. I had some trouble adding the script tag.
function coderunfunc(cls, ind) {
let html = document.querySelector(`.${cls} .html-code-run-${ind} code`).textContent;
let css = document.querySelector(`.${cls} .css-code-run-${ind} code`).textContent;
let js = document.querySelector(`.${cls} .javascript-code-run-${ind} code`).textContent;
let sc1='script >';
let sc2='/script >';
let jsa = '<'+sc1 + js + '<' + sc2
let cdo =`${html} <style>${css}</style> ${jsa}`
var iframe = document.createElement('iframe');
iframe.classList.add('iframe-css');
iframe.src = 'data:text/html;charset=utf-8,' + encodeURI(cdo);
if (document.querySelector(`.${cls} iframe`)) {
document.querySelector(`.${cls} iframe`).remove();
}
document.querySelector(`.${cls}`).appendChild(iframe);
}
main.main pre {
display: block;
background-color: #f6f6f6;
color: #000;
padding: 10px;
max-height: 350px;
overflow-y: scroll;
margin: 0;
border: 1px solid #212121;
}
main.main code {
background-color: #f6f6f6;
margin: 0;
padding: 0;
color: #000;
padding: 0px 5px;
}
.main pre code {
padding: 0;
margin: 0;
word-break: break-all !important;
}
.info-r-h {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
border-top: 2px solid #212121;
border-bottom: 2px solid #212121;
padding-top: 2px;
padding-bottom: 2px;
}
.info-r-h button {
padding: 10px 20px;
background-color: #212121;
color: #fff;
outline: none;
border: none;
border-right: 2px solid #fff;
border-left: 2px solid #fff;
cursor: pointer;
}
.code-run-button {
display: block;
padding: 10px 20px;
margin-top: 10px;
font-size: 20px;
background-color: #0095ff;
border: none;
color: #fff;
border-radius: 5px;
cursor: pointer;
}
.iframe-css {
display: block;
width: 100%;
border: 1px solid #212121;
background-color: #fff;
margin-top: 10px;
height: auto;
}
<main class="main">
<div class="code-run-1" id="1">
<div class="info-r-h"><span>HTML</span><button onclick="copyelement('html-code-run-1')">Kopyala</button></div>
<pre class="html-code-run-1" spellcheck="false">
<code>asdasdasdas</code>
</pre>
<div class="info-r-h"><span>CSS</span><button onclick="copyelement('css-code-run-1')">Kopyala</button></div>
<pre class="css-code-run-1" spellcheck="false">
<code> *{
color:red;
}</code></pre>
<div class="info-r-h"><span>JAVASCRIPT</span><button onclick="copyelement('javascript-code-run-1')">Kopyala</button></div>
<pre class="javascript-code-run-1" spellcheck="false">
<code> console.log('asd');</code></pre>
<button class="code-run-button" id="1" onclick="coderunfunc('code-run-1',1)">RUN</button></div>
<div class="denem"></div>
</main>

You can add following to the iframe js code. This will replace the original window.console.log with a custom log method that also sends the data to the parent frame.
const originalLog = console.log;
console.log = (...args) => {
parent.window.postMessage({ type: 'log', args: args }, '*')
originalLog(...args)
};
And in your parent you can listen to these message events:
window.addEventListener('message', e => {
const data = e.data
if (data.type === 'log') {
console.log('received from child', data.args)
}
})
So here is a working example:
function coderunfunc(cls, ind) {
let html = document.querySelector(`.${cls} .html-code-run-${ind} code`).textContent;
let css = document.querySelector(`.${cls} .css-code-run-${ind} code`).textContent;
let js = document.querySelector(`.${cls} .javascript-code-run-${ind} code`).textContent;
js = `const originalLog = console.log;
console.log = (...args) => {
parent.window.postMessage({ type: 'log', args: args }, '*')
originalLog(...args)
};` + js
let sc1='script >';
let sc2='/script >';
let jsa = '<'+sc1 + js + '<' + sc2
let cdo =`${html} <style>${css}</style> ${jsa}`
var iframe = document.createElement('iframe');
iframe.classList.add('iframe-css');
iframe.src = 'data:text/html;charset=utf-8,' + encodeURI(cdo);
if (document.querySelector(`.${cls} iframe`)) {
document.querySelector(`.${cls} iframe`).remove();
}
document.querySelector(`.${cls}`).appendChild(iframe);
}
window.addEventListener('message', e => {
const data = e.data
if (data.type === 'log') {
console.log('received from child', data.args)
}
})
main.main pre {
display: block;
background-color: #f6f6f6;
color: #000;
padding: 10px;
max-height: 350px;
overflow-y: scroll;
margin: 0;
border: 1px solid #212121;
}
main.main code {
background-color: #f6f6f6;
margin: 0;
padding: 0;
color: #000;
padding: 0px 5px;
}
.main pre code {
padding: 0;
margin: 0;
word-break: break-all !important;
}
.info-r-h {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
border-top: 2px solid #212121;
border-bottom: 2px solid #212121;
padding-top: 2px;
padding-bottom: 2px;
}
.info-r-h button {
padding: 10px 20px;
background-color: #212121;
color: #fff;
outline: none;
border: none;
border-right: 2px solid #fff;
border-left: 2px solid #fff;
cursor: pointer;
}
.code-run-button {
display: block;
padding: 10px 20px;
margin-top: 10px;
font-size: 20px;
background-color: #0095ff;
border: none;
color: #fff;
border-radius: 5px;
cursor: pointer;
}
.iframe-css {
display: block;
width: 100%;
border: 1px solid #212121;
background-color: #fff;
margin-top: 10px;
height: auto;
}
<main class="main">
<div class="code-run-1" id="1">
<div class="info-r-h"><span>HTML</span><button onclick="copyelement('html-code-run-1')">Kopyala</button></div>
<pre class="html-code-run-1" spellcheck="false">
<code>asdasdasdas</code>
</pre>
<div class="info-r-h"><span>CSS</span><button onclick="copyelement('css-code-run-1')">Kopyala</button></div>
<pre class="css-code-run-1" spellcheck="false">
<code> *{
color:red;
}</code></pre>
<div class="info-r-h"><span>JAVASCRIPT</span><button onclick="copyelement('javascript-code-run-1')">Kopyala</button></div>
<pre class="javascript-code-run-1" spellcheck="false">
<code> console.log('asd');</code></pre>
<button class="code-run-button" id="1" onclick="coderunfunc('code-run-1',1)">RUN</button></div>
<div class="denem"></div>
</main>

How to make modal window accurately reflect contents of each note in a note-taking app?

I am fairly new to javascript, and am working on a note-taking app to practice some things I have learned so far. It all works fine, however, when I click on the Read More button to view overflow text of the note, it displays the text from the most recent note, as opposed to the note I click Read More on. I want the entire text of a particular note to be displayed when its corresponding Read More button is pressed. Am I overthinking this? I think some kind of implementation of for...of, or for loops may help me achieve this outcome. This is a link to my codepen: https://codepen.io/oliverc96/pen/xxdZYrr
const addNote = document.querySelector('.add-note');
const newNote = document.querySelector('#new-note');
const noteFeed = document.querySelector('#note-feed');
let modalBg = document.createElement('div');
let modalWindow = document.createElement('div');
let exitSymbol = document.createElement('i');
let modalText = document.createElement('p');
function expandNote() {
modalWindow.classList.add('enterAnimation');
modalBg.style.visibility = 'visible';
exitSymbol.addEventListener('click', () => {
modalBg.style.visibility = 'hidden';
modalWindow.classList.remove('enterAnimation');
})
}
function createNote() {
const noteContainer = document.createElement('div');
noteContainer.classList.add('containerStyle');
let noteHeader = document.createElement('h1');
const noteNum = noteFeed.childElementCount;
noteHeader.innerText = `Note #${noteNum + 1}`;
noteHeader.classList.add('headerStyle');
noteContainer.append(noteHeader);
let noteText = document.createElement('p');
noteText.innerText = `${newNote.value}`;
noteText.classList.add('paraStyle');
noteContainer.append(noteText);
let readMore = document.createElement('button');
readMore.innerText = 'Read More';
readMore.classList.add('btnStyle');
noteContainer.append(readMore);
noteFeed.append(noteContainer);
readMore.addEventListener('click', expandNote);
modalBg.classList.add('modal-bg');
modalWindow.classList.add('modal-window');
exitSymbol.className = 'far fa-times-circle';
exitSymbol.classList.add('exitSymbol');
modalWindow.append(exitSymbol);
modalText.classList.add('fullTextStyle');
modalText.innerText = `${noteText.innerText}`;
modalWindow.append(modalText);
modalBg.append(modalWindow);
noteContainer.append(modalBg);
newNote.value = '';
}
addNote.addEventListener('click', createNote);
newNote.addEventListener('keyup', function(e) {
if (e.keyCode === 13) {
e.preventDefault();
createNote();
}
})

Actually your modalText will always store the latest value according to your code. You can follow the following steps to solve this.
Attach an data-attribute to that noteText.
When click on read more pass the id of that specific note.
Now just show the innerText of that selected item. You can use querySelector to get the element using data-attribute.
You can check my implementation.
console.clear();
const addNote = document.querySelector('.add-note');
const newNote = document.querySelector('#new-note');
const noteFeed = document.querySelector('#note-feed');
let modalBg = document.createElement('div');
let modalWindow = document.createElement('div');
let exitSymbol = document.createElement('i');
let modalText = document.createElement('p');
function expandNote(noteContainer, noteNum) {
return function () {
modalWindow.classList.add('enterAnimation');
modalBg.style.visibility = 'visible';
exitSymbol.addEventListener('click', () => {
modalBg.style.visibility = 'hidden';
modalWindow.classList.remove('enterAnimation');
})
const data = document.querySelector(`[data-id='${noteNum}']`).innerText;
showMoreModal(noteContainer, data);
}
}
function showMoreModal(noteContainer, data) {
modalBg.classList.add('modal-bg');
modalWindow.classList.add('modal-window');
exitSymbol.className = 'far fa-times-circle';
exitSymbol.classList.add('exitSymbol');
modalWindow.append(exitSymbol);
modalText.classList.add('fullTextStyle');
modalText.innerText = `${data}`;
modalWindow.append(modalText);
modalBg.append(modalWindow);
noteContainer.append(modalBg);
}
function createNote() {
const noteContainer = document.createElement('div');
noteContainer.classList.add('containerStyle');
let noteHeader = document.createElement('h1');
const noteNum = noteFeed.childElementCount;
noteHeader.innerText = `Note #${noteNum + 1}`;
noteHeader.classList.add('headerStyle');
noteContainer.append(noteHeader);
let noteText = document.createElement('p');
noteText.innerText = `${newNote.value}`;
noteText.classList.add('paraStyle');
noteText.setAttribute('data-id', noteNum);
noteContainer.append(noteText);
let readMore = document.createElement('button');
readMore.innerText = 'Read More';
readMore.classList.add('btnStyle');
noteContainer.append(readMore);
noteFeed.append(noteContainer);
readMore.addEventListener('click', expandNote(noteContainer, noteNum));
newNote.value = '';
}
addNote.addEventListener('click', createNote);
newNote.addEventListener('keyup', function(e) {
if (e.keyCode === 13) {
e.preventDefault();
createNote();
}
})
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
}
#wrapper {
width: 1600px;
height: 100vh;
margin: auto;
text-align: center;
}
h1 {
font-size: 100px;
margin-top: 20px;
font-weight: 500;
}
h2 {
font-size: 50px;
font-weight: 400;
margin-top: 10px;
}
#add-new-note {
color: rgb(0, 153, 153);
}
textarea {
width: 1500px;
margin-top: 30px;
height: 60px;
border-radius: 6px;
padding: 20px;
font-size: 18px;
}
textarea:focus {
outline-color: black;
}
.add-note {
font-size: 20px;
width: 180px;
height: 50px;
border-radius: 6px;
margin-top: 30px;
background-color: rgb(0, 153, 153);
color: white;
border-style: solid;
border-color: rgb(0, 102, 102);
}
.add-note:hover {
background-color: rgb(0, 128, 128);
cursor: pointer;
}
#note-feed {
background-color: rgb(0, 153, 153);
height: 500px;
margin-top: 25px;
width: 1500px;
border-radius: 6px;
display: flex;
overflow: scroll;
flex-wrap: wrap;
padding: 20px 10px;
margin-left: 50px;
}
.containerStyle {
display: flex;
flex-direction: column;
justify-content: space-around;
background-color: rgb(169, 169, 214);
height: 48%;
width: 31%;
margin-right: 11px;
margin-left: 20px;
border-radius: 6px;
margin-bottom: 20px;
overflow: hidden;
padding: 0 28px;
padding-bottom: 15px;
text-align: left;
}
.headerStyle {
font-size: 30px;
}
.paraStyle {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
font-size: 18px;
text-overflow: ellipsis;
overflow: hidden;
}
.btnStyle {
font-size: 20px;
width: 150px;
height: 40px;
border-radius: 6px;
background-color: rgb(255, 128, 128);
color: white;
border-style: solid;
border-color: rgb(255, 77, 77);
align-self: left;
}
.btnStyle:hover {
background-color: rgb(255, 102, 102);
cursor: pointer;
}
.modal-bg {
z-index: 1;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0,0,0,0.5);
color: white;
display: flex;
justify-content: center;
align-items: center;
visibility: hidden;
overflow: scroll;
}
.modal-window {
border-radius: 6px;
background: white;
width: 70%;
min-height: 30%;
max-height: 70%;
overflow: scroll;
display: flex;
justify-content: flex-start;
align-items: flex-start;
}
.enterAnimation {
animation-name: fadeInDown;
animation-duration: 1s;
}
#keyframes fadeInDown {
0% {
opacity: 0;
transform: translateY(-200px);
}
100% {
opacity: 1;
}
}
.exitSymbol {
color: rgb(0, 128, 128);
font-size: 30px;
margin: 20px 20px;
}
.exitSymbol:hover {
cursor: pointer;
opacity: 0.8;
}
.fullTextStyle {
color: black;
width: 90%;
height: 80%;
text-align: left;
margin-top: 60px;
margin-bottom: 30px;
font-size: 18px;
}
<html>
<head>
<title> Note Taker </title>
<link type="text/css" href="notes.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#100;200;300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<div id="wrapper">
<h1> Note Taker </h1>
<h2 id="add-new-note"> Add A New Note: </h2>
<textarea id="new-note" name="note-box" placeholder="Write your note here"></textarea>
<button class="add-note"> Add Note </button>
<div id="note-feed">
</div>
</div>
<script src="notes.js"></script>
<script src="https://kit.fontawesome.com/6fc6f370ca.js" crossorigin="anonymous"></script>
</body>
</html>

How do I create a filter for content displayed using Javascript?

I'm building a film review site, where all of the content is generated on the main page from data input in the admin panel and placed into a container div.
I've got a basic sorting system (by ID, ascending/descending) already which works fine on my end, but I also want to be able to filter the films by genre (e.g if film is marked as Action on database, make all non-action films hidden.
This cannot be done by CSS alone as I'm not able to add classes to the content within the containers, the container for the film image is generated via JS.
I'm assuming I need to create a new function such as
function getFilmListByGenre(genreName)
Or something along those lines, but I don't know how I'd make it work.
Here is the current Javascript that I have, which creates the sort feature.
let db = new PouchDB('films');
let radios = document.getElementsByName("sort");
radios[0].addEventListener("change", getFilmList);
radios[1].addEventListener("change", getFilmList);
getFilmList();
function getFilmList(){
db.allDocs({include_docs: true, descending: radios[0].checked}).then(function(films){
let listContents = '';
for(let i = 0; i < films.total_rows; i++) {
let thisFilm = films.rows[i].doc;
let image = '<a class="btn" href="viewFilm.html?id=' + thisFilm._id +'"><img class="filmImage" src="' + thisFilm.image +'"></a>';
listContents += '<div class="filmRow">'+ image + '</div>';
}
document.getElementById('filmContainer').innerHTML = listContents;
})
}
I basically want to grab the value for genre (which can only be "Action", "Comedy", "Horror" or "Other") for each film from the database, then if the corresponding radio (named filter) is selected, all of the films which aren't labelled as that genre are hidden.
#import url(https://fonts.googleapis.com/css?family=Raleway);
body {
margin: 0;
font-family: 'Raleway', georgia, arial;
background-color: #e0e0e0;
text-align: center;
}
h1 {
color: #aaaaaa;
text-align: left;
}
.sortFilms {
text-align: left;
display: inline-block;
background-color: #ff6699;
width: 80%;
padding: 20px;
}
header {
text-align: center;
display: inline-block;
border-bottom: 5px;
border-top: 0;
border-left: 0;
border-right: 0;
border-style: solid;
border-color: #aaaaaa;
width: 80%;
padding: 20px;
background-color: #e0e0e0;
}
.newFilm {
text-align: left;
display: inline-block;
background-color: #ff6699;
width: 80%;
padding: 20px;
}
label {
font-size: 1em;
padding: 6px;
color: #fff;
font-weight: 700;
display: block;
text-align: left;
}
.form {
margin: auto;
display: flex;
text-align: center;
flex-direction: column;
}
h2 {
font-weight: 700;
font-size: 2em;
width: 50%;
color: #B2365F;
}
#formTitle {
margin-top: 0;
margin-bottom: 0;
}
.row {
margin-left: -20px;
display: grid;
grid-template-columns: 1fr 1fr;
}
.col {
padding: 20px;
}
input,
textarea, select {
width: 100%;
display: block;
border-radius: 25px;
background-color: #e0e0e0;
padding: 10px;
border: none;
box-sizing:border-box; }
}
.tagline {
margin: 0;
color: #333333;
font-size: 1em;
font-weight: 700;
}
input::placeholder {
color: #000;
}
textarea::placeholder {
color: #000;
}
#modifyFilmButton {
float: right;
}
#media only screen and (max-width: 700px) {
.row {
grid-template-columns: 1fr;
}
}
#media screen and (max-width:800px) {
table {
border: 0;
}
table caption {
font-size: 1.3em;
}
table thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
table tr {
border: 2px solid #e0e0e0;
background-color: #e0e0e0;
display: block;
margin-bottom: .625em;
border-radius: 20px;
}
table td {
display: block;
font-weight: bold;
font-size: 1.2em;
text-align: left;
padding: 15px;
}
table td::before {
/*
* aria-label has no advantage, it won't be read inside a table
content: attr(aria-label);
*/
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
}
table td:last-child {
border-bottom: 0;
}
}
.oldFilm {
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
text-align: left;
display: inline-block;
background-color: #AAAAAA;
width: 80%;
padding: 20px;
}
#oldTitle {
margin-top: 0;
margin-bottom: 0;
color: #ff6699;
padding-bottom: 20px;
}
td {
padding: 5px;
font-weight: bold;
}
table {
border-collapse: collapse;
text-align: center;
width: 100%;
}
thead {
background: #ff6699;
}
.reviewImage {
width: 200px;
border-radius: 20px;
}
.filmRow img {
width: 300px;
height: 420px;
margin: 10px;
border-radius: 20px;
}
.filmRow {
-webkit-flex-flow: row wrap;
justify-content: space-around;
}
#filmContainer {
width: 100%;
margin-top: 10px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-around;
}
#date {
padding: 5px;
text-align: left;
width: 30%;
}
#date input {
width: auto;
}
#date label {
display: -webkit-inline-box;
}
#oldTitle2 {
margin-top: 0;
margin-bottom: 0;
color: #ff6699;
}
.genre {
padding: 5px;
text-align: left;
width: 60%;
}
.genre input {
width:auto;
}
.genre label {
display: -webkit-inline-box;
}
<div class="sortFilms">
<h2 id="formTitle">Latest reviews</h2>
<div id='filmContainer'></div>
</div>
<div class="oldFilm">
<h2 id="oldTitle2">Sort by</h2>
<div id="date">
<p><b>Age of review</b></p>
<label>Newer<input type="radio" name="sort" checked/></label>
<label>Older<input type="radio" name="sort"/></label>
</div>
<div class="genre">
<p><b>Genre</b></p>
<label>Action<input type="radio" name="filter"/></label>
<label>Comedy<input type="radio" name="filter"/></label>
<label>Horror<input type="radio" name="filter"/></label>
<label>Other<input type="radio" name="filter"/></label>
</div>
</div>

You should seperate your display logic and your fetching logic, then you can just filter out the results that aren't the genre you wanted. I would do it something like this:
var db = {
allDocs: () => {
return new Promise((resolve) => resolve([{genre: 'Horror', title: 'The Hills Have Eyes'}, {genre: 'Comedy', title: 'Dumb and Dumber'}]))
}
}
function getFilmList() {
return db.allDocs();
}
function getFilmsByGenre(genre) {
return getFilmList().then(films => films.filter(film => film.genre === genre));
}
function displayFilms(films) {
let listContents = '';
for(let i = 0; i < films.length; i++) {
let thisFilm = films[i].title;
listContents += '<div class="filmRow">'+ thisFilm + '</div>';
}
document.getElementById('filmContainer').innerHTML = listContents;
}
document.getElementById('all').addEventListener('click', () => {
getFilmList().then(displayFilms)
})
document.querySelectorAll('[name="filter"]').forEach(radio => radio.addEventListener('change', (event) => {
getFilmsByGenre(event.target.parentNode.textContent).then(displayFilms)
}))
<div id="filmContainer"></div>
<button id="all">All</button>
<label>Action<input type="radio" name="filter"/></label>
<label>Comedy<input type="radio" name="filter"/></label>
<label>Horror<input type="radio" name="filter"/></label>
<label>Other<input type="radio" name="filter"/></label>

Javascript let user choose element

https://gyazo.com/aa49eb6d6849b3adabb8924aa9e40594
I have the elements in the diagram and I want to let the user choose in which element they are going to add the semi column to add text, but I dont know how to let them select a element and then add according to that selection.
var addDetail = document.getElementById('addDetail');
var clauseInput = document.getElementsByClassName('clause');
document.addEventListener('click', function(e) {
e = e || window.event;
var target = e.target || e.srcElement;
if(target == clauseInput[0] || target == clauseInput[1] ||
target == clauseInput[2] || target == clauseInput[3] ||
target == clauseInput[4] || target == addDetail) {
document.getElementById('addDetail').style.display='inline-block';
// createDetail();
console.log(target);
} else {
document.getElementById('addDetail').style.display='none';
}
}, false);

Update
Instead of searching through all clause elements every time when addDetail been clicked, there is e.relatedTarget that really suitable to your problem, detailed documentation, and the update snippet :
/*CREATE TOP AND BOTTOM CLAUSES*/
/*Top Clauses*/
const addClauseTop = document.querySelector('#addClauseTop');
var targetClauseElement;
var addDetail = document.getElementById('addDetail');
addDetail.addEventListener('focusin', function(e) {
createDetail(e.relatedTarget);
});
window.addEventListener('mouseup',function(e) {
if ( e.currentTarget != addDetail ) {
addDetail.style.display='none';
}
});
var firstTopClause = document.getElementsByClassName('clause')[0];
firstTopClause.addEventListener('click', function(e) {
addDetail.style.display='inline-block';
});
var firstBottomClause = document.getElementsByClassName('clauseDivReverse')[0];
firstBottomClause.addEventListener('click', function(e) {
addDetail.style.display='inline-block';
});
addClauseTop.addEventListener('click',function(e){
e.preventDefault();
//Get Divs-Overlay
const topDivs = document.querySelector('#topClauses');
const bottomDivs = document.querySelector('#bottomClauses');
// Create Elements
const clauseDiv = document.createElement('div');
const clauseText = document.createElement('input');
const clauseStroke = document.createElement('div');
// // //Give Style
clauseDiv.classList.add('clauseDiv');
clauseDiv.addEventListener('click', function(e) {
addDetail.style.display='inline-block';
});
clauseText.classList.add('clause');
clauseText.setAttribute("id", "clause");
clauseStroke.classList.add('strokeClause');
//
// // Append to document
clauseDiv.appendChild(clauseText);
clauseDiv.appendChild(clauseStroke);
topDivs.appendChild(clauseDiv);
document.body.appendChild(topDivs);
document.body.appendChild(bottomDivs);
})
/*BOTTOM Clauses*/
const addClauseBottom = document.querySelector('#addClauseBottom');
addClauseBottom.addEventListener('click',function(e){
e.preventDefault();
//Get Divs-Overlay
const topDivs = document.querySelector('#topClauses');
const bottomDivs = document.querySelector('#bottomClauses');
// Create Elements
const clauseDiv = document.createElement('div');
clauseDiv.addEventListener('click', function(e) {
targetClauseElement = e.currentTarget;
addDetail.style.display='inline-block';
});
const clauseText = document.createElement('input');
const clauseStroke = document.createElement('div');
// // //Give Style
clauseDiv.classList.add('clauseDivReverse');
clauseText.classList.add('clauseReverse');
clauseText.setAttribute("id", "clauseReverse");
clauseStroke.classList.add('strokeClauseReverse');
//
// // Append to document
clauseDiv.appendChild(clauseText);
clauseDiv.appendChild(clauseStroke);
bottomDivs.appendChild(clauseDiv);
document.body.appendChild(bottomDivs);
})
/***********/
//Create a addDetail
function createDetail(target){
var mainColumn = target.parentElement;
var strokeColumn = mainColumn.children[1];
// Create Elements
var levelOneDiv = document.createElement('div');
var levelOneText = document.createElement('input');
if ( mainColumn.classList.contains('clauseDiv') ) {
levelOneDiv.classList.add('levelOneClauseReverse');
levelOneText.classList.add('levelOneTextReverse');
//I thought you have not completed your style yet, like something levelOneClause class
} else {
levelOneDiv.classList.add('levelOneClauseReverse');
levelOneText.classList.add('levelOneTextReverse');
}
levelOneDiv.appendChild(levelOneText);
strokeColumn.appendChild(levelOneDiv);
}
#import url('https://fonts.googleapis.com/css?family=Vollkorn+SC');
body{
margin: 10%;
margin-right: 15%;
margin-left: 10%;
margin-top: 5%;
}
h1{
color: #3B3C3D;
font-family: 'Vollkorn SC', serif;
font-size: 2em;
text-align:center;
}
h2{
color: #3B3C3D;
font-family: 'Vollkorn SC', serif;
font-size: 1.5em;
text-align:center;
}
#bottomClauses{
clear: both;
float: right;
}
/*CONTROL-PANEL*/
#controlPanel{
float: inline-block;
margin-top: 5%;
margin-left: 20%;
margin-right: 20%;
margin-bottom: 15%;
padding-bottom: 2%;
border-radius: 10%;
border-bottom: 0.1vw solid #3B3C3D;
}
.addClause{
background-color: #2c3e50;
margin-top: 5%;
font-size: 0.75em;
padding: 0.5em;
border: 0;
color: #FFF;
}
.addClause:hover{
cursor: pointer;
background-color: #000;
}
.addDetail{
display: none;
background-color: #2c3e50;
margin-top: 5%;
font-size: 0.75em;
padding: 0.5em;
border: 0;
color: #FFF;
}
.addDetail:hover{
cursor: pointer;
background-color: #000;
}
/*FISHBONE*/
#fishBone{
position: relative;
float:right;
top: 19.75vw;
width: 100%;
height: 0.2vw;
background-color: #34495e;
}
#finalResult{
position: absolute;
/*float:right;*/
left: 83.5vw;
top: 44.25vw;
width: 7.5vw;
height: 7.5vw;
padding: 1vw;
text-align: center;
color: #FFF;
background-color: #7f8c8d;
border-radius: 50%;
border: 0.15vw solid #34495e;
}
/*NEW CLAUSE*/
.clauseDiv{
display: inline-block;
float:right;
width: 5vw;
margin-right: 12.5vw;
}
.clause{
float: inline-block;
position: relative;
top: -3.5vw;
right: 2vw;
text-align: center;
width: 5.8vw;
height: 1.5vw;
padding: 0.2vw;
color: #FFF;
background-color: #3498db;
border-radius: 0.15vw;
border: 0;
}
.strokeClause{
position: relative;
top: -5.75vw;
transform: rotate(-25deg);
background-color: #34495e;
width: 0.1vw;
height: 25vw;
margin-left: 7.5vw;
border: 0.05vw solid #34495e;
border-radius: 0.1vw;
float: inline-block;
z-index: -1;
}
/*NEW CLAUSE REVERSE*/
.clauseDivReverse{
float: inline-block;
float:right;
width: 5vw;
margin-right: 12.5vw;
}
.clauseReverse{
position: relative;
top: 15.5vw;
right: 2.5vw;
float: inline-block;
text-align: center;
width: 5.8vw;
height: 1.5vw;
padding: 0.2vw;
color: #FFF;
background-color: #3498db;
border-radius: 0.15vw;
border: 0;
}
.strokeClauseReverse{
position: relative;
top: -9.75vw;
transform: rotate(25deg);
background-color: #34495e;
width: 0.1vw;
height: 25vw;
margin-left: 7.5vw;
border: 0.05vw solid #34495e;
border-radius: 0.1vw;
float: inline-block;
z-index: -1;
}
/*NEW LEVEL ONE*/
.levelOneClauseReverse{
margin-bottom: 5vw;
}
.levelOneTextReverse{
border: 0;
position: relative;
font-size: 0.75vw;
width: 13vw;
top: 4.5vw;
right: 12.75vw;
border-bottom: 0.1vw solid #34495e;
transform: rotate(-25deg);
}
<body>
<h1>Diagram Editor</h1>
<div id='controlPanel'>
<h2>Control Panel</h2>
<input type='submit' name='addClause' value='Clause on TOP' class='addClause' id='addClauseTop'>
<input type='submit' name='addClause' value='Clause on BOTTOM' class='addClause' id='addClauseBottom'>
<input type='submit' name='addClause' value='Add Detail' class='addDetail' id='addDetail'>
</div>
<div id='fishBone'></div>
<input type='text' name='clause' id='finalResult'>
<div id='topClauses'>
<div class='clauseDiv'>
<input class='clause' id='clause'>
<div class='strokeClause'>
</div>
</div>
</div>
<div id='bottomClauses'>
<div class='clauseDivReverse' >
<input class='clauseReverse clause'>
<div class='strokeClauseReverse'>
<div class='levelOneClauseReverse'>
<input class='levelOneTextReverse'>
</div>
<div class='levelOneClauseReverse'>
<input class='levelOneTextReverse'>
</div>
<div class='levelOneClauseReverse'>
<input class='levelOneTextReverse'>
</div>
<div class='levelOneClauseReverse'>
<input class='levelOneTextReverse'>
</div>
</div>
</div>
</div>
<script src="app.js"></script>
</body>

We Keep Coding

JavaScript is the programming language of the Web.

Reverse() is not working and so does unshift() in vanilla javascript - javascript

Hi i know you fixed the issue, you can achieve your output by this single line code, just try if you can let reversed=(pahere.toString()).split("").map(Number).reverse();

Related

Get substring from url and copy to clip board?

How to get console messages in iframe with javascript?

How to make modal window accurately reflect contents of each note in a note-taking app?

How do I create a filter for content displayed using Javascript?

Javascript let user choose element

Categories

Resources