Dynamic Landing Page | JavaScript

[@TraversyMedia]

I know it has been a bit slower than usual. I think I may make a video on this, but I am taking some extra time this summer to learn new things so that I can further my reach into things like asp.net for instance There is a ton of stuff I want to get into. So KZbin will be 1-2 videos per week for a little while as oppose to 3-4. I am still working on courses as well.

[@aot2002]

Hopefully .NET CORE and Entity Framework and SQL server

[@alifellahi]

Hi Brad, thanks for the all the amazing tutorials! Did you consider making tutorials on Java/Kotlin ecosystem, Spring framework, Android...etc?

[@gabrielmg3582]

Take tour time Brad, l'm pretty sure you'll give us excellent content 😄 ASP.NET seems to be a great option to learn

[@ohLyln]

.Net Core / ASP tutorials would be amazing Brad! As always great video you’re doing God’s work!

[@RawCoding]

I make tutorials about dotnet core on my channel, maybe come check it out see if you like it? Any feedback welcome :) Love watching your videos btw, would like to see more on Rust.

[@joelokoro9105]

The People's Champion. Thanks for all your hard work Brad. You're helping and changing so many lives. God bless you.

[@TraversyMedia]

You're very welcome friend. Thanks for watching

[@Almighty_Flat_Earth]

Almost 15 videos in past 2 months about frameworks averaging around 28K views, but this pure JavaScript video has 80K views which clearly tells that people are much more interested in pure JavaScript than any framework.

[@aleb687]

If you don't like the numbers resizing the field while they progress, use: font-family: monospace to #time in CSS. This way each character has the same width regardless of it being a 0 or a 1

[@rakshithsn1511]

Brad, Most of the People say that the best way to learn about any Library or some Frameworks is through their Documentation. But what they don't tell you is that how one should approach them in an effective manner to get most of that documentation. Plz make a video, On who a person should approach about his learning methodology when he is learning a library like React Js for example purely from that Documentation. What are some of the strategies that you use personally to get most of any Documentation when you are dealing any Project Based On It.

[@biscootbhai]

hey bro --- can you please help me i want to show my bookmark as well just like momentum

[@Lemeechi]

Good job, Brad. Just a couple of tweaks I added to the JS. When AM/PM not required the full 24-hour time is shown. Then using concatenation to build time.innerHTML is simpler than using that long back-ticked string as you won't need to use for the ':' character.

[@matthewreid1580]

Duuuuude! I have been trying for years to learn javascript. This tutorial showed me so much in a 35 minute video. You. Are. The. Man.

[@dongkyle9275]

I'm a graduate students from Taiwan ,thanks for your hard work , I bought the course yesterday, It's very helpful for me.

[@michrisoft]

Hey, everyone. If you're using a screen that is bigger than the image and it starts to repeat on you and look really crappy, you can fix that by adding a little css after each url link in setBgGreet: document.body.style.backgroundRepeat = 'no-repeat'; document.body.style.backgroundSize = 'cover';

[@cagrioz9798]

Brad, you're always uploading many videos and saving people's days. Really I appreciate it, thank you.

[@TraversyMedia]

No problem :)

[@Piyush-yp2po]

revised entire vanilla js from your playlist this week, loved them.

[@nishes]

PLEASEEEE I LOVE YOU FOR MAKING THIS I never know where to start and lots of tutorials are overly boring or rambly. I love this tutorial love love love!

[@fernwood]

This is so cathartic to watch. You explain everything as you go so well.

[@byedwardleung]

i like these types of videos that is heavily focused on JS

[@Glamorah]

Your video tutorials always rock. Thanks Brad!

[@TraversyMedia]

Thanks :)

[@bryancann8988]

I had never enjoyed learning JS like this. I think short videos are more compelling and it is easy to grasp concepts than 5hrs long videos for beginners. I hope this could be the start of a short video series of raw JS. KEEP IT UP BRAD!!!

[@ck0024]

*Today I've made this. Thank you Brad.*

[@AttkBeast]

Hi Brad! I hope you're enjoying your break. It's important to know when it time to take care of yourself; it's a hard realization, too. Good for you man! I think I speak for others here that think you've made a smart decision about how to progress the channel as well. It's working! Prayers to you and your family.

[@easycodingbysethu]

Brad ! Your are inspirational to all of us

[@pewdsadarshfan7142]

I was literally thinking we need this course and then you deliver! Thanks Brad!

[@orj]

I love this! Please do a video on how we can build the weather function as seen on the Momentum chrome extension in the top right corner!

[@ElymusRoscoeJenkins]

You have truly been a blessing!!! I have learned so much from your videos!!! God Bless you and your family!!! Happy Coding my friend!!!

[@andriiauziak1178]

Very often I watch videos on this channel at least twice, because there is a lot of real life situations Bred made video about

[@mrrolandlawrence]

Indeed the tiny payload of svelte does make it appealing... For tiny page sizes.

[@domenicocucinotta2720]

Thanks a lot Brad! As a beginner I have found this video super helpful! Cheers mate!

[@realchrishawkes]

Good job Brad!

[@ciocianiafrania]

so happy I've discovered you! thanks for the cool tutoring!

[@gustavonunes6866]

I learned React before i even know how HTML and CSS works, your videos have been helping me alot to understand the magic that the browser does.

[@milleniummoses]

First...Great tutorial. I was pleased that I was easily able to follow along and understand. My mind was switching between the ES5 and ES6 syntax you were using. I would prefer if you either stuck with ES6 with arrow functions and maybe just say what it would have been had you used ES5 syntax.

[@birsingh5388]

Some legendary coding content on KZbin, great job Sir 👍

[@JKaromo]

cool.... I've been waiting for another upload. Really love your content Brad.

[@kevinzhang8974]

Thanks Brad. I always like your landing page small project. very good for refresh syntax and easy to manage to code along with you. I just completed. Thank you!

[@ProfKisha]

This was great! I was having trouble understanding some of these JS concepts as well as connecting the HTML CSS and JS and this simple project really helped! Thanks!

[@nicholasdunagan1992]

How do you replace a URL with a src?

[@EmOJaXuElPuNk]

nice job dude, I'm just a beginner in this and I feel excited for coding like U, thanks

[@jordihc]

Ayyy, brad your the man. Wish everyone the best with their development journeys!

[@iMustafaTube]

Love it! I'm actually working on creating my own "Dakboard" with weather, Google calendar, tasks, gmail ... etc. And I was looking into something dynamic like this!

[@ankanroy2]

Yeah Brad thats helps with beginner student thanks!!

[@coolspeed8084]

You're so great sir. Please continue making full free tutorials for people who want to learn coding

[@hermannrudas]

Thank you very much Mr Brad ! Regards from Colombia

[@4webdev]

Best Instructor ever

[@Icecrax]

Wouldn't the site be vulnerable towards XSS attacks?

[@IreneSmith]

Both of the events you used to detect the Enter key are deprecated. According to MDN Web docs, you should use KeyboardEvent.key instead. So the if statement would be: if(e.key === "Enter")

[@Ronium22]

Excellent! I’m going to go through this tonight.

[@victorschweitz3506]

I only have one problem: I have taken the images from Brad's CodePen, but my images aren't centered. How do I do that when the images are inserted with JS? :)

[@TygerM100]

i have this problem as well, would appreciate some help

[@housemusiclassics]

Style.css Body{ Background-size: cover}

[@rebelmachine88]

Good video! It'd be neat if when you select [Enter name] for the first time, it would select all the text or clear the text. I tried messing with it and made a function that cleared the text on focus, but ended up with an infinite loop lol.

[@bolatt13]

This is great. But when we want to add name , we have to delete all of the [Enter Name]. How do I make [Enter Name] to be deleted or hide when I click on it. like a placeholder.

[@georgestrippoli910]

Thank you Brad! I really do like the way you teach. I've bought a couple of your courses on Udemy as well and always enjoy taking them. Keep up the great work!

[@evankapantais5300]

Hey Brad, I recreated the widget and stumbled on an omission (if I'm not mistaken). If the user tries to input a name or focus and leaves the field blank (an empty string), the values on localStorage remain but without any value. Also, I think, the text input becomes non-editable if you trigger the setName or setFocus functions.

[@gas452]

hey, i just went through this and really enjoyed the simple setup, but im having an issue where the changeable areas arent able to be selected if the user enters an empty string (the "focus" key stays in localstorage but that area isn't "clickable" because theres no text in it). ive tried a few fallback behaviors and none seem to work, any suggestions for making sure a default value stick around in there?

[@GuitarsRgood7]

Really great video! The only thing that came out weird is the background image. It's really zoomed in. However, it does look like that in the codepen example as well.

[@ConorBailey]

Awesome video Brad! Although i'm slightly confused by the parseInt function. Can somebody please explain what the radix? is? Many thanks guys!

[@HasinthaWeragala]

Thanks brad. Didn't know about localStorage object before. Awesome stuff

[@hasanalkholy4861]

just checking your channel for new videos and i found one posted one hour ago i wonder when i will finish watching your old videos so i can keep up with the new ones

[@magentaIX]

I am grateful for this 100%... Helpful for my js AI.

[@Behold-the-Florist]

Great tutorial, thanks. What's the best way to change the background depending on whether or not it's morning, afternoon or evening without needing to refresh the page? I'm sure there are a number of ways to do it but I want to use the best practise. Thanks

[@AliRazaiamaliraza]

Just Started your reactjs tuts. Highly intuitive.

[@DaPenguinCuber]

Love the video, but how do you get the images to show on vscode?

[@soufianesammah5936]

Inspiring, as usual, thank you, Brad!

[@kbcarte420]

when you hit enter and call the blur() method, does setName function get called again? If it does, wouldn't that make the setItem() redundant since it gets called again in the else block?

[@daanbreur]

How you convert it into a extention so it opens when you click new page?

[@Peti222]

Thanks Brad! I finished your JS course on Udemy last night and was looking for something to do today for practice. Fun little project.

[@xfronwenzyoucamex]

great tutorial! Im sure I will be able to use these components elsewhere as well.

[@diegoaugustoferreira5002]

What is the name of the extension that you write just "span#ID" and get the whole phrase?

[@Zawodowieec]

Thank you, buddy - such a great video as always. But wtf happened in 21:43 with your camera? Is it possessed?

[@muadzrosli]

Hi Brad. I have one question. The JS script only run once right? Only when we first time load the page. How can I make the background image changed live when the time changes over the stated limit? For example, I load the page at 11am, let the page open until time reaches 12pm, I want the background image to change to afternoon wallpaper.

[@muhammadabubakrsiddique6419]

Thank you Brad. I am learning javascript only for your help.

[@blessdarah1256]

Very simple but interesting. Thanks Brad!

[@femaledeer]

Isn't the call to showTime function in setTimeout recursion ? Would this result in stack overflow ?

[@emmythepixi]

Hey Brad, question about this project... is there a way to have the background change while the 'app' is running? I noticed when I left my project open for a while the time changed but the background didn't update until I reloaded the page. I'm not sure how to have it update "live".

[@tiagooliveira9196]

I've made the addZeros function a little bit different: function addZero(n) {return n > 9 ? "" + n : "0" + n} Just a different suggestion ;) Thanks for another awesome video

[@NasirulIslamSiat]

excuse me can anyone tell me how to resize the image according to the browser size or how could I fit the image on the browser? I cannot fit the image on the screen

[@jamiusamin]

i think setting the Image Height = 100% and width = 100% in your css can help

[@NasirulIslamSiat]

@@jamiusamin thank you very much

[@TheDjflb]

in your body selector put the following: background-size: 100vw 100vh;

[@jamiusamin]

@@NasirulIslamSiat if that dose n't work What I did is that I created a function containing all background properties then I called it immediately after greetings to avoid repeating myself for the Three conditions

[@NasirulIslamSiat]

@@TheDjflb Thanks

[@joel9909]

Also please how do you make the seconds kinda fixed so the timer stops bumping, it hurts the eyes

[@ayoadejoshua1635]

Brad, you've been my role model since day 1, there's never been any tutorials you've done that I didn't understand.. But would appreciate if you can do a core tutorial on javascript, python and PHP, Love from Nigeria!

[@DeepakPandey-mw1vp]

Respect from Nepal

[@NurtureLove88]

Brad, when I delete the [Enter Name] or [Enter Focus] something weird happens to the text field. It's like it disappears altogether and I have a difficult time recovering it, especially for the field that reads [Enter Focus]. Any work-arounds or suggestions on how to fix this issue? Thanks so much for the wonderful content you provide. You're amazing!

[@anonymouseverx]

Your contents are pure class. Thanks, Brad for everything.

[@RobertWildling]

You mention you made a video on Chrome ext dev. Unfortunately I cannot find it in your list. Could you post a link to it, please? Thanks a mil!

[@mykolamysko987]

Is there any particular reason for using setTimeout instead of setInterval?

[@starthu]

this was so fun to make thank very much!

[@muhammadsajjad7957]

Brad , you look cool with "computer glasses"

[@networkfreddy2000]

Wow this is my first JS tutorial i have watched..Where do i go from here!? I have an app idea so i can here to try to learn to build it my self..Do you often have to go back and look at documentation? It seems like you did the whole video freestyling code..

[@nonsolovita]

Hi there ,i would like to do something like this but in my desktop,should i use something like Electron ?

[@emkhandigital]

how do you add it to your web browser home page tabs

[@captainHusein]

Hello, since I have just started learning HTML/CSS/JS , I have one question, how did you change the font color from black to white (on afternoon they were black and white in the evening )

[@gmanpublications]

Hey Brad nice job on the tutorial. I have just one question and it has been an issue for me for the longest time. When you were planning this tutorial out and you wrote down somewhere I want the background image to change with the time and I want the name to be editable. How did you break that down to what bits of code to use? That is the one thing I never learned how to do and most tutorials don't cover that. Thanks.

[@mahbubulalam228]

Just I open it & thanks a lot of you brad. You are my favorit teacher, I'm so glad for getting your nice videos on youtube. Many many thanks for you.

[@dwsireland]

Thanks for another Super Post Brad.

[@DesignMedium]

Brad levelling up your thumbnail game lol Good tutorial!

[@gurucode.studio]

Miss with the rest , Travis is the best 😎

[@nayeemuddin4625]

Can i change the background image on click??

[@bondlavern]

Excellent. I liked this a lot. Thanks.

[@deejaydev]

Interesting Project! Already thinking of creating a chrome extension like this but using react... Good idea?

[@joel9909]

Hey guys the textContent of the focus and name (the contenteditable fields) do not clear on click. I have even tried writing an onclick event to clear it. No way. any help with how i may approach it

[@eswarkrishnamaganti6409]

Super video Brad keep on doing more videos on js

[@magentaIX]

Brad you are the best, my super Hero 🔥

[@lardosian]

Brad would be interested in a short video on your thoughts of using Amazon Cloud 9 as a development environment in the cloud, thank you.

[@axaysushir]

My clock and background image not working. I will write same code as you mentioned. Also it give error about {addZero} is not defined

[@mykalimba]

When you explicitly call name.blur(), does the event handler get triggered? If so, you can eliminate code that saves to localStorage in the keypress handler.

[@ManuelCastillo-kq3xy]

Brad, first: excellent job. And now my questions: its adaptable for difrent size of window (cell phone, ipad, other? What size are the image to background? THX men.

[@joyokpuno]

the same question I have, the images from pexels are either too small or too large, I'm wondering how to resize images through javascript