I need to change current time on my web page. How to change it?
I am displaying current time using below code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Digital Clock created with JavaScript" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Current System Time</title>
<!-- <link rel="stylesheet" href="css/style.css"> -->
</head>
<body>
<div id="not-clock"><span>Current System Time:</span></div>
<div id="clock"></div>
<div id="day"></div>
<div id="date"></div>
<script src="scriptTime.js"></script>
</body>
</html>
Please set the current time on the web page as per this example.
HTML
<div class='time-frame'>
<div id='date-part'></div>
<div id='time-part'></div>
</div>
<br>
<input type='button' id='stop-interval' value='Stop time' />
**JS**
$(document).ready(function() {
var interval = setInterval(function() {
var momentNow = moment();
$('#date-part').html(momentNow.format('YYYY MMMM DD') + ' '
+ momentNow.format('dddd')
.substring(0,3).toUpperCase());
$('#time-part').html(momentNow.format('A hh:mm:ss'));
}, 100);
$('#stop-interval').on('click', function() {
clearInterval(interval);
});
});
**CSS**
.time-frame {
background-color: #000000;
color: #ffffff;
width: 300px;
font-family: Arial;
}
.time-frame > div {
width: 100%;
text-align: center;
}
#date-part {
font-size: 1.2em;
}
#time-part {
font-size: 2em;
}
Related
I want to make a live search using ajax, json, html and github url. I've searched on google but mostly use the local json file not using the url for the json. And I want to make it in html file format, but in google mostly use php file format. How do I make it?
I've tried to make it but after typing the data does not come out
$(document).ready(function () {
$.ajaxSetup({ cache: false });
$("#title").keyup(function () {
$("#resultlist").html("");
$("#state").val("");
var searchField = $("#").val();
var expression = new RegExp(searchField, "i");
$.getJSON(
"https://raw.githubusercontent.com/bimobaskoro/test/main/data.json",
function (data) {
$.each(data, function (key, value) {
if (value.title.search(expression) != -1) {
$("#resultlist").append(
`
<li class="list-group-item link-class">
<span class="nama">` +
title +
`</span>
</li>
`
);
}
});
}
);
});
$("#resultlist").on("click", "li", function () {
let title = $(this).children(".title").text();
$("#title").val(title);
$("#resultlist").html("");
});
});
#result {
position: absolute;
width: 100%;
max-width: 870px;
cursor: pointer;
overflow-y: auto;
max-height: 400px;
box-sizing: border-box;
z-index: 1001;
}
.link-class:hover {
background-color: #f1f1f1;
}
<!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" />
<meta name="Description" content="Enter your description here" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
/>
<link rel="stylesheet" href="assets/css/style.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
<title>Title</title>
</head>
<body>
<input
class="input-search col-lg-6 mt-3"
type="text"
placeholder=" Search"
name="search"
id="search"
class="form-control"
/>
<ul class="list-group" id="result"></ul>
</body>
</html>
Why the h1 tag does not change?
Is there anything wrong?
I tried it with alert and it worked perfectly. I mean whenever I typed into input box the alert message showed me the characters. but how about h1 tag?
what did I do wrong?
Here is my snippet:
html {
box-sizing: border-box;
font-size: 2rem;
font-family: 'Georama', sans-serif;
}
body {
background-color: #555;
color: #fff;
display: flex;
justify-content: center;
flex-direction: column;
height: 100vh;
align-items: center;
}
button {
cursor: pointer;
}
.container {
width: auto;
height: 100px;
}
.te {
display: block;
color: white;
}
const text = document.getElementById('pps');
pass.addEventListener('input', (e) => {
const val = e.target.value;
text.innerHTML(val);
});
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js" defer></script>
</head>
<body>
<form class="container">
<label>Type here:</label>
<input
type="text"
placeholder="insert here.,.."
/>
</form>
<h1 class="te" id="pps">PP</h1>
</body>
</html>
</html>
I see two mistakes here:
As it was mentioned in comments innerHTML is property, not a method, so should be called text.innerHTML = e.target.value;
You didn't assign anything to the 'pass' variable.
Also, there's no sense to create the variable if you are going to use the value only once, so we can remove const val = e.target.value; and just use e.target.value directly.
I've attached the working snippet below.
const text = document.getElementById('pps')
document.getElementById('textInput').addEventListener('input', (e) => {
text.innerHTML = e.target.value;
});
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js" defer></script>
</head>
<body>
<form class="container">
<label>Type here:</label>
<input type="text" id="textInput" placeholder="insert here..." />
</form>
<h1 class="te" id="pps">PP</h1>
</body>
</html>
</html>
Im building a random DogAPI image generator, where you put a number from 1-50 into a form text box, hit send, and it displays random dog photos of that amount.
The page is working, but when you choose a new or same number, it adds that new amount of photos to the page, instead of replacing them. Help!
'use strict';
function getDogImage(text) {
fetch(`https://dog.ceo/api/breeds/image/random/${text}`)
.then(response => response.json())
.then(responseJson => displayResults(responseJson));
}
function watchForm() {
$('form').submit(event => {
event.preventDefault();
var text = $('.number').val();
if (text < 50) {
getDogImage(text);
} else {
alert('Number must be between 1-50')
};
});
}
function displayResults(responseJson) {
console.log(responseJson);
for (let i = 0; i < responseJson.message.length; i++) {
$('.results').append(
`<img src="${responseJson.message[i]}" class="results-img">`
)
};
$('.results').removeClass('hidden');
}
$(function() {
console.log('App loaded! Waiting for submit!');
watchForm();
});
* {
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
}
.container {
max-width: 600px;
margin: 0 auto;
}
.hidden {
display: none;
}
<!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">
<title>How Many?</title>
<link rel="shortcut icon" href="#">
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<h1>How Many Dog Pics Do You Want?</h1>
<p>Pick a number between 1-50</p>
<form>
<input class="number" value="3" type="text" placeholder="1-50?" required>
<input type="submit" value="Show me the doggies!">
</form>
<section class="results hidden">
<h2>Here you go!</h2>
</section>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="index.js"></script>
</body>
</html>
I would clear the contents of the results div, and then add the new images. To do this, though, I needed to make a few changes:
First, move the <h1> out of the .results div. Then, before your loop where you append the images, use .empty() to clear the contents of the results div. Then your loop will run and fill it with the new images.
'use strict';
function getDogImage(text) {
fetch(`https://dog.ceo/api/breeds/image/random/${text}`)
.then(response => response.json())
.then(responseJson => displayResults(responseJson));
}
function watchForm() {
$('form').submit(event => {
event.preventDefault();
var text = $('.number').val();
if (text < 50) {
getDogImage(text);
} else {
alert('Number must be between 1-50')
};
});
}
function displayResults(responseJson) {
console.log(responseJson);
$('.results').empty();
for (let i = 0; i < responseJson.message.length; i++) {
$('.results').append(
`<img src="${responseJson.message[i]}" class="results-img">`
)
};
$('.results').removeClass('hidden');
}
$(function() {
console.log('App loaded! Waiting for submit!');
watchForm();
});
* {
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
}
.container {
max-width: 600px;
margin: 0 auto;
}
.hidden {
display: none;
}
<!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">
<title>How Many?</title>
<link rel="shortcut icon" href="#">
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<h1>How Many Dog Pics Do You Want?</h1>
<p>Pick a number between 1-50</p>
<form>
<input class="number" value="3" type="text" placeholder="1-50?" required>
<input type="submit" value="Show me the doggies!">
</form>
<h2>Here you go!</h2>
<section class="results hidden">
</section>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="index.js"></script>
</body>
</html>
How would I get my app to only logs the image URLs to the console? Im new to web development and im currently looking for experienced developers to assist me with the issue im having. PLEASE HELP!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
'use strict';
function getDogImage() {
fetch('https://dog.ceo/api/breeds/image/random')
.then(response => response.json())
.then(responseJson =>
displayResults(responseJson))
.catch(error => alert('Something went wrong. Try again later.'));
}
function displayResults(responseJson) {
console.log(responseJson);
//replace the existing image with the new one
$('.results-img').replaceWith(
`<img src="${responseJson.message}" class="results-img">`
)
//display the results section
$('.results').removeClass('hidden');
}
function watchForm() {
$('form').submit(event => {
event.preventDefault();
getDogImage();
});
}
$(function() {
console.log('App loaded! Waiting for submit!');
watchForm();
});
* {
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
}
.container {
max-width: 600px;
margin: 0 auto;
}
.hidden {
display: none;
}
<!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">
<title>Dog API Example</title>
<link rel="shortcut icon" href="">
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<h1>Dog API: A Simple Example</h1>
<form>
<input type="submit" value="Get a dog pic!">
</form>
<section class="results hidden">
<h2>Look at this dog!</h2>
<img class="results-img" alt="placeholder">
</section>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="index.js"></script>
</body>
</html>
'use strict';
function getDogImage() {
fetch('https://dog.ceo/api/breeds/image/random')
.then(response => response.json())
.then(responseJson =>
displayResults(responseJson))
.catch(error => alert('Something went wrong. Try again later.'));
}
function displayResults(responseJson) {
console.log(responseJson.message);
//replace the existing image with the new one
$('.results-img').replaceWith(
`<img src="${responseJson.message}" class="results-img">`
)
//display the results section
$('.results').removeClass('hidden');
}
function watchForm() {
$('form').submit(event => {
event.preventDefault();
getDogImage();
});
}
$(function() {
console.log('App loaded! Waiting for submit!');
watchForm();
});
* {
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
}
.container {
max-width: 600px;
margin: 0 auto;
}
.hidden {
display: none;
}
<!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">
<title>Dog API Example</title>
<link rel="shortcut icon" href="">
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<h1>Dog API: A Simple Example</h1>
<form>
<input type="submit" value="Get a dog pic!">
</form>
<section class="results hidden">
<h2>Look at this dog!</h2>
<img class="results-img" alt="placeholder">
</section>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="index.js"></script>
</body>
</html>
Just wanted to ask a quick question with my jquery code. just started using Jquery/JS and I feel like there is a cleaner way to do this. It does fade to "and much more" but when it goes back, its not a fade its more of a switch.
$(document).ready(function() {
setInterval(swapText, 4000);
function swapText(){
$("#profile-text-fade").fadeOut(500, function() {
$(this).fadeIn(1000).delay(2000);
$(this).html('and much more!');
$(this).fadeIn(2000, function () {
$(this).html('In the making, Soon to show all the work I can crate!');
});
});
}
});
body {
background-color: #FFC85E;
}
.aligh {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.jumbotron_resize {
padding-top: 18%;
padding-bottom: 10em;
margin-bottom: 10em;
background-color: #FFC85E;
font-size: 1.2em;
}
h1, p{
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Profile Test Page">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Salvador Cervantes">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel='stylesheet' type:'text/css' href='../CSS/main.css'>
<title>
Test page
</title>
</head>
<body>
<div class="align">
<div class="jumbotron jumbotron-fluid jumbotron_resize">
<div class="container">
<h1 class="display-3">test Profile</h1>
<p id='profile-text-fade' class="lead">In the making, Soon to show all the work I can crate!</p>
</div>
</div>
<footer>
<div>
<p>© 2017
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script src='../js/main.js'></script>
</body>
</html>
Now what I'm trying to do is to fadeout the text that is on the webpage and replace it with "and much more!" and then fade back to the original text of "in the making...". right now, the last part just snaps back to place and dones't fade. Any help would be amazing!
Thank you
Your text is not fading in as you don't fade it out. ie it does: $("#div").fadeIn().fadeIn()
Change your last fadeIn to:
$(this).fadeOut(500, function() {
$(this).fadeIn(2000, function () {
$(this).html('In the making, Soon to show all the work I can crate!');
You might like to consider a refactor to create a list of messages and then simply loop through them. This will also be re-usable and allow you to add more messages without lots of nasty callback-chaining, eg:
var msgs = ["msg1", "msg2"];
var indx = 0;
$("#div").text(msgs[indx]);
setInterval(function() {
$("#div").fadeOut(
500,
function() {
indx++;
if (indx>=msgs.length) indx=0;
$(this).text(msgs[indx]);
$(this).fadeIn(500);
});
}, 3000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='div'>initial message</div>
I think this is what you needed edited your code, you have to fadeOut it before the last fadeIn, (i have slightly increased the interval for some smooth effect)
$(document).ready(function() {
swapText();
setInterval(swapText, 6000);
function swapText(){
$("#profile-text-fade").stop();
$("#profile-text-fade").fadeOut(1500, function() {
$(this).html('and much more!');
$(this).fadeIn(1500);
$(this).fadeOut(1500, function () {
$(this).fadeIn(1500);
$(this).html('In the making, Soon to show all the work I can crate!');
});
});
}
});
body {
background-color: #FFC85E;
}
.aligh {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.jumbotron_resize {
padding-top: 18%;
padding-bottom: 10em;
margin-bottom: 10em;
background-color: #FFC85E;
font-size: 1.2em;
}
h1, p{
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Profile Test Page">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Salvador Cervantes">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel='stylesheet' type:'text/css' href='../CSS/main.css'>
<title>
Test page
</title>
</head>
<body>
<div class="align">
<div class="jumbotron jumbotron-fluid jumbotron_resize">
<div class="container">
<h1 class="display-3">test Profile</h1>
<p id='profile-text-fade' class="lead">In the making, Soon to show all the work I can crate!</p>
</div>
</div>
<footer>
<div>
<p>© 2017
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script src='../js/main.js'></script>
</body>
</html>