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.
Related
I am trying to figure out a way for me to add some jpgs to my cats gallery. My layout includes images from one of three categories. I am using vite-react scaffold. I thought I could find a way to create one folder for each category, add all the jpgs in that folder, and then drum up some JSX to handle rendering. This is what I have so far. PS - the console is logging nothing - no errors or my attempt to confirm all the values were logging
// import { useState } from 'react'
import * as allFloofs from './assets/floofs/floofs'
function App() {
// const [images, setImages] = useState(false)
for (var i = 0; i < allFloofs.length; i++) {
let src = `${allFloofs[i]}`;
console.log(allFloofs[i])
let floof = new Image();
floof.src = src;
querySelector.image - container.appendChild(floof);
}
return (
<div className = "App" >
<div className = "image-container" >
<div> {
/* <Floofs/>
<Sleps/>
<Snyks/> */
}
</div>
</div>
</div >
)
}
export default App
.App {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
h2 {
text-align: center;
}
.image-container {
width: 80%;
margin-left: 10%;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 5px;
}
.image-container div:first-child {
grid-column-start: 1;
grid-column-end: 3;
}
.image-container div:last-child {
grid-row-start: 2;
grid-row-end: 5;
}
.image {
width: 100%;
height: 30px;
}
.image img {
width: 40%;
height: 40%;
}
:root {
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 24px;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
}
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
}
body {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
}
h1 {
font-size: 3.2em;
line-height: 1.1;
}
button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}
#media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="/src/index.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title> 🐈 F.I.R 🐈 </title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
dir layout
My todo list appends every input value starting with the number of elements in the list. So, entering the first item "Do homework" outputs to "1. Do homework." And the second input "Learn JS" outputs to "2. Learn JS." However, when deleting an element in the middle of the list, the number adjacent to the item doesn't adjust accordingly to the number of current list elements.
For example, if the output is:
1. Do homework 2. Learn JS3. Practice piano
Deleting number 2 will return:
1. Do homework 3. Practice piano
Instead of the correct output:
1. Do homework 2. Practice piano
var listset = document.querySelector('#add').addEventListener('click', newItem);
function newItem() {
var lilist = document.getElementById("listForm").getElementsByTagName("li")
var largo = lilist.length + 1
var node = document.createElement('li');
var inputValue = document.getElementById('input').value
const delButton = document.createElement('img')
delButton.src = "https://www.upload.ee/image/14249875/delete-button.jpg"
delButton.width = 15;
delButton.height = 15;
delButton.addEventListener('click', function(e){
e.target.closest('li').remove()
})
var textNode = document.createTextNode(largo +'. '+ inputValue + " ");
node.appendChild(textNode)
if (inputValue !== '') {
var item = document.getElementById('listForm').appendChild(node);
item.appendChild(delButton)
document.getElementById('input').value = '';
}
}
h1 {
font-family: 'Courier New', Courier, monospace;
font-size: 35px;
text-align: center;
}
.header2 {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
font-size: 18px;
}
.main-page {
margin-top: 150px;
margin-left: auto;
margin-right: auto;
width: 50%;
}
ul {
list-style-type: none;
margin-top: 150px;
margin-left: 50px;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
}
li {
margin-top: 10px;
}
.list {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
margin-left: 100px;
padding: 10px 10px;
width: 40%;
margin-bottom: -151px;
}
#input {
font-size: 18px;
}
#add {
background-color: rgb(233, 235, 235);
font-size: 18px;
margin-left: -3px;
}
#listForm {
color: black;
margin-left: 100px;
width: 284px;
}
li {
margin-bottom: -5px;
}
li:hover {
cursor: grab;
color: rgb(176, 171, 171)
}
#listForm .checked {
text-decoration: line-through;
}
.unchecked {
text-decoration: none;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>To Do List: Raamis Ali</title>
<meta name="description" content="A todo list application">
<meta name="author" content="Raamis Ali">
<link rel="stylesheet" href="list.css"> </head>
<body>
<script src="javascript.js"></script>
<div class="main-page">
<h1>To Do List Web App</h1>
<p class="header2">Created by Raamis Ali</p>
<div class="list">
<input type="text" id="input" placeholder="Add items">
<input type="button" value="Add" id="add" onclick="newItem()"> </div>
<ul id="listForm">
</ul>
<br> </div>
</body>
</html>
I have tried implementing this event listener and function with different variations of this but I have had no success:
largo.addEventListener('change', updateValue())
function updateValue(e) {
var lilist = document.getElementById("listForm").getElementsByTagName("li")
lilist.length + 1 == e.target.value;
}
For sure the number will not change, because you didn't re-initialize the list text with new numeric values.
As #Barmar suggest, it would better to use "ol" element instead of "ul" which will output the correct numeric order of the list.
var listset = document.querySelector('#add').addEventListener('click', newItem);
function newItem() {
var lilist = document.getElementById("listForm").getElementsByTagName("li")
var node = document.createElement('li');
var inputValue = document.getElementById('input').value
const delButton = document.createElement('img')
delButton.src = "https://www.upload.ee/image/14249875/delete-button.jpg"
delButton.width = 15;
delButton.height = 15;
delButton.addEventListener('click', function(e){
e.target.closest('li').remove()
})
var textNode = document.createTextNode(inputValue + " ");
node.appendChild(textNode)
if (inputValue !== '') {
var item = document.getElementById('listForm').appendChild(node);
item.appendChild(delButton)
document.getElementById('input').value = '';
}
}
h1 {
font-family: 'Courier New', Courier, monospace;
font-size: 35px;
text-align: center;
}
.header2 {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
font-size: 18px;
}
.main-page {
margin-top: 150px;
margin-left: auto;
margin-right: auto;
width: 50%;
}
ol {
margin-top: 150px;
margin-left: 50px;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
}
li {
margin-top: 10px;
}
.list {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
margin-left: 100px;
padding: 10px 10px;
width: 40%;
margin-bottom: -151px;
}
#input {
font-size: 18px;
}
#add {
background-color: rgb(233, 235, 235);
font-size: 18px;
margin-left: -3px;
}
#listForm {
color: black;
margin-left: 100px;
width: 284px;
}
li {
margin-bottom: -5px;
}
li:hover {
cursor: grab;
color: rgb(176, 171, 171)
}
#listForm .checked {
text-decoration: line-through;
}
.unchecked {
text-decoration: none;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>To Do List: Raamis Ali</title>
<meta name="description" content="A todo list application">
<meta name="author" content="Raamis Ali">
<link rel="stylesheet" href="list.css"> </head>
<body>
<script src="javascript.js"></script>
<div class="main-page">
<h1>To Do List Web App</h1>
<p class="header2">Created by Raamis Ali</p>
<div class="list">
<input type="text" id="input" placeholder="Add items">
<input type="button" value="Add" id="add" onclick="newItem()"> </div>
<ol id="listForm">
</ol>
<br> </div>
</body>
</html>
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>
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>
<!DOCTYPE html>
<html>
<head>
<title>Responsive Navigation Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<style>
body {
background-color: #191616;
margin: 0 auto;
height: 100%;
text-align: center;
}
nav {
height: 35px;
width: 100%;
/** background: #84A2B2; **/
font-size: 12pt;
font-family: 'PT Sans', Arial, sans-serif;
font-weight: bold;
border-bottom: 1px solid #FF565D;
}
nav ul {
padding: 0;
margin: 0 auto;
height: 35px;
}
nav li {
display: inline;
}
nav a {
color: #FF565D;
display: inline-block;
width: 80px;
text-align: center;
text-decoration: none;
line-height: 35px;
}
nav li:last-child a {
border-right: 0;
}
nav a:hover, nav a:active {
background-color: #1C1919;
color: #FB776B;
}
nav a#pull {
display: none;
}
#thetitle {
width: 60%;
min-height: 35px;
background: #191616;
border: 0;
color: #FF565D;
margin: 0 auto;
padding: 20px;
outline: none;
resize: none;
text-align: center;
font-weight: bold;
text-transform: uppercase;;
font-size: 12pt;
font-family: 'PT Sans', Arial, sans-serif;
}
#thenotes {
width: 60%;
min-height: 750px;
background: #191616;
border: 0;
color: #FF565D;
margin: 0 auto;
padding: 20px;
outline: none;
resize: none;
font-size: 12pt;
font-family: 'PT Sans', Arial, sans-serif;
}
#thenotes::selection {
background: ;
}
p a {
font-size: 11pt;
font-family: 'PT Sans', Arial, sans-serif;
font-weight: bold;
color: #FF565D;
text-decoration: none;
}
</style>
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<nav>
<ul>
<li>FONT</li>
<li>COLOR</li>
<li>+</li>
<li>-</li>
<li><b>B</b></li>
<li><i>I</i></li>
<li><u>U</u></li>
</ul>
</nav>
<textarea contenteditable="yes" id="thetitle" placeholder="Title..."></textarea>
<textarea contenteditable="yes" id="thenotes"></textarea>
<p><a class="saver" href="#">SAVE</a></p>
<script>
var container = document.getElementById('thenotes');
var containertitle = document.getElementById('thetitle');
var anchor = document.querySelector(".saver");
var dt = new Date();
var time = dt.getFullYear() + ":" + dt.getMonth() + ":" + dt.getDay() + " " + dt.getHours() + "." + dt.getMinutes() + "." + dt.getSeconds();
anchor.onclick = function() {
if ($('#thetitle').val() != '')
{
anchor.href = 'data:text/plain;charset=utf-8,' + encodeURIComponent(container.value);
anchor.download = encodeURIComponent(containertitle.value); + '.txt';
}
else
{
anchor.href = 'data:text/plain;charset=utf-8,' + encodeURIComponent(container.value);
anchor.download = time + '.txt';
}
};
</script>
</body>
</html>
So this is supposed to be a distract free notetaking page that should be used in fullscreen, I haven't yet gotten around to making the bold, italics, underline, font and color sections work which I will try to do soon but my main question is why it saves the file with the %20 in and not a simple space, and why the saved file won't break/skip a line in the saved txt file.
Although you may see percent-encoded characters in the href attribute (as a result of using encodeURIComponent()), they will not appear in the downloaded file.
In the example below, the data contains percent-encoded characters, because that is how to properly escape characters in a href attribute. However, when you open the downloaded file, the text appears as it should.
<a href="data:text/plain;charset=utf-8,Some%20text%0D%0Ato%20save"
download="testfile.txt">
Download
</a>