i have been asked to create a footer, and in a JS file to add an array to the footer, that says "this website was built using: (the array values) inside of it. now, they asked me to make each array with a comma between each one, and between the last array, it should contain (and). example: this website was built using "javascript, html, css and python). now,i have done that, BUT!, he told me the commas should not be withing the array, i have used that , inside the string itself.
also, he wants it all to be changed accordingly, even if it has only one language, it should be witout comma, and without (and).
hope i explained myself correcly. could someone help me?
edit: the exact task i have been asked to do/change.
You need to make a footer which will receive X amount of languages. The footer should show each language with a comma after, between the two last languages should be an and with no comma at all. in case of one language the footer will show the language with no and or comma for example: const array = ["HTML","CSS"] footer: HTML and CSS const array = ["HTML","CSS","JS"] footer: HTML, CSS and JS const array = ["HTML"] footer: HTML
JS:
let langs_used = ["HTML\,", " CSS", " JavaScript."]; // u can add 3 more languages
const coding_langs_One = ["HTML\,", " CSS\,", " JavaScript", "Python"];
const coding_langs_Two = ["HTML\,", " CSS\,", " JavaScript\, ", "Python", "Java"];
const coding_langs_Three = ["HTML\,", " CSS\,", " JavaScript\,", "Python\,", "Java", "C "];
document.getElementById("thisWebs").innerHTML = langs_used;
const and = " and "
if(langs_used.length <= 3) {
document.getElementById("thisWebs").innerHTML = langs_used[0] langs_used[1] and langs_used[2]}; "."
if (langs_used.length > 3)
document.getElementById("thisWebs").innerHTML = coding_langs_One[0] coding_langs_One[1] coding_langs_One[2] and coding_langs_One[3] "."
if (langs_used.length > 4) {
document.getElementById("thisWebs").innerHTML = coding_langs_Two[0] coding_langs_Two[1] coding_langs_Two[2] coding_langs_Two[3] and coding_langs_Two[4] "."
}
if (langs_used.length > 5) {
document.getElementById("thisWebs").innerHTML = coding_langs_Three[0] coding_langs_Three[1] coding_langs_Three[2] coding_langs_Three[3] coding_langs_Three[4] and coding_langs_Three[5] "."
}
CodePudding user response：
Your question seems incomplete. If you can provide desired output that will be great but for meanwhile from what I have understood, you can try this approach:
const getSeparatedText = (languages, totalLanguages) => {
let stackUsed = "";
languages.map((language, idx) => {
if (idx === totalLanguages - 1) {
stackUsed = `${language} and `;
} else if (idx < totalLanguages) {
stackUsed = `${language}, `;
} else {
stackUsed = language;
}
});
return stackUsed;
};
const languages = ["html", "css", "javascript"];
// We will take length from 0 to make it easy for `and` padding
const totalLanguages = languages.length - 1;
getSeparatedText(languages, totalLanguages);
NOTE: You can simplify approach by adding ternary operators
CodePudding user response：
const array_of_used_langs = ['Python','Javascript','HTML','CSS']
const array_length = array_of_used_langs.length
array_of_used_langs.forEach(language => {
if (array1.indexOf(element) == array_length - 1) {
document.getElementById("thisWebs").innerHTML = `${language}.`
} else {
document.getElementById("thisWebs").innerHTML = `${language}, `}})
Better do not to use manual typing of the list values. Use a loop instead.
More about foreach loops:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
More about if/else statements in Javascript:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else
And something about lenghts:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/length
CodePudding user response：
I think you need to send a string from array to footer.
const langs_used = ["HTML", " CSS", " JavaScript", "Python", "Java", "C "];
function language(array) {
return array.length > 1 ? `${array.slice(0, array.length - 1).join(", ")} and ${array.slice(array.length - 1)}` : `${array}`;
};
document.getElementById("thisWebs").innerHTML = language(langs_used);
CodePudding user response：
Your code is very heavy. you can use simple code:
const langs_used = ["js", "css", "html", "python"];
const result = langs_used.reduce(function (p, d, i) {
return p (i === langs_used.length - 1 ? ' and ' : ', ') d;
});
document.getElementById("thisWebs").innerHTML = result;
CodePudding user response：
Details are commented in example
/**
* Inserts a string comprised of a given string and/or a given array of strings
* into a given element. If the given array has 2 or more strings, commas will
* be properly applied as well as the conjunction "and".
* @param {string|object} element - A string selector or DOM object
* @param {string} string - A string off varying length
* @param {array<string>} array - An array of strings
* @param {...number} ...indices - A list of index numbers that
* correspond to the array, as a rest parameter quantity is unlimited
*/
function phrase(element, string, array, ...indices) {
let node = typeof element === "string" ?
document.querySelector(element) : element;
let segment = typeof string === "string" ? string : "";
let words = Array.isArray(array) && array.length > 0 ? array : [];
let numbers = [...indices].length > 0 ? [...indices] : words.map((_, i) => i);
let list = numbers.map(number => " " words[number]).filter(a => a);
let size = list.length;
if (size === 2) {
list.splice(-1, 0, " and")
list = list.join(' ').replace(/, and,/, "and");
}
if (size > 2) {
list.splice(-1, 0, " and");
list = list.join(', ').replace(/and,/, "and");
}
node.insertAdjacentText("beforeend", segment list);
}
/*
A DOM object and string is passed, it's safe to leave array and ...indices
undefined
*/
const title = document.querySelector("h1");
phrase(title, "Site Title");
// string is skipped with null and the first and second index of array is passed
const short = ["A", "B"];
phrase(".content", null, short, 0, 1);
// All parameters are in use
const str = "This website was built using: ";
const lang = ["HTML", "CSS", "JavaScript", "Python", "PHP", "Java", "C "];
phrase("footer", str, lang, 0, 1, 2, 4, 6);html {
font: 300 2ch/1.15 "Segoe UI"
}
header {
border-bottom: 3px groove #aaa
}
h1 {
margin: 8px 0;
font-weight: 700;
letter-spacing: 3px;
font-size: 2rem;
}
h1::first-letter {
font-size: 1.5em;
vertical-align: middle;
padding-bottom: 0.15em;
}
main {
min-height: 30vh
}
footer {
border-top: 3px groove #aaa;
padding-top: 8px;
}<header>
<h1></h1>
</header>
<main>
<p ></p>
</main>
<footer></footer>