#1 of 25 Beginner Projects - HTML, CSS, & JavaScript - Colors ( Responsive Design )

[@rouilliew]

My first JS Project! I barely had any JS exposure, and it started looking more like Greek and less comprehensive. That's when I knew I had to build something to make sense of everything. Thanks a ton! This helped a lot in making concepts stick. I intend to do all 25. 🎉

[@Epikht]

I know some Js but it was kinda hard for me to turn them into project and the fact that you explain everything from the very beginning deserve a follow ❤ Thank you

[@clydeforland5944]

Just stumbled arcoss this and my mind is blown! Aspiring Front End & UX Designer here. Thanks for this!!

[@lenenousi4965]

Thanks. Now I understood use for bootstrap. Practice is much better for learning. I loved it!

[@insurgentamine9220]

its amazing

[@anmolrai1438]

you're the one i was searching for to start a project as a beginner🙏🙏🙏🙏

[@oluwatosingbolabo9201]

thank you so much for serving us a self explanatory tutorial, this is simplicity in its simplest form

[@fadzaiemmahnembaware]

Well explained, I understood this video as a beginer.

[@aka...7943]

شكرا لك من اعماق قلبي على هذا الشرح المفهوم و المختصر في نفس الوقت 🤍

[@saifadnan864]

good visual explanation as it's needed for learners

[@arthabhunter]

thankyou very much . the way you revise the what this things do appreciate bro.

[@dr.kamrunnahar2209]

Thank you so much, I've been learning js but I had no idea how to use it in codes. This video really helped a lot...

[@farhadcohan3245]

I have watched many videos so far you are the best bcz you explain everything in very simple way🤙🙏

[@1littlehelper]

very good example of 'practice makes perfect'. Thank you for the videos - learnt a lot!

[@alialpert.8144]

Simple and very effective video, I !m really grateful for the effort. thanks a lot🙏

[@subie2033]

Great video! You've actually made me feel like I was programing something!!

[@Joe-qp9ix]

I know these videos are older but if you do ever end up making more, I would recommend giving some more explanations. I just went along with what you said through the first half of the video without any idea as to why or what I was doing, and you were all over the place. IDE, browser, IDE, browser..

[@soundarTech]

Actually your video is too good , but in my opinion , function changeColors(){ const r = Math.floor(Math.random()*255); const g = Math.floor(Math.random()*255); const b = Math.floor(Math.random()*255); body.style.background = `rgb(${r},${g},${b})`; It will create an random Colors between 0 to 255 colors I hope this will helpful.❤ If you love this , pin me ♥️♥️

[@kazi5432]

it should be * 256

[@caretib4283]

function change() { const r = Math.floor(Math.random() * 255); const g = Math.floor(Math.random() * 255); const b = Math.floor(Math.random() * 255); document.querySelector("body").style.background = `rgb(${r},${g},${b})`; }

[@delanlee2897]

Thank you SO much this video is awesome!

[@chantelm7304]

Thanks, awesome video!

[@danylipsker]

Thanks to you I start to understand web design Thanks

[@thepratikshow2666]

amazing learned a lot today

[@akashnimgade1631]

thank you for this project bro...

[@rosen.espinoza9477]

Thank you for this!

[@moaad95]

Thanks for video, i enjoyed it. i have a suggestion for the index update: index = index % colors.length; This means no need for the if statement.

[@MODY-qz3lw]

It worked , thanks ❤

[@abuaqeel292]

function changColor() { var color = ["red", "green", "black", "yellow"] document.querySelector(".container").style.background = color[Math.floor(Math.random() * color.length)] }

[@seenup9056]

can you explain me why width not fully covered please.

[@elg281]

So ... Instead of using 0 in your function you could use 1 and the first color to run would be blue. Correct? I'll try it out.

[@codefoxx]

Yes

[@teclyt_solutions3839]

Thanks for this tutorial

[@powderberrykun]

Before I start my real projects, I use this one as kind of a warm up.

[@BrownStore]

I am so lost. when I try and type style.background = colors[index++]; it does nothing on my end. I'm not sure what I'm doing wrong

[@MariosGeorgiosKatis]

its document.getElementsByTagName("body")[0].style.background = colors[index++]; all together !!!! i just found out

[@sahinduezguen]

Nice little tutorial. Thx! Just curious: how would the JS-script look like if i'd want to change to color of the container AND the body but with different values? Like, the container in yellow but the body in red.

[@stmike3003]

Thank you very much!

[@sudarshanahire]

Learn in a different style of code thanks

[@constantine9074]

great content !!

[@codefoxx]

Thank you

[@HHJoshHH]

Never-mind I figured out I screwed up the index = 0 by saying index = o. 🤦🏻‍♂️

[@teflonrozay1074]

Nice one

[@icbinroshen4618]

Thanks for the video

[@farhadcohan3245]

Yes your video on to list groceries

[@yvng4697]

this is kinda weird i wrote everything as u wrote but js doesnt work

[@codefoxx]

Did you link the js file in the html?

[@yvng4697]

@@codefoxx am gonna do this project again, next time i will use bootstrap and everything coz i didnt use it

[@khushisaraswat5826]

Thank u so much bro

[@lachiemiles5737]

the colour only changes once when I run. Changes to red, then nothing else?

[@ps2530]

but still very good video thanks 🤩

[@thatsawesome.]

Thank you so much :)))

[@kazianzuman6401]

i was following this video , but my JS didn't work. my button didn't change colors . Can u fix this !!

[@kazianzuman6401]

var index = 0; function changeColors() {var colors = ["red","blue","yellow","green","purple"]; document.getElementsByTagName("body")[0]. style.background = colors[index++]; if (index > colors.length -1) index = 0; }

[@kazianzuman6401]

just figured , my js file was not linked properly :D . it was an awesome video . Merci Beaucoup!!

[@mohdsameer7433]

Hello sir , Awesome i'm a beignner this is good i only don't understand why your are creat a index variable i tryed with out that index variable it's doesn't work can you tell me?

[@jimcari7255]

Great lesson, I need help though, my background colors do not change, the JS section does not seem to work for me

[@billy4549]

It was the case for me too..but here some modifications to make: function changeColors(){ var colors = ["red","blue","yellow","green","purple","orange","black"] var bodyElement = document.getElementsByTagName("Body")[0]; bodyElement.style.background = colors[index++]; if (index > colors.length -1) index = 0; } It should work!!

[@bilalerdem8264]

@@billy4549 I f**king worship you man! thx

[@farhadcohan3245]

Everything is exact same but when I click to add or delete it does not work I used console it show there is problem with pencil code please help here thank you again

[@codefoxx]

Are you referring to the Grocery list project?

[@codefoxx]

Did you add an id to the pencil in the html file?

[@farhadcohan3245]

@@codefoxx yes u did I followed you word by word I have to tell you my browser is Firefox I don't know if got anything to do with I checked over and over getElements but class name are no issue class by ID pencil is problem

[@Multaniprince557]

Thanks Boss!

[@sdvasd]

thank you

[@faisalamin001]

Thank you!!!!

[@thisizavian3691]

Great video a series! I have one input, why didn't you just do if(index > 5). It produces the same result. Thanks!

[@dr.kamrunnahar2209]

Since you can use as many colors in array, this (color.length) will work every time, Doesn't matter how many colors are there in the array...

[@thisizavian3691]

@@dr.kamrunnahar2209 ahhhh, I seee. Thanks.

[@areebahmed1773]

@@dr.kamrunnahar2209 and we dont need to put -1 in color.length, right?

[@HHJoshHH]

Followed this tutorial perfectly but I can’t get the colors to start over again at red. Can ya help me?

[@afsanarousne8941]

thnx bro

[@23mohdmujeeb]

Thanks, but this good did not work for me, may be i am doing some mistake, but it check your link and source, your JS code is entirely different then video, when copy paste your actual code, its working

[@raohadeed9268]

If we don't use index=0 in js What will happen😊.

[@Dope_Stories]

IDK if I am crazy or what but this does not work it is also missing {} on the if statement but that did not fix it ffor me either

[@braindead2813]

wow! this is 10x slower than python I am shook!

[@mohammedyunus3968]

can't we do it without bootstrap just with CSS??

[@codefoxx]

Yes

[@t3true-games]

cool thx

[@DwightTam]

11:09 missing some {

[@cristaltechaira1602]

Thanks

[@farhadcohan3245]

Anyone does not understands how html CSS JS have to watch your videos then they all will arrived to AHA moment thanks again could do a video about JS syntax's like how do you know to use them I followed step by steps your to do list (groceries video) but I'm getting error on pencil code I checked everything like spelling quatations to

[@ps2530]

It doesn't really work at my side I did everything but when I click it doesn't change the colors😶

[@CrispyCrust00]

same here. tried 3 different times from scratch. everything is word for word and it doesnt work.

[@CrispyCrust00]

very confused. i had it all setup properly. change the link from src="file name" to href="file name" then swapped back to src again and now it links properly. gotta love it.

[@aikadxuk7303]

​@@CrispyCrust00Nope, just write

[@grigoldvali4124]

Hello, can you explain, why this code doesnt work? thanks a lot var index = 0; function changeColors(){ var colors = ["red", "blue", "green", "yellow", "orange", "purple"]; document.getElementsByTagName("body"[0]). style.background = colors[index++]; if(index > colors.length - 1) index = 0; }

[@Minh-tx9qp]

hello i am new to coding but i can maybe help : you wrote ("body"[0]) instead of ("body")[0].

[@grigoldvali4124]

@@Minh-tx9qp thanks

[@MhamedVdel]

i didn't understand -1 after length somone to me please

[@leinyuymarie5570]

I started 06/11/24 see me at the end..😊😊😊😊😊

[@msd5495]

create project using time interval

[@codefoxx]

Just include the setTimeout() function inside the changeColor() function and set it to whatever time you want. For example, setTimeout(changeColor, 3000)

[@msd5495]

@@codefoxx okay

[@martynaspuotkalis4117]

Good example but not enough explanations. Otherwise, thanks for sharing.

[@kathirvel.m8184]

Bro I don't got out

[@AdewunmiOluwole]

Not straight forward, i don't get it...😥

[@AdewunmiOluwole]

Not clear

[@chumbuzzy4694]

Сan you help please. I want the color that is currently on the background to be displayed, I can do this with if, else conditions. But I'm sure there is a better way, I now just output the entire array. const button = document.querySelector('.change__color'); const colorTxt = document.getElementsByClassName('color')[0]; let index = 0; button.addEventListener('click', function(event) { let colors = ["red", "blue", "pink", "black", "orange", "green", "white"]; const body = document.body; body.style.backgroundColor = colors[index++]; if(index > colors.length -1) { index = 0; }; if(body.style.backgroundColor == 'black') { colorTxt.style.color = '#fff'; } else { colorTxt.style.color = '#333'; }; colorTxt.innerHTML = `Цвет меняется`; });

[@23mohdmujeeb]

This is code from your actual sheet source code: var colors = ["Orangered","Blue","Yellow","Green","Orange", "Cyan","DodgerBlue", "Violet", "Navy", "Purple", "YellowGreen", "OrangeRed", "SlateBlue", "Salmon", "Crimson", "HotPink", "Magenta"]; var index = 0; document.querySelector("#submit").addEventListener("click", () => { if(index > colors.length - 1) index = 0; document.body.style.backgroundColor = colors[index++]; });