Countdown Timer Linking Design Parts - javascript

I have some HTML and JavaScript, but this error appears:
I'm building a timer. This is my code:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="styles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<title>Timer</title>
</head>
<body>
<div class="timer">
</div>
<script src="appCT.js" type="module"></script>
</body>
</html>
JavaScript File1
export default class Timer {
constructor(root){
console.log(root);
root.innerHTML = Timer.getHTML();
this.el = {
minutes: root.querySelector(".timer__part--minutes");
seconds: root.querySelector(".timer__part--seconds");
control: root.querySelector(".timer__btn--control");
reset: root.querySelector(".timer__btn--reset");
}
console.log(this.el);
}
static getHTML(){
return `
<span class="timer__part timer__part--minutes">00</span>
<span class="timer__part timer__part">:</span>
<span class="timer__part timer__part--seconds">00</span>
<button type="button" class="timer__btn timer__btn--control timer__btn--start">
<span class="material-icons">play_circle_filled</span>
</button>
<button type="button" class="timer__btn timer__btn--reset">
<span class="material-icons">timer</span>
</button>`
}
}
JavaScript File 2
import Timer from "Timer.js";
new Timer{
document.querySelector(".timer");
}
Css code
body{
background: #dddd;
margin: 24px;
}
.timer{
font-family: sans-serif;
display: inline-block;
padding: 24px 32px;
border-radius: 30px;
background: white;
}
.timer__part{
font-size: 40px;
font-weight: bold;
}
.timer__btn{
width: 50px;
height: 50px;
margin-left: 16px;
border-radius: 50%;
border: none;
background: gray;
}
.timer__btn--control{
background: steelblue;
}
.timer__btn--reset{
background: red;
}
The code should be able to display the timer, and each HTML element should be linked with its respective part in the design. I've tried to change the type "attribute" of my script element to text/javascript, but it has not yielded fruits.
Thank you

Your browser will not redirect to such an address.
1- I would recommend trying to work with localhost.
2- VSCode Live Server
And I found something maybe useful to you.
"Cross origin requests are only supported for HTTP." error when loading a local file

Related

Why does CSS :root head show throughout all HTML files in Heroku?

I am making a website using PHP to open a static website on Heroku.
I have a problem where everything is fine before deploying on Heroku. Once it is deployed suddenly there are CSS :root head code showing as plain text on all the html files. Here is a picture.
When I do inspect it shows that the plain text is part of the head element. I don't get why it is showing, I don't know if it's because of something to do with PHP or just Heroku. Please help.
Here is some CSS code I have for the file and html stuff too. (This is in the file base.css)
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: "Kumbh Sans", sans-serif;
display: block;
}
head {
display: none;
}
.navbar {
background-color: #b6bcc2;
/*border-bottom: 5px solid white;*/
height: 80px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2rem;
position: sticky;
top: 0;
z-index: 999;
}
(This is in the file home.html) There are no tags and I have only used tags.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>Project H.E.L.L.O.</title>
<link rel="stylesheet" href="../css/base.css" type="text/css" />
<link rel="stylesheet" href="../css/home.css" type="text/css" />
</head>
Here is also the only PHP I used :
<?php include_once("html/home.html") ;
I also have a composer.json file with {} and nothing else.

Submit button is giving null

I am trying to develop a rating site which is a part of Frontend Mentor Challenge(https://www.frontendmentor.io/challenges/interactive-rating-component-koxpeBUmI) in which I am facing the following problems:-
On clicking submit button it gives a null error. Why is it happening and how can I fix this?
Should I use a modal box for thank you page or is it ok to make a different HTML page to handle the thank you page?
How can I access the 'numbers' class and use it on the 'thank you.html' page?
const numberClicked = document.querySelectorAll(".number")
const submitBtn = document.getElementById("submit-btn")
numberClicked.forEach(function(oneNumbreClicked) {
oneNumbreClicked.addEventListener('click', function() {
console.log(oneNumbreClicked.innerText)
})
})
submitBtn.addEventListener('click', function() {
document.getElementById("final-rating").innerText = `You selected ${oneNumbreClicked.innerText} out of 5`
})
*,
*::after,
*::before {
box-sizing: border-box;
}
body {
font-family: 'Overpass', sans-serif;
background-color: hsl(216, 12%, 8%);
}
.container {
color: white;
width: 35%;
background-color: hsl(213, 19%, 18%);
border-radius: 10px;
box-shadow: 0 10px hsl(216, 12%, 8%);
margin: 3em auto;
padding: 2em;
}
.thank-you-container {
text-align: center;
}
.star {
background-color: hsl(229.4, 14.3%, 23.3%);
border-radius: 50%;
padding: 10px;
}
.numbers {
margin: 0 auto;
}
.number {
display: inline-block;
background-color: hsl(229.4, 14.3%, 23.3%);
border-radius: 50%;
text-align: center;
padding: 10px;
width: 40px;
font-size: 1em;
margin: 0 0.423em;
opacity: 0.5;
border: none;
color: inherit;
}
.submit-btn {
background-color: hsl(25, 97%, 53%);
color: white;
padding: .8em 2em;
width: 100%;
border-radius: 1.5em;
border: none;
margin-top: 1.5em;
font-weight: 400;
font-size: 1.1em;
}
.number:hover {
opacity: 1;
background-color: hsl(217, 12%, 63%);
}
.submit-btn:hover {
opacity: 0.5;
}
.submit-btn:focus,
.number:focus {
opacity: 1;
background-color: white;
color: hsl(25, 97%, 53%);
}
.final-rating {
background-color: hsl(229.4, 14.3%, 23.3%);
color: hsl(25, 97%, 53%);
border-radius: 1.5em;
padding: 0.4em;
margin: 1.3em auto;
width: 12.5em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Overpass:wght#400;700&display=swap" rel="stylesheet">
<title>Frontend Mentor | Interactive rating component | Rating Page</title>
<style>
.attribution {
font-size: 11px;
text-align: center;
color: white;
}
.attribution a {
color: hsl(228, 45%, 44%);
}
</style>
</head>
<body>
<main>
<!-- Rating state start -->
<section class="container">
<img class="star" src="images/icon-star.svg" alt="">
<h2>How did we do?</h2>
<p>
Please let us know how we did with your support request. All feedback is appreciated to help us improve our offering!
</p>
<div class="numbers" id="numbers">
<button class="number">1</button>
<button class="number">2</button>
<button class="number">3</button>
<button class="number">4</button>
<button class="number">5</button>
</div>
<a href="thank.html" target="_self">
<button class="submit-btn" id="submit-btn">Submit</button>
</a>
</section>
<!-- Rating state end -->
<div class="attribution">
Challenge by Frontend Mentor. Coded by Raunak Raj.
</div>
</main>
<script src="script.js"></script>
</body>
</html>
<!--This is the linked HTML file(thank.html) which activates on clicking upon Submit button
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Overpass:wght#400;700&display=swap" rel="stylesheet">
<title>Frontend Mentor | Interactive rating component |Thank You Page</title>
<style>
.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }
</style>
</head>
<body>
<main>
<section class="container thank-you-container">
<img src="images/illustration-thank-you.svg" alt="">
<p class= "final-rating" id="final-rating"></p>
<h2>Thank you!</h2>
<p>We appreciate you taking the time to give a rating. If you ever need more support, don't hesitate to get in touch!</p>
</section>
<div class="attribution">
Challenge by Frontend Mentor.
Coded by Raunak Raj.
</div>
</main>
<script src="script.js"></script>
</body>
</html>
-->
So first it would be better if you could write the whole error, so we have more info of what is causing it.
Issue: But of what I've seen is that, the submit button is wrapped in anchor tags, which is redirecting us to "thank.html" as: <button>Submit</button>, and in the thank.html (the commented code below) you are loading the very same script. <script src="script.js"></script> which causes the problem/error. Why is it causing a problem, is simply because in this script you are accessing the DOM elements which does not exist in thank.html. For example in script.js you access the elements with class query selector .numbers, but when thank.html is loaded this elements are not existing. =)
Solution:
You could create a new unique js file for the purpose of thank.html. And add an event listener on load as: window.addEventListener("load", () => {../logic here}), but with this approach you will have to think of how would you pass the parameter of the value oneNumbreClicked.innerText so you can use and print it. As a starter you could share the information through the sessionStorage or the localeStorage. (There are way more ways)
Other easy and straight forward approach to have only one html file. Have the both <section></section> (section with class container and thank-you-container). Initially the section with class thank-you-container would have css property: display: "none". When clicking on submit button, firstly you will change the display property of the section with class thank-you-container to "flex or block", and change the display prop of the section with class container to "none, and print the text. On a way you will simulate "single page applicaton" :D. And do not forget to remove the <a> </a> tags from the submit button, so you won't redirect.
Dummy demo solution:
const container = document.getElementById("container")
const containerTwo = document.getElementById("thank-you-container")
const myBtn = document.getElementById("myBtn");
myBtn.addEventListener("click", ()=> {
container.style.display = "none";
containerTwo.style.display = "flex";
// your additional logic here
})
.thank-you-container {
display: none}
<div class="container" id="container">
<h1>Container one</h1>
</div>
<div class="thank-you-container" id="thank-you-container">
<h1>Container two</h1>
</div>
<button id="myBtn">Submit</button>

How can I fix this error in DOM manipulation and error getting an HTML line to the console? [duplicate]

This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 4 months ago.
Whenever I print any text to the console that is being printed successfully. But when I try to print the HTML line to the console even with ID or class name. That is not working and giving me the output null.
I have this HTML code:
<!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>Number Game</title>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<main>
<header>
<h1>Guess the number between 1 and 100</h1>
<button class="play-again">Play Again</button>
<h2 class="result">Result</h2>
</header>
<hr />
<section class="left-content">
<input type="number" class="input-value" />
<button class="check-result">Check</button>
</section>
<section class="right-content">
<p class="message" id="message">Start guessing the number...</p>
<p class="label-score">Score: <span class="score">20</span></p>
<p class="label-highscore">
Highscore: <span class="highscore">0</span>
</p>
</section>
</main>
</body>
</html>
The CSS code is:
* {
font-family: Raleway, sans-serif;
box-sizing: border-box;
}
h1 {
margin-top: 30px;
font-size: 150%;
margin-left: auto;
margin-right: auto;
display: block;
text-align: center;
}
.play-again {
padding: 5px;
margin-left: auto;
margin-right: auto;
text-align: center;
width: fit-content;
display: block;
border: none;
background-color: rgb(38, 194, 64);
border-radius: 3px;
}
.result {
text-align: center;
}
.left-content {
margin-left: auto;
margin-right: auto;
float: left;
width: 50%;
}
input {
width: 50px;
height: 50px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
margin-bottom: 10px;
padding: 8px;
border-radius: 50%;
display: block;
}
.right-content {
margin-left: auto;
margin-right: auto;
float: left;
width: 50%;
}
.check-result {
padding: 5px;
margin-left: auto;
margin-right: auto;
display: block;
background-color: rgb(38, 194, 64);
border-radius: 3px;
border: none;
}
.check-result:hover,
.play-again:hover {
box-shadow: 0px 0px 10px black;
}
And the JavaScript code is:
"use strict";
console.log(document.querySelector("#message"));
console.log("hi");
The "hi" text printed successfully to the console, but the second line gives me "null" in Chrome. I have also reinstalled Chrome.
image link= "https://drive.google.com/file/d/1Iq2kHr6YFFAWl0pHLnpI9uiWY2WyBwno/view?usp=sharing"
Your Javascript code is running before the HTML finishes loading, to prevent this, add the defer attribute to your <script> tag as follows
<!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>Number Game</title>
<link rel="stylesheet" href="style.css" />
<!-- Adding the defer attribute -->
<script src="script.js" defer></script>
</head>
<body>
<main>
<header>
<h1>Guess the number between 1 and 100</h1>
<button class="play-again">Play Again</button>
<h2 class="result">Result</h2>
</header>
<hr />
<section class="left-content">
<input type="number" class="input-value" />
<button class="check-result">Check</button>
</section>
<section class="right-content">
<p class="message" id="message">Start guessing the number...</p>
<p class="label-score">Score: <span class="score">20</span></p>
<p class="label-highscore">
Highscore: <span class="highscore">0</span>
</p>
</section>
</main>
</body>
</html>
You have added <script> tag in the head section that means your javascript load before the <p id="message"> tag which you want to get and log in console.
Solution - add you script file just before </body> tag closing.
You have to remove the -script- tag to the -head- and put it to the end of the -body-

Why the text is not centered in mobile devices (HTML) [duplicate]

This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 2 years ago.
Website screenshot in PC
Website screenshot in the mobile device
Here is the HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css2?family=PT+Sans+Narrow:wght#700&display=swap" rel="stylesheet"
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href = "boi.css">
</head>
<body>
<div class="first">
<h1>Hey!</h1>
</div>
</body>
</html>>
and this is the CSS code
body {
background-color: rgb(20, 18, 18);
}
.first {
position: relative;
margin-right: 300px;
color: white;
text-align: center;
font-family: 'PT Sans Narrow', sans-serif;
}
use following css
.first
{
color: white;
text-align: center;
}
.first h1
{
display: inline-block;
}
Hey There are many solutions.
You can set width of element like the below code.
Or You can set the display: options into the element (for example, display:contents)
body {
background-color: rgb(20, 18, 18);
}
.first {
position: relative;
margin-right: 300px;
color: white;
text-align: center;
font-family: 'PT Sans Narrow', sans-serif;
width: 100%;
/* display: contents; */
}
<link href="https://fonts.googleapis.com/css2?family=PT+Sans+Narrow:wght#700&display=swap" rel="stylesheet"
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href = "boi.css">
<body>
<div class="first">
<h1>Hey!</h1>
You can use flexbox especially in media queries for mobile size or desktop size
.first {
position: relative;
margin-right: 300px;
color: white;
width:100%;
display:flex;
justify-content:center;
align-items:center;
text-align: center;
font-family: 'PT Sans Narrow', sans-serif;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css2?family=PT+Sans+Narrow:wght#700&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href = "boi.css">
</head>
<body>
<div class="first">
<h1>Hey!</h1>
</div>
</body>
</html>
I think you just need to remove your margin-right: 300px; - that's going to end up moving everything 300px to the left, thus leaving it very off-center on mobile.

CSS breaks on reload mobile

I'm not very skilled at CSS. I have website that has 4 stylesheets and 3 JS files-using Bootstrap 4 and jQuery. When I deployed it on live and refresh the page, all was working fine.
However, when I go to website from mobile, it works fine the first time but when I refresh, all the CSS and HTML is broken (this usually happens after 1st or 2nd refresh). After it is broken, I refresh it once or twice, it fixes the issue. I searched about it and some say it is happening because of using relative positioning and floating, but when I commented out those lines from my CSS files, I still have the same problem. Does anyone have any idea about how to fix this issue?
index html
**
<!DOCTYPE html>
<html lang="en">
<head>
<title>Landor App</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>
<style></style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" type="text/css"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous" type="text/css"/>
<link rel="stylesheet" href="Stylesheets/fonts.css" type="text/css"/>
<link rel="stylesheet" href="Stylesheets/intro.css" type="text/css"/>
<link rel="stylesheet" href="Stylesheets/home.css" type="text/css"/>
<link rel="stylesheet" href="Stylesheets/video.css" type="text/css"/>
<link rel="stylesheet" href="Stylesheets/modals.css" type="text/css"/>
</head>
<body>
<!--INTRO PAGE-->
<div id="intro-page" class="container-fluid" style="display: none">
<div class="row intro-header">
<div class="col-12"><img id="landor-worldmark"></div>
</div>
<div class="row intro-text">
<div class="intro-text col-12">
<h3>Hi Andrew,</h3><br>
<h3>We can't wait to welcome you to Landor London.
Until then please take a few minutes
<span style="white-space: nowrap;">(3, to be exact)to explore more about us...</span></h3><br>
<h3>Regards,</h3>
<h3>Peter</h3><br><br>
<span id="enter-button">Enter</span>
</div>
</div>
<div class="intro-footer row">
<div class="col-12"><img class="img-fluid intro-boat"></img></div>
</div>
</div>
intro.css
html {
height: 100%;
}
.intro-text{
font-family: "apercuBold";
}
#intro-page{
padding-left: 20px;
padding-right: 20px;
}
body {
background-color:black;
}
.container-fluid{
padding-right: 10px;
padding-left: 10px;
}
.intro-text{
position: relative;
top: 5%;
}
#enter-button{
font-family: "timeposRegular";
text-decoration: underline;
font-size: 150%;
cursor: pointer;
position: relative;
top: 20%;
}
.intro-header{
padding-top: 3%;
}
.intro-text{
padding-top: 50px;
padding-bottom: 50px;
}
#landor-worldmark{
content:url("../assets/Landor_Logo.png");
width: 120px;
height: 30px;
}
.intro-boat{
content:url("../assets/boat2.png");
max-width: 400px;
height: auto;
float:right;
}
#media screen and (max-width: 450px) {
.intro-text > h3{
font-size: 100%;
}
.intro-text{
font-size: 100%;
line-height: 1.4;
padding-top: 30px;
padding-bottom: 30px;
}
#enter-button{
font-size: 100%;
}
.intro-boat{
max-width: 200px;
height: auto;
float:right;
}
.intro-header{
padding-top: 5%;
}
}
#media screen and (max-width: 350px) {
.intro-text > h4{
font-size: 90%;
}
.intro-text{
font-size: 94%;
line-height: 1.1;
padding-top: 30px;
padding-bottom: 30px;
}
#enter-button{
font-size: 94%;
}
.intro-boat{
max-width: 200px;
height: auto;
}
.intro-header{
padding-top: 5%;
}
}
.intro-footer{
position: fixed;
bottom: 10%;
width: 100%;
}
**
I just pulled out my phone and went to the site, and used the Browser tools phone emulator option (i don't know if that's what it's called) and it looks just fine on reload. Maybe try restarting your phone or clearing cache.
Is it because you are tilting your phone and switching the view from horizontal and vertical (That still shouldn't change anything)
After a whole day, I finally solved this problem by adding "?" at the end of my stylesheets paths on the link tag. It's a caching issue, although I disabled caching, for some reason it did not work. Now I refreshed the page > 10 times and never experienced any problem! I think, because of the question mark, when it is loading the CSS, first it's checking to see if there is another version available which prevents it from fetching from the cache completely.

Categories