We Keep Coding

Unremovable space in autocomplete popup

I have been working on this for an hour, and I still do not understand why the popup menu has a space before the autocompleted word. I simply want to know what the underlying cause of this issue is.
Here's my attempt:
body{
background-color:black;
}
.searchBar_child {
width: 100%;
height: 40px;
padding-left: 15px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
box-shadow: none !important;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
.searchBarInput {
width: 100%;
padding: 15px 10px;
border: none;
border-bottom: 1px solid #645979;
outline: none;
border-radius: 5px 5px 0 0;
background-color: #ffffff;
font-size: 16px;
}
.autocomplete_popup {
list-style: none;
}
.list {
width: 100%;
background-color: #ffffff;
margin-top: 10px;
border-radius: 10px;
}
.list-items {
width: 100%;
padding: 10px 15px;
}
.list-items:hover {
color: white;
background-color: turquoise;
border-radius: 10px;
width: 100% !important;
}
let names = [
"CSS",
"HTML",
"Ayla",
"Jake",
"Sean",
"Henry",
"Brad",
"Stephen",
"Taylor",
"Timmy",
"Cathy",
"John",
"Amanda",
"Amara",
"Sam",
"Sandy",
"Danny",
"Ellen",
"Camille",
"Chloe",
"Emily",
"Nadia",
"Mitchell",
"Harvey",
"Lucy",
"Amy",
"Glen",
"Peter",
];
//Sort names in ascending order
let sortedNames = names.sort();
//reference
let input = document.getElementById("searchBar");
//Execute function on keyup
input.addEventListener("keyup", (e) => {
//loop through above array
//Initially remove all elements ( so if user erases a letter or adds new letter then clean previous outputs)
removeElements();
for (let i of sortedNames) {
//convert input to lowercase and compare with each string
if (
i.toLowerCase().startsWith(input.value.toLowerCase()) &&
input.value != ""
) {
//create li element
let listItem = document.createElement("li");
//One common class name
listItem.classList.add("list-items");
listItem.style.cursor = "pointer";
listItem.setAttribute("onclick", "displayNames('" + i + "')");
//Display matched part in bold
let word = "<b class=\"searchBarWord\">" + i.substr(0, input.value.length) + "</b>";
word += i.substr(input.value.length);
//display the value in array
listItem.innerHTML = word;
document.querySelector(".list").appendChild(listItem);
}
}
});
function displayNames(value) {
input.value = value;
removeElements();
}
function removeElements() {
//clear all the item
let items = document.querySelectorAll(".list-items");
items.forEach((item) => {
item.remove();
});
}
<div class="searchBar_parent">
<form class="searchBar_child" autocomplete="off">
<div><input id="searchBar" class="form-control searchBarInput" type="text" placeholder="Type a name here..." /></div>
<ul class="autocomplete_popup list"></ul>
</form>
</div>
I experimented with padding and margins even attempted setting the width to 100%. These did not assist me in resolving the problem.
Any help would be greatly appreciated; please do so.

autocomplete_popup {
list-style: none;
padding: 0;
margin: 0;
}

Javascript Won't replace image

My Js code below is a quiz game. Each question takes up a full page, which means we have to change all the content every time the user presses the next button.
My issue is, i can't seem to get the image to switch to the next by fully replacing it. In my case the new images just go to the bottom of the first.
// Questions will be asked//
const Questions = [
{ id: 0, i: "images/trump.jpg", a: [{ text: "George Washington", isCorrect: false }, { text: "John Adams", isCorrect: false }, { text: "James Madison", isCorrect: false }, { text: "Donald John Trump", isCorrect: true } ] },
{ id: 1, i: "http://www.google.com/intl/en_com/images/logo_plain.png", a: [{ text: "Lampang", isCorrect: false, isSelected: false }, { text: "phuket", isCorrect: false }, { text: "Ayutthaya", isCorrect: false }, { text: "Bangkok", isCorrect: true } ] },
{ id: 2, i: "http://www.google.com/intl/en_com/images/logo_plain.png", a: [{ text: "surat", isCorrect: false }, { text: "vadodara", isCorrect: false }, { text: "gandhinagar", isCorrect: true }, { text: "rajkot", isCorrect: false } ] }
]
// Set start//
var start = true;
// Iterate//
function iterate(id) {
// Getting the result display section//
var result = document.getElementsByClassName("result");
result[0].innerText = "";
//Adding an image//
var img = document.createElement("img");
img.src = Questions[id].i;
var src = document.getElementById("image");
src.appendChild(img);
// Getting the options//
const op1 = document.getElementById('op1');
const op2 = document.getElementById('op2');
const op3 = document.getElementById('op3');
const op4 = document.getElementById('op4');
// Providing option text//
op1.innerText = Questions[id].a[0].text;
op2.innerText = Questions[id].a[1].text;
op3.innerText = Questions[id].a[2].text;
op4.innerText = Questions[id].a[3].text;
// Providing the true or false value to the options//
op1.value = Questions[id].a[0].isCorrect;
op2.value = Questions[id].a[1].isCorrect;
op3.value = Questions[id].a[2].isCorrect;
op4.value = Questions[id].a[3].isCorrect;
var selected = "";
// Show selection for op1//
op1.addEventListener("click", () => {
op1.style.backgroundColor = "lightgoldenrodyellow";
op2.style.backgroundColor = "lightskyblue";
op3.style.backgroundColor = "lightskyblue";
op4.style.backgroundColor = "lightskyblue";
selected = op1.value;
})
// Show selection for op2//
op2.addEventListener("click", () => {
op1.style.backgroundColor = "lightskyblue";
op2.style.backgroundColor = "lightgoldenrodyellow";
op3.style.backgroundColor = "lightskyblue";
op4.style.backgroundColor = "lightskyblue";
selected = op2.value;
})
// Show selection for op3//
op3.addEventListener("click", () => {
op1.style.backgroundColor = "lightskyblue";
op2.style.backgroundColor = "lightskyblue";
op3.style.backgroundColor = "lightgoldenrodyellow";
op4.style.backgroundColor = "lightskyblue";
selected = op3.value;
})
// Show selection for op4//
op4.addEventListener("click", () => {
op1.style.backgroundColor = "lightskyblue";
op2.style.backgroundColor = "lightskyblue";
op3.style.backgroundColor = "lightskyblue";
op4.style.backgroundColor = "lightgoldenrodyellow";
selected = op4.value;
})
// Grabbing the evaluate button//
const evaluate = document.getElementsByClassName("evaluate");
// Evaluate method//
evaluate[0].addEventListener("click", () => {
if (selected == "true") {
result[0].innerHTML = "True";
result[0].style.color = "green";
} else {
result[0].innerHTML = "False";
result[0].style.color = "red";
}
})
}
if (start) {
iterate("0");
}
// Next button and method//
const next = document.getElementsByClassName('next')[0];
var id = 0;
next.addEventListener("click", () => {
setTimeout(() => {
start = false;
if (id < 2) {
id++;
iterate(id);
console.log(id);
}
})
})
:root {
--primary: #1D1D1F;
--secondary: #858786;
--erro: #FF5757;
text-align: center;
align-items: center;
align-self: center;
font-family: SF Pro Display, SF Pro Icons, AOS Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
}
.column {
justify-items: center;
justify-content: center;
float: left;
width: 50%;
justify-content: center;
}
.main-container {
margin: 50px;
border-radius: 20px;
background-color: #F5F8FA;
}
/* Clear floats after the columns */
.main-container:after {
content: "";
display: table;
clear: both;
}
.main-container img {
width: 320px;
height: 320px;
border-radius: 20px;
object-position: center;
object-fit: cover;
}
.center-cropped img {
border-radius: 2px;
width: 50%;
height: 50%;
object-position: center;
object-fit: cover;
}
.option-container {
margin-top: 50%;
margin-bottom: 50%;
grid-column: 1;
margin: 10px;
padding: 5px;
width: 100%;
height: auto;
}
.quiz-image {
margin: 10px;
padding: 10px;
width: 100%;
}
.bottom-left {
position: absolute;
bottom: 8px;
left: 16px;
}
.option {
border-radius: 10px;
border-width: 0px;
margin: 10px;
padding: 10px;
width: 50%;
height: auto;
font-size: 1rem;
font-weight: 600;
color: white;
background-color: #1da1f2;
}
.option:hover {
background-color: #e1e8ed;
}
.title h1 {
font-size: 4rem;
font-weight: 400;
padding: 10px;
color: #1d1d1d;
}
.title h2 {
font-size: 1.5rem;
font-weight: 400;
color: #1D1D1D;
}
h2 {
font-size: 3rem;
font-weight: 300;
color: #1D1D1D;
}
.question-container {
margin: 10px;
padding: 5px;
width: 80vw;
height: 10vh;
background-color: #c7dddf;
font-size: x-large;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="title">
<h1>Guess The President</h1>
</div>
<div class="main-container" >
<div class="result"></div>
<div class="column">
<div class="quiz-image" id="image"></div>
</div>
<div class="column">
<div class="option-container">
<button class="option" onclick="" id="op1">option1</button>
<button class="option" id="op2">option2</button>
<button class="option" id="op3">option3</button>
<button class="option" id="op4">option4</button>
</div>
</div>
</div>
<div class="navigation">
<button class="evaluate">Evaluate</button>
<button class="next">Next</button>
</div>

Where you have your
src.appendChild(img);
Change it to this:
src.innerHTML = "";
src.appendChild(img);
This will clear out the previous image and the new one will be added in.
Hope this helps.

Just for the heck of it. Not really an answer, but thought your question used jQuery but your code did not use it (sorry, Andy, it's a mess!). The following code is dynamic and will adapt to how many questions you have, each may contain a varying amount of different answers.
// Questions will be asked//
const questions = [
{ id: 0, i: "https://upload.wikimedia.org/wikipedia/commons/thumb/5/56/Donald_Trump_official_portrait.jpg/330px-Donald_Trump_official_portrait.jpg", a: [{ text: "George Washington", isCorrect: false }, { text: "John Adams", isCorrect: false }, { text: "James Madison", isCorrect: false }, { text: "Donald John Trump", isCorrect: true } ] },
{ id: 1, i: "https://upload.wikimedia.org/wikipedia/commons/thumb/a/af/Bangkok_Montage_2021.jpg/375px-Bangkok_Montage_2021.jpg", a: [{ text: "Lampang", isCorrect: false, isSelected: false }, { text: "phuket", isCorrect: false }, { text: "Ayutthaya", isCorrect: false }, { text: "Bangkok", isCorrect: true } ] },
{ id: 2, i: "https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Akshardham_Gandhinagar_Gujarat.jpg/405px-Akshardham_Gandhinagar_Gujarat.jpg", a: [{ text: "surat", isCorrect: false }, { text: "vadodara", isCorrect: false }, { text: "gandhinagar", isCorrect: true }, { text: "rajkot", isCorrect: false } ] }
];
// Set start//
const game = {
active: true,
currentQuestion: 0,
selectedAnswer: null,
evaluated: false,
score: 0
};
function updateAnswerStatus() {
const progressText = `${game.currentQuestion + 1} / ${questions.length} - ${game.score} pts`;
const hasNext = game.currentQuestion < questions.length - 1;
$('#result').text(progressText);
$('#btnEvaluate').attr('disabled', game.evaluated || !game.selectedAnswer);
$('#btnNext').attr('disabled', !game.evaluated || !hasNext);
}
function selectAnswer(selectedAnswer) {
if (!game.evaluated) {
game.selectedAnswer = selectedAnswer;
$('#optionList .option').each(function () {
const option = $(this);
const answer = option.data('answer');
if (answer === selectedAnswer) {
option.addClass('selected');
} else {
option.removeClass('selected');
}
});
updateAnswerStatus()
}
}
function evaluateAnswer() {
if (!game.evaluated && game.selectedAnswer) {
game.evaluated = true;
$('#optionList .option').each(function () {
const option = $(this);
const answer = option.data('answer');
if (answer === game.selectedAnswer) {
option.addClass( answer.isCorrect ? 'correct' : 'incorrect');
game.score = game.score + (answer.isCorrect ? 1 : 0);
}
});
updateAnswerStatus();
}
}
function createOption(answer) {
return $('<button>')
.data({ answer })
.text(answer.text)
.addClass('option')
.on('click', function() {
selectAnswer(answer);
})
;
}
function renderCurrentQuestion() {
const question = questions[game.currentQuestion];
if (question) {
const optList = $('#optionList').empty();
const image = $('#image').empty();
game.selectedAnswer = null;
game.evaluated = false;
image.append($('<img>').attr('src', question.i));
for (const answer of question.a) {
optList.append( createOption(answer) );
}
}
updateAnswerStatus();
};
// next question?
$('#btnNext').on('click', function() {
game.currentQuestion = game.currentQuestion + 1;
renderCurrentQuestion();
}).attr('disabled', true);
$('#btnEvaluate').on('click', function() {
evaluateAnswer();
});
if (game.active) {
renderCurrentQuestion();
}
:root {
--primary: #1D1D1F;
--secondary: #858786;
--erro: #FF5757;
text-align: center;
align-items: center;
align-self: center;
font-family: SF Pro Display, SF Pro Icons, AOS Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
}
.column {
justify-items: center;
justify-content: center;
float: left;
width: 50%;
justify-content: center;
}
.main-container {
margin: 50px;
border-radius: 20px;
background-color: #F5F8FA;
}
/* Clear floats after the columns */
.main-container:after {
content: "";
display: table;
clear: both;
}
.main-container img {
width: 320px;
height: 320px;
border-radius: 20px;
object-position: center;
object-fit: cover;
}
.center-cropped img {
border-radius: 2px;
width: 50%;
height: 50%;
object-position: center;
object-fit: cover;
}
.option-container {
margin-top: 50%;
margin-bottom: 50%;
grid-column: 1;
margin: 10px;
padding: 5px;
width: 100%;
height: auto;
}
.quiz-image {
margin: 10px;
padding: 10px;
width: 100%;
}
.bottom-left {
position: absolute;
bottom: 8px;
left: 16px;
}
.option {
border-radius: 10px;
border-width: 0px;
margin: 10px;
padding: 10px;
width: 50%;
height: auto;
font-size: 1rem;
font-weight: 600;
color: white;
background-color: #1da1f2;
}
.option:hover {
color: #1da1f2;
background-color: #d1d8dd;
}
.option.selected {
background-color: #bbbb33;
}
.option.selected:hover {
color: white;
background-color: #777733;
}
.option.selected.incorrect {
background-color: #bb3333;
}
.option.selected.correct {
background-color: #33bb33;
}
.title h1 {
font-size: 4rem;
font-weight: 400;
padding: 10px;
color: #1d1d1d;
}
.title h2 {
font-size: 1.5rem;
font-weight: 400;
color: #1D1D1D;
}
h2 {
font-size: 3rem;
font-weight: 300;
color: #1D1D1D;
}
.question-container {
margin: 10px;
padding: 5px;
width: 80vw;
height: 10vh;
background-color: #c7dddf;
font-size: x-large;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="title">
<h1>Guess the answer</h1>
</div>
<div class="main-container" >
<div id="result" class="result"></div>
<div class="column">
<div id="image"class="quiz-image"></div>
</div>
<div class="column">
<div id="optionList" class="option-container"></div>
</div>
</div>
<div class="navigation">
<button id="btnEvaluate" class="evaluate">Evaluate</button>
<button id="btnNext" class="next">Next</button>
</div>

What did i do wrong in this JavaScript code [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 6 months ago.
Improve this question
I am learning javascript nowadays and i am trying to make a word scramble game via youtube video. When i hit check it always says not correct how can i fix this problem ? What did i do wrong ? (This is my first entry if i do something wrong or deficent please let me know + sorry for my bad english :) )
const wordText = document.querySelector(".word"),
hintText = document.querySelector(".hint span"),
inputField = document.querySelector(".input"),
refreshBtn = document.querySelector(".refresh-word"),
checkBtn = document.querySelector(".check-word");
// Words/Kelimeler
const words = [
{
word: "addition",
hint: "The process of adding numbers",
},
{
word: "meeting",
hint: "Event in which people come together",
},
{
word: "number",
hint: "Math symbol used for counting",
},
{
word: "exchange",
hint: "The act of trading",
},
{
word: "canvas",
hint: "Piece of fabric for oil painting",
},
{
word: "garden",
hint: "Space for planting flower and plant",
},
{
word: "position",
hint: "Location of someone or something",
},
{
word: "feather",
hint: "Hair like outer covering of bird",
},
{
word: "comfort",
hint: "A pleasant feeling of relaxation",
},
{
word: "tongue",
hint: "The muscular organ of mouth",
},
{
word: "expansion",
hint: "The process of increase or grow",
},
{
word: "country",
hint: "A politically identified region",
},
{
word: "group",
hint: "A number of objects or persons",
},
{
word: "taste",
hint: "Ability of tongue to detect flavour",
},
{
word: "store",
hint: "Large shop where goods are traded",
},
{
word: "field",
hint: "Area of land for farming activities",
},
{
word: "friend",
hint: "Person other than a family member",
},
{
word: "pocket",
hint: "A bag for carrying small items",
},
{
word: "needle",
hint: "A thin and sharp metal pin",
},
{
word: "expert",
hint: "Person with extensive knowledge",
},
{
word: "statement",
hint: "A declaration of something",
},
{
word: "second",
hint: "One-sixtieth of a minute",
},
{
word: "library",
hint: "Place containing collection of books",
},
];
let correctWord;
const initGame = () => {
let randomObj = words[Math.floor(Math.random() * words.length)]; //kelimelerden rastgele obje alma /getting random object from words
let wordArray = randomObj.word.split(""); //Splitting each letter of random word / her kelimeyi rastgele harflere böler
for (let i = wordArray.length - 1; i > 0; i--) {
let j = Math.floor(Math.random() * (i + 1)); //rastgele sayı alma /geting random num
let temp = wordArray[i];
wordArray[i] = wordArray[j];
wordArray[j] = temp;
}
wordText.innerText = wordArray.join(""); //ayırdığımız kelimelerin boşluklarını neyle bağlıyacağımızı seçiyoruz/passing shuffled word as word text
hintText.innerText = randomObj.hint;
correctWord = randomObj.word.toLowerCase;
console.log(randomObj);
};
const checkWord = () => {
let userWord = inputField.value.toLocaleLowerCase();
console.log(userWord);
if (userWord !== correctWord)
return alert(`Oops! ${userWord} is not correct word`);
alert(`Congrats! ${userWord.toUpperCase()} is correct`);
if (!userWord) return alert(`Please enter word`);
};
refreshBtn.addEventListener("click", initGame);
checkBtn.addEventListener("click", checkWord);
initGame();
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #2c3333;
}
.container {
width: 450px;
background: #fff;
border-radius: 7px;
}
.container h2 {
font-size: 25px;
font-weight: 500;
padding: 18px 25px;
border-bottom: 1px solid #ccc;
}
.container .content {
margin: 25px 20px 35px;
}
.content .word {
font-size: 33px;
font-weight: 500;
text-align: center;
text-transform: uppercase;
letter-spacing: 25px;
margin-right: -25px;
}
.content .details {
margin: 25px 0 20px;
}
.details p {
font-size: 18px;
margin-bottom: 10px;
}
.details p b {
font-weight: 500;
}
.content input {
width: 100%;
height: 60px;
outline: none;
padding: 0 16px;
border-radius: 5px;
border: 1px solid #aaa;
font-size: 18px;
}
.content .buttons {
display: flex;
margin-top: 20px;
justify-content: space-between;
}
.buttons button {
border: none;
outline: none;
padding: 15px 0;
color: white;
cursor: pointer;
font-size: 17px;
border-radius: 5px;
width: calc(100% / 2- 8px);
}
.buttons .check-word {
background: #a0d995;
padding-left: 30px;
padding-right: 30px;
}
.buttons .refresh-word {
background: #a5c9ca;
padding-left: 30px;
padding-right: 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Word Scramble Game</title>
<link rel="stylesheet" href="style.css" />
<script src="js/script.js" defer></script>
</head>
<body>
<div class="container">
<h2>Word Scramble Game</h2>
<div class="content">
<p class="word"></p>
<div class="details">
<p class="hint">Hint:<span></span></p>
<p class="time">
Time Left:<span><b>30</b>s</span>
</p>
</div>
<input class="input" type="text" placeholder="Enter a valid word" />
<div class="buttons">
<button class="refresh-word">Refresh Word</button>
<button class="check-word">Check Word</button>
</div>
</div>
</div>
</body>
</html>

toLowerCase is a function, not a property, so you need to add parenthesis.
correctWord = randomObj.word.toLowerCase();
const wordText = document.querySelector(".word"),
hintText = document.querySelector(".hint span"),
inputField = document.querySelector(".input"),
refreshBtn = document.querySelector(".refresh-word"),
checkBtn = document.querySelector(".check-word");
// Words/Kelimeler
const words = [
{
word: "addition",
hint: "The process of adding numbers",
},
{
word: "meeting",
hint: "Event in which people come together",
},
{
word: "number",
hint: "Math symbol used for counting",
},
{
word: "exchange",
hint: "The act of trading",
},
{
word: "canvas",
hint: "Piece of fabric for oil painting",
},
{
word: "garden",
hint: "Space for planting flower and plant",
},
{
word: "position",
hint: "Location of someone or something",
},
{
word: "feather",
hint: "Hair like outer covering of bird",
},
{
word: "comfort",
hint: "A pleasant feeling of relaxation",
},
{
word: "tongue",
hint: "The muscular organ of mouth",
},
{
word: "expansion",
hint: "The process of increase or grow",
},
{
word: "country",
hint: "A politically identified region",
},
{
word: "group",
hint: "A number of objects or persons",
},
{
word: "taste",
hint: "Ability of tongue to detect flavour",
},
{
word: "store",
hint: "Large shop where goods are traded",
},
{
word: "field",
hint: "Area of land for farming activities",
},
{
word: "friend",
hint: "Person other than a family member",
},
{
word: "pocket",
hint: "A bag for carrying small items",
},
{
word: "needle",
hint: "A thin and sharp metal pin",
},
{
word: "expert",
hint: "Person with extensive knowledge",
},
{
word: "statement",
hint: "A declaration of something",
},
{
word: "second",
hint: "One-sixtieth of a minute",
},
{
word: "library",
hint: "Place containing collection of books",
},
];
let correctWord;
const initGame = () => {
let randomObj = words[Math.floor(Math.random() * words.length)]; //kelimelerden rastgele obje alma /getting random object from words
let wordArray = randomObj.word.split(""); //Splitting each letter of random word / her kelimeyi rastgele harflere böler
for (let i = wordArray.length - 1; i > 0; i--) {
let j = Math.floor(Math.random() * (i + 1)); //rastgele sayı alma /geting random num
let temp = wordArray[i];
wordArray[i] = wordArray[j];
wordArray[j] = temp;
}
wordText.innerText = wordArray.join(""); //ayırdığımız kelimelerin boşluklarını neyle bağlıyacağımızı seçiyoruz/passing shuffled word as word text
hintText.innerText = randomObj.hint;
correctWord = randomObj.word.toLowerCase();
};
const checkWord = () => {
let userWord = inputField.value.toLocaleLowerCase();
if (userWord !== correctWord)
return alert(`Oops! ${userWord} is not correct word`);
alert(`Congrats! ${userWord.toUpperCase()} is correct`);
if (!userWord) return alert(`Please enter word`);
};
refreshBtn.addEventListener("click", initGame);
checkBtn.addEventListener("click", checkWord);
initGame();
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #2c3333;
}
.container {
width: 450px;
background: #fff;
border-radius: 7px;
}
.container h2 {
font-size: 25px;
font-weight: 500;
padding: 18px 25px;
border-bottom: 1px solid #ccc;
}
.container .content {
margin: 25px 20px 35px;
}
.content .word {
font-size: 33px;
font-weight: 500;
text-align: center;
text-transform: uppercase;
letter-spacing: 25px;
margin-right: -25px;
}
.content .details {
margin: 25px 0 20px;
}
.details p {
font-size: 18px;
margin-bottom: 10px;
}
.details p b {
font-weight: 500;
}
.content input {
width: 100%;
height: 60px;
outline: none;
padding: 0 16px;
border-radius: 5px;
border: 1px solid #aaa;
font-size: 18px;
}
.content .buttons {
display: flex;
margin-top: 20px;
justify-content: space-between;
}
.buttons button {
border: none;
outline: none;
padding: 15px 0;
color: white;
cursor: pointer;
font-size: 17px;
border-radius: 5px;
width: calc(100% / 2- 8px);
}
.buttons .check-word {
background: #a0d995;
padding-left: 30px;
padding-right: 30px;
}
.buttons .refresh-word {
background: #a5c9ca;
padding-left: 30px;
padding-right: 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Word Scramble Game</title>
<link rel="stylesheet" href="style.css" />
<script src="js/script.js" defer></script>
</head>
<body>
<div class="container">
<h2>Word Scramble Game</h2>
<div class="content">
<p class="word"></p>
<div class="details">
<p class="hint">Hint:<span></span></p>
<p class="time">
Time Left:<span><b>30</b>s</span>
</p>
</div>
<input class="input" type="text" placeholder="Enter a valid word" />
<div class="buttons">
<button class="refresh-word">Refresh Word</button>
<button class="check-word">Check Word</button>
</div>
</div>
</div>
</body>
</html>

You are missing parentheses see my comment in code on line 116
const wordText = document.querySelector(".word"),
hintText = document.querySelector(".hint span"),
inputField = document.querySelector(".input"),
refreshBtn = document.querySelector(".refresh-word"),
checkBtn = document.querySelector(".check-word");
// Words/Kelimeler
const words = [{
word: "addition",
hint: "The process of adding numbers",
},
{
word: "meeting",
hint: "Event in which people come together",
},
{
word: "number",
hint: "Math symbol used for counting",
},
{
word: "exchange",
hint: "The act of trading",
},
{
word: "canvas",
hint: "Piece of fabric for oil painting",
},
{
word: "garden",
hint: "Space for planting flower and plant",
},
{
word: "position",
hint: "Location of someone or something",
},
{
word: "feather",
hint: "Hair like outer covering of bird",
},
{
word: "comfort",
hint: "A pleasant feeling of relaxation",
},
{
word: "tongue",
hint: "The muscular organ of mouth",
},
{
word: "expansion",
hint: "The process of increase or grow",
},
{
word: "country",
hint: "A politically identified region",
},
{
word: "group",
hint: "A number of objects or persons",
},
{
word: "taste",
hint: "Ability of tongue to detect flavour",
},
{
word: "store",
hint: "Large shop where goods are traded",
},
{
word: "field",
hint: "Area of land for farming activities",
},
{
word: "friend",
hint: "Person other than a family member",
},
{
word: "pocket",
hint: "A bag for carrying small items",
},
{
word: "needle",
hint: "A thin and sharp metal pin",
},
{
word: "expert",
hint: "Person with extensive knowledge",
},
{
word: "statement",
hint: "A declaration of something",
},
{
word: "second",
hint: "One-sixtieth of a minute",
},
{
word: "library",
hint: "Place containing collection of books",
},
];
let correctWord;
const initGame = () => {
let randomObj = words[Math.floor(Math.random() * words.length)]; //kelimelerden rastgele obje alma /getting random object from words
let wordArray = randomObj.word.split(""); //Splitting each letter of random word / her kelimeyi rastgele harflere böler
for (let i = wordArray.length - 1; i > 0; i--) {
let j = Math.floor(Math.random() * (i + 1)); //rastgele sayı alma /geting random num
let temp = wordArray[i];
wordArray[i] = wordArray[j];
wordArray[j] = temp;
}
wordText.innerText = wordArray.join(""); //ayırdığımız kelimelerin boşluklarını neyle bağlıyacağımızı seçiyoruz/passing shuffled word as word text
hintText.innerText = randomObj.hint;
correctWord = randomObj.word.toLowerCase(); // You are missing parentheses here
console.log(randomObj);
};
const checkWord = () => {
let userWord = inputField.value.toLocaleLowerCase();
console.log({userWord, correctWord});
if (userWord !== correctWord)
return alert(`Oops! ${userWord} is not correct word`);
alert(`Congrats! ${userWord.toUpperCase()} is correct`);
if (!userWord) return alert(`Please enter word`);
};
refreshBtn.addEventListener("click", initGame);
checkBtn.addEventListener("click", checkWord);
initGame();
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #2c3333;
}
.container {
width: 450px;
background: #fff;
border-radius: 7px;
}
.container h2 {
font-size: 25px;
font-weight: 500;
padding: 18px 25px;
border-bottom: 1px solid #ccc;
}
.container .content {
margin: 25px 20px 35px;
}
.content .word {
font-size: 33px;
font-weight: 500;
text-align: center;
text-transform: uppercase;
letter-spacing: 25px;
margin-right: -25px;
}
.content .details {
margin: 25px 0 20px;
}
.details p {
font-size: 18px;
margin-bottom: 10px;
}
.details p b {
font-weight: 500;
}
.content input {
width: 100%;
height: 60px;
outline: none;
padding: 0 16px;
border-radius: 5px;
border: 1px solid #aaa;
font-size: 18px;
}
.content .buttons {
display: flex;
margin-top: 20px;
justify-content: space-between;
}
.buttons button {
border: none;
outline: none;
padding: 15px 0;
color: white;
cursor: pointer;
font-size: 17px;
border-radius: 5px;
width: calc(100% / 2- 8px);
}
.buttons .check-word {
background: #a0d995;
padding-left: 30px;
padding-right: 30px;
}
.buttons .refresh-word {
background: #a5c9ca;
padding-left: 30px;
padding-right: 30px;
}
<div class="container">
<h2>Word Scramble Game</h2>
<div class="content">
<p class="word"></p>
<div class="details">
<p class="hint">Hint:<span></span></p>
<p class="time">
Time Left:<span><b>30</b>s</span>
</p>
</div>
<input class="input" type="text" placeholder="Enter a valid word" />
<div class="buttons">
<button class="refresh-word">Refresh Word</button>
<button class="check-word">Check Word</button>
</div>
</div>
</div>

After a bit of JSFiddling, I logged when it set the correct answer and found that: You are setting the correctAnswer Variable to a function (specifically toLocaleLowercase. What you want is to call that function and set correctAnswer to the value: (ln 117)
correctWord = randomObj.word.toLocaleLowerCase()

Getting an unexpected token error in React

This is my first time using react and I have somewhat limited experience with javascript in general. Trying to adapt a project I found on codepen for my project. The idea being creating a dynamic graded quiz that returns some output if a user selects the wrong answer.
This is what I have as my html:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="{% static 'second/css/app/quiz_control.css' %}">
<script src="https://unpkg.com/react#16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js" crossorigin></script>
<script src="{% static 'second/js/app/quiz_control.js' %}" defer></script>
</head>
<main class="container">
<section id="riots-to-renaissance">
</section>
</main>
</html>
javascript:
const RawHTML = (props) => <span dangerouslySetInnerHTML={{__html: props.html}}></span>;
class QuestionImage extends React.Component {
constructor(props) {
super(props);
this.imgRef = React.createRef();
}
componentDidUpdate(prevProps, prevState) {
if (this.imgRef.current && prevProps.img.src !== this.props.img.src) {
this.imgRef.current.classList.add('fade-in');
let timer = setTimeout(() => {
this.imgRef.current.classList.remove('fade-in');
clearTimeout(timer);
}, 1000)
}
}
render() {
return (
<img ref={this.imgRef} className="img-fluid" src={this.props.img.src} alt={this.props.img.alt} />
);
}
}
const QuizProgress = (props) => {
return (
<div className="progress">
<p className="counter">
<span>Question {props.currentQuestion+1} of {props.questionLength}</span>
</p>
<div className="progress-bar" style={{'width': ((props.currentQuestion+1) / props.questionLength) * 100 + '%'}}></div>
</div>
);
}
const Results = (props) => {
return (
<div className="results fade-in">
<h1>Your score: {((props.correct/props.questionLength) * 100).toFixed()}%</h1>
<button type="button" onClick={props.startOver}>Try again <i className="fas fa-redo"></i></button>
</div>
);
}
class Quiz extends React.Component {
constructor(props) {
super(props);
this.updateAnswer = this.updateAnswer.bind(this);
this.checkAnswer = this.checkAnswer.bind(this);
this.nextQuestion = this.nextQuestion.bind(this);
this.getResults = this.getResults.bind(this);
this.startOver = this.startOver.bind(this);
this.state = {
currentQuestion: 0,
correct: 0,
inProgress: true,
questions: [{
question: "<em>A Raisin in the Sun</em> was the first play by an African-American woman to be produced on Broadway. Who was the playwright?",
options: [{
option: "Lorraine Hansberry",
correct: true
}, {
option: "Maya Angelou",
correct: false
}],
img: {
src: 'https://interactive.wttw.com/sites/default/files/dusable-to-obama_raisin-in-the-sun.jpg',
alt: 'Characters in A Raisin in the Sun'
},
feedback: "Lorraine Hansberry's (1930–1965) play opened in 1959 to critical acclaim and was a huge success. The play is about a black family who faces racism when moving into an all-white suburb. The play is drawn from a similar experience in Hansberry’s early life.",
moreUrl: 'https://interactive.wttw.com/dusable-to-obama/hansberrys-victory'
}, {
question: "The internationally famous Harlem Globetrotters basketball team started with players from which Chicago High School?",
options: [{
option: "Wendell Phillips High School",
correct: true
}, {
option: "DuSable High School",
correct: false
}],
img: {
src: 'https://interactive.wttw.com/sites/default/files/dusable/riots_renaissance_thumb_5.jpg',
alt: 'A Harlem Globetrotter holding a basketball in each hand'
},
feedback: "The athletes who would become Harlem Globetrotters first played together as students at Wendell Phillips High School on the south side of Chicago. Later, they played as a team under the banner of the South Side's Giles Post of the American Legion and then as the Savoy Big Five before taking on their current name. The team was based in Chicago for 50 years, from 1926 through 1976.",
moreUrl: 'https://interactive.wttw.com/dusable-to-obama/harlem-globetrotters'
}, {
question: "What Chicagoan is known as the father of Gospel Music?",
options: [{
option: "Thomas A. Dorsey",
correct: true
}, {
option: "Langston Hughes",
correct: false
}],
img: {
src: 'https://interactive.wttw.com/sites/default/files/dusable-to-obama_thomas-dorsey.jpg',
alt: 'Thomas Andrew Dorsey'
},
feedback: "Some.",
moreUrl: 'https://interactive.wttw.com/dusable-to-obama/dorseys-gospel'
}, {
question: "Which of these African-American women ran for the office of president of the United States?",
options: [{
option: "All of the above",
correct: true
}, {
option: "None of the above",
correct: false
}],
img: {
src: 'https://interactive.wttw.com/sites/default/files/dusable/achieving_dream_thumb_9.jpg',
alt: 'Carol Moseley-Braun'
},
feedback: "more text.\"",
moreUrl: 'https://interactive.wttw.com/dusable-to-obama/carol-moseley-braun'
}, {
question: "Who was Oscar Stanton De Priest?",
options: [{
option: "The first Catholic priest in Chicago",
correct: false
}, {
option: "A United States congressman",
correct: true
}],
img: {
src: 'https://interactive.wttw.com/sites/default/files/dusable-to-obama_oscar-stanton-de-priest.jpg',
alt: 'Oscar Stanton De Priest'
},
feedback: "Text again.",
moreUrl: 'https://interactive.wttw.com/dusable-to-obama/carol-moseley-braun'
}, {
question: "What musical artist was part of Chicago's Black Renaissance?",
options: [{
option: "Louis Armstrong",
correct: false
}, {
option: "Nat \"King\" Cole",
correct: true
}, {
option: "Curtis Mayfield",
correct: false
}],
img: {
src: 'https://interactive.wttw.com/sites/default/files/dusable-to-obama_nat-king-cole.jpg',
alt: 'Nat King Cole'
},
feedback: "Long text.",
moreUrl: 'https://interactive.wttw.com/dusable-to-obama/dorseys-gospel'
}, {
question: "Gwendolyn Brooks was:",
options: [{
option: "the first black woman to win a Pulitzer Prize in poetry.",
correct: false
}, {
option: "all of the above",
correct: true
}],
img: {
src: 'https://interactive.wttw.com/sites/default/files/dusable-to-obama_gwendolyn-brooks.jpg',
alt: 'Gwendolyn Brooks'
},
feedback: "Gwendolyn Brooks (1917–2000) is a jewel in Chicago’s literary history. She was a writer best known for her poetry describing life in the South Side community in which she lived."
}]
}
}
updateAnswer(e) {
//record whether the question was answered correctly
let answerValue = e.target.value;
this.setState((prevState, props) => {
let stateToUpdate = prevState.questions;
//convert boolean string to boolean with JSON.parse()
stateToUpdate[prevState.currentQuestion].answerCorrect = JSON.parse(answerValue);
return {questions: stateToUpdate};
});
}
checkAnswer(e) {
//display to the user whether their answer is correct
this.setState((prevState, props) => {
let stateToUpdate = prevState.questions;
stateToUpdate[prevState.currentQuestion].checked = true;
return {questions: stateToUpdate};
});
}
nextQuestion(e) {
//advance to the next question
this.setState((prevState, props) => {
let stateToUpdate = prevState.currentQuestion;
return {currentQuestion: stateToUpdate+1};
}, () => {
this.radioRef.current.reset();
});
}
getResults() {
//loop through questions and calculate the number right
let correct = this.state.correct;
this.state.questions.forEach((item, index) => {
if (item.answerCorrect) {
++correct;
}
if (index === (this.state.questions.length-1)) {
this.setState({
correct: correct,
inProgress: false
});
}
});
}
startOver() {
//reset form and state back to its original value
this.setState((prevState, props) => {
let questionsToUpdate = prevState.questions;
questionsToUpdate.forEach(item => {
//clear answers from previous state
delete item.answerCorrect;
delete item.checked;
});
return {
inProgress: true,
correct: 0,
currentQuestion: 0,
questions: questionsToUpdate
}
});
}
componentDidMount() {
//since we're re-using the same form across questions,
//create a ref to it so we can clear its state after a question is answered
this.radioRef = React.createRef();
}
render() {
if (!this.state.inProgress) {
return (
<section className="quiz">
<Results correct={this.state.correct} questionLength={this.state.questions.length} startOver={this.startOver} />
</section>
);
}
return (
<section className="quiz fade-in" aria-live="polite">
<QuizProgress currentQuestion={this.state.currentQuestion} questionLength={this.state.questions.length} />
<div className="question-container">
{this.state.questions[this.state.currentQuestion].img.src &&
<QuestionImage img={this.state.questions[this.state.currentQuestion].img} />
}
<p className="question"><RawHTML html={this.state.questions[this.state.currentQuestion].question} /></p>
<form ref={this.radioRef}>
{this.state.questions[this.state.currentQuestion].options.map((item, index) => {
return <div key={index}
className={"option" + (this.state.questions[this.state.currentQuestion].checked && !item.correct ? ' dim' : '') + (this.state.questions[this.state.currentQuestion].checked && item.correct ? ' correct' : '')}>
<input id={"radio-"+index} onClick={this.updateAnswer} type="radio" name="option" value={item.correct}
disabled={this.state.questions[this.state.currentQuestion].checked} />
<label htmlFor={"radio-"+index}><RawHTML html={item.option}/></label>
</div>
})}
</form>
<div className="bottom">
{this.state.questions[this.state.currentQuestion].feedback && this.state.questions[this.state.currentQuestion].checked
&& <div className="fade-in">
<p>
<RawHTML html={this.state.questions[this.state.currentQuestion].feedback} />
{this.state.questions[this.state.currentQuestion].moreUrl &&
<React.Fragment>
<a target="_blank" href={this.state.questions[this.state.currentQuestion].moreUrl}>Learn more</a>.
</React.Fragment>
}
</p>
</div>
}
{!this.state.questions[this.state.currentQuestion].checked &&
<button type="button" onClick={this.checkAnswer}
disabled={!('answerCorrect' in this.state.questions[this.state.currentQuestion])}>Check answer</button>
}
{(this.state.currentQuestion+1) < this.state.questions.length && this.state.questions[this.state.currentQuestion].checked &&
<button className="fade-in next" type="button" onClick={this.nextQuestion}>Next <i className="fa fa-arrow-right"></i></button>
}
</div>
{(this.state.currentQuestion+1) === this.state.questions.length && this.state.questions[this.state.currentQuestion].checked &&
<button type="button" className="get-results pulse" onClick={this.getResults}>Get Results</button>
}
</div>
</section>
)
}
}
document.addEventListener('DOMContentLoaded', () => {
ReactDOM.render(<Quiz />, document.getElementById('riots-to-renaissance'));
})
and css
#import url('https://fonts.googleapis.com/css?family=Open+Sans');
#green: #36ad3b;
#red: #ff1100;
#yellow: #f3c000;
#blue: #1d77cc;
#sans: "Open Sans", "Helvetica", "Arial", sans-serif;
#keyframes roll-in {
0% {
top: 10px;
opacity: 0;
}
100% {
top: 0;
opacity: 1;
}
}
#keyframes fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes pulse {
from {
transform: scale3d(1, 1, 1);
}
50% {
transform: scale3d(1.05, 1.05, 1.05);
}
to {
transform: scale3d(1, 1, 1);
}
}
.pulse {
animation: pulse 1s infinite;
}
.fade-in {
animation: fade .75s ease;
}
.quiz {
margin: 2em auto;
min-height: 40vh;
font-size: 16px;
.progress {
position: relative;
transition: width .4s ease;
margin-bottom: 1em;
background: rgb(181, 181, 181);
border-radius: 0;
width: 100%;
height: 2em;
font-family: #sans;
.progress-bar {
background-color: #1d77cc;
}
.counter {
position: absolute;
right: 5px;
top: 0;
font-weight: normal;
color: #fff;
height: 100%;
font-family: #sans;
font-size:1.25em;
margin: auto .5em;
letter-spacing:.025em;
display: flex;
flex-direction: column;
justify-content: center;
}
}
form {
width:90%;
margin:1.5em auto;
}
.img-fluid {
margin: 2em auto;
max-width: 360px;
display: block;
}
.question {
font-weight:bold;
line-height:1.35;
margin-bottom:.75em;
}
.option {
margin-bottom: .25em;
transition: all .25s ease;
font-size: .9em;
}
button {
padding: .75em;
font-family: #sans;
background-color: #1d77cc;
border: 0;
color: #fff;
font-size: 1em;
transition: .25s all;
white-space: nowrap;
font-weight: bold;
cursor: pointer;
i {
margin-left: .15em;
}
&:disabled {
opacity: .5;
}
}
//custom radio controls
input[type="radio"] {
position: absolute;
left: -9999px;
& + label {
position: relative;
font-weight: normal;
padding-left: 28px;
cursor: pointer;
line-height: 20px;
display: inline-block;
color: #666;
&::before {
text-align: center;
content: '';
position: absolute;
left: 0;
top: 0;
width: 20px;
height: 20px;
border: 1px solid #ddd;
border-radius: 100%;
background: #fff;
}
&::after {
content: '';
width: 12px;
height: 12px;
background-color: #222;
position: absolute;
top: 4px;
left: 4px;
border-radius: 100%;
transition: all 0.2s ease;
}
}
}
.dim, .correct {
input[type="radio"] + label::before {
border: 0;
font-size: 1.2em;
animation: .25s roll-in ease;
}
input[type="radio"] + label::after {
display: none;
}
}
.correct input[type="radio"] + label:before {
content: '\f00C';
font-family: "FontAwesome"!important;
color: #green;
}
.dim input[type="radio"]:checked + label:before {
content: '\f00d';
font-family: "FontAwesome"!important;
color: #red;
}
input[type="radio"]:not(:checked) + label:after {
opacity: 0;
transform: scale(0);
}
input[type="radio"]:checked + label:after {
opacity: 1;
transform: scale(1);
}
//end custom radio controls
.dim {
opacity: 0.5;
}
.bottom {
width:90%;
margin:0 auto;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
div {
flex: 1 1 70%;
font-size: .9em;
}
.next {
flex: 0 1 10%;
margin-left: 3em;
}
#media (max-width: 600px) {
div, .next {
flex-basis: 100%;
}
.next {
margin-left: 0;
}
}
}
.get-results {
display: block;
margin: 2em auto;
}
.results {
font-size: 1.1em;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 40vh;
h1 {
font-family: #sans;
}
button {
margin-top: 1em;
}
}
}
When I check my browser console, I get the error message:
Uncaught SyntaxError: Unexpected token '<'

Changing bar width with javascript

I need some help with changing bar width. I am creating a simple horizontal bar graph and need to change the width of the bar depends on the data in percent. jsfiddle link http://jsfiddle.net/kmc3ohab/2/
Thanks in advance
var data = {
"box1": {
"bar1": "80%",
"bar2": "60%",
"bar3": "40%",
"bar4": "50%",
"total": "60%",
},
};
$(document).ready(function() {
$(".score-text").html(data.box1.total);
$(".data").text(data.box1.bar1);
$(".data").text(data.box1.bar2);
$(".data").text(data.box1.bar3);
$(".data").text(data.box1.bar4);
});
body {
background: #efefef;
width: 100%;
margin: 0px;
text-align: center;
}
h2 {
font-family: 'Noto Sans', serif;
color: #b71f38;
font-weight: 300;
margin: 0px;
}
h3 {
font-family: 'Noto Sans', serif;
color: #444444;
font-weight: 200;
margin: 0px;
}
#colLeft {
width: 50%;
float: left;
}
#colRight {
width: 50%;
float: right;
}
#row {
background: #e2e2e2;
width: auto;
height: 230px;
margin: 15px;
border-radius: 5px;
}
#insideColLeft {
width: 30%;
float: left;
}
#insideColRight {
width: 69%;
float: right;
padding-top: 8px;
padding-right: 5px;
}
.circle {
margin-left: auto;
margin-right: auto;
border-radius: 50%;
width: 150px;
position: relative;
background: #b71f38;
}
.circle:before {
content: "";
display: block;
padding-top: 100%;
}
.circle-inner {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
text-align: center;
}
.score-text {
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 1em;
line-height: 1em;
font-size: 30px;
font-family: 'Fjalla One', sans-serif;
color: #ffffff;
}
.date {
font-family: 'Fjalla One', sans-serif;
text-align: center;
color: #333333;
}
ul.graph {
margin: 0;
padding: 0;
list-style-type: none;
}
ul.graph li {
margin: 10px;
height: 25px;
background: #ccc;
color: #fff;
}
ul.graph li.data {
background: #f4ebb8;
}
<div id="row">
<h2>Title</h2>
<h3>Subtitle</h3>
<div id="insideColLeft">
<div class="circle">
<div class="circle-inner">
<div class="score-text">
</div>
</div>
</div>
</div>
<div id="insideColRight">
<ul class="graph">
<li class="data">bar 1</li>
<li class="data">bar 2</li>
<li class="data">bar 3</li>
<li class="data">bar 4</li>
</ul>
</div>
</div>
What if i have more than 1 data sets ? how do i do a loop to go through every data? Also if i need to load the data from a local csv file. js fiddle updated http://jsfiddle.net/kmc3ohab/6/

Try this: http://jsfiddle.net/kmc3ohab/5/
$(document).ready(function() {
$(".score-text").html(data.box1.total);
$(".data").each(function( index, value ) {
width = eval('data.box1.bar' + (index+1));
value.innerText = width;
value.style.width = width;
});
});
Basic answer to your question was setting style.width on each bar element. Expanded on your solution to also:
doing everything in a loop. Note: Would be better if the bar values were stored in an array so you wouldn't need to use eval().
properly setting both the text on the bar and the width of the bar in the loop.
Edit for new question about multiple sections of bars.
Displaying multiple sections really depends on how you are reading the csv file. Ideally, the data is stored in arrays and looks something like this after it is read:
var data =
[
{
title: "Title 1",
subTitle: "SubTitle 1",
bars :
[
{ name: "bar1", value: "80%" },
{ name: "bar2", value: "40%" },
{ name: "bar3", value: "50%" },
{ name: "bar4", value: "60%" }
],
total: "60%"
},
{
title: "Title 2",
subTitle: "SubTitle 2",
bars :
[
{ name: "bar1", value: "80%" },
{ name: "bar2", value: "60%" },
{ name: "bar3", value: "40%" },
{ name: "bar4", value: "50%" }
],
total: "80%"
}
];
And you loop over the list of sections like this:
data.foreach(function(item) {
...
});
But the real questions is how are you going to generate the HTML? With document.write()? If the amount of data being read is dynamic and you are creating HTML on the fly, it will be easier to set the properties as you are creating the HTML.
AngularJS would be a better solution here using a ng-repeat. Then you only define the HTML for your sections once. You talk about reading a local csv file. Does that mean this is not a server hosted HTML file? Even so, it is still possible to use Angular with CDNs hosting the files for you.