#1 of 25 Beginner Projects - HTML, CSS, & JavaScript - Colors ( Responsive Design )
HTML-код
- Опубликовано: 1 окт 2024
- In this project we create a project that changes the background color with the click of a button. We also teach you how to use bootstrap to make the process of designing buttons faster and we teach you how to do it manually with CSS.
Try it before you build it ( Hosted with GitHub Pages):
miguelznunez.g...
GitHub Repository ( Don't forget to star !):
github.com/mig...
Sponsor me on GitHub!
github.com/spo...
Follow my blog:
/ miguelznunez
Email : mignunez@csumb.edu
Medium : / miguelznunez
Codepen : codepen.io/mig...
GitHub : github.com/mig...
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
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 ♥️♥️
it should be * 256
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})`;
}
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. 🎉
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.
Yes
Thanks. Now I understood use for bootstrap. Practice is much better for learning. I loved it!
its amazing
function changColor() {
var color = ["red", "green", "black", "yellow"]
document.querySelector(".container").style.background = color[Math.floor(Math.random() * color.length)]
}
can you explain me why width not fully covered please.
С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 = `Цвет меняется`;
});
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.
you're the one i was searching for to start a project as a beginner🙏🙏🙏🙏
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
its document.getElementsByTagName("body")[0].style.background = colors[index++]; all together !!!! i just found out
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
I have watched many videos so far you are the best bcz you explain everything in very simple way🤙🙏
Never-mind I figured out I screwed up the index = 0 by saying index = o. 🤦🏻♂️
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++];
});
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
this is kinda weird i wrote everything as u wrote but js doesnt work
Did you link the js file in the html?
@@codefoxx am gonna do this project again, next time i will use bootstrap and everything coz i didnt use it
Just stumbled arcoss this and my mind is blown! Aspiring Front End & UX Designer here. Thanks for this!!
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
Learn in a different style of code thanks
thankyou very much . the way you revise the what this things do appreciate bro.
the colour only changes once when I run. Changes to red, then nothing else?
Not straight forward, i don't get it...😥
It worked , thanks ❤
It doesn't really work at my side I did everything but when I click it doesn't change the colors😶
same here. tried 3 different times from scratch. everything is word for word and it doesnt work.
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.
@@crispycrust5103Nope, just write
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..
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...
Good example but not enough explanations. Otherwise, thanks for sharing.
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?
very good example of 'practice makes perfect'. Thank you for the videos - learnt a lot!
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.
i was following this video , but my JS didn't work. my button didn't change colors . Can u fix this !!
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;
}
just figured , my js file was not linked properly :D . it was an awesome video . Merci Beaucoup!!
amazing learned a lot today
Simple and very effective video, I !m really grateful for the effort. thanks a lot🙏
11:09 missing some {
cool thx
Thank you SO much this video is awesome!
thank you so much for serving us a self explanatory tutorial, this is simplicity in its simplest form
Thank you very much!
Not clear
Thanks, awesome video!
If we don't use index=0 in js
What will happen😊.
Well explained, I understood this video as a beginer.
Thank you!!!!
Great video! You've actually made me feel like I was programing something!!
i didn't understand -1 after length
somone to me please
wow! this is 10x slower than python I am shook!
Thank you for this!
good visual explanation as it's needed for learners
but still very good video thanks 🤩
thank you for this project bro...
Thank you so much :)))
Thanks for the video
Yes your video on to list groceries
Before I start my real projects, I use this one as kind of a warm up.
Thanks for this tutorial
Thank u so much bro
شكرا لك من اعماق قلبي على هذا الشرح المفهوم و المختصر في نفس الوقت 🤍
Thanks to you I start to understand web design
Thanks
thank you
can't we do it without bootstrap just with CSS??
Yes
thnx bro
Great lesson, I need help though, my background colors do not change, the JS section does not seem to work for me
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!!
@@billy4549 I f**king worship you man! thx
Thanks Boss!
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
Are you referring to the Grocery list project?
Did you add an id to the pencil in the html file?
@@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
great content !!
Thank you
Nice one
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;
}
hello i am new to coding but i can maybe help :
you wrote ("body"[0]) instead of ("body")[0].
@@Minh-tx9qp thanks
Great video a series! I have one input, why didn't you just do if(index > 5). It produces the same result. Thanks!
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...
@@dr.kamrunnahar2209 ahhhh, I seee. Thanks.
@@dr.kamrunnahar2209 and we dont need to put -1 in color.length, right?
Followed this tutorial perfectly but I can’t get the colors to start over again at red.
Can ya help me?
Thanks
create project using time interval
Just include the setTimeout() function inside the changeColor() function and set it to whatever time you want. For example, setTimeout(changeColor, 3000)
@@codefoxx okay