run index.html in browser with script and css
Hi, I have question about javascripts and html.
I had three files: index.html, script.js, style.css, both script.js and style.css are embedded in index.html.
But if I want to browse index.html in browser, The links for script.js and style.css are not working. It seems I need run from 127.0.0.1, but I am not sure how to set it up. Currently I just put the three files in one folder, then right click index.html to browse, but it won't work with script.js and style.css. The path is not right.
Any inputs are welcome.
Below includes the three files.
#############index.html#############
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="styles.css">
<script defer src="script.js"></script>
<title>Quiz App</title>
</head>
<body>
<div class="container">
<div id="question-container" class="hide">
<div id="question">Question</div>
<div id="answer-buttons" class="btn-grid">
<button class="btn">Answer 1</button>
<button class="btn">Answer 2</button>
<button class="btn">Answer 3</button>
<button class="btn">Answer 4</button>
</div>
</div>
<div class="controls">
<button id="start-btn" class="start-btn btn">Start</button>
<button id="next-btn" class="next-btn btn hide">Next</button>
</div>
</div>
</body>
</html>
########## script.js##################
const startButton = document.getElementById('start-btn')
const nextButton = document.getElementById('next-btn')
const questionContainerElement = document.getElementById('question-container')
const questionElement = document.getElementById('question')
const answerButtonsElement = document.getElementById('answer-buttons')
let shuffledQuestions, currentQuestionIndex
startButton.addEventListener('click', startGame)
nextButton.addEventListener('click', () => {
currentQuestionIndex++
setNextQuestion()
})
function startGame() {
startButton.classList.add('hide')
shuffledQuestions = questions.sort(() => Math.random() - .5)
currentQuestionIndex = 0
questionContainerElement.classList.remove('hide')
setNextQuestion()
}
function setNextQuestion() {
resetState()
showQuestion(shuffledQuestions[currentQuestionIndex])
}
function showQuestion(question) {
questionElement.innerText = question.question
question.answers.forEach(answer => {
const button = document.createElement('button')
button.innerText = answer.text
button.classList.add('btn')
if (answer.correct) {
button.dataset.correct = answer.correct
}
button.addEventListener('click', selectAnswer)
answerButtonsElement.appendChild(button)
})
}
function resetState() {
clearStatusClass(document.body)
nextButton.classList.add('hide')
while (answerButtonsElement.firstChild) {
answerButtonsElement.removeChild(answerButtonsElement.firstChild)
}
}
function selectAnswer(e) {
const selectedButton = e.target
const correct = selectedButton.dataset.correct
setStatusClass(document.body, correct)
Array.from(answerButtonsElement.children).forEach(button => {
setStatusClass(button, button.dataset.correct)
})
if (shuffledQuestions.length > currentQuestionIndex + 1) {
nextButton.classList.remove('hide')
} else {
startButton.innerText = 'Restart'
startButton.classList.remove('hide')
}
}
function setStatusClass(element, correct) {
clearStatusClass(element)
if (correct) {
element.classList.add('correct')
} else {
element.classList.add('wrong')
}
}
function clearStatusClass(element) {
element.classList.remove('correct')
element.classList.remove('wrong')
}
const questions = [
{
question: 'What is 2 + 2?',
answers: [
{ text: '4', correct: true },
{ text: '22', correct: false }
]
},
{
question: 'Who is the best YouTuber?',
answers: [
{ text: 'Web Dev Simplified', correct: true },
{ text: 'Traversy Media', correct: true },
{ text: 'Dev Ed', correct: true },
{ text: 'Fun Fun Function', correct: true }
]
},
{
question: 'Is web development fun?',
answers: [
{ text: 'Kinda', correct: false },
{ text: 'YES!!!', correct: true },
{ text: 'Um no', correct: false },
{ text: 'IDK', correct: false }
]
},
{
question: 'What is 4 * 2?',
answers: [
{ text: '6', correct: false },
{ text: '8', correct: true }
]
}
]
#########style.css#################
const startButton = document.getElementById('start-btn')
const nextButton = document.getElementById('next-btn')
const questionContainerElement = document.getElementById('question-container')
const questionElement = document.getElementById('question')
const answerButtonsElement = document.getElementById('answer-buttons')
let shuffledQuestions, currentQuestionIndex
startButton.addEventListener('click', startGame)
nextButton.addEventListener('click', () => {
currentQuestionIndex++
setNextQuestion()
})
function startGame() {
startButton.classList.add('hide')
shuffledQuestions = questions.sort(() => Math.random() - .5)
currentQuestionIndex = 0
questionContainerElement.classList.remove('hide')
setNextQuestion()
}
function setNextQuestion() {
resetState()
showQuestion(shuffledQuestions[currentQuestionIndex])
}
function showQuestion(question) {
questionElement.innerText = question.question
question.answers.forEach(answer => {
const button = document.createElement('button')
button.innerText = answer.text
button.classList.add('btn')
if (answer.correct) {
button.dataset.correct = answer.correct
}
button.addEventListener('click', selectAnswer)
answerButtonsElement.appendChild(button)
})
}
function resetState() {
clearStatusClass(document.body)
nextButton.classList.add('hide')
while (answerButtonsElement.firstChild) {
answerButtonsElement.removeChild(answerButtonsElement.firstChild)
}
}
function selectAnswer(e) {
const selectedButton = e.target
const correct = selectedButton.dataset.correct
setStatusClass(document.body, correct)
Array.from(answerButtonsElement.children).forEach(button => {
setStatusClass(button, button.dataset.correct)
})
if (shuffledQuestions.length > currentQuestionIndex + 1) {
nextButton.classList.remove('hide')
} else {
startButton.innerText = 'Restart'
startButton.classList.remove('hide')
}
}
function setStatusClass(element, correct) {
clearStatusClass(element)
if (correct) {
element.classList.add('correct')
} else {
element.classList.add('wrong')
}
}
function clearStatusClass(element) {
element.classList.remove('correct')
element.classList.remove('wrong')
}
const questions = [
{
question: 'What is 2 + 2?',
answers: [
{ text: '4', correct: true },
{ text: '22', correct: false }
]
},
{
question: 'Who is the best YouTuber?',
answers: [
{ text: 'Web Dev Simplified', correct: true },
{ text: 'Traversy Media', correct: true },
{ text: 'Dev Ed', correct: true },
{ text: 'Fun Fun Function', correct: true }
]
},
{
question: 'Is web development fun?',
answers: [
{ text: 'Kinda', correct: false },
{ text: 'YES!!!', correct: true },
{ text: 'Um no', correct: false },
{ text: 'IDK', correct: false }
]
},
{
question: 'What is 4 * 2?',
answers: [
{ text: '6', correct: false },
{ text: '8', correct: true }
]
}
]
Last Comment
ASKER
Hi scott:
Here is the style.css. It works in https://codepen.io/padas/pen/gORBNeR . But if I right click the index.html file,
then url address is : file:///C:/Users/rache/source/repos/Game_app/index.html, which broke the path for script.js and style.css
Here is the style.css. It works in https://codepen.io/padas/pen/gORBNeR . But if I right click the index.html file,
then url address is : file:///C:/Users/rache/source/repos/Game_app/index.html, which broke the path for script.js and style.css
*, *::before, *::after {
box-sizing: border-box;
font-family: Gotham Rounded;
}
:root {
--hue-neutral: 200;
--hue-wrong: 0;
--hue-correct: 145;
}
body {
--hue: var(--hue-neutral);
padding: 0;
margin: 0;
display: flex;
width: 100vw;
height: 100vh;
justify-content: center;
align-items: center;
background-color: hsl(var(--hue), 100%, 20%);
}
body.correct {
--hue: var(--hue-correct);
}
body.wrong {
--hue: var(--hue-wrong);
}
.container {
width: 800px;
max-width: 80%;
background-color: white;
border-radius: 5px;
padding: 10px;
box-shadow: 0 0 10px 2px;
}
.btn-grid {
display: grid;
grid-template-columns: repeat(2, auto);
gap: 10px;
margin: 20px 0;
}
.btn {
--hue: var(--hue-neutral);
border: 1px solid hsl(var(--hue), 100%, 30%);
background-color: hsl(var(--hue), 100%, 50%);
border-radius: 5px;
padding: 5px 10px;
color: white;
outline: none;
}
.btn:hover {
border-color: black;
}
.btn.correct {
--hue: var(--hue-correct);
color: black;
}
.btn.wrong {
--hue: var(--hue-wrong);
}
.start-btn, .next-btn {
font-size: 1.5rem;
font-weight: bold;
padding: 10px 20px;
}
.controls {
display: flex;
justify-content: center;
align-items: center;
}
.hide {
display: none;
}
ASKER
so In my local, how can I set up to view the app?
Thanks
Thanks
ASKER
in https://codepen.io/padas/pen/gORBNeR, If I want to add an image, where can I add it? where the image will be stored?
Thanks
Thanks
ASKER CERTIFIED SOLUTION
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
Don't change the slash just because it is from a file system
can be
or just
<link rel="stylesheet" href="styles.css">
<script defer src="script.js"></script>
when the files are in the same folder
<link rel="stylesheet" href=".\styles.css">
<script defer src=".\script.js"></script>
can be
<link rel="stylesheet" href="./styles.css">
<script defer src="./script.js"></script>
or just
<link rel="stylesheet" href="styles.css">
<script defer src="script.js"></script>
when the files are in the same folder
ASKER
It seems it works in https://codepen.io/padas/pen/gORBNeR, but in local if it runs from file://, then the path for script.js and style.css are not working.
Please press F12 and look in the network tab to see what the browser thinks the path is to those files
ASKER
Thanks
I do not recommend using backslash at all in a web page link.
JavaScript
JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and in almost every mainstream web browser.
127K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
TRUSTED BY
https://codepen.io/padas/pen/gORBNeR
However, what you are showing for css is javascript. Is that a mistake in your posting here, or is that what you have in your css file.
Can you update the codepen I started and lets see what the issue is. If it works in codepen, then it is your local machine setup.
All three files would need to be in the same exact folder for this to work.