We Keep Coding

How to use javascript to achieve scroll loading, the mouse can automatically scroll to the bottom to display the newly loaded content?

I want to realize that when scrolling to the bottom of the window, more information can be loaded in, so far it has been done! But I have two problems: 1. I don't know how to make the scroll scroll to the bottom to see the newly loaded data when the data is loaded? 2. Since I will trigger a loading function when I scroll to the bottom, if it will automatically scroll to the bottom when the data is loaded, this will not trigger the loading function. What I want is to only load each time I scroll Enter four data. I have tried many ways and still don't know how to solve the above two problems I encountered, I hope to get your help, thank you very much.
let str = ""
let limit = 4;
let offset = 0;
let data = [{
id: 5,
title: "title5"
},
{
id: 6,
title: "title6"
},
{
id: 7,
title: "title7"
},
{
id: 8,
title: "title8"
},
{
id: 9,
title: "title9"
},
{
id: 10,
title: "title10"
},
{
id: 11,
title: "title11"
},
{
id: 12,
title: "title12"
},
{
id: 13,
title: "title13"
},
{
id: 14,
title: "title14"
},
{
id: 15,
title: "title15"
}
];
function addData() {
let newData = data.splice(0, limit);
if (newData.length === 0) return;
str = "";
newData.forEach(e => {
str += ` <li class="message">
<div class='id'>${e.id}</div>
<div>${e.title}</div>
</li>`
});
content.innerHTML += str;
}
let loading = false;
let content = document.querySelector('.content');
content.addEventListener('scroll', function() {
if (loading || data.length === 0) return;
if (content.scrollTop + content.clientHeight >= content.scrollHeight) {
loading = true;
document.querySelector('.loading').style.display = 'block';
setTimeout(() => {
addData();
document.querySelector('.loading').style.display = 'none';
loading = false;
}, 1000);
}
});
.content {
width: 600px;
height: 200px;
overflow: auto;
border: 1px solid;
}
.message {
display: flex;
padding: 30px;
border: 1px solid #ddd;
}
.id {
margin-right: 8px;
}
.loading {
display: none;
width: 60px;
height: 60px;
margin: 0 auto;
background: url('https://media.giphy.com/media/3o7bu3XilJ5BOiSGic/giphy.gif');
}
<ul class="content">
<li class="message">
<div class='id'>1</div>
<div>title1</div>
</li>
<li class="message">
<div class='id'>2</div>
<div>title2</div>
</li>
<li class="message">
<div class='id'>3</div>
<div>title3</div>
</li>
<li class="message">
<div class='id'>4</div>
<div>title4</div>
</li>
<div class="loading"></div>
</ul>

jQuery UI Droppable items

Hello
I have a problem. The problem is, when I move an item to multiple slots it works perfectly.
But when i have two items of the same type, and I put them together it turns into a single item with the value of 2.
But I can't figure out how i could separate that two items into two separate items with the value of one.
if($(this)[0].querySelector('.size').innerText > 1) {
$(this).children().children().html(1);
}
Project: https://codepen.io/KsenonAdv/pen/bGRaRjR

Consider the following example.
$(function() {
function log(string) {
console.log(Date.now(), string);
}
function makeGrid() {
log("Make Grid...");
for (var i = 0; i < 36; i++) {
$("<div>", {
class: "slot"
}).data({
count: 0,
stackable: true
}).appendTo(".slots");
}
log("-* Grid Complete *-");
}
function makeDraggable(target) {
log("Make Drag, Current Class: " + $(target).attr("class"));
console.log(target);
$(target).draggable({
scroll: false,
helper: "clone",
cursor: "pointer",
zIndex: 27,
revert: "invalid"
});
log("After Make Drag, Current Class: " + $(target).attr("class"));
console.log(target);
}
function refreshSlot(target) {
log("Refresh Slot");
$(".size", target).html($(target).data("count"));
}
function addItem(slot, item) {
log("Add Item " + item.id);
$.extend(item, {
stackable: (item.category != 0),
count: (item.count == undefined ? 1 : item.count)
});
slot = $(slot);
var newItem = $("<div>", {
class: "item",
id: item.id,
})
.data(item)
.css("background-image", "url(" + item.img + ")");
newItem.appendTo(slot);
$("<div>", {
class: "size"
}).appendTo(slot);
slot.data({
count: item.count,
stackable: item.stackable
});
log("Item Added - Refreshing");
refreshSlot(slot);
}
function emptySlot(target) {
log("Empty Slot " + $(target).index());
$(target).data({
count: 0,
stackable: true
}).empty();
}
function loadPlayerItems(items) {
log("Loading Player Items...");
$.each(items, function(index, item) {
addItem($(".slots > .slot").eq(index), item);
});
log("-* Loading Complete *-");
}
function isAcceptable(item) {
if ($(this).children().length == 0 || $(".item", this).data("stackable")) {
return true;
}
return false;
}
var pItems = {
playerItems: [{
img: 'https://i.imgur.com/5cjSI9X.png',
name: 'bat',
id: 1,
category: 0
},
{
img: 'https://i.imgur.com/HLQORBk.png',
name: 'axe',
id: 2,
category: 1
},
{
img: 'https://i.imgur.com/HLQORBk.png',
name: 'axe',
id: 3,
category: 1
}
]
};
makeGrid();
loadPlayerItems(pItems.playerItems);
makeDraggable(".item");
$(".slots > .slot").droppable({
accept: isAcceptable,
drop: function(event, ui) {
var origin = ui.draggable.parent();
var target = $(this);
log("Drop Accepted; From: " + origin.index() + ", To: " + target.index());
// Increase the Count
target.data("count", target.data("count") + 1);
// Check for Stack
if (target.children().length == 0) {
addItem(target, ui.draggable.data());
} else {
refreshSlot(target);
}
// Check Orginal Stack
if (origin.data("count") > 1) {
origin.data("count", origin.data("count") - 1);
refreshSlot(origin);
} else {
emptySlot(origin);
}
makeDraggable($(".item", this));
}
});
});
body {
display: flex;
justify-content: space-between;
background: url(http://img.playground.ru/images/5/1/GTA5_2015-05-07_00-53-36-07.png);
}
#inventory {
height: 56.25vw;
background: rgba(0, 0, 0, .5);
}
.list-slots {
position: relative;
background: rgba(0, 0, 0, .7);
max-width: 80%;
}
.slots {
max-width: 87%;
margin: auto;
padding-top: 3.125vw;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.slots .slot {
width: 100px;
height: calc(100px + 1em);
background-color: #ccc;
margin-bottom: 0.781vw;
}
.slots .slot .item {
background-repeat: no-repeat;
width: 100px;
height: 100px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="inventory">
<div class="list-slots">
<div class="slots"></div>
</div>
</div>
As discussed in the comment, this updates the Count of items in the Slot by 1. When an items is dragged out, the count is lowered by 1.
To make things easier, I created a number of functions. You may choose to handle it in another manner if you like.

how to dynamically resize text in a vue component

I have built an application with different widgets you can drop into a dashboard. Each widget contains a component that a user would like to see (kind of like grafana if you've ever seen it).
Question: When the user drags the grid-item to increase or decrease the size, how do you update the html inside of my component to adjust to the size of the new item?
What I've tried:
attempted to wrap the p tags in an SVG and use viewport.
attempted to change my size to VW to dynamically scale by the viewport but the viewport is not of the component but of the entire spa.
I attempted to get the parent size using this.$parent and did some math to get the text size and dynamically assign it to a component but this was very messy. Also, the sizes displayed were not right.
Below is my code for my grid using the vue-grid-layout package
<grid-layout
ref="widgetGrid"
:layout.sync="widgets"
:col-num="12"
:row-height="verticalSize"
:is-draggable="editable"
:is-resizable="editable"
:is-mirrored="false"
:responsive="true"
:autoSize="editable"
:prevent-collision="false"
:vertical-compact="false"
:margin="[10, 10]"
:use-css-transforms="true"
#layout-updated="layoutUpdatedEvent"
>
<grid-item
:ref="`widget_${widget.i}`"
v-for="widget in widgets"
:key="widget.i"
:x="widget.x"
:y="widget.y"
:w="widget.w"
:h="widget.h"
:i="widget.i"
:static="!editable"
>
<template>
<component
:is="widget.WidgetType"
:setup="false"
:widgetConfig="widget.WidgetConfig"
></component>
</template>
</grid-item>
</grid-layout>
My component that I'm trying to resize the text for is below. It's a vue file and I've included styling.
<template>
<div>
<div id="clock">
<p class="date">{{ date }}</p>
<p class="time">{{ time }}</p>
</div>
</div>
</template>
<script>
export default {
data() {
return {
time: '',
date: '',
week: ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'],
ticker: null
};
},
created() {
this.ticker = setInterval(this.updateTime, 1000);
},
mounted() {
this.showDate =
this.widgetConfig?.Settings?.find((x) => x.Key === 'ShowDate').Value ||
false;
this.showTime =
this.widgetConfig?.Settings?.find((x) => x.Key === 'ShowTime').Value ||
false;
},
methods: {
updateTime() {
let cd = new Date();
this.time =
this.zeroPadding(cd.getHours(), 2) +
':' +
this.zeroPadding(cd.getMinutes(), 2) +
':' +
this.zeroPadding(cd.getSeconds(), 2);
this.date =
this.zeroPadding(cd.getFullYear(), 4) +
'-' +
this.zeroPadding(cd.getMonth() + 1, 2) +
'-' +
this.zeroPadding(cd.getDate(), 2) +
' ' +
this.week[cd.getDay()];
},
zeroPadding(num, digit) {
let zero = '';
for (let i = 0; i < digit; i++) {
zero += '0';
}
return (zero + num).slice(-digit);
}
},
};
</script>
<style lang="scss" scoped>
html,
body {
height: 100%;
}
body {
background: #0f3854!important;
background: radial-gradient(ellipse at center, #0a2e38 0%, #000000 70%)!important;
background-size: 100%;
}
p {
margin: 0;
padding: 0;
}
#clock {
font-family: 'Share Tech Mono', monospace;
color: #ffffff;
text-align: center;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: #daf6ff;
text-shadow: 0 0 20px rgba(10, 175, 230, 1), 0 0 20px rgba(10, 175, 230, 0);
.time {
letter-spacing: 0.05em;
font-size: 1vw;
padding: 5px 0;
}
.date {
letter-spacing: 0.1em;
font-size: 1vw;
}
.text {
letter-spacing: 0.1em;
font-size: 1vw;
padding: 20px 0 0;
}
}
</style>
Nuxt Config
module.exports = {
head: {
titleTemplate: '',
title: 'QVue',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: 'QVue Web UI' },
],
link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
},
css: [],
plugins: [
{ src: '#/plugins/vueGrid', ssr: false }
],
publicRuntimeConfig: {},
privateRuntimeConfig: {},
components: true,
buildModules: [
'#nuxtjs/vuetify'
],
modules: [
'#nuxtjs/axios'
],
axios: {
},
build: {
},
render: {
compressor: false,
},
srcDir: 'client/',
};

If you'd like to resize the text size for your clock component, one solution is uses svg -> viewbox the one you already mentioned. But you need to use <text> instead of <p>.
Below is the demo:
Vue.component('v-clock',{
template:`
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<text x="0" y="25" fill="red">{{date}}</text>
<text x="0" y="75" fill="red">{{time}}</text>
</svg>
`,
data() {
return {
time: '',
date: '',
week: ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'],
ticker: null
};
},
created() {
this.ticker = setInterval(this.updateTime, 1000);
},
mounted() {
this.showDate =
this.widgetConfig?.Settings?.find((x) => x.Key === 'ShowDate').Value ||
false;
this.showTime =
this.widgetConfig?.Settings?.find((x) => x.Key === 'ShowTime').Value ||
false;
},
methods: {
updateTime() {
let cd = new Date();
this.time =
this.zeroPadding(cd.getHours(), 2) +
':' +
this.zeroPadding(cd.getMinutes(), 2) +
':' +
this.zeroPadding(cd.getSeconds(), 2);
this.date =
this.zeroPadding(cd.getFullYear(), 4) +
'-' +
this.zeroPadding(cd.getMonth() + 1, 2) +
'-' +
this.zeroPadding(cd.getDate(), 2) +
' ' +
this.week[cd.getDay()];
},
zeroPadding(num, digit) {
let zero = '';
for (let i = 0; i < digit; i++) {
zero += '0';
}
return (zero + num).slice(-digit);
}
}
})
new Vue ({
el:'#app',
data () {
return {
size: 100
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
<input v-model.number="size" type="range" min="50" max="500"/>
<div :style="{width: size + 'px', height: size + 'px'}" style="border: solid 1px blue">
<v-clock></v-clock>
</div>
</div>

Display Array Data in Table

I have a div with id="result", I want to show my data in this div tag.
How to append this table data.
I did not understand in table data tag table is in the string so how it works
function displayAddress() {
if (flag == 0) {
tabledata = "<table style='position: fixed; background-color:lightgrey; border: 1px solid black; border-collapse: collapse; margin-top: 25px;' border = '1'><tr><th>Name</th><th>Type</th><th>Address</th><th>Email</th><th>Mobile</th><th>Location</th></tr>";
}
for (i = 0; i < dataArray.length; i++) {
var tempname = dataArray[i].Name;
var temptype = dataArray[i].Type;
var tempaddress = dataArray[i].Address;
var tempemail = dataArray[i].Email;
var tempmobile = dataArray[i].Mobile;
var templocation = dataArray[i].Location;
//Please fill the required code to store the values in tabledata.
}
console.log(tabledata);
if (flag == 0) {
//Please fill the required code to store the table data in result.
document.getElementById("name").value = "";
document.getElementsByName("type").checked = false;
document.getElementById("address").value = "";
document.getElementById("email").value = "";
document.getElementById("mobile").value = "";
document.getElementById("location").value = "";
}
count = 0;
}

This is one way
const dataArray = [{
"Name": "Joe",
"Type": "Contractor",
"Address": "Address 1",
"Email": "Email#email.com",
"Mobile": "0123456789",
"Location": "At home"
},
{
"Name": "Jane",
"Type": "Contractor",
"Address": "Address 2",
"Email": "Email#email.com",
"Mobile": "1234567890",
"Location": "At home"
}
];
const tb = document.getElementById("tb");
let tr = [];
dataArray.forEach(item => {
tr.push('<tr><td>' + item.Name + '</td>')
tr.push('<td>' + item.Type + '</td>')
tr.push('<td>' + item.Address + '</td>')
tr.push('<td>' + item.Email + '</td>')
tr.push('<td>' + item.Mobile + '</td>')
tr.push('<td>' + item.Location + '</td></tr>')
})
tb.innerHTML = tr.join("");
document.getElementById("result").classList.remove("hide"); // show
#table1 {
position: fixed;
background-color: lightgrey;
border: 1px solid black;
border-collapse: collapse;
margin-top: 25px;
}
#table1 tr td {
border: 1px solid black;
}
.hide { display:none; }
<div id="result" class="hide">
<table id="table1">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Address</th>
<th>Email</th>
<th>Mobile</th>
<th>Location</th>
</tr>
</thead>
<tbody id="tb"></tbody>
</table>
</div>
Alternative method using template literals
dataArray.forEach(item => {
tr.push(`<tr>
<td>${item.Name}</td>
<td>${item.Type}</td>
<td>${item.Address}</td>
<td>${item.Email}</td>
<td>${item.Mobile}</td>
<td>${item.Location}</td>
</tr>`);
})

for mysself I do that [very shorter] way.
All the documentation is here -> https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement
const resultDiv = document.getElementById('result')
, myTable = resultDiv.appendChild(document.createElement('table')) // create the TABLE
, rowList =
[ { lib:'Names', key: 'Name' }, { lib:'Types', key:'Type' }
, { lib:'Address', key: 'Address' }, { lib:'eMails', key:'Email' }
, { lib:'phone', key: 'Mobile' }, { lib:'Locations', key:'Location' }
];
// sample data
const dataArray =
[ { Name: "Joe", Type: "Contractor", Address: "Address 1", Email: "Email_1#email.com", Mobile: "0123456789", Location: "At home"}
, { Name: "Jane", Type: "Contractor", Address: "Address 2", Email: "Email_2#email.com", Mobile: "0987654321", Location: "someWhere"}
]
;
dataArray.forEach(item=>
{
let newRow = myTable.insertRow()
rowList.forEach(rowName=>newRow.insertCell().textContent = item[rowName.key])
})
// make header part at last
let theHeader = myTable.createTHead().insertRow()
rowList.forEach(rowName=>theHeader.insertCell().textContent = rowName.lib)
/* cosmetic part */
table {
border-collapse: collapse;
margin-top: 25px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
thead {
background-color: aquamarine;
}
tbody {
background-color: #b4c5d8;
}
td {
border: 1px solid grey;
padding: .3em .7em;
}
<div id="result"></div>

there are two ways, the easy version is
document.getElementById("element").innerHTML = yourArray[0]
document.getElementById("element").innerHTML = yourArray[1]
document.getElementById("element").innerHTML = yourArray[2]
...
second way is map() method
yourArray.map(item => {
elements.innerHTML = item
});
if you use a framework (like Vue, React) second way is more easier
dont work try this
var email = yourArray[0]
var password = yourArray[1]
var table = "<table><tr> <td>" + email + "</td><td>" + password "</td></tr></table>

Looping through an array of objects to display information

I am on a Team Treehouse challenge.
My challenge is to create an array of objects which contains the students info, make a search database for it so when you search for the student, the student will appear.
The additional challenge is to print out the both students if there is 2 students of same name. I also tried adding another little challenge to list all students if user typed "list".
My code:
var message = '';
var student;
var search;
var list;
function print(message) {
var outputDiv = document.getElementById('output');
outputDiv.innerHTML = message;
}
function getStudentInfo (student) {
var report = '<h2>Student: ' + student.name + '</h2>';
report += '<p>Track: ' + student.track + '</p>';
report += '<p>Points: ' + student.points + '</p>';
report += '<p>Achievements: ' + student.achievements + '</p>';
return report;
}
while (true) {
search = prompt("Search Student records: Type a name [Martin] or [quit] to exit");
if (search === null || search.toLowerCase() === "quit") {
break;
}
for (var i = 0; i < students.length; i += 1) {
student = students [i];
if (search.toLowerCase() === student.name.toLowerCase()) {
message = getStudentInfo(student);
print(message);
break;
} else if (search.toLowerCase() === "list") {
list = '<h2>Student: ' + student.name + '</h2>';
list += '<p>Track: ' + student.track + '</p>';
list += '<p>Points: ' + student.points + '</p>';
list += '<p>Achievements: ' + student.achievements + '</p>';
print (list);
}
}
}
var students = [
{
name: 'Dave',
track: 'Front End Development',
achievements: 158,
points: 14730
},
{
name: 'Jody',
track: 'iOS Development with Swift',
achievements: '175',
points: '16375'
},
{
name: 'Jordan',
track: 'PHP Development',
achievements: '55',
points: '2025'
},
{
name: 'John',
track: 'Learn WordPress',
achievements: '40',
points: '1950'
},
{
name: 'Jordan',
track: 'Rails Development',
achievements: '5',
points: '350'
}
];

A couple of notable things:
This is poor use of a while loop and using while (true) tends to be error-prone leading to infinite loops. The point of having a prompt in a loop would be to continually expect additional input from the user, but since you break; out of every loop I don't believe that is your goal. You actually don't need a while construct at all.
You don't need so many variables to keep track of the program's state. It's fine to repeat students[i] twice rather than making a new variable for it, and you can store the user's input as toLowerCase() right away since that's all you'll ever be checking.
Unless multiple places in your code need to output to the UI, you don't need a separate function for outputting the message. You can just build up the message and output it at the end of the script. My hunch is that this build-up of the final output is your biggest point of confusion, and the extra function call adds to that.
Overall though, it looks like you were pretty close - the following code is actually shorter than what you had and mainly changes how the output message is built.
(function() {
var students = [
{
name: 'Dave',
track: 'Front End Development',
achievements: 158,
points: 14730
},
{
name: 'Jody',
track: 'iOS Development with Swift',
achievements: '175',
points: '16375'
},
{
name: 'Jordan',
track: 'PHP Development',
achievements: '55',
points: '2025'
},
{
name: 'John',
track: 'Learn WordPress',
achievements: '40',
points: '1950'
},
{
name: 'Jordan',
track: 'Rails Development',
achievements: '5',
points: '350'
}
];
var i = 0;
var input = '';
var output = '';
function getStudentInfo (student) {
var report = '<h2>Student: ' + student.name + '</h2>';
report += '<p>Track: ' + student.track + '</p>';
report += '<p>Points: ' + student.points + '</p>';
report += '<p>Achievements: ' + student.achievements + '</p>';
return report;
}
input = prompt("Search Student records: Type a name [Martin] or [quit] to exit").toLowerCase();
if (input === 'quit' || input.length === 0) {
return; // or display some message to 'output'
}
for (i = 0; i < students.length; i++) {
if (input === 'list') {
output += getStudentInfo(students[i]);
} else if (input === students[i].name.toLowerCase()) {
output += getStudentInfo(students[i]);
}
}
document.getElementById('output').innerHTML = output;
})();
#import url('http://necolas.github.io/normalize.css/3.0.2/normalize.css');
/*General*/
body {
background: #fff;
max-width: 980px;
margin: 0 auto;
padding: 0 20px;
font: Helvetica Neue, Helvectica, Arial, serif;
font-weight: 300;
font-size: 1em;
line-height: 1.5em;
color: #8d9aa5;
}
a {
color: #3f8aBf;
text-decoration: none;
}
a:hover {
color: #3079ab;
}
a:visited {
color: #5a6772;
}
h1, h2, h3 {
font-weight: 500;
color: #384047;
}
h1 {
font-size: 1.8em;
margin: 60px 0 40px;
}
h2 {
font-size: 1em;
font-weight: 300;
margin: 0;
padding: 30px 0 10px 0;
}
#home h2 {
margin: -40px 0 0;
}
h3 {
font-size: .9em;
font-weight: 300;
margin: 0;
padding: 0;
}
h3 em {
font-style: normal;
font-weight: 300;
margin: 0 0 10px 5px;
padding: 0;
color: #8d9aa5;
}
ol {
margin: 0 0 20px 32px;
padding: 0;
}
#home ol {
list-style-type: none;
margin: 0 0 40px 0;
}
li {
padding: 8px 0;
display: list-item;
width: 100%;
margin: 0;
counter-increment: step-counter;
}
#home li::before {
content: counter(step-counter);
font-size: .65em;
color: #fff;
font-weight: 300;
padding: 2px 6px;
margin: 0 18px 0 0;
border-radius: 3px;
background:#8d9aa5;
line-height: 1em;
}
.lens {
display: inline-block;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid #8d9aa5;
border-radius: 5px;
position: absolute;
margin: 5px 0 0 -19px;
}
#color div {
width: 50px;
height: 50px;
display: inline-block;
border-radius: 50%;
margin: 5px;
}
span {
color: red;
}
<h1>Students</h1>
<div id="output"></div>