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>
Related
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
This is my function:
function render() {
let list = document.getElementById('myNotes');
trashFolderModal = document.getElementById('allBlur');
list.innerHTML = localStorage.setItem(key, text);
for (let i = 0; i < titles.length; i++) {
const title = titles[i];
const note = notes[i];
list.innerHTML += card(title, note, i);
}
}
And here is my Note Website (you can see the source code):
http://patrick-sterz.developerakademie.com/Notizblock2/index%282%29.html
setItem returns undefined.
I suspect you need to revisit what you want to do.
Normally we do this when the list changes
localStorage.setItem("list",JSON.stringify(myListArray));
and when we load the page we do a
let listContent = localStorage.getItem("list");
let myListArray = listContent ? JSON.parse(listContent) : [];
How can I limit the post title to 70 characters with the last post's script I use on blogger?
The post title is sometimes more than 70 characters, which distorts the image.
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;
if (postTitle.length >= 70) postTitle.subString(0,69)
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);
if (postTitle.length >= 70) postTitle.substring(0,69)
I am using the p5.js library, and I am working on a speech recognition - text to speech project. Kind of a chatbot.
Input is voice input which becomes a string.
I am outputting the result from a txt file, using a markov chain. Output is a string contained in a div.
My question is:
Is there a way to hide/show the div containing my input/output (.myMessage and .robotMessage) in intervals?
I want the whole screen first showing only the input when I am talking, then input disappears and only output showing, then when the computer voice finishes speaking my input is shown in the screen and so on...
Here some parts of the code, let me know if it is clear enough.
//bot
function setup() {
noCanvas();
//reads and checks into the text file
for (var j = 0; j < names.length; j++) {
var txt = names[j];
for (var i = 0; i <= txt.length - order; i++) {
var gram = txt.substring(i, i + order);
if (i == 0) {
beginnings.push(gram);
}
if (!ngrams[gram]) {
ngrams[gram] = [];
}
ngrams[gram].push(txt.charAt(i + order));
}
}
//voice recognition
let lang = 'en-US';
let speechRec = new p5.SpeechRec(lang, gotSpeech);
let continuous = true;
let interim = false;
speechRec.start(continuous, interim);
//text-to-speach
speech = new p5.Speech();
speech.onLoad = voiceReady;
function voiceReady() {
console.log('voice ready');
}
//input-ouput
function gotSpeech() {
if (speechRec.resultValue) {
var p = createP(speechRec.resultString);
p.class('myMessage');
}
markovIt();
chooseVoice();
speech.speak(answer);
}
}
and
function markovIt() {
var currentGram = random(beginnings);
var result = currentGram;
for (var i = 0; i < 100; i++) {
var possibilities = ngrams[currentGram];
if (!possibilities) {
break;
}
var next = random(possibilities);
result += next;
var len = result.length;
currentGram = result.substring(len - order, len);
}
var answer = result;
window.answer = answer;
var p2 = createP(answer);
p2.class('robotMessage');
}
how the HTML looks
<div class="container">
<div class="myMessage"></div>
<div class="robotMessage"></div>
</div>
Use select() to get a document element by its id, class, or tag name. e.g:
let my_div = select("myMessage");
Change the style of an element by style().
e.g hide:
my_div.style("display", "none");
e.g. show:
my_div.style("display", "block");
See also Toggle Hide and Show
I'm using the following code to display to parse an RSS feed via Javascript and Google Feed API into HTML. Is it possible to grab an image from the RSS feed? It is working fine fro the title, snippet, date and link. I just need the URL for the image as well.
function myGetElementsByClassName(selector) {
if ( document.getElementsByClassName ) {
return document.getElementsByClassName(selector);
}
var returnList = new Array();
var nodes = document.getElementsByTagName('div');
var max = nodes.length;
for ( var i = 0; i < max; i++ ) {
if ( nodes[i].className == selector ) {
returnList[returnList.length] = nodes[i];
}
}
return returnList;
}
var rssReader = {
containers : null,
// initialization function
init : function(selector) {
containers = myGetElementsByClassName(selector);
for(i=0;i<containers.length;i++){
// getting necessary variables
var rssUrl = containers[i].getAttribute('rss_url');
var num = containers[i].getAttribute('rss_num');
var id = containers[i].getAttribute('id');
// creating temp scripts which will help us to transform XML (RSS) to JSON
var url = encodeURIComponent(rssUrl);
var googUrl = 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num='+num+'&q='+url+'&callback=rssReader.parse&context='+id;
var script = document.createElement('script');
script.setAttribute('type','text/javascript');
script.setAttribute('charset','utf-8');
script.setAttribute('src',googUrl);
containers[i].appendChild(script);
}
},
// parsing of results by google
parse : function(context, data) {
var container = document.getElementById(context);
container.innerHTML = '';
// creating list of elements
var mainList = document.createElement('ul');
// also creating its childs (subitems)
var entries = data.feed.entries;
for (var i=0; i<entries.length; i++) {
var listItem = document.createElement('li');
var title = entries[i].title;
var publishedDate = entries[i]. publishedDate;
var contentSnippet = entries[i].contentSnippet;
var contentSnippetText = document.createTextNode(contentSnippet);
var mediaGroup = entries[i].mediaGroup;
var link = document.createElement('a');
link.setAttribute('href', entries[i].link);
link.setAttribute('target','_blank');
var text = document.createTextNode(title);
link.appendChild(text);
var text = document.createTextNode(publishedDate);
link.appendChild(text);
var text = document.createTextNode(mediaGroup);
link.appendChild(text);
// add link to list item
listItem.appendChild(link);
var desc = document.createElement('p');
desc.appendChild(contentSnippetText);
// add description to list item
listItem.appendChild(desc);
// adding list item to main list
mainList.appendChild(listItem);
}
container.appendChild(mainList);
}
};
window.onload = function() {
rssReader.init('post_results');
}
<div class="post_results" id="post_results2" rss_num="2" rss_url="http://www.feed.com/feed">
<div class="loading_rss">
<img alt="Loading..." src="images/loading.gif" />
</div>
</div>
I was able to pull the content (which houses the image tag) with: var
content = entries[i].content;
And parse that to get just the image using this:
var input = content;
var div = document.createElement('div');
div.innerHTML = input;
var img = div.getElementsByTagName('img')[0];