Feeling Awesome with the JavaScript Column! - Thanks Glide

Hello Community,

How are you’ll everyone? I hope you all are fine!

I’m just experimenting the JavaScript column with some codes while I’m creating Apps and Pages in Glide and thought to share them with you’ll and correct the codes if I’m wrong in somewhere!


This is my first attempt! :

Getting the Timezone of the device!

This is the code :

var first = (new Date().toTimeString().slice(9));
var second = (Intl.DateTimeFormat().resolvedOptions().timeZone);
var third = (new Date().getTimezoneOffset() /-60);
var full = first + "," + '\xa0' + second + "," + '\xa0' + third;
return full;

My second attempt ( Part 1 ) :

First Name, dot and Last Name

image

This is the code :

var first_name = p1;
var first_name_in_capital = first_name.charAt(0).toUpperCase() + first_name.slice(1);
var last_name = p2;
var last_name_in_capital = last_name.charAt(0).toUpperCase();
var Name = first_name_in_capital + "." + last_name_in_capital;
return Name;

My second attempt ( Part 2 ) :

First Name, Last Name and dot

image

This is the code :

var first_name = p1;
var first_name_in_capital = first_name.charAt(0).toUpperCase() + first_name.slice(1);
var last_name = p2;
var last_name_in_capital = last_name.charAt(0).toUpperCase();
var Name = first_name_in_capital + "\xa0" + last_name_in_capital + ".";
return Name;

My third attempt :

Get the first letter in a word.

image

image

This is the code :

var value = p1;
var first_letter = value.charAt(0);
return first_letter;

When adding these codes add the columns for p1 or p2 or p3 and sometimes two or all!

And also I’m still learning JS in school and not have a much knowledge with it :nerd_face: If I’m wrong in somewhere please let me know :raised_hands:

I will update this post once I found new things! :raised_hands:

Thanks for reading!

Have a great day!

11 Likes

Nice choice in sample data. :wink:

1 Like

Welcome to the Code world!! :muscle:

1 Like

I started digging into js all thanks to this column) It’s a wonderful feeling when your function finally works!)

2 Likes

This is the code :

var value = p1;
var first_letter = value.charAt(0);
return first_letter;

If you want to have a smaller/faster code, you just need to type …

return p1.charAt(0)

Saludos y sigue aprendiendo! :muscle:

2 Likes

One of my favorite types of columns. Allows me to transform data in a variety of ways!

2 Likes

Oh man! JavaScript is so powerful!!! :muscle: :star_struck:

My fourth attempt :

Get the first and last name from a text column without a split text column :exploding_head:

image

image

image

image

The code :

First Name
const fullName = p1;
const [first, last]= fullName.split(' ');
return first;
Last Name
const fullName = p1;
const [first, last]= fullName.split(' ');
return last;

Cheers for Glide and JavaScript :clinking_glasses: :heart:

2 Likes

If you want to save some typing, you could do:

return p1.split(' ')[0];   // first
return p1.split(' ')[1];   // last

Although, that would fail (as would your solution) if there happened to be extra spaces between the two names. So a slight improvement on that would be:

return p1.split(/\s+/)[0];  // first
return p1.split(/\s+/)[1];  // last

And then of course you might have folks that also have a middle name. So to make sure you get their actual last name, and not their middle name, you might do something like this:

return p1.split(/\s+/).pop();  // last

That’s probably far enough down the rabbit hole for now :wink:

3 Likes

You are becoming a coder! We might be able to call this the Thinh phenomenon: the more you nocode, the more inclined you are to code.

3 Likes

Awesome! Thanks Darren! Very much appreciated! I’m still learning about this powerful programming language and thanks for helping me to learn it better!

2 Likes

1 Like

Let’s start this by giving a BIG CHEER FOR JavaScript! :partying_face:

Give me a JJ
Give me a aa
Give me a vv
Give me a aa


Give me a SS
Give me a cc
Give me a rr
Give me a ii
Give me a pp
Give me a tt


My Fifth Attempt ( 1st advance code that I wrote by my own with some help in other coder’s codes :yum: )

Getting the Sundays as dates of a month!

1st One :

Get the Sundays as dates of the current month with commas!

JS Code
var d= new Date();
var dd=  d.setMonth(d.getMonth() , 2 );
var dd = d.toISOString().slice(0, 10);
var year = d.getFullYear();
var month = d.getMonth() + 1;
var d= new Date(year,month,0);
var n = d.getDate();
var d = new Date(dd);
var Sunday = new Date(dd);
Sunday.setDate(d.getDate() - (d.getDay()||7) +7);
var get_sunday_date = Sunday.getDate();
var a = (Sunday.getDate());
var b = (Sunday.getDate() + 7);
var c = (Sunday.getDate() + 7 + 7);
var d = (Sunday.getDate() + 7 + 7 + 7);
var e = (Sunday.getDate() + 7 + 7 + 7 + 7);
var get_sunday_month = Sunday.getMonth() + 1;
if (get_sunday_month < 10) {
var get_sunday_month = "0" + (Sunday.getMonth() + 1);
} else {
var get_sunday_month = Sunday.getMonth() + 1;
}
var get_sunday_year = Sunday.getFullYear();
if (a < 10) {
var a = "0" + a;
}
if (b < 10) {
var b = "0" + b;
}
var a = get_sunday_year + "-" + get_sunday_month + "-" + a;
var b = get_sunday_year + "-" + get_sunday_month + "-" + b;
var c = get_sunday_year + "-" + get_sunday_month + "-" + c;
var d = get_sunday_year + "-" + get_sunday_month + "-" + d;
var e = get_sunday_year + "-" + get_sunday_month + "-" + e;
var f = (Sunday.getDate() + 7 + 7 + 7 + 7)
if (f > n) {
var all = a + "," + b + "," + c + "," + d;
} else {
var all = a + "," + b + "," + c + "," + d + "," + e;
}
return all
Preview


image


2nd One :

Get the Sundays as dates of the current month with spaces!

JS Code
var d= new Date();
var dd=  d.setMonth(d.getMonth() , 2 );
var dd = d.toISOString().slice(0, 10);
var year = d.getFullYear();
var month = d.getMonth() + 1;
var d= new Date(year,month,0);
var n = d.getDate();
var d = new Date(dd);
var Sunday = new Date(dd);
Sunday.setDate(d.getDate() - (d.getDay()||7) +7);
var get_sunday_date = Sunday.getDate();
var a = (Sunday.getDate());
var b = (Sunday.getDate() + 7);
var c = (Sunday.getDate() + 7 + 7);
var d = (Sunday.getDate() + 7 + 7 + 7);
var e = (Sunday.getDate() + 7 + 7 + 7 + 7);
var get_sunday_month = Sunday.getMonth() + 1;
if (get_sunday_month < 10) {
var get_sunday_month = "0" + (Sunday.getMonth() + 1);
} else {
var get_sunday_month = Sunday.getMonth() + 1;
}
var get_sunday_year = Sunday.getFullYear();
if (a < 10) {
var a = "0" + a;
}
if (b < 10) {
var b = "0" + b;
}
var a = get_sunday_year + "-" + get_sunday_month + "-" + a;
var b = get_sunday_year + "-" + get_sunday_month + "-" + b;
var c = get_sunday_year + "-" + get_sunday_month + "-" + c;
var d = get_sunday_year + "-" + get_sunday_month + "-" + d;
var e = get_sunday_year + "-" + get_sunday_month + "-" + e;
var f = (Sunday.getDate() + 7 + 7 + 7 + 7)
if (f > n) {
var all = a + "\n\n" + b + "\n\n" + c + "\n\n" + d;
} else {
var all = a + "\n\n" + b + "\n\n" + c + "\n\n" + d + "\n\n" + e;
}
return all
Preview


image


3rd One :

Get the Sundays of the selected date’s month with commas!

JS Code

Same but connect the date column to the JavaScript column with p1! So need to select the Date column for p1 and add p1 in the start of the code inside newDate() brackets!

var d= new Date(p1);
var dd=  d.setMonth(d.getMonth() , 2 );
var dd = d.toISOString().slice(0, 10);
var year = d.getFullYear();
var month = d.getMonth() + 1;
var d= new Date(year,month,0);
var n = d.getDate();
var d = new Date(dd);
var Sunday = new Date(dd);
Sunday.setDate(d.getDate() - (d.getDay()||7) +7);
var get_sunday_date = Sunday.getDate();
var a = (Sunday.getDate());
var b = (Sunday.getDate() + 7);
var c = (Sunday.getDate() + 7 + 7);
var d = (Sunday.getDate() + 7 + 7 + 7);
var e = (Sunday.getDate() + 7 + 7 + 7 + 7);
var get_sunday_month = Sunday.getMonth() + 1;
if (get_sunday_month < 10) {
var get_sunday_month = "0" + (Sunday.getMonth() + 1);
} else {
var get_sunday_month = Sunday.getMonth() + 1;
}
var get_sunday_year = Sunday.getFullYear();
if (a < 10) {
var a = "0" + a;
}
if (b < 10) {
var b = "0" + b;
}
var a = get_sunday_year + "-" + get_sunday_month + "-" + a;
var b = get_sunday_year + "-" + get_sunday_month + "-" + b;
var c = get_sunday_year + "-" + get_sunday_month + "-" + c;
var d = get_sunday_year + "-" + get_sunday_month + "-" + d;
var e = get_sunday_year + "-" + get_sunday_month + "-" + e;
var f = (Sunday.getDate() + 7 + 7 + 7 + 7)
if (f > n) {
var all = a + "," + b + "," + c + "," + d;
} else {
var all = a + "," + b + "," + c + "," + d + "," + e;
}
return all
Preview

image


image


4th One :

Get the Sundays of the selected date’s month with spaces!

JS Code

Same but connect the date column to the JavaScript column with p1! So need to select the Date column for p1 and add p1 in the start of the code inside newDate() brackets!

var d= new Date(p1);
var dd=  d.setMonth(d.getMonth() , 2 );
var dd = d.toISOString().slice(0, 10);
var year = d.getFullYear();
var month = d.getMonth() + 1;
var d= new Date(year,month,0);
var n = d.getDate();
var d = new Date(dd);
var Sunday = new Date(dd);
Sunday.setDate(d.getDate() - (d.getDay()||7) +7);
var get_sunday_date = Sunday.getDate();
var a = (Sunday.getDate());
var b = (Sunday.getDate() + 7);
var c = (Sunday.getDate() + 7 + 7);
var d = (Sunday.getDate() + 7 + 7 + 7);
var e = (Sunday.getDate() + 7 + 7 + 7 + 7);
var get_sunday_month = Sunday.getMonth() + 1;
if (get_sunday_month < 10) {
var get_sunday_month = "0" + (Sunday.getMonth() + 1);
} else {
var get_sunday_month = Sunday.getMonth() + 1;
}
var get_sunday_year = Sunday.getFullYear();
if (a < 10) {
var a = "0" + a;
}
if (b < 10) {
var b = "0" + b;
}
var a = get_sunday_year + "-" + get_sunday_month + "-" + a;
var b = get_sunday_year + "-" + get_sunday_month + "-" + b;
var c = get_sunday_year + "-" + get_sunday_month + "-" + c;
var d = get_sunday_year + "-" + get_sunday_month + "-" + d;
var e = get_sunday_year + "-" + get_sunday_month + "-" + e;
var f = (Sunday.getDate() + 7 + 7 + 7 + 7)
if (f > n) {
var all = a + "\n\n" + b + "\n\n" + c + "\n\n" + d;
} else {
var all = a + "\n\n" + b + "\n\n" + c + "\n\n" + d + "\n\n" + e;
}
return all
Preview

image


A Video to show the preview of 3rd and 4th one's

Get the Sundays of the selected date's month - Preview.mp4 - Google Drive


Hope to write more advance codes like these in future!

As always, JavaScript Gurus let me know if I have done something wrong or modifies! :raised_hands:

Lastly let’s give a Huge Clap for JavaScript & Glide! :clap: :clap:

Thank you and Have a great day!

1 Like

Oh man… I’m speechless at the moment! :zipper_mouth_face:

Glide + JavaScript column = :fire: :fire: :fire:


My Sixth Attempt

Built a simple calendar that shows the dates with week day name of the current month or selected month and the current date is highlighted!

Check it by here : https://simple-calendar.glide.page

Will share a video and the JS Code(s) shortly!

Have a great day!

2 Likes

I assume you should see something under the buttons, but I’m not seeing anything.

Thinh, you should see the dates. Can you try again?

And thanks for checking it!

Empty here

Thank you for sharing and documenting this :raised_hands:

I keep trying to learn js and I don’t know keep getting stuck. Maybe learning from the Glide community has been the key I’ve been missing in my attempted learnings.

4 Likes

Seems like it’s working on my end, but we’re lacking a 1-2-3-4-5 row?

Thinh & Eric , could you guys check the app again?

Your welcome, Rachel! I couldn’t do this without the legends in this forum! Thanks Everyone! :muscle: :tada:

And yes, this is actually true. I have learned so many things from these talented humans! Saying thanks again for them!

1 Like