I have ran into a problem, I have managed to translate nav bar. Right now, I have managed to translate all the content of the page but I have a problem which I cannot figure out myself. The problem: When I switch the language of the page from "English" to "Latvian" all <a hrefs> leading to other pages and css styling disappears. After the translation the latvian version becomes a plain text in the navbar, but it stays the same in heading and paragraph. Can anyone help me solve the problem?
const langEl = document.querySelector('.langWrap');
const link = document.querySelectorAll('a');
const titleEl = document.querySelector('.headings');
const descrEl = document.querySelector('.description');
const aboutUsEl = document.querySelector('.aboutus');
const newsEl = document.querySelector('.news');
const resultsEl = document.querySelector('.results');
const leaguesEl = document.querySelector('.leagues');
const loginEl = document.querySelector('.login');
link.forEach(el => {
el.addEventListener('click', () => {
langEl.querySelector('.active').classList.remove('active');
el.classList.add('active');
const attr = el.getAttribute('language');
titleEl.textContent = data[attr].headings;
descrEl.textContent = data[attr].description;
aboutUsEl.textContent = data[attr].aboutus;
newsEl.textContent = data[attr].news;
resultsEl.textContent = data[attr].results;
leaguesEl.textContent = data[attr].leagues;
loginEl.textContent = data[attr].login;
});
});
var data = {
"english":
{
"aboutus":"About Us",
"news":"News",
"results":"Results",
"leagues":"Leagues",
"login":"Profile",
"headings": "News",
"description":
"Last weekend there were a lot of great games."
},
"latvian":
{
"Aboutus":"Par mums",
"news":"Jaunumi",
"results":"Rezultāti",
"leagues":"līgas",
"login":"profils",
"headings": "Jaunumi",
"description":
"Pagājušajā nedēļā bija ļoti daudz labu spēļu"
}
}
<div class="langWrap">
EN
<a href='#' language='latvian'>LV</a>
</div>
<div class="content">
<header id="up">
<img src="/img/logo.png" alt="QuickSportScoresLogo" class="logo">
<div class="container">
<nav>
<ul>
<li class="aboutus">About Us</li>
<li class="news">News</li>
<li class="results">Results</li>
<li class="leagues">Leagues</li>
<li class="login">Profile</li>
</ul>
</nav>
</div>
</header>
<h1 class="headings"> News</h1>
<p class="description">Last weekend there were a lot of great games.
</p>
</div>
here's just change selector to a tag
const langEl = document.querySelector('.langWrap');
const link = document.querySelectorAll('a');
const titleEl = document.querySelector('.headings');
const descrEl = document.querySelector('.description');
const aboutUsEl = document.querySelector('.aboutus a');
const newsEl = document.querySelector('.news a');
const resultsEl = document.querySelector('.results a');
const leaguesEl = document.querySelector('.leagues a');
const loginEl = document.querySelector('.login a');
link.forEach(el => {
el.addEventListener('click', () => {
langEl.querySelector('.active').classList.remove('active');
el.classList.add('active');
const attr = el.getAttribute('language');
titleEl.textContent = data[attr].headings;
descrEl.textContent = data[attr].description;
aboutUsEl.textContent = data[attr].aboutus;
newsEl.textContent = data[attr].news;
resultsEl.textContent = data[attr].results;
leaguesEl.textContent = data[attr].leagues;
loginEl.textContent = data[attr].login;
});
});
var data = {
"english":
{
"aboutus":"About Us",
"news":"News",
"results":"Results",
"leagues":"Leagues",
"login":"Profile",
"headings": "News",
"description":
"Last weekend there were a lot of great games."
},
"latvian":
{
"aboutus":"Par mums",
"news":"Jaunumi",
"results":"Rezultāti",
"leagues":"līgas",
"login":"profils",
"headings": "Jaunumi",
"description":
"Pagājušajā nedēļā bija ļoti daudz labu spēļu"
}
}
<div class="langWrap">
EN
<a href='#' language='latvian'>LV</a>
</div>
<div class="content">
<header id="up">
<img src="/img/logo.png" alt="QuickSportScoresLogo" class="logo">
<div class="container">
<nav>
<ul>
<li class="aboutus">About Us</li>
<li class="news">News</li>
<li class="results">Results</li>
<li class="leagues">Leagues</li>
<li class="login">Profile</li>
</ul>
</nav>
</div>
</header>
<h1 class="headings"> News</h1>
<p class="description">Last weekend there were a lot of great games.
</p>
</div>
Related
For this challenge, I am using AJAX to load contents to my web page, the first problem I have is to display the projects on the page. I have DOM selected the and I am trying to append as required but they still won't display. What am I missing? Secondly, my edit button is not behaving as I want it to.
const today = new Date();
const thisYear = today.getFullYear()
const footer = document.querySelector('footer');
const copyright = document.createElement('p');
copyright.innerHTML = `<span> © Erick Odero ${thisYear}</span> `;
footer.appendChild(copyright);
let skills = ['html', 'CSS', 'JavaScript'];
const skillsSection = document.getElementById('skills');
const skillsList = document.getElementById('skills').children[1];
for (let i = 0; i < skills.length; i++) {
const skill = document.createElement('li');
skill.textContent = skills[i];
skillsList.appendChild(skill);
}
// Create and handle edit button
const editMessage = document.querySelector('#text_message');
const editButton = document.createElement('button');
editButton.innerText = 'Edit';
editButton.type = 'button';
editButton.classList.add('btn');
editMessage.appendChild(editButton);
editMessage.addEventListener('click', (e) => {
const button = e.target;
const span = document.createElement('span');
const editedMessage = document.createElement('input');
input.type = 'text';
console.log(newMessage);
})
// Handle message form submit button
const messageForm = document.querySelector('form[name="leave_message"]')
messageForm.addEventListener('submit', (e) => {
// prevent default refreshing behavior
e.preventDefault();
// create variables for each form field
// const user_name = messageForm.name.value;
// const user_email = messageForm.email.value;
// const user_message = messageForm.message.value;
const user_name = e.target.name;
const user_email = e.target.email;
const user_message = e.target.message;
// Display messages in list
const messageSection = document.getElementById('messages');
const messageList = messageSection.children[1];
const newMessage = document.createElement('li');
newMessage.innerHTML = `${user_name.value}<span> wrote: ${user_message.value}</span>`;
// create button element
const removeButton = document.createElement('button');
removeButton.innerText = 'remove';
removeButton.type = 'button';
// handle the removeButton
removeButton.addEventListener('click', (e) => {
const entry = e.target.parentNode;
entry.remove();
})
// reset the form
messageForm.reset();
newMessage.appendChild(removeButton);
messageList.appendChild(newMessage);
})
const header = document.getElementById('header');
header.classList.add('sticky');
var gitHubRequest = new XMLHttpRequest();
gitHubRequest.onreadystatechange = function() {
if (gitHubRequest.readyState === 4 && gitHubRequest.status === 200) {
gitHubRequest.responseText;
}
};
gitHubRequest.open('GET', 'https://api.github.com/users/eodero/repos');
gitHubRequest.send();
gitHubRequest.addEventListener('load', (event) => {
let repositories = JSON.parse(gitHubRequest.response);
console.log(repositories);
});
const projectSection = document.getElementById('projects');
const projectList = projectSection.lastElementChild;
for (let i = 0; i < projectList.length; i++) {
const project = document.createElement('li');
project.innerText += project[i];
projectList.appendChild(project);
console.log(projectSection);
}
<!DOCTYPE html>
<html>
<head>
<title>erick_odero-portfolio</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edgev">
<link rel="stylesheet" href="index.css">
<script src="https://kit.fontawesome.com/631b2dc748.js" crossorigin="anonymous"></script>
</head>
<body>
<section class="list">
<header id="header">
<h1 id="my-name">Erick O Odero</h1>
<img src="https://avatars.githubusercontent.com/u/84427589?v=4" alt="Author's profile picture" width="60" height="60">
<nav class="main-menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Connect</li>
</ul>
</nav>
</header>
</section>
<main>
<section id="about">
<h1>About</h1>
<p> I am healthcare worker in the field of clinical research residing in Memphis Tennessee and now an aspiring
<br> Software Developer. I am currently a student with Code The Dream taking Javascript, HTML, AJAX and <br> Fetch API lessons. When I learnt of the immense potential that technology has to improve health outcomes<br> of our communities, my interest
in coding was conjured and I hope to immerse myself full time in the industry.
</p>
</section>
<section class="list">
<h1>Experience</h1>
<ul id="exp">
<li>clinical Research Associate - United States</li>
<li>HIV program coordinator - Kenya</li>
<li>Health program coordinator - Kenya</li>
<li>Health Worker Training and Capacity building(volunteer) - Vanuatu</li>
</ul>
</section>
<section class="list">
<h1>My tools</h1>
<ul class="tools">
<li>Visual Studio Code</li>
<li><a href="https://www.apple.com/macbook-air/?afid=p238%7CsS5GAoNB9-dc_mtid_1870765e38482_pcrid_569734191494_pgrid_110391415659_&cid=aos-us-kwgo-mac--slid---product-">Mac
Bookair</a></li>
<li>Windows 10</li>
<li>Slack</li>
<li>Freecodecamp</li>
<li>Whimsical
</li>
<li>github</li>
</ul>
</section>
<section class="section">
<h1>My resume</h1>
<nav>
<ul>
<li>resume</li>
</ul>
</nav>
</section>
<section id="skills">
<h2 class="list">Skills</h2>
<ul id="skillz"></ul>
</section>
<section id="projects">
<h2>Projects</h2>
<ul>
</ul>
</section>
</main>
<!--Create leave message section and add form-->
<section class="section">
<h2>Leave a Message</h2>
<form name="leave_message">
<fieldset id="details">
<legend>1 Your details</legend>
<label for="name">Name:</label><br>
<input type="text" name="name" required="true"><br>
<label for="email">Email:</label><br>
<input type="email" name="email" required="true"><br>
</fieldset>
<fieldset id="text_message">
<legend>2 Your Message</legend>
<label for="message">Message:</label><br>
<textarea id="textMessage" name="message" required="true"></textarea><br>
</fieldset>
<button id="submit" class="btn" type="submit">Submit</button>
</form>
</section>
<!-- Add message list section-->
<section id="messages">
<h2>Messages</h2>
<ul>
</ul>
</section>
<footer></footer>
<script src="index.js"></script>
</body>
</html>
I am trying to run my acquisitions inside a JavaScript map, all the information is coming in, but when I put the image path on the src inside the tag img, it can't be find.
Here is the code:
productSearch(prodBusca) {
const prodPerPage = 15;
const pagesVisited = this.state.pageNumber * prodPerPage;
const displayProds = prodBusca.slice(pagesVisited, pagesVisited + prodPerPage).map(prod => {
let codigo = prod.codigo.toString();
let path = `${this.imgSrc}/${codigo.substr(0, 1)}/${codigo}.jpg`;
let img = path;
return (
<li key={codigo} className="list-group-item">
<div>
<img src={img} alt={prod.descricao} width="150" height="150" />
</div>
<div>
<ul>
<li>
{prod.descricao}
</li>
<li>
{prod.preco}
</li>
</ul>
</div>
</li>
);
})
const pageCount = Math.ceil(prodBusca.length / prodPerPage);
const changePage = ({ selected }) => {
this.setState({ pageNumber: selected });
};
return (
<div>
<section className="secaoProd">
<ul className="list-group list-group-horizontal">
{displayProds}
</ul>
</section>
<div>
<ReactPaginate previousLabel={'<<'} nextLabel={'>>'} pageCount={pageCount} onPageChange={changePage}
containerClassName="paginationBttns"
previousLinkClassName="previousBttn"
nextLinkClassName="nextBttn"
disabledClassName="paginationDisabled"
activeClassName="paginationActive"
/>
</div>
</div>
)
}
enter image description here
The application is in ASP.Net and React
trying to learn Vue js and I'm building a Todo list app everything is working but I have a problem with something, for example when I click on active I want to show the tasks that are not done or finished and so on, here is the code, I tried to use code snippet but it does not work because it does not support Vue js 3 yet
<template>
<section class="header">
</section>
<div class="container">
<div class="title-theme">
<h1>Todo</h1>
<input type="checkbox" id="switch-l" class="themeSwitch">
<label #click="switchTheme" for="switch-l" id="switch" class="themeSwitch-label"></label>
</div>
<div class="todosInput">
<div id="mark"></div>
<form #submit.prevent="addNewTodo" class="form" action="" data-new-todo-form>
<input v-model="newTodo" name="newTodo" id="todos" data-new-todo-input type="text" placeholder="Create a new todo..." >
</form>
</div>
<div class="myTodos">
<ul id="todo-list">
<li v-for="(todo, index) in todos" :key="todo.id" class="todo-item ">
<input #click="toggleDone(todo)" class="js-tick" id="1610198328386" type="checkbox">
<span :class="{ done: todo.done }">{{todo.task}}</span>
<img #click="deleteTodo(index)" class="delete" width="15px" height="15px" src="/images/icon-cross.svg" alt="cross">
</li>
</ul>
</div>
<div class="controls">
<p id="todosLeft">{{}}items left</p><!-- Add dynamic number -->
<div class="controls-list-div">
<ul class="controls-list" data-lists>
<li id="All">All</li>
<li id="Active">Active</li>
<li id="Completed">Completed</li>
</ul>
</div>
<p id="Clear-completed">Clear Completed</p>
</div>
</div>
<div class="instruc">
<p>Drag and drop to reorder list</p>
</div>
<div class="attribution">
Challenge by Frontend Mentor.
Coded by Your Name Here.
</div>
</template>
import {ref} from 'vue';
export default {
setup() {
const newTodo = ref('');
const todos = ref([]);
const addNewTodo = () => {
todos.value.push({
done: false,
task: newTodo.value,
id: Date.now(),
});
newTodo.value = ''
}
const toggleDone = (todo) => {
todo.done = !todo.done
}
const deleteTodo = (index) => {
todos.value.splice(index, 1)
}
const switchTheme = () => {
const body = document.body
if (body.classList.contains('light')) {
body.classList.replace('light', 'dark')
} else {
body.classList.replace('dark', 'light')
}
}
return {
addNewTodo,
newTodo,
todos,
toggleDone,
deleteTodo,
switchTheme,
}
}
}
Instead of rendering todos in v-for, introduce computed (named maybe filteredTodos) and render that. Introduce new ref named filter with possible values of all/active/completed. Implement filtering inside filteredTodos based on the value of filter...
let app = Vue.createApp({
setup() {
const newTodo = Vue.ref('');
const filter = Vue.ref('all')
const todos = Vue.ref([
{ task: "Task 1", done: false, id: 1 },
{ task: "Task 2", done: false, id: 2 }
]);
const filteredTodos = Vue.computed(() => {
const filterFn = filter.value === 'active' ? (item) => !item.done :
filter.value === 'completed' ? (item) => item.done : (item) => true;
return todos.value.filter(filterFn)
})
const addNewTodo = () => {
todos.value.push({
done: false,
task: newTodo.value,
id: Date.now(),
});
newTodo.value = ''
}
const toggleDone = (todo) => {
todo.done = !todo.done
}
const deleteTodo = (index) => {
todos.value.splice(index, 1)
}
const switchTheme = () => {
const body = document.body
if (body.classList.contains('light')) {
body.classList.replace('light', 'dark')
} else {
body.classList.replace('dark', 'light')
}
}
return {
addNewTodo,
newTodo,
todos,
toggleDone,
deleteTodo,
switchTheme,
filter,
filteredTodos
}
}
})
app.mount("#app")
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.5/vue.global.prod.js" integrity="sha512-7mjRUL9551cOFF57PSrURwSa9UsUmufUCU9icwUEoUrECcxpa20PakbPplb7b4ZGbCc0StIr9ytHoXH9+v6ygA==" crossorigin="anonymous"></script>
<div id="app">
<div class="myTodos">
{{ filter }}
<ul id="todo-list">
<li v-for="(todo, index) in filteredTodos" :key="todo.id" class="todo-item ">
<input #click="toggleDone(todo)" class="js-tick" id="1610198328386" type="checkbox" :checked="todo.done">
<span :class="{ done: todo.done }">{{todo.task}}</span>
</li>
</ul>
</div>
<div class="controls">
<ul class="controls-list" data-lists>
<li id="All"><a #click="filter = 'all'" href="#">All<a/></li>
<li id="Active"><a #click="filter = 'active'" href="#">Active<a/></li>
<li id="Completed"><a #click="filter = 'completed'" href="#">Completed<a/></li>
</ul>
</div>
</div>
const setupProducts = (data) => {
if (data.length) {
let html = '';
data.forEach(doc => {
const product = doc.data();
const li = `
<li>
<div class="collapsible-header grey lighten-4"> ${product.title} </div>
<div class="collapsible-header grey lighten-4"> ${doc.id} </div>
<div class="collapsible-body white"> ${product.content}
<a href="" class="secondary-content">
<a class="btn orange modal-trigger" >Get ID</a>
</a>
</li>
`;
html += li;
});
productList.innerHTML = html
} else {
productList.innerHTML = '<h5 class="center-align">Login to view products</h5>';
}
};
My idea is that I want to get the ID by clicking on the document and then but the product.title in db.collection('activeWorks').doc(doc.id or product.id (I don't know what's right...)).set. I have no idea how to do this, please help
Maybe do something like this: set the id tag of each <li> element to the doc id from Firestore, then attach an onclick event trigger
const setupProducts = (data) => {
if (data.length) {
let html = '';
productList.innerHTML = ''
data.forEach(doc => {
const product = doc.data();
const li = `
<li id="${doc.id}">
<div class="collapsible-header grey lighten-4"> ${product.title} </div>
<div class="collapsible-header grey lighten-4"> ${doc.id} </div>
<div class="collapsible-body white"> ${product.content}
<a href="" class="secondary-content">
<a class="btn orange modal-trigger" >Get ID</a>
</a>
</li>
`;
html += li;
productList.innerHTML += html
document.getElementById(doc.id).onclick = () => {
// do firestore stuff here
// db.collection('activeWorks').doc(doc.id).set(your_data)
}
});
} else {
productList.innerHTML = '<h5 class="center-align">Login to view products</h5>';
}
};
If I misunderstood your question I'm sorry
Need help with using js script.
<ul class="producers-links">
<li class="section_All active-producer">A-Z</li>
<li class="section_0-9">0-9</li>
<li class="section_A">A</li>
<li class="section_B">B</li>
<li class="section_C">C</li>
</ul>
And
<div class="producers-list">
<div class="producers-container" id="producers-0-9">
<div class="break-producers">0-9</div>
</div>
<div class="producers-container" id="producers-A">
<div class="break-producers">A</div>
Producer 1
</div>
<div class="producers-container" id="producers-B">
<div class="break-producers">B</div>
Producer 2
</div>
<div class="producers-container" id="producers-C">
<div class="break-producers">C</div>
Producer 3
</div>
</div>
How to make js script that will allow user click on list element then all divs from producers-list will get display:none without this one which was clicked at list.
var producersList = document.querySelectorAll('ul.producers-links>li');
var producersLists = document.querySelectorAll('div.producers-list>div.producers-container');
for (var i = 0; i < producersList.length; i++) {
producersList[i].addEventListener('click', function () {
document.querySelector('.active-producer').classList.remove('active-producer');
this.classList.add('active-producer');
var index = 0,
length = producersList.length;
for (; index < length; index++) {
producersLists[index].style.display = "none";
}
});
}
This allow me to hide all elements from producers-container but i don't know how to show only one element clicked before at list.
First of all you should use classes instead of id in the second list in order to have the ability to add more procedures in the future
try this:
<ul class="producers-links">
<li id="section_All" class="active-producer">A-Z</li>
<li id="section_0-9">0-9</li>
<li id="section_A">A</li>
<li id="section_B">B</li>
<li id="section_C">C</li>
</ul>
<div class="producers-list">
<div class="producers-container section_0-9 section_All">
<div class="break-producers">0-9</div>
</div>
<div class="producers-container section_A section_All">
<div class="break-producers">A</div>
Producer 1
</div>
<div class="producers-container section_B section_All">
<div class="break-producers">B</div>
Producer 2
</div>
<div class="producers-container section_C section_All">
<div class="break-producers">C</div>
Producer 3
</div>
</div>
var producersList = document.querySelectorAll('ul.producers-links > li');
var producersLists = document.querySelectorAll('.producers-container');
for (var i = 0; i < producersList.length; i++) {
producersList[i].addEventListener('click', function () {
document.querySelector('.active-producer').classList.remove('active-producer');
this.classList.add('active-producer');
for (var index = 0; index < producersLists.length ; index++) {
var currElement = producersLists[index];
var hide = !currElement.classList.contains(this.id);
producersLists[index].style.display = hide? "none" : "block";
}
});
}
On click, you can sequentially:
- hide all
- select the one having the same end of id than the textContent of the clicked item (or select all if text is A-Z)
var producersList = document.querySelectorAll('ul.producers-links>li');
var producersLists = document.querySelectorAll('div.producers-list>div.producers-container');
// add eventlistener...
producersList.forEach(x => {
x.addEventListener("click", x => {
hideAll();
document.querySelector('.active-producer').classList.remove('active-producer');
x.target.classList.add('active-producer');
const txt = x.target.textContent;
selectForText(txt);
});
});
// hide/show all...
function hideAll(bShow) {
const cl = bShow === true?"block":"none";
producersLists.forEach(x => x.style.display = cl);
}
// select for text...
function selectForText(txt) {
if(txt === "A-Z") {
// select all...
hideAll(true);
return;
}
// the [...nodelist] part allows to 'cast' to proper array, and to have access to find() function...
const found = [...producersLists].find(q => q.id.split("producers-")[1] === txt);
if(found) {
found.style.display = "block";
}
else {
// ???
}
}
.active-producer {
color: #19f;
}
<ul class="producers-links">
<li class="section_All active-producer">A-Z</li>
<li class="section_0-9">0-9</li>
<li class="section_A">A</li>
<li class="section_B">B</li>
<li class="section_C">C</li>
</ul>
And
<div class="producers-list">
<div class="producers-container" id="producers-0-9">
<div class="break-producers">0-9</div>
</div>
<div class="producers-container" id="producers-A">
<div class="break-producers">A</div>
Producer 1
</div>
<div class="producers-container" id="producers-B">
<div class="break-producers">B</div>
Producer 2
</div>
<div class="producers-container" id="producers-C">
<div class="break-producers">C</div>
Producer 3
</div>
</div>