Develop Reference

How to have all symbols in a string without breaking the html?

I'm playing around with the password generator, but when the string contains a < or > it breaks the HTML and only outputs some of the characters. I'm using innerHTML instead on textContent because I need to wrap each password in a div. Is there another way I can do this without it breaking?
const alphabetUppercase = "abcdefghijklmnopqrstuvwxyz".toUpperCase().split('');
const alphabetLower = "abcdefghijklmnopqrstuvwxyz".split('');
const symbols = "!##$%^&*(>)_+=-`~,./;'[]\|}\"<{:\?".split('');
const numbers = "123456789".split('');
const masterArray = alphabetUppercase.concat(alphabetLower, symbols, numbers);
const passwordButton = document.querySelector('.generate-passwords');
const outputPasswords = document.querySelector('.output-passwords');
passwordButton.addEventListener('click', function(e){
e.preventDefault();
let passwordArray = [];
// number of passwords
let counter = 4;
// Reset text content
outputPasswords.innerHTML = '';
for (let x = 0; x < counter; x++) {
let randomPassword = "";
for (let i = 0; i < 15; i++) {
let randomOutput = Math.floor(Math.random() * masterArray.length);
randomPassword += masterArray[randomOutput];
}
passwordArray.push(randomPassword);
outputPasswords.innerHTML += '<div>' + passwordArray[x] + '</div>';
}
});
<section class="generator">
Generate passwords
<div class="output-passwords"></div>
</section>

You can do something like this:-
const div = document.createElement('div');
div.append(randomPassword);
outputPasswords.append(div);
Instead of using div as a string, create an element "div" and then append it to the parent "outputPasswords" element

Choosing the first post (loop)

I have a loop in Blogger that selects the last 5 posts.
I want to apply different css to the first of these last 5 posts and different css to the other 4 posts.
Current script applies same css to all of them, how can i keep first post separate.
Here is the script;
let postCount = 5;
function funcrct(JSON) {
const POSTS = JSON.feed.entry;
let postTitle, postUrl = "";
let rpc = document.querySelector(".postList");
for (let i = 0; i < postCount; i++) {
POSTS[i].link.forEach((el, i) => {
if (el.rel === "alternate") {
postTitle = el.title;
postUrl = el.href;
}
})
let thumbnail = POSTS[i].content.$t.match(/(http)?s?:?(\/\/[^"']*\.(?:webp))/)[0];
rpc.innerHTML += `<li>
<a href="${postUrl}"><figure>
<img src="${thumbnail}" alt="${postTitle}"/>
<figcaption>
${postTitle}</figcaption></figure></a>
</li>`;
}
}
var url = document.location.origin;
var fsrc = document.createElement("script");
fsrc.src = `${url}/feeds/posts/default?alt=json-in-script&start-index=1&max-results=${postCount}&callback=funcrct`;
document.body.appendChild(fsrc);
Html
<div><ul class='postList'></ul></div>

How do I style this code using html and css?

The code below is for listing blogger posts within a Label Name, if the post has the specific Label Name it will be shown in this list. I would like to be able to change the appearance of how everything is displayed by changing where the post image would look, and where the title would look, change background color, add borders, shadows change the font etc ...(I know how to change the appearance with css, but I do not know how to integrate the code below with css and html) At the moment the code shows the title and the right of the title the image.
var startIndex = 1;
var maxResults = 5;
var allResults = [];
function sendQuery12()
{
var scpt = document.createElement("script");
scpt.src = "https://levon-ltr.blogspot.com//feeds/posts/summary?alt=json&callback=processPostList12&start-index=" + startIndex + "&max-results=" + maxResults;
document.body.appendChild(scpt);
}
function printArrayResults(root)
{
//Sort Alphebetically
allResults.sort(function(a, b){
var a_string = a.children[0].textContent ;
var b_string = b.children[0].textContent ;
if(a_string < b_string) return -1;
if(a_string > b_string) return 1;
return 0;
})
var elmt = document.getElementById("postList12");
for (index = 0; index < allResults.length; index++) {
elmt.appendChild(allResults[index]);
}
}
function processPostList12(root)
{
var elmt = document.getElementById("postList12");
if (!elmt)
return;
var feed = root.feed;
if (feed.entry.length > 0)
{
for (var i = 0; i < feed.entry.length; i++)
{
var entry = feed.entry[i];
var title = entry.title.$t;
var date = entry.published.$t;
if( entry.media$thumbnail != undefined ){
var imageThumb = entry.media$thumbnail.url ;
} else {
var imageThumb = 'https://i.imgur.com/PqPqZQN.jpg' ;
}
for (var j = 0; j < entry.link.length; j++)
{
if (entry.link[j].rel == "alternate")
{
var url = entry.link[j].href;
if (url && url.length > 0 && title && title.length > 0)
{
var liE = document.createElement("li");
var a1E = document.createElement("a");
var postImage = document.createElement("img");
a1E.href = url;
a1E.textContent = title;
postImage.src = imageThumb;
liE.appendChild(a1E);
liE.appendChild(postImage);
//elmt.appendChild(liE);
allResults.push(liE);
}
break;
}
}
}
if (feed.entry.length >= maxResults)
{
startIndex += maxResults;
sendQuery12();
} else {
printArrayResults();
}
}
}
sendQuery12();
<div>
<ul id="postList12"></ul>
</div>

This creates stuff you can style with CSS. For example:
#postList12 li {
border: 1px solid blue;
}
Use the inspector in your browser to see what it makes. If you want to change the order of elements or add new ones you’ll have to edit the script to do that.

Font Size changes according to count of word

function test(data) {
wordCount = {};
theWords = [];
allWords = data.match(/\b\w+\b/g); //get all words in the document
for (var i = 0; i < allWords.length; i = i + 1) {
allWords[i] = allWords[i].toLowerCase();
var word = allWords[i];
if (word.length > 5) {
if (wordCount[word]) {
wordCount[word] = wordCount[word] + 1;
} else {
wordCount[word] = 1;
}
}
}
var theWords = Object.keys(wordCount); // all words over 5 characters
var result = "";
for (var i = 0; i < theWords.length; i = i + 1) {
result = result + " " + theWords[i];
$("theWords.eq[i]").css("fontSize", (wordCount.length + 50) + 'px');
}
return result;
}
console.log(test("MyWords"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I'm having troubles with the syntax of the line "$("theWords[i]......."
I realize how simple of a question this is, and not academic to the community, but I have been fumbling with this syntax for awhile and can't find any specific forum to correct my syntax error.
I am attempting to have the font size change according to the amount of times the word appears in a document.
wordCount = count of appears.
theWords = all words I would like to have the rule applied to

I manage to have something working with what you did using a bit more of jQuery to build the list of words to show. hope it helps :D.
$(document).ready(function() {
var data = $(".sometext").text();
wordCount = {}; theWords = []; allWords = data.match(/\b\w+\b/g); //get all words in the document
for (var i = 0; i < allWords.length; i++){
allWords[i] = allWords[i].toLowerCase();
var word = allWords[i];
if (word.length > 5) {
if (wordCount[word]) {
wordCount[word] = wordCount[word] + 1;
} else {
wordCount[word] = 1;
}
}
}
var theWords = Object.keys(wordCount); // all words over 5 characters
for(var i = 0; i < theWords.length; i = i + 1) {
$('<span/>', {
'text': theWords[i] + " ",
'class': theWords[i]
}).appendTo('.result');
}
for(var i = 0; i < theWords.length; i++) {
$("." + theWords[i]).css("font-size", 15 + wordCount[theWords[i]]*5 + "px");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="sometext">javascript is a language that could be a language without such things as language but not without things as parenthesis. language is the bigest word here.</p>
<hr>
<div class="result"></div>

Plugin Freewall, cannot get wall function to work

I am trying to create a grid style layout for my homepage that pulls random information every time the user loads the page. I have created the function but cannot even get it to display the wall items.
Here is the code I am using. Please point me in the right direction and I will be able to solve it but I cannot find my issue right now.
$(function() {
var temp = "<div class='bubble eventBrick' id='{brickID}' style='width:{width}px; height: {height}px;'><div class='rectangle' style='background: {ribbonColor};'><h2>{brickInfo}</h2></div><div class='triangle-l'><div class='info' style='border-color: transparent {triColor} transparent transparent;'></div> <!-- Left triangle --></div>";
var w = 1, h = 1, html = '', limitEventItem = 16, podcastBrick = 1, longBrick = 3;
var wallBricks = [
'podBrick',
'longBrick',
'trackBrick',
'newsBrick',
'socialBrick',
'photoBrick'
]
var wallBrickList = new Array();
var total = limitEventItem;
var trackBrickLimit = 3;
var newsBrickLimit = 3;
var socialBrickLimit = 3;
var photoBrickLimit = 3;
var eventWall = new freewall("#eventWall");
eventWall.reset({
selector: '.eventBrick',
animate: true,
cellW: 156.5,
cellH: 136,
delay: 15,
gutterX: 24,
gutterY: 10,
onResize: function(){
eventWall.fitZone();
}
});
for (t = 0; t <= trackBrickLimit; t++){
h = 1;
w = 1;
html += temp.replace(/\{height\}/g, h*100).replace(/\{width\}/g, w*100).replace("{brickInfo}", "Track Item").replace("{ribbonColor}", "#7f9db9").replace("{triColor}", "#7f9db9");
$("#eventWall").html(html);
html = '';
}
for (n = 0; n <= newsBrickLimit; n++) {
h = 1;
w = 1;
html += temp.replace(/\{height\}/g, h*100).replace(/\{width\}/g, w*100).replace("{brickInfo}", "News Item").replace("{ribbonColor}", "#FF9933").replace("{triColor}", "#FF9933");
$("#eventWall").html(html);
html = '';
}
for (s = 0; s <= socialBrickLimit; s++) {
h = 1;
w = 1;
html += temp.replace(/\{height\}/g, h*100).replace(/\{width\}/g, w*100).replace("{brickInfo}", "Social Item").replace("{ribbonColor}", "#3366FF").replace("{triColor}", "#3366FF");
$("#eventWall").html(html);
html = '';
}
for (p = 0; p <= photoBrickLimit; p++) {
h = 1;
w = 1;
html += temp.replace(/\{height\}/g, h*100).replace(/\{width\}/g, w*100).replace("{brickInfo}", "Photo Item").replace("{ribbonColor}", "#33FF00").replace("{triColor}", "#33FF00");
$("#eventWall").html(html);
html = '';
}
eventWall.fitZone((600), (815));
function randomList(total) {
var brickLimit = total;
var brickTotal = 0;
var news = Math.floor((Math.random()*4) +1);
brickTotal += news;
if (brickTotal <= 2) {
var social = Math.floor((Math.random()*4)+1);
var tracks = Math.floor((Math.random()*4)+1);
brickTotal = brickTotal + social + tracks;
if (brickTotal <= 10) {
extraBanner = 1;
var photo = brickTotal - total - 1;
} else {
var photo = brickTotal - total - 1;
}
} else {
var social = Math.floor((Math.random()*3)+1);
var photo = Math.floor((Math.random()*3)+1);
var tracks = brickLimit - news - photo - social;
}
var brickCount = new Object()
brickCount[0] = track;
brickCount[1] = news;
brickCount[2] = social;
brickCount[3] = photo;
return brickCount;
}
});
If I am missing a concept please tell me the concept, where I can learn more and examples so I might be able to rework this by myself.

Please check with the selector:
<div class='bubble {eventBrick}Brick'
and
selector: '.eventBrick',