let convertBtnEl = document.getElementById("convertBtn");
convertBtn.addEventListener("click", function() {
var hours = parseInt(document.getElementById('hoursInput').value);
var minutes = parseInt(document.getElementById('minutesInput').value);
var seconds = (hours * 60 + minutes) * 60;
console.log(hours);
var showSeconds = document.getElementById("timeInSeconds");
var showError = document.getElementById("errorMsg");
if (isNaN(hours) || isNaN(minutes)) {
showError.textContent += "Error!!! Please enter any value";
} else {
showSeconds.textContent = "the number in seconds " + seconds;
}
});
#import url("https://fonts.googleapis.com/css2?family=Bree+Serif&family=Caveat:wght#400;700&family=Lobster&family=Monoton&family=Open+Sans:ital,wght#0,400;0,700;1,400;1,700&family=Playfair+Display+SC:ital,wght#0,400;0,700;1,700&family=Playfair+Display:ital,wght#0,400;0,700;1,700&family=Roboto:ital,wght#0,400;0,700;1,400;1,700&family=Source+Sans+Pro:ital,wght#0,400;0,700;1,700&family=Work+Sans:ital,wght#0,400;0,700;1,700&display=swap");
body {
max-width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
background: url(https://assets.ccbp.in/frontend/dynamic-webapps/time-converter-bg.png) center/cover no-repeat fixed;
}
.converter-wrapper {
display: flex;
flex-direction: column;
align-items: center;
}
.input-wrappers {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 20px;
}
input {
width: 25%;
padding: 8px;
outline: none;
border: 3px solid rgb(0, 0, 0);
border-radius: 5px;
background-color: rgb(209, 223, 218);
}
label {
font-size: 20px;
color: #f5f7fa;
font-weight: bold;
letter-spacing: 1.1px;
font-family: 'Open Sans', sans-serif;
}
button {
width: 30%;
padding: 8px 0;
border-radius: 15px;
font-size: 20px;
font-family: 'Open Sans', sans-serif;
background: rgb(18, 49, 92);
border: none;
color: white;
font-weight: bold;
letter-spacing: 1.2px;
margin-top: 30px;
}
button:hover {
cursor: pointer;
}
button:focus {
outline: none;
}
.seconds {
color: white;
font-size: 20px;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
}
.error {
color: red;
font-size: 20px;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" />
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</head>
<body>
<div class="converter-wrapper">
<div class="input-wrappers">
<label for="hoursInput">Enter the number of hours:</label>
<input type="number" id="hoursInput">
</div>
<div class="input-wrappers">
<label for="minutesInput">Enter the number of minutes:</label>
<input type="number" id="minutesInput">
</div>
<button id="convertBtn">Convert</button>
<p id="timeInSeconds" class="seconds"></p>
<p id="errorMsg" class="error"></p>
</div>
</body>
</html>
When values are entered in HTML input elements with ids hoursInput and minutesInput, the HTML button with id convertBtn is clicked, the converted seconds should be shown, and the error message should be empty
**
But when we not giving value to one of the input hours or minutes they displays error text message. But when we giving values in both hours and minutes the error text message displays still showing without clearing the display message. when we enter values in hours and minutes the error text message should be clear when before we escaped on testing with only one value entered. So please help me with some code in javascript**
You're not changing back the text. And you're adding more error messages. Use this instead:
if (isNaN(hours) || isNaN(minutes)) {
showError.textContent = "Error!!! Please enter any value";
} else {
showError.textContent = " ";
showSeconds.textContent = "the number in seconds " + seconds;
}
let convertBtnEl = document.getElementById("convertBtn");
let hoursInput = document.getElementById('hoursInput');
let minutesinput = document.getElementById('minutesInput');
function compute() {
var hours = parseInt(hoursInput.value);
var minutes = parseInt(minutesinput.value);
var seconds = (hours * 60 + minutes) * 60;
var showSeconds = document.getElementById("timeInSeconds");
var showError = document.getElementById("errorMsg");
if (isNaN(hours)) {
showSeconds.style.display = "none";
showError.style.display = "block";
showError.textContent = "Please enter a valid number of hours";
}
else if (isNaN(minutes)) {
showSeconds.style.display = "none";
showError.style.display = "block";
showError.textContent = "Please enter a valid number of minutes";
}
else {
showError.style.display = "none";
showSeconds.style.display = "block";
showSeconds.textContent = "the number in seconds " + seconds;
}
}
convertBtnEl.addEventListener("click", compute);
#import url("https://fonts.googleapis.com/css2?family=Bree+Serif&family=Caveat:wght#400;700&family=Lobster&family=Monoton&family=Open+Sans:ital,wght#0,400;0,700;1,400;1,700&family=Playfair+Display+SC:ital,wght#0,400;0,700;1,700&family=Playfair+Display:ital,wght#0,400;0,700;1,700&family=Roboto:ital,wght#0,400;0,700;1,400;1,700&family=Source+Sans+Pro:ital,wght#0,400;0,700;1,700&family=Work+Sans:ital,wght#0,400;0,700;1,700&display=swap");
body {
max-width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
background: url(https://assets.ccbp.in/frontend/dynamic-webapps/time-converter-bg.png) center/cover no-repeat fixed;
}
.converter-wrapper {
display: flex;
flex-direction: column;
align-items: center;
}
.input-wrappers {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 20px;
}
input {
width: 25%;
padding: 8px;
outline: none;
border: 3px solid rgb(0, 0, 0);
border-radius: 5px;
background-color: rgb(209, 223, 218);
}
label {
font-size: 20px;
color: #f5f7fa;
font-weight: bold;
letter-spacing: 1.1px;
font-family: 'Open Sans', sans-serif;
}
button {
width: 30%;
padding: 8px 0;
border-radius: 15px;
font-size: 20px;
font-family: 'Open Sans', sans-serif;
background: rgb(18, 49, 92);
border: none;
color: white;
font-weight: bold;
letter-spacing: 1.2px;
margin-top: 30px;
}
button:hover {
cursor: pointer;
}
button:focus {
outline: none;
}
.seconds {
color: white;
font-size: 20px;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
}
.error {
color: red;
font-size: 20px;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" />
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<body>
<div class="converter-wrapper">
<div class="input-wrappers">
<label for="hoursInput">Enter the number of hours:</label>
<input type="number" id="hoursInput">
</div>
<div class="input-wrappers">
<label for="minutesInput">Enter the number of minutes:</label>
<input type="number" id="minutesInput">
</div>
<button id="convertBtn">Convert</button>
<p id="timeInSeconds" class="seconds"></p>
<p id="errorMsg" class="error"></p>
</div>
</body>
Related
I am trying to create a Library and add information that is entered into my form (form is in popup window) to appear in a div (bookCard) within my grid. I was able to create an eventListener for the submit button and make my div (bookCard) appear. However, I am unable to display the input from my form on the bookCard div. How can I add to the function to make the inputs appear and display there when it is entered? Is there something I am missing within the addBookToLibrary function?
Thank you in advance for your help.
HTML
<!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">
<!----GitHub icon-->
<script
src="https://kit.fontawesome.com/4c536a6bd5.js"
crossorigin="anonymous"></script>
<!----------Font Below ---------------->
<link rel="stylesheet" href="https://use.typekit.net/jmq2vxa.css">
<link rel="stylesheet" href="styles.css">
<link rel="icon" type="image/png" href="images/open-book.png"/>
<title>My Library</title>
</head>
<body>
<div class="head-box">
<h1>My Library</h1>
</div>
<main class ="main-container">
<div class="body-box">
<button id="addBook">Add Book</button>
</div>
<div class="books-grid" id="booksGrid">
<div class="library-container" id="library-container"></div>
</div>
</main>
<!-----Form information----->
<div class="form-popup">
<div class="form-content"
<form action="example.com/path" class="form-container" id="popUpForm">
<h3>add new book</h3>
<input class="input" type="text" id="title" placeholder="Title" required maxlength="100">
<input type="author" id="author" placeholder="Author" required maxlength="100">
<input type="number" id="pages" placeholder="Pages" required max="10000">
<div class="isRead">
<label for="readOption">Have you read it?</label>
<input type="checkbox" id="readOption" name="readOption">
</div>
<button class="btn submit" type="submit" id="submit">Submit</button>
</form>
</div>
</div>
<div id="overlay"></div>
<div id="invisibleDiv"></div>
</body>
</html>
CSS
/*CSS RESET*/
* {
margin:0;
padding:0;
}
h1 {
font-family: ohno-blazeface, sans-serif;
font-weight: 100;
font-style: normal;
font-size: 8vh;
color: #001D4A;
}
.head-box {
background-color: #9DD1F1;
display: flex;
align-items: center;
justify-content: center;
height: 20vh;
border-bottom: 2px solid #e0f3ff;
}
h2 {
font-family: poppins, sans-serif;
font-weight: 300;
font-style: normal;
font-size: 5vh;
color: #001D4A;
}
h3 {
font-family: ohno-blazeface, sans-serif;
font-weight: 100;
font-style: normal;
font-size: 4vh;
color: #001D4A;
}
button {
height: 10vh;
width: 20vh;
min-width: 20vh;
min-height: 10vh;
font-size: 3vh;
background-color: #27476E;
border-radius: 22px;
border-style: none;
font-family: poppins, sans-serif;
font-weight: 300;
font-style: normal;
color:#ffffff;
}
button:hover {
background-color: #192c44;
}
body {
min-height: 100vh;
background: linear-gradient(180deg,#d0edff,#9DD1F1) no-repeat;
}
.body-box {
margin: 3vh;
display: flex;
justify-content: center;
}
/* The pop up form - hidden by default */
.form-popup {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9;
}
.form-content {
text-align: center;
border-radius: 20px;
width: 30vh;
height: auto;
border: 3px solid #001D4A;
padding: 20px;
background-color: #9DD1F1;
gap: 10px;
}
.form-container {
min-width: 20vh;
min-height: 50vh;
}
.isRead{
display: flex;
height: 30px;
width: 100%;
margin: 2px;
align-items: center;
justify-content: center;
}
label {
font-family: poppins, sans-serif;
font-weight: 600;
font-style: normal;
font-size: 2.5vh;
}
input {
border-radius: 10px;
height: 50px;
margin: 3px;
width: 100%;
padding: 4px;
background-color: #d0edff;
border: none;
font-family: poppins, sans-serif;
font-weight: 300;
font-size: 2.5vh;
}
#submit {
margin-top: 4px;
height: 20px;
width: 100%;
border-radius: 15px;
color: #ffffff;
border: none;
}
input[type=checkbox] {
width: 20px;
margin: 10px;
}
#invisibleDiv {
position: fixed;
height: 100%;
width: 100%;
}
#overlay {
position: fixed;
top: 0;
left: 0;
display: none;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.books-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
/* BOOK CARD */
#library-container {
display: none;
height: 50vh;
width: 50vh;
border-radius: 15px;
border: 5px solid #ffffff;
background-color: #d0edff;
flex-direction: column;
justify-content: space-between;
margin: 28px;
}
JS
class book {
constructor(title, author, pages, read) {
this.title = form.title.value;
this.author = form.author.value;
this.pages = form.pages.value + 'pages';
this.read = form.read.checked;
}
}
//creates book from Book Constructor, adds to library
let myLibrary = [];
function addBookToLibrary(book) {
const bookTitle = document.getElementById('title').value;
const bookAuthor = document.getElementById('author').value;
const bookPages = document.getElementById('pages').value;
}
// User interface //
const popUpForm = document.querySelector('.form-popup');
const button = document.getElementById('addBook');
const overlay = document.getElementById('overlay');
const booksGrid = document.getElementById('booksGrid');
const bookCard = document.querySelector('.library-container');
const form = document.querySelector('.form-container');
const submitBtn = document.getElementById('submit');
// Form Pop Up function //
document.getElementById('invisibleDiv').onclick = function()
{
popUpForm.style.display = "none";
overlay.style.display = "none";
};
button.addEventListener("click", () => {
popUpForm.style.display = "block";
overlay.style.display = "block";
});
// Submit Button Event Listener (displays bookCard) //
submitBtn.addEventListener("click", () => {
bookCard.style.display = "block";
popUpForm.style.display = "none";
overlay.style.display = "none";
addBookToLibrary();
});
Check this out, it should help.
Good luck
<!-- https://codepen.io/bradtraversy/pen/OrmKWZ -->
OR
<!-- https://codepen.io/fun/pen/PPVwBY -->
This is on-going, unfinish answer. The code in the question is put into live mode for investigation purposes.
Any reader may try to edit/run to get a solution.
class book {
constructor(title, author, pages, read) {
this.title = form.title.value;
this.author = form.author.value;
this.pages = form.pages.value + 'pages';
this.read = form.read.checked;
}
}
//creates book from Book Constructor, adds to library
let myLibrary = [];
function addBookToLibrary(book) {
const bookTitle = document.getElementById('title').value;
const bookAuthor = document.getElementById('author').value;
const bookPages = document.getElementById('pages').value;
}
// User interface //
const popUpForm = document.querySelector('.form-popup');
const button = document.getElementById('addBook');
const overlay = document.getElementById('overlay');
const booksGrid = document.getElementById('booksGrid');
const bookCard = document.querySelector('.library-container');
const form = document.querySelector('.form-container');
const submitBtn = document.getElementById('submit');
// Form Pop Up function //
document.getElementById('invisibleDiv').onclick = function()
{
popUpForm.style.display = "none";
overlay.style.display = "none";
};
button.addEventListener("click", () => {
popUpForm.style.display = "block";
overlay.style.display = "block";
});
// Submit Button Event Listener (displays bookCard) //
submitBtn.addEventListener("click", () => {
bookCard.style.display = "block";
popUpForm.style.display = "none";
overlay.style.display = "none";
addBookToLibrary();
});
/*CSS RESET*/
* {
margin:0;
padding:0;
}
h1 {
font-family: ohno-blazeface, sans-serif;
font-weight: 100;
font-style: normal;
font-size: 8vh;
color: #001D4A;
}
.head-box {
background-color: #9DD1F1;
display: flex;
align-items: center;
justify-content: center;
height: 20vh;
border-bottom: 2px solid #e0f3ff;
}
h2 {
font-family: poppins, sans-serif;
font-weight: 300;
font-style: normal;
font-size: 5vh;
color: #001D4A;
}
h3 {
font-family: ohno-blazeface, sans-serif;
font-weight: 100;
font-style: normal;
font-size: 4vh;
color: #001D4A;
}
button {
height: 10vh;
width: 20vh;
min-width: 20vh;
min-height: 10vh;
font-size: 3vh;
background-color: #27476E;
border-radius: 22px;
border-style: none;
font-family: poppins, sans-serif;
font-weight: 300;
font-style: normal;
color:#ffffff;
}
button:hover {
background-color: #192c44;
}
body {
min-height: 100vh;
background: linear-gradient(180deg,#d0edff,#9DD1F1) no-repeat;
}
.body-box {
margin: 3vh;
display: flex;
justify-content: center;
}
/* The pop up form - hidden by default */
.form-popup {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9;
}
.form-content {
text-align: center;
border-radius: 20px;
width: 30vh;
height: auto;
border: 3px solid #001D4A;
padding: 20px;
background-color: #9DD1F1;
gap: 10px;
}
.form-container {
min-width: 20vh;
min-height: 50vh;
}
.isRead{
display: flex;
height: 30px;
width: 100%;
margin: 2px;
align-items: center;
justify-content: center;
}
label {
font-family: poppins, sans-serif;
font-weight: 600;
font-style: normal;
font-size: 2.5vh;
}
input {
border-radius: 10px;
height: 50px;
margin: 3px;
width: 100%;
padding: 4px;
background-color: #d0edff;
border: none;
font-family: poppins, sans-serif;
font-weight: 300;
font-size: 2.5vh;
}
#submit {
margin-top: 4px;
height: 20px;
width: 100%;
border-radius: 15px;
color: #ffffff;
border: none;
}
input[type=checkbox] {
width: 20px;
margin: 10px;
}
#invisibleDiv {
position: fixed;
height: 100%;
width: 100%;
}
#overlay {
position: fixed;
top: 0;
left: 0;
display: none;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.books-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
/* BOOK CARD */
#library-container {
display: none;
height: 50vh;
width: 50vh;
border-radius: 15px;
border: 5px solid #ffffff;
background-color: #d0edff;
flex-direction: column;
justify-content: space-between;
margin: 28px;
}
<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">
<!----GitHub icon-->
<script
src="https://kit.fontawesome.com/4c536a6bd5.js"
crossorigin="anonymous"></script>
<!----------Font Below ---------------->
<link rel="stylesheet" href="https://use.typekit.net/jmq2vxa.css">
<link rel="stylesheet" href="styles.css">
<link rel="icon" type="image/png" href="images/open-book.png"/>
<title>My Library</title>
</head>
<body>
<div class="head-box">
<h1>My Library</h1>
</div>
<main class ="main-container">
<div class="body-box">
<button id="addBook">Add Book</button>
</div>
<div class="books-grid" id="booksGrid">
<div class="library-container" id="library-container"></div>
</div>
</main>
<!-----Form information----->
<div class="form-popup">
<div class="form-content"
<form action="example.com/path" class="form-container" id="popUpForm">
<h3>add new book</h3>
<input class="input" type="text" id="title" placeholder="Title" required maxlength="100">
<input type="author" id="author" placeholder="Author" required maxlength="100">
<input type="number" id="pages" placeholder="Pages" required max="10000">
<div class="isRead">
<label for="readOption">Have you read it?</label>
<input type="checkbox" id="readOption" name="readOption">
</div>
<button class="btn submit" type="submit" id="submit">Submit</button>
</form>
</div>
</div>
<div id="overlay"></div>
<div id="invisibleDiv"></div>
</body>
</html>
I want to extract the file created date from the DROPBOX API using JS. I have tried to fetch the modification date but not able to find the file creation date
Any help is greatly appreciated.
<!doctype html>
<html>
<head>
<title>Dropbox JavaScript SDK</title>
<style>
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
line-height: 1.5;
}
.container {
display: block;
width: 90%;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.container.main {
padding-top: 30px;
}
code, .code {
font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
color: #666;
}
.info {
font-size: 13px;
font-style: italic;
color: #666;
margin-top: 40px;
}
a {
color: #007ee5;
}
input {
border: 2px solid #007ee5;
border-radius: 3px;
padding: 8px;
font-size: 16px;
}
.button, button {
border-radius: 3px;
background-color: #007ee5;
border: none;
color: #fff;
font-size: 16px;
padding: 10px 15px;
text-decoration: none;
}
.page-header {
background-color: #007ee5;
padding: 10px 0 0 0;
}
.page-header .container {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 150px;
}
.page-header a {
color: #fff;
text-decoration: none;
}
.page-header nav {
display: flex;
justify-content: space-between;
align-items: center;
}
.page-header h1 {
display: flex;
align-items: center;
color: #fff;
font-size: 17px;
font-weight: 200;
}
.page-header .logo {
width: 100px;
margin-right: 10px;
}
.page-header .view-source {
font-weight: 200;
font-size: 12px;
}
.page-header h2 {
color: #fff;
font-size: 18px;
font-weight: normal;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill#7/dist/polyfill.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.3/fetch.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropbox.js/10.27.0/Dropbox-sdk.min.js" integrity="sha512-nTLJySi/DUYzRvvxWOxf31QS5191sN1gpoq6EqGFHPFH0RlM6xOiY6jEp9dmwhDlyFmCmicwLOMnE+fUmo02KQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<!-- Example layout boilerplate -->
<header class="page-header">
<div class="container">
<nav>
<a href="/">
<h1>
<img src="https://cfl.dropboxstatic.com/static/images/brand/logotype_white-vflRG5Zd8.svg" class="logo" />
JavaScript SDK Examples
</h1>
</a>
View Source
</nav>
<h2 class="code">
examples / basic
</h2>
</div>
</header>
<!-- Example description and UI -->
<section class="container main">
<textarea id="files"></textarea>
</section>
<!-- Scripts to run example -->
<script>
var form = document.getElementById('basic-form');
var ACCESS_TOKEN = '<TOKEN_HERE>';
var dbx = new Dropbox.Dropbox({ accessToken: ACCESS_TOKEN });
var filesList = document.getElementById('files');
var li;
function listFiles(path) {
dbx.filesListFolder({path: path})
.then(function(response) {
console.log('response', response)
var items = response.result.entries;
var values = [];
for (var i = 0; i < items.length; i++) {
if(items[i][".tag"] == "file")
{
values.push('"'+[path+"/"+items[i].name, items[i].server_modified,items[i].size].join('","')+'"');
}
if(items[i][".tag"] == "folder")
listFiles(path+"/"+items[i].name)
}
document.getElementById("files").innerHTML = document.getElementById("files").innerHTML + "\n" + values.join("\n")
})
.catch(function(error) {
console.error(error);
});
}
listFiles('')
</script>
</body>
</html>
The Dropbox API doesn't return file creation dates (only modified dates), but I'll pass this along as a feature request. I can't promise if or when that might be implemented though.
I'm trying to build a small game on my website to experiment with JavaScript that adds hotdogs to a bowl in random positions (building a pyramid shaped pile then covering the page).
But I'm not sure how to implement it. 10 hotdogs should go in the bowl, then 50 more should spill onto the 'game board,' then after that they would randomly cover the webpage. Right now I'm just wondering how to add the image elements onclick in random orientations using only HTML, CSS, and JavaScript if possible. Code shown below:
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>Game</title>
<link href="https://fonts.googleapis.com/css?family=Bungee|IBM+Plex+Sans:100,200,300i,500|Lato:300,300i,400,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./resources/game.css">
</head>
<body>
<!-- Title Section-->
<h1>FEED THE PUP</h1>
<p>Tap to give the dog some food, go for a high score or something!</p>
<!-- Game Section-->
<div id = 'gameSpace'>
<img id = 'dog' src="./resources/images/png/dog.png" alt="">
<img id = 'dogBowl' src="./resources/images/png/dogBowl.png" alt="">
<img class = 'hotdog' src="./resources/images/png/hot-dog.png" alt="">
</div>
<div class = 'scoreBoard'>
<p>SCORE:</p>
<p id = 'gameScore'>0</p>
</div>
<div class = 'thanks'>
<p class = 'attribute'>Dog icon made by photo3idea_studio from www.flaticon.com</p>
<p class = 'attribute'>Dog bowl icon made by Good Ware from www.flaticon.com</p>
<p class = 'attribute'>Hotdog icon made by Freepik from www.flaticon.com</p>
</div>
<script src="game.js"></script>
</body>
</html>
CSS:
body {
background-color: #C5F4E0;
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
height: fit-content;
}
h1 {
color: white;
text-align: center;
font-family: 'Bungee';
font-size: 4rem;
text-shadow: #232835 0px 3px 4px;
margin-bottom: 1rem;
}
p {
text-align: center;
color: #232835;
font-family: 'IBM Plex Sans';
font-weight: 200;
font-size: 1.5rem;
margin-top: 0rem;
}
#gameSpace {
display: flex;
flex-direction: row;
border: #232835 2px ridge;
height: 25rem;
width: 25rem;
margin: 0rem auto;
background-color: #F0F5F2;
align-items: flex-end;
cursor: pointer;
}
#dog {
max-width: 10rem;
max-height: 10rem;
justify-content: end;
align-items: baseline;
padding-left: 1rem;
padding-bottom: 1rem;
}
#dogBowl {
max-width: 8rem;
max-height: 8rem;
padding-right: 3rem;
margin-left: auto;
}
.hotdog {
display: none;
}
.scoreBoard {
display: flex;
height: 5rem;
width: 20rem;
margin: 2rem auto;
background-color: #232835;
border: #232835 1px ridge;
align-items: center;
color: #F0F5F2;
}
.scoreBoard p {
font-family: 'Lato';
font-weight: 500;
font-size: 1rem;
width: fit-content;
padding-left: .5rem;
margin: 0rem 0rem;
color: #F0F5F2;
}
#gameScore {
font-family: 'IBM Plex Sans';
font-weight: 200;
margin-left: auto;
padding-right: 1rem;
font-size: 4rem;
}
/* THANKS SECTION */
.thanks {
height: 3rem;
width: auto;
}
.attribute {
font-size: .75rem;
font-family: 'Lato';
margin: 0rem auto;
}
/* MEDIA SECTION */
#media only screen and (max-width: 600px){
#gameSpace {
width: 75%;
}
h1 {
font-size: 3rem;
}
p {
font-size: 1rem;
}
}
JavaScript:
let food = 0;
function upDog() {
food++;
document.getElementById("gameScore").innerHTML = food;
}
gameSpace.onclick = upDog;
Welcome, #drewemerine!
Right now I'm just wondering how to add the image elements onclick in random orientations using only HTML, CSS, and JavaScript if possible.
Instead of having an initial hotdog image in the HTML, I created a JavaScript function called makeHotDog() to create a hotdog image on the fly. It utilizes another function which just spits out random coordinates for the image. I hope this helps you out!
let food = 0;
let gameSpace = document.getElementById("gameSpace");
function getRandomPosition(element) {
let x = gameSpace.offsetHeight-element.clientHeight;
let y = gameSpace.offsetWidth-element.clientWidth;
let randomX = Math.floor(Math.random()*x);
let randomY = Math.floor(Math.random()*y);
return [randomX,randomY];
}
function makeHotDog() {
let img = document.createElement('img');
let xy = getRandomPosition(img);
img.setAttribute("src", "https://images.unsplash.com/photo-1515875976234-9d59c3ef288d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80");
img.setAttribute("class", "hotdog");
gameSpace.appendChild(img);
img.style.top = xy[0] + 'px';
img.style.left = xy[1] + 'px';
}
function upDog() {
food++;
document.getElementById("gameScore").innerHTML = food;
makeHotDog();
}
gameSpace.onclick = upDog;
body {
background-color: #C5F4E0;
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
height: fit-content;
}
h1 {
color: white;
text-align: center;
font-family: 'Bungee';
font-size: 4rem;
text-shadow: #232835 0px 3px 4px;
margin-bottom: 1rem;
}
p {
text-align: center;
color: #232835;
font-family: 'IBM Plex Sans';
font-weight: 200;
font-size: 1.5rem;
margin-top: 0rem;
}
#gameSpace {
display: flex;
flex-direction: row;
border: #232835 2px ridge;
height: 25rem;
width: 25rem;
margin: 0rem auto;
background-color: #F0F5F2;
align-items: flex-end;
cursor: pointer;
position: relative;
overflow: hidden;
}
#dog {
max-width: 10rem;
max-height: 10rem;
justify-content: end;
align-items: baseline;
padding-left: 1rem;
padding-bottom: 1rem;
}
#dogBowl {
max-width: 8rem;
max-height: 8rem;
padding-right: 3rem;
margin-left: auto;
}
.hotdog {
width: 80px;
position: absolute;
}
.scoreBoard {
display: flex;
height: 5rem;
width: 20rem;
margin: 2rem auto;
background-color: #232835;
border: #232835 1px ridge;
align-items: center;
color: #F0F5F2;
}
.scoreBoard p {
font-family: 'Lato';
font-weight: 500;
font-size: 1rem;
width: fit-content;
padding-left: .5rem;
margin: 0rem 0rem;
color: #F0F5F2;
}
#gameScore {
font-family: 'IBM Plex Sans';
font-weight: 200;
margin-left: auto;
padding-right: 1rem;
font-size: 4rem;
}
/* THANKS SECTION */
.thanks {
height: 3rem;
width: auto;
}
.attribute {
font-size: .75rem;
font-family: 'Lato';
margin: 0rem auto;
}
/* MEDIA SECTION */
#media only screen and (max-width: 600px){
#gameSpace {
width: 75%;
}
h1 {
font-size: 3rem;
}
p {
font-size: 1rem;
}
}
<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>Game</title>
<link href="https://fonts.googleapis.com/css?family=Bungee|IBM+Plex+Sans:100,200,300i,500|Lato:300,300i,400,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./resources/game.css">
</head>
<body>
<!-- Title Section-->
<h1>FEED THE PUP</h1>
<p>Tap to give the dog some food, go for a high score or something!</p>
<!-- Game Section-->
<div id = 'gameSpace'>
<img id = 'dog' src="https://images.unsplash.com/photo-1518020382113-a7e8fc38eac9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=660&q=80" alt="">
<img id = 'dogBowl' src="https://images.unsplash.com/photo-1510035618584-c442b241abe7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=900&q=80" alt="">
</div>
<div class = 'scoreBoard'>
<p>SCORE:</p>
<p id = 'gameScore'>0</p>
</div>
<div class = 'thanks'>
<p class = 'attribute'>Dog icon made by photo3idea_studio from www.flaticon.com</p>
<p class = 'attribute'>Dog bowl icon made by Good Ware from www.flaticon.com</p>
<p class = 'attribute'>Hotdog icon made by Freepik from www.flaticon.com</p>
</div>
<script src="game.js"></script>
</body>
</html>
I read that moment.js would do the trick, and have it included in my files but I don't know where to start. I need to get the value from an input field (#enterClockIn), convert it to HH:MM, and then once I have that value, I need to be able to add/subtract hours and minutes from it.
I currently have 1 function that is triggered by a click and would like to include this new code right into it so everything calculates at once. Here's is my codepen for this project:
https://codepen.io/lgrizo/pen/LLxbab
HTML CODE:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<link href="https://fonts.googleapis.com/css?family=Hind:300,400" rel="stylesheet">
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/main.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>40 Hour Workweek Calculator</title>
</head>
<body>
<header>
<h3>Workweek Calculator</h3>
</header>
<div class="wrapper">
<div>
<h4 class="sections totalHours">How many hours do you plan on working this week?</h4>
<input type="text" maxlength="2" class="userInput" id="hoursThisWeek" placeholder="ex: 40" />
</div>
<div>
<h4 class="sections fridayHours">On Friday morning, how many hours<br />(in whole numbers) do you currently have?</h4>
<input type="text" maxlength="2" class="userInput" id="fridayMorning" placeholder="ex: 33">
</div>
<div>
<h4 class="sections remDecimal">Enter remaining decimals:</h4>
<input type="text" maxlength="3" class="userInput" id="remainingDecimals" placeholder="ex: .57" />
</div>
<div>
<h4 class="sections clockFriday">Enter time you clocked in on Friday:</h4>
<input type="text" maxlength="8" class="userInput" id="enterClockIn" placeholder="ex: 07:22 AM" /><br />
</div>
<!-- <div class="buttons">
<button class="amButton">AM</button>
<button class="pmButton">PM</button>
</div> -->
<div>
<h4 class="sections lunch">Enter today's lunch break in minutes:</h4>
<input type="text" maxlength="3" class="userInput" id="enterLunch" placeholder="ex: 30"/>
</div>
<div class="sections calculate">
<button class="calcButton" onclick="calculateButton()">Calculate my hours</button>
</div>
<div class="resultsDiv">
<div>
<h4 class="sections currentHoursWorked results">Current hours worked:</h4>
<output type="text" class="defaultCalc resultsCalc" id="currentWorked">
</output>
</div>
<div>
<h4 class="sections remainHours results">Remaining hours to work:</h4>
<output type="text" class="defaultCalc resultsCalc" id="hoursLeftToWork">
</output>
</div>
<div>
<div>
<h4 class="sections remainHours results">Time to clock out on Friday:</h4>
<output type="text" class="defaultCalc clockOutTime resultsCalc" id="currentWorked">
</output>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.js"integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="crossorigin="anonymous"></script>
<script src="js/main.js"></script>
<script src="js/jquery.js"></script>
<script src="js/moment.js"></script>
</body>
</html>
CSS
/*Base style layouts*/
header, body {
font-family: 'Hind', sans-serif;
}
body {
background: #edf0f1;
font-family: 'Hind', sans-serif;
text-align: center;
}
header {
width: 100%;
height: 70px;
border-bottom-left-radius: 46px;
border-bottom-right-radius: 46px;
background-image: linear-gradient(120deg, #96deda 0%, #50c9c3 40%);
box-shadow: 0px 2px 4px rgba(44, 62, 80, 0.15);
color: #fff;
text-align: center;
}
header h3 {
margin: 0;
padding-top: 20px;
font-size: 1.4em;
font-weight: 300;
}
h4 {
font-weight: 300;
color: #000;
text-align: center;
}
.sections {
margin: 30px 0;
}
/*Gray areas that display javascript calculations*/
.defaultCalc {
display: inline-block;
line-height: 29px;
font-weight: 300;
font-family: 'Hind', sans-serif;
line-height: 14.5px;
vertical-align: middle;
-webkit-appearance: none;
}
/*Sections that require the user to input a number*/
.userInput::placeholder {
font-weight: 300;
font-style: italic;
color: rgba(149, 152, 154, 0.4);
text-align: center;
padding-top: 8px;
}
.userInput {
border: 1px solid #C3C8CB;
width: 133px;
height: 29px;
border-radius: 12px;
text-align: center;
color: #000;
font-weight: 300;
font-family: 'Hind', sans-serif;
line-height: 14.5px;
vertical-align: middle;
/*this removed the box shadow that was showing up on safari mobile*/
-webkit-appearance: none;
}
.sections {
margin: 30px 0;
}
/*Buttons*/
.amButton, .pmButton {
border: 1px solid #C3C8CB;
width: 45px;
height: 29px;
background-color: #fff;
color: #95989A;
border-radius: 12px;
font-family: 'Hind', sans-serif;
line-height: 29px;
font-weight: 300;
padding-right: 5px;
box-sizing: border-box;
}
.buttons {
margin: 25px 0;
text-align: center;
box-sizing: border-box;
}
.calcButton {
border: 1px;
width: 250px;
height: 36px;
background-color: #50c9c3;
color: #FFF;
border-radius: 12px;
font-weight: 100;
font-size: 1.2em;
text-align: center;
font-family: 'Hind', sans-serif;
line-height: 36px;
}
.clockOutAMButton, .clockOutPMButton {
border: 1px solid #C3C8CB;
width: 45px;
height: 29px;
background-color: #fff;
color: #95989A;
border-radius: 12px;
text-align: center;
display: inline-block;
line-height: 30px;
margin-top: 20px;
margin-bottom: 100px;
font-family: 'Hind', sans-serif;
font-weight: 300;
}
input:focus {
outline: 0;
}
output:focus {
outline: 0;
}
button:focus {
outline: 0;
}
.userInput:focus {
outline: none !important;
border:1px solid #50c9c3;
}
.calcButton:active {
font-size: 1.175em;
}
#currentWorked,
#hoursLeftToWork {
width: 180px;
height: 29px;
text-align: center;
line-height: 30px;
vertical-align: middle;
color: #60B6FF;
}
#media (min-width: 768px) {
header {
margin: 0 auto;
width: 80%;
}
.wrapper {
margin: 0 auto;
width: 575px;
}
.resultsDiv {
width: 650px;
}
.results {
display: inline-block;
width: 250px;
text-align: right;
padding-right: 50px;
}
.totalHours {
display: inline-block;
padding-right: 75px;
text-align: left;
width: 300px;
}
.fridayHours {
display: inline-block;
padding-right: 75px;
text-align: left;
width: 300px;
}
.remDecimal {
display: inline-block;
padding-right: 75px;
text-align: right;
width: 300px;
}
.clockFriday {
display: inline-block;
padding-right: 75px;
text-align: right;
width: 300px;
}
.buttons {
text-align: center;
padding-left: 380px;
margin-top: 0px;
}
.amButton, .pmButton {
text-align: center;
}
.lunch {
display: inline-block;
padding-right: 75px;
text-align: right;
width: 300px;
}
.lastButtons {
text-align: center;
padding-left: 380px;
}
.clockOutAMButton, .clockOutPMButton {
margin-top: 0px;
margin-bottom: 0px;
}
.sections, .clockOutTime, .defaultCalc {
vertical-align: middle;
}
.calcButton {
width: 520px;
}
}
JS
function calculateButton() {
// this gets the value for the "hours planned on working this week" field
var hoursThisWeek = parseInt(document.getElementById('hoursThisWeek').value);
// current hours on friday morning
var fridayMorning = parseInt(document.getElementById('fridayMorning').value);
// ramaining minutes in decimal form
var remainingDecimals = (document.getElementById('remainingDecimals').value);
//convert decimal minutes into time format minutes rounded to the nearest whole number
var roundedDecimal = Math.round(remainingDecimals * 60);
//result for current hours worked
var currentWorked = fridayMorning + " hours " + roundedDecimal + " minutes";
var remainingHours = (hoursThisWeek - fridayMorning) - 1;
var remainingMinutes = (60 - roundedDecimal);
var hoursLeftToWork = remainingHours + " hours " + remainingMinutes + " minutes";
//this is to display the current hours worked results
document.getElementById('currentWorked').innerHTML = currentWorked;
//this is to display the remaining hours left results
document.getElementById('hoursLeftToWork').innerHTML = hoursLeftToWork;
}
//Here is where I'm stuck! Do I start by getting the value from this input field?
var clockIn = $('#enterClockIn').val();
Why did you split the friday morning how many hour and decimals into different inputs? makes you write more code that way..
also you need to read the momentjs docs. they are extremely helpful. https://momentjs.com/docs/
Overall, what you had to do was tell moment the friday clock in time format (it would be hh:mm A) and then add the minutes to it
(eg moment("07:00 AM", "hh:mm A").add("90","minutes") will result in 08:30 AM)
Basically:
var clockOutTime = moment(clockedInFri, "hh:mm A").add(remaining + lunchBreak, "minutes");
clockOutTime = clockOutTime.format("hh:mm A");
Here is the full pen: https://codepen.io/nodirashidov/pen/WORMNZ
I’ve started my first own JS project.
In the end, I would like to have my own slotmachine.
By now, I’ve the problem, that I don’t know how to restart my program or just the function for generating again and again the new random values.
This is my code until now:
var randomX1 = Math.ceil(Math.random() * 10 );
var randomX2 = Math.ceil(Math.random() * 10 );
var randomX3 = Math.ceil(Math.random() * 10 );
function randomClickX() {
document.getElementById("randomX1").innerHTML = randomX1;
document.getElementById("randomX2").innerHTML = randomX2;
document.getElementById("randomX3").innerHTML = randomX3;
var ausgabe = "Play again";
if (randomX1 === randomX2) {
if(randomX2 === randomX3) {
var ausgabe = "Jackpot";
}
}
var chance = ausgabe;
function clickChance() {
document.getElementById("chance").innerHTML = chance;
}
document.getElementById('spanId').innerHTML = chance;
};
.slot-container {
border: 5px solid red;
vertical-align: middle;
font-size: 50px;
font-family: Leelawadee UI Semilight, Calibri, Arial;
width: 90%;
margin: auto;
height: 0;
padding-bottom: 30%;
}
.slot {
border: 3px solid green;
height: 0;
padding-bottom: 30%;
width: 32%;
margin-right: 1%;
margin-top: 1%;
margin-bottom: 1%;
float: left;
box-sizing: border-box;
}
#slot1 {
margin-left: 1%;
}
h1 {
color: #FC3FD3;
text-align: center;
font-family: Century Gothic;
font-size: 5em;
height: 50px;
}
p {
text-align: center;
vertical-align: middle;
justify-content: center;
}
button {
position: relative;
font-size:20px;
display: block;
background-color: white;
color: black;
border: 2px solid green;
width: 90%;
position: middle;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;
}
button:hover {
background-color: green;
}
button.spin-button {
color: blue;
position: absolute;
height: 20%;
}
.answer {
font-family: Century Gothic;
font-size: 20px;
color: red;
text-align: center;
margin-top: 10px;
}
ul.menubar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #008000;
}
ul.menubar li {
float: left;
}
ul.menubar li a {
color: black;
display: inline-block;
text-align: center;
padding:15px 20px;
text-decoration: none;
transition: 0.3s;
font-family: Century Gothic;
}
ul.menubar li a:hover {
background-color: #00A300;
}
<!DOCTYPE HTML>
<html>
<head>
<title>Slotmachine</title>
<script type="text/javascript" src="#.js"></script>
<link type="text/css" rel="stylesheet" href="#.css" />
</head>
<body>
<ul class="menubar" id=topmenubar>
<li>Home</li> <!-- bedeutet '#' gleicher Link + Ergänzung?-->
<li>Contact</a></li>
<li>About</li>
</ul>
<h1>1-10</h1>
<button type="button" id="spin-button" class="button" onClick="randomClickX()">SPIN</button>
<div class="slot-container">
<div id="slot1" class="slot">
<p> <!-- Your random number: --> <a id="randomX1">0</a></p>
</div>
<div id="slot2" class="slot">
<p> <!-- Your random number: --> <a id="randomX2">0</a></p>
</div>
<div id="slot3" class="slot">
<p> <!-- Your random number: --> <a id="randomX3">0</a></p>
</div>
</div>
</div>
<div class="answer" id="spanId">Test #1<a id="spanId"> </div>
</body>
</html>
As you see, I've to reload the HTML file to click the SPIN-button again to have new randoms.
I think the point is to create a big comprehensive function and call it when the SPIN function ends. But I don't now how to do that ...
What is the missing step, to have as many values as the user wishs to have?
Thanks, Jonas
Simply move the random numbers being generated into the click method.
function randomClickX() {
var randomX1 = Math.ceil(Math.random() * 10 );
var randomX2 = Math.ceil(Math.random() * 10 );
var randomX3 = Math.ceil(Math.random() * 10 );
document.getElementById("randomX1").innerHTML = randomX1;
document.getElementById("randomX2").innerHTML = randomX2;
document.getElementById("randomX3").innerHTML = randomX3;
var ausgabe = "Play again";
if (randomX1 === randomX2) {
if(randomX2 === randomX3) {
var ausgabe = "Jackpot";
}
}
var chance = ausgabe;
function clickChance() {
document.getElementById("chance").innerHTML = chance;
}
document.getElementById('spanId').innerHTML = chance;
};
.slot-container {
border: 5px solid red;
vertical-align: middle;
font-size: 50px;
font-family: Leelawadee UI Semilight, Calibri, Arial;
width: 90%;
margin: auto;
height: 0;
padding-bottom: 30%;
}
.slot {
border: 3px solid green;
height: 0;
padding-bottom: 30%;
width: 32%;
margin-right: 1%;
margin-top: 1%;
margin-bottom: 1%;
float: left;
box-sizing: border-box;
}
#slot1 {
margin-left: 1%;
}
h1 {
color: #FC3FD3;
text-align: center;
font-family: Century Gothic;
font-size: 5em;
height: 50px;
}
p {
text-align: center;
vertical-align: middle;
justify-content: center;
}
button {
position: relative;
font-size:20px;
display: block;
background-color: white;
color: black;
border: 2px solid green;
width: 90%;
position: middle;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;
}
button:hover {
background-color: green;
}
button.spin-button {
color: blue;
position: absolute;
height: 20%;
}
.answer {
font-family: Century Gothic;
font-size: 20px;
color: red;
text-align: center;
margin-top: 10px;
}
ul.menubar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #008000;
}
ul.menubar li {
float: left;
}
ul.menubar li a {
color: black;
display: inline-block;
text-align: center;
padding:15px 20px;
text-decoration: none;
transition: 0.3s;
font-family: Century Gothic;
}
ul.menubar li a:hover {
background-color: #00A300;
}
<!DOCTYPE HTML>
<html>
<head>
<title>Slotmachine</title>
<script type="text/javascript" src="#.js"></script>
<link type="text/css" rel="stylesheet" href="#.css" />
</head>
<body>
<ul class="menubar" id=topmenubar>
<li>Home</li> <!-- bedeutet '#' gleicher Link + Ergänzung?-->
<li>Contact</a></li>
<li>About</li>
</ul>
<h1>1-10</h1>
<button type="button" id="spin-button" class="button" onClick="randomClickX()">SPIN</button>
<div class="slot-container">
<div id="slot1" class="slot">
<p> <!-- Your random number: --> <a id="randomX1">0</a></p>
</div>
<div id="slot2" class="slot">
<p> <!-- Your random number: --> <a id="randomX2">0</a></p>
</div>
<div id="slot3" class="slot">
<p> <!-- Your random number: --> <a id="randomX3">0</a></p>
</div>
</div>
</div>
<div class="answer" id="spanId">Test #1<a id="spanId"> </div>
</body>
</html>